HTMLi kursuse 7. osa konspekt - Formid

Formide ülesanne

Formide ülesanne on kasutajalt infot vastu võtta ja see edasi saata serverisse.

Form ja selle lapselemendid

<form> element

<form> tähistab formi. Formi elementi endasse andmeid ei saa sisestada, 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 muutuja nimena/ID'na).

Kasutus:
<form>
  <!--Formi lapselemendid-->
</form>

Näide:

<input> element

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

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

<select> tähistab rippmenüüd. Seda kasutatakse koos <option> elemendiga (ülejä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> element

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

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

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

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

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

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

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

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