Elementy formularzy HTML

Ten rozdział opisuje wszystkie elementy formularzy HTML.

element <input>

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

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

Uwaga:Następny rozdział omówi wszystkie typy wejściowe HTML.

<select> element (lista rozwijana)

<select> Element definiujeLista rozwijana:

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.

Listy zazwyczaj wyświetlają pierwszą opcję jako wybraną.

Możesz zdefiniować domyślną opcję, dodając atrybut selected.

Przykład

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

Spróbuj sam

<textarea> element

<textarea> Element definiuje wielołatkowy pole 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 jest wyświetlany 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 jest wyświetlany 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 zniszczą Twojej strony.

Element <datalist> HTML5

<datalist> Element określa listę pred定义选项 dla elementu <input>.

Użytkownicy będą widzieć listę rozwijaną z pred定义选项, gdy wprowadzają dane.

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

Przykład

Ustawienie elementu <input> z wartościami pred定义通过 <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