Elemente de formulare HTML: datalist, input, output.
Partajeaza in Google Classroom
Memorator: Descriere video Descarcă PDF
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 |