Elementy Formularzy HTML

Ten rozdział opisuje wszystkie elementy formularzy HTML.

element <input>

Najważniejszym elementem formularza jest <input> elementów.

Element <input> zależy od różnych type Atrybuty mogą zmieniać się w różnych formach.

Uwaga:Następny rozdział wyjaśni wszystkie typy wejść HTML.

<select> element (spis rozwijany)

<select> Element definiujeSpis rozwijany:

Przykład

<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

Spróbuj sam

<option> Element definiuje do wyboru opcje.

Lista zazwyczaj wyświetla pierwszą opcję jako wybraną.

Możesz określić predefiniowane opcje, dodając atrybut selected.

Przykład

<option value="fiat" selected>Fiat</option>

Spróbuj sam

<textarea> element

<textarea> Element definiuje wielokrotny pola wejściowe (Pole tekstowe）：

Przykład

<textarea name="message" rows="10" cols="30">
Kot bawił się w ogrodzie.
</textarea>

Spróbuj sam

Powyższy kod HTML wyświetla się w przeglądarce jako:

Kot bawił się w ogrodzie.

Element <button>

<button> Element definiuje klikalnePrzycisk:

Przykład

<button type="button" onclick="alert('Hello World!')">Kliknij mnie!</button>

Spróbuj sam

Powyższy kod HTML wyświetla się w przeglądarce jako:

Elementy formularza HTML5

HTML5 dodał następujące elementy formularza:

  • <datalist>
  • <keygen>
  • <output>

Uwaga:Domyślnie, przeglądarki nie wyświetlają nieznanych elementów. Nowe elementy nie będą uszkadzać Twojej strony.

Element <datalist> HTML5

<datalist> Element określa listę opcji zdefiniowanych dla elementu <input>.

Użytkownicy będą widzieli listę rozwijaną z zdefiniowanymi opcjami, gdy będą wprowadzać dane.

elementu <input>: list Atrybut musi odnosić się do elementu <datalist>: id Atrybuty.

Przykład

Ustawienie elementu <input> z wartościami zdefiniowanymi za pomocą <datalist>:

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

Spróbuj sam