close

Uvod u Form HTML: Struktura, vrste unosa i primjeri

HTML form je ključni dio web razvoja koji korisnicima omogućuje interakciju s web lokacijom i slanje podataka poslužitelju. Form koriste se za širok raspon svrha, kao što je prikupljanje podataka korisnika form, obrada korisničkog unosa i omogućavanje radnji korisnika na web stranici. U ovom ćemo članku istražiti atribute i različite vrste polja za unos, elemente odabira, tekstualna područja i gumbe koji se obično koriste u HTML-u form.

Polja za unos

  • <input type="text">: Stvara polje za unos teksta u koje korisnici mogu unijeti alfanumeričke znakove.
  • <input type="password">: Prikazuje polje za unos lozinke koje maskira unesene znakove.
  • <input type="email">: Pruža potvrdu valjanosti e-pošte za polja za unos koja zahtijevaju valjanu adresu e-pošte.
  • <input type="number">: Ograničava unos samo na numeričke vrijednosti.
  • <input type="checkbox">: Predstavlja potvrdni okvir koji korisnici mogu odabrati ili poništiti odabir.
  • <input type="radio">: Predstavlja radio gumb koji korisnicima omogućuje odabir jedne opcije iz grupe opcija.
  • <input type="file">: Omogućuje korisnicima odabir i učitavanje datoteka.
  • <input type="submit">: Prikazuje gumb koji šalje form kada se klikne.
  • <input type="reset">: Prikazuje gumb koji vraća uređaj form u početno stanje.
  • <input type="date">: Omogućuje birač datuma za odabir datuma.
  • <input type="time">: Omogućuje korisnicima unos vremenskih vrijednosti.

Odaberite Elementi

  • <select>: Stvara padajući izbornik s opcijama koje je moguće odabrati.
  • <option>: Definira opciju unutar padajućeg izbornika, smještenu unutar <select> oznake.
  • <optgroup>: Grupira povezane opcije zajedno unutar padajućeg izbornika.
  • <select multiple>: Omogućuje korisnicima odabir više opcija istovremeno držeći pritisnutu tipku Ctrl(ili tipku Command na Macu) dok klikaju.

Područja teksta

<textarea>: Stvara višeredno polje za unos teksta u koje korisnici mogu unositi i uređivati ​​duže blokove teksta. Može mu se mijenjati veličina i konfigurirati s atributima kao što su rows i cols kako bi se definirale njegove dimenzije.

Gumbi

<button>: Predstavlja gumb koji može pokrenuti različite radnje unutar form. Može se koristiti za slanje form, po form JavaScript funkciji ili za navigaciju na drugu stranicu.

Primjer upotrebe:

<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>

Ovaj primjer prikazuje upotrebu različitih form elemenata, uključujući input polja, textarea, i gumb. Slobodno prilagodite elemente i atribute na temelju svojih specifičnih zahtjeva. checkbox select dropdown submit form