HTML Form Elements

HTML Form Elements

formularz HTML na stronie WWW pozwala użytkownikowi na wprowadzanie danych, które są przesyłane do serwera w celu przetworzenia. Formularze mogą przypominać formy papierowej lub bazy danych, ponieważ internauci wypełnić formularze za pomocą pól wyboru, przyciski radiowe, lub pól tekstowych.

Na przykład, formularze mogą być używane do wysyłki lub wprowadzić dane karty kredytowej, aby zamówić towar lub mogą być wykorzystywane do pobierania wyników wyszukiwania z wyszukiwarki.

Ten rozdział opisuje wszystkie elementy formularza HTML.

<input> Element

Najważniejszym elementem jest postać <input> elementem.

<input> element może się zmieniać na wiele sposobów, w zależności od type atrybutu.

<select> Element (Drop-Down List)

<select> element definiuje listę rozwijaną:

<option> Elementy definiuje opcje do wyboru.

Lista będzie normalnie pokazują pierwszy element jako wybrany.

Można dodać wybrany atrybut zdefiniować predefiniowanego opcję.

<textarea> Element

<textarea> element definiuje pole wejścia wielu linii ( a text area ) :

W ten sposób kod HTML powyżej zostanie wyświetlona w przeglądarce:

Kot bawił się w ogrodzie.

<button> Element

<button> element definiuje klikalny przycisk:

W ten sposób kod HTML powyżej zostanie wyświetlona w przeglądarce:

Kliknij!

HTML5 Form Elements

HTML5 dodano następujące elementy postać:

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

HTML5 <datalist> Element

<datalist> element określa listę predefiniowanych opcji dla <input> elementu.

Użytkownicy będą widzieć listę rozwijaną z predefiniowanych opcji, ponieważ dane wejściowe.

list atrybutem <input> elementu, należy zapoznać się z id atrybut <datalist> elementu.

Przykład

<input> element o predefiniowanych wartości w <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 "

HTML5 <keygen> Element

Celem <keygen> elementem jest zapewnienie bezpiecznego sposobu uwierzytelniania użytkowników.

<keygen> element określa pole generatora pary kluczy w formie.

Gdy formularz jest składany, dwa klawisze są generowane, jeden prywatny i jeden publiczny.

Klucz prywatny jest przechowywany lokalnie, a klucz publiczny jest wysyłane do serwera.

Klucz publiczny może być używany do generowania certyfikatu klienta do uwierzytelniania użytkownika w przyszłości.

Przykład

Forma z polem generatora kodów:

<form action="action_page.php">
  Username: <input type="text" name="user">
  Encryption: <keygen name="security">
  <input type="submit">
</form>

Spróbuj sam "

HTML5 <output> Element

<output> elementem przedstawia wynik obliczania (takich jak jeden wykonaniu skryptu).

Przykład

Wykonać obliczenia i pokazać wynik w <output> elementu:

<form action="action_page.asp"
  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>

Spróbuj sam "

Sprawdź się z ćwiczeniami!

Ćwiczenie 1 » ćwiczenie 2» ćwiczenie 3 »

HTML Form Elements

= New w HTML5.