HTML Елементи форми
В цьому розділі описуються всі елементи HTML форми.
HTML елементи <form>
HTML елемент <form> може містити один або кілька таких елементів форми:
-
<input> -
<label> -
<select> -
<textarea> -
<button> -
<fieldset> -
<legend> -
<datalist> -
<output> -
<option> -
<optgroup>
Елемент <input>
Найбільш важливим елементом форми є елемент <input>.
Елемент <input> може відображатися декількома способами, в залежності від атрибута type.
Якщо атрибут type пропущений, поле вводу отримує тип за замовчуванням: "text".
Всі різні типи вводу описані в наступній главі.
Елемент <select>
Елемент <select> визначає drop-down список (випадаючий список):
Приклад
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
Спробуйте самі »
Елемент <option> визначає опцію, яка може бути обрана.
За замовчуванням обраний перший елемент у випадаючому списку.
Щоб визначити попередньо обраний параметр, додайте атрибут selected до option:
Видимі значення:
Використовуйте атрибут size для вказування кількості видимих значень:
Приклад
<select name="cars" size="3">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
Спробуйте самі »
Дозволити багатокількісний вибір:
Використовуйте атрибут multiple, який дозволяє користувачу обрати більше одного значення:
Приклад
<select name="cars" size="4" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
Спробуйте самі »
Елемент <textarea>
Елемент <textarea> визначає багаторядкове поле вводу (текстової області):
Приклад
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
Спробуйте самі »
Атрибут rows визначає видиму кількість рядків в текстовій області.
Атрибут cols визначає видиму ширину текстової області.
Ось як HTML-код вище буде відображатися в браузері:
Ви також можете визначити розмір текстової області за допомогою CSS:
Приклад
<textarea name="message" style="width:200px; height:600px;">
The cat was playing in the garden.
</textarea>
Спробуйте самі »
Елемент <button>
Елемент <button> визначає клікабельну кнопку:
Приклад
<button type="button" onclick="alert('Слава Україні!')">Тицни мене!</button>
Спробуйте самі »
Ось як HTML-код вище буде відображатися в браузері:
Примітка: Завжди вказуйте атрибут type для елемента кнопки. Різні браузери можуть використовувати різні типи за замовчуванням для елемента кнопки.
HTML5 Елементи форми
HTML5 додав наступні елементи форми:
<datalist><output>
Примітка: Браузери не відображають невідомі елементи. Нові елементи, які не підтримуються в старих браузерах, не "зруйнують" вашу вебсторінку.
HTML5 елемент <datalist>
Елемент <datalist> визначає список попередньо визначених параметрів для елемента <input>.
Користувачі побачать випадаючий список попередньо визначених параметрів при введенні даних.
Атрибут list елемента <input> повинен посилатися на атрибут id елемента <datalist>.
Приклад
<form action="/action_page.html">
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
Спробуйте самі »
HTML5 елемент <output>
Елемент <output> представляє результат обрахування (наприклад, виконаний скриптом).
Приклад
Виконайте розрахунок і покажіть результат в елементі <output>:
<form action="/action_page.html"
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>
Спробуйте самі »
HTML Вправи
HTML Елементи форми
| Тег | Опис |
|---|---|
| <form> | Визначає HTML форму для користувальницького вводу |
| <input> | Визначає елемент управління вводом |
| <textarea> | Визначає багаторядковий елемент управління введенням (текстова область) |
| <label> | Визначає мітку для елемента <input> |
| <fieldset> | Групує пов’язані елементи в формі |
| <legend> | Визначає заголовок для елемента <fieldset> |
| <select> | Визначає випадаючий (розкриваючий) список |
| <optgroup> | Визначає группу пов’язаних параметрів в випадаючому списку |
| <option> | Визначає параметр в випадаючому списку |
| <button> | Визначає клікабельну кнопку |
| <datalist> | Визначає список попередньо визначених параметрів для елементів управління вводом |
| <output> | Визначає результат розрахунку |
Для отримання повного списку всіх доступних HTML тегів, відвідайте HTML Довідник тегів на нашому сайті W3Schools українською.
