close

Uvod v Form HTML: struktura, vrste vnosa in primeri

HTML form je ključni del spletnega razvoja, ki uporabnikom omogoča interakcijo s spletnim mestom in pošiljanje podatkov strežniku. Form se uporabljajo za širok spekter namenov, kot je zbiranje uporabniških podatkov form, obdelava uporabniškega vnosa in omogočanje uporabniških dejanj na spletnem mestu. V tem članku bomo raziskali atribute in različne vrste vnosnih polj, izbranih elementov, besedilnih območij in gumbov, ki se običajno uporabljajo v HTML form.

Vnosna polja

  • <input type="text">: ustvari polje za vnos besedila, kjer lahko uporabniki vnašajo alfanumerične znake.
  • <input type="password">: prikaže polje za vnos gesla, ki zakrije vnesene znake.
  • <input type="email">: Zagotavlja preverjanje e-pošte za vnosna polja, ki zahtevajo veljaven e-poštni naslov.
  • <input type="number">: omeji vnos samo na številske vrednosti.
  • <input type="checkbox">: Predstavlja potrditveno polje, ki ga lahko uporabniki izberejo ali prekličejo.
  • <input type="radio">: Predstavlja izbirni gumb, ki uporabnikom omogoča izbiro ene možnosti iz skupine možnosti.
  • <input type="file">: uporabnikom omogoča izbiro in nalaganje datotek.
  • <input type="submit">: prikaže gumb, ki form ob kliku odda.
  • <input type="reset">: prikaže gumb, ki ponastavi form na začetno stanje.
  • <input type="date">: Ponuja izbirnik datumov za izbiro datumov.
  • <input type="time">: uporabnikom omogoča vnos časovnih vrednosti.

Izberite Elementi

  • <select>: Ustvari spustni meni z izbirnimi možnostmi.
  • <option>: Določa možnost znotraj spustnega menija, ki je nameščen znotraj <select> oznake.
  • <optgroup>: združi povezane možnosti v spustnem meniju.
  • <select multiple>: Omogoča uporabnikom, da izberejo več možnosti hkrati, tako da med klikanjem držijo tipko Ctrl(ali tipko Command v Macu).

Textareas

<textarea>: Ustvari večvrstično polje za vnos besedila, kjer lahko uporabniki vnašajo in urejajo daljše bloke besedila. Lahko mu spremenite velikost in konfigurirate z atributi, kot sta rows in cols, da določite njegove dimenzije.

Gumbi

<button>: Predstavlja gumb, ki lahko sproži različna dejanja znotraj form. Uporabite ga lahko za predložitev form, za form funkcijo JavaScript ali za navigacijo na drugo stran.

Primer uporabe:

<form action="/submit-form" method="post">  
  <label for="name">Name:</label>  
  <input type="text" id="name" name="name" required>  
    
  <label for="email">Email:</label>  
  <input type="email" id="email" name="email" required>  
    
  <label for="message">Message:</label>  
  <textarea id="message" name="message" rows="4" cols="50"></textarea>  
    
  <label for="newsletter">Subscribe to Newsletter:</label>  
  <input type="checkbox" id="newsletter" name="newsletter">  
    
  <label for="color">Favorite Color:</label>  
  <select id="color" name="color">  
    <option value="red">Red</option>  
    <option value="blue">Blue</option>  
    <option value="green">Green</option>  
  </select>  
    
  <button type="submit">Submit</button>  
</form>

Ta primer prikazuje uporabo različnih form elementov, vključno s input polji, textarea, in gumbom. Elemente in atribute lahko prilagodite glede na vaše specifične zahteve. checkbox select dropdown submit form