Elemente de formulare HTML: datalist, input, output.

Elemente de formular in HTML5

HTML5 a adăugat următoarele elemente de formular:



Notă: Navigatoarele nu afișează elemente necunoscute. Elementele noi care nu sunt acceptate în browserele mai vechi nu vă vor „distruge” pagina web.

Elementul HTML5 <datalist>

Elementul <datalist> specifică o listă de opțiuni predefinite pentru un element <input>.
Utilizatorii vor vedea o listă derulantă (drop-down list) a opțiunilor predefinite pe măsură ce introduc date.
Atributul listei elementului <input>, trebuie să se refere la atributul id al elementului <datalist>.

Exemplu:

<form action="/action_page.php">
  <input list="browsers">
  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
</form>

Elementul HTML5 <output>

Elementul <output> reprezintă rezultatul unui calcul (ca unul realizat de un script).

Exemplu:

Efectuați un calcul și arătați rezultatul într-un element <output>:

<form action="/action_page.php"
  oninput="x.value=parseInt(a.value)+parseInt(b.value)">
  0
  <input type="range"  id="a" name="a" value="50">
  100 +
  <input type="number" id="b" name="b" value="50">
  =
  <output name="x" for="a b"></output>
  <br><br>
  <input type="submit">
</form>

Elemente de formular HTML
 

Etichetă	Descriere
<form>	Definește un formular HTML pentru introducerea utilizatorului
<input>	Definește un control de intrare
<textarea>	Definește un control de intrare multiline (zona text)
<label>	Definește o etichetă pentru un element input
<fieldset>	Grupează elemente conexe într-o formă
<legend>	Definește o legendă pentru un element fieldset
<select>	Definește o listă derulantă (drop-down list)
<optgroup>	Definește un grup de opțiuni conexe dintr-o listă derulantă (drop-down list)
<option>	Definește o opțiune dintr-o listă derulantă (drop-down list)
<button>	Definește un buton pe care se poate face click
<datalist>	Specifică o listă de opțiuni predefinite pentru controale de intrare
<output>	Definește rezultatul unui calcul