Formide ülesanne on kasutajalt infot vastu võtta ja see edasi saata serverisse.
<form> tähistab formi. Formi endasse andmeid ei saa, selleks tuleb kasutada tema lapselemente (ülejäänud elemendid on formi lapselemendid).
Kõikidel lapselementidel oleks soovituslik kasutada atribuuti name="meelepärane_nimi"
, mis annab elemendile nime (server saab seda kasutada kui muutja nimena).
Kasutus:
<form>
<!--Formi lapselemendid-->
</form>
Näide:
<input> defineerib ära erinevad sisestuskastid. Erinevus sõltub just atribuuditest, mida on <input> elemendil väga palju.
Kasutus:
<form>
Nimi: <input type="text" name="user-name" />
</form>
Näide:
<textarea> defineerib ära tekstikasti, mis erinevalt <input> elemendist, suudab mahutada lõputult tähemärke (kasutajasõbralikult).
Kasutus:
<form>
Nimi: <input type="text" name="user-name" />
<br />
Mõtted: <textarea name="comment"><textarea>
</form>
Näide:
<select> tähistab rippmenüüd. Seda kasutatakse koos <option> elemendiga (järgmine element).
Kasutus:
<form>
Nimi: <input type="text" name="user-name" />
<br />
Mõtted: <textarea name="comment"><textarea>
<br />
Lemmikauto:
<select>
<option>Audi</option>
<option>Ford</option>
<option>Lada</option>
<option>Subaru</option>
</select>
</form>
Näide:
<datalist> defineerib ära kiirtäitmise andmed <input> elemendile (<datalist> pole kasutajale näha). <input> kasutatakse atribuuti list="datalist_id"
, et seostada <datalist> ja <input>
Kasutus:
<form>
Nimi: <input type="text" name="user-name" />
<br />
Mõtted: <textarea name="comment"><textarea>
<br />
Lemmikauto:
<select>
<option>Audi</option>
<option>Ford</option>
<option>Lada</option>
<option>Subaru</option>
</select>
<br />
Riik: <input type="text" name="country" list="country-autocomplete" />
<datalist id="country-autocomplete">
<option>Eesti</option>
<option>Soome</option>
<option>Läti</option>
<option>Leedu</option>
</datalist>
</form>
Näide:
<option> tähistab ära valiku, kas rippmenüüs või elemendis <datalist>
Kasutus:
<form>
Nimi: <input type="text" name="user-name" />
<br />
Mõtted: <textarea name="comment"><textarea>
<br />
Lemmikauto:
<select>
<option>Audi</option>
<option>Ford</option>
<option>Lada</option>
<option>Subaru</option>
</select>
<br />
Riik: <input type="text" name="country" list="country-autocomplete" />
<datalist id="country-autocomplete">
<option>Eesti</option>
<option>Soome</option>
<option>Läti</option>
<option>Leedu</option>
</datalist>
</form>
Näide:
<optgroup> defineerib ära <option> elementide grupi. Kasutatakse tihti koos atribuudi label="grupi_pealkiri"
Kasutus:
<form>
Nimi: <input type="text" name="user-name" />
<br />
Mõtted: <textarea name="comment"><textarea>
<br />
Lemmikauto:
<select>
<option>Audi</option>
<option>Ford</option>
<option>Lada</option>
<option>Subaru</option>
</select>
<br />
Riik: <input type="text" name="country" list="country-autocomplete" />
<datalist id="country-autocomplete">
<option>Eesti</option>
<option>Soome</option>
<option>Läti</option>
<option>Leedu</option>
</datalist>
<br />
Lemmiktehiskeel:
<select>
<optgroup label="Veebikeeled">
<option>HTML</option>
<option>CSS</option>
<option>JavaScript</option>
</optgroup>
<optgroup label="Programmeerimiskeeled">
<option>Java</option>
<option>C#</option>
<option>C++</option>
</optgroup>
</select>
<br />
</form>
Näide:
<label> tähistab mingi sisestuse kirjeldust. Põhimõtteliselt ei pea seda elementi kasutama kirjeldamiseks, sest saab ka kasutada tavalist teksti nagu ma seda ülemistes näidetes tegin.
Kuid <label> annab parema tehnilise kontrolli formi üle kasutades atribuuti for="sisestuskasti_id"
, millega saab sisestuselemendi ja <label> elemendi omavahel siduda.
Kasutus:
<form>
<label for="user-name">Nimi:</label> <input type="text" name="user-name" id="user-name" />
<br />
<label for="comment-input">Mõtted:</label> <textarea name="comment" id="comment-input"><textarea>
<br />
Lemmikauto:
<select>
<option>Audi</option>
<option>Ford</option>
<option>Lada</option>
<option>Subaru</option>
</select>
<br />
<label for="country">Riik:</label> <input type="text" name="country" id="country" list="country-autocomplete" />
<datalist id="country-autocomplete">
<option>Eesti</option>
<option>Soome</option>
<option>Läti</option>
<option>Leedu</option>
</datalist>
<br />
Lemmiktehiskeel:
<select>
<optgroup label="Veebikeeled">
<option>HTML</option>
<option>CSS</option>
<option>JavaScript</option>
</optgroup>
<optgroup label="Programmeerimiskeeled">
<option>Java</option>
<option>C#</option>
<option>C++</option>
</optgroup>
</select>
<br />
</form>
Näide:
<button> defineerib ära nupu. Nupu funktsionaalsus sõltub tema atribuuditest (eriti tähtis on type
- vaata originaalpostitust)
Kasutus:
<form>
<label for="user-name">Nimi:</label> <input type="text" name="user-name" id="user-name" />
<br />
<label for="comment-input">Mõtted:</label> <textarea name="comment" id="comment-input"><textarea>
<br />
Lemmikauto:
<select>
<option>Audi</option>
<option>Ford</option>
<option>Lada</option>
<option>Subaru</option>
</select>
<br />
<label for="country">Riik:</label> <input type="text" name="country" id="country" list="country-autocomplete" />
<datalist id="country-autocomplete">
<option>Eesti</option>
<option>Soome</option>
<option>Läti</option>
<option>Leedu</option>
</datalist>
<br />
Lemmiktehiskeel:
<select>
<optgroup label="Veebikeeled">
<option>HTML</option>
<option>CSS</option>
<option>JavaScript</option>
</optgroup>
<optgroup label="Programmeerimiskeeled">
<option>Java</option>
<option>C#</option>
<option>C++</option>
</optgroup>
</select>
<br />
<button type="button">Näita sisestatud andmeid!</button>
</form>
Näide:
<output> tähistab formi väljastust (tavaliselt kasutatakse seda koos JavaScriptiga)
Kasutus:
<form>
<label for="user-name">Nimi:</label> <input type="text" name="user-name" id="user-name" />
<br />
<label for="comment-input">Mõtted:</label> <textarea name="comment" id="comment-input"><textarea>
<br />
Lemmikauto:
<select>
<option>Audi</option>
<option>Ford</option>
<option>Lada</option>
<option>Subaru</option>
</select>
<br />
<label for="country">Riik:</label> <input type="text" name="country" id="country" list="country-autocomplete" />
<datalist id="country-autocomplete">
<option>Eesti</option>
<option>Soome</option>
<option>Läti</option>
<option>Leedu</option>
</datalist>
<br />
Lemmiktehiskeel:
<select>
<optgroup label="Veebikeeled">
<option>HTML</option>
<option>CSS</option>
<option>JavaScript</option>
</optgroup>
<optgroup label="Programmeerimiskeeled">
<option>Java</option>
<option>C#</option>
<option>C++</option>
</optgroup>
</select>
<br />
<button type="button">Näita sisestatud andmeid!</button>
<br />
<output>
<!--Formi väljastus-->
</output>
</form>
Näide:
<fieldset> defineerib ära ühe formi osa. Kasutatakse formi selgemaks muutmiseks
Kasutus:
<form>
<label for="user-name">Nimi:</label> <input type="text" name="user-name" id="user-name" />
<br />
<label for="comment-input">Mõtted:</label> <textarea name="comment" id="comment-input"><textarea>
<br />
<label for="country">Riik:</label> <input type="text" name="country" id="country" list="country-autocomplete" />
<datalist id="country-autocomplete">
<option>Eesti</option>
<option>Soome</option>
<option>Läti</option>
<option>Leedu</option>
</datalist>
<fieldset>
Lemmikauto:
<select>
<option>Audi</option>
<option>Ford</option>
<option>Lada</option>
<option>Subaru</option>
</select>
<br />
Lemmiktehiskeel:
<select>
<optgroup label="Veebikeeled">
<option>HTML</option>
<option>CSS</option>
<option>JavaScript</option>
</optgroup>
<optgroup label="Programmeerimiskeeled">
<option>Java</option>
<option>C#</option>
<option>C++</option>
</optgroup>
</select>
</fieldset>
<button type="button">Näita sisestatud andmeid!</button>
<br />
<fieldset>
<output>
<!--Formi väljastus-->
</output>
</fieldset>
</form>
Näide:
<legend> tähistab ühe formi osa ehk <fieldset> pealkirja
Kasutus:
<form>
<label for="user-name">Nimi:</label> <input type="text" name="user-name" id="user-name" />
<br />
<label for="comment-input">Mõtted:</label> <textarea name="comment" id="comment-input"><textarea>
<br />
<label for="country">Riik:</label> <input type="text" name="country" id="country" list="country-autocomplete" />
<datalist id="country-autocomplete">
<option>Eesti</option>
<option>Soome</option>
<option>Läti</option>
<option>Leedu</option>
</datalist>
<fieldset>
<legend>Lemmik-</legend>
auto:
<select>
<option>Audi</option>
<option>Ford</option>
<option>Lada</option>
<option>Subaru</option>
</select>
<br />
tehiskeel:
<select>
<optgroup label="Veebikeeled">
<option>HTML</option>
<option>CSS</option>
<option>JavaScript</option>
</optgroup>
<optgroup label="Programmeerimiskeeled">
<option>Java</option>
<option>C#</option>
<option>C++</option>
</optgroup>
</select>
</fieldset>
<button type="button">Näita sisestatud andmeid!</button>
<br />
<fieldset>
<legend>Sisestatud andmed</legend>
<output>
<!--Formi väljastus-->
</output>
</fieldset>
</form>
Näide: