Що таке input в HTML5?
HTML тег
<input> дозволяє створювати різні поля введення або вибору значення для html-форм. При використанні тега input без додаткових атрибутів буде створено найпростіше текстове поле. Закриваючий тег не потрібен.За допомогою атрибуту type ви можете вказати, яким полем буде цей input, наприклад:
password- створення поля для введення пароля;text- створення найпростішого текстового поля;email- створення поля для введення email;hidden- створення прихованого поля;checkbox- створення поля для проставлення галочки;radio- створення поля з можливістю вибрати варіант;button- створення кнопки;submit- створення кнопки із перезавантаженням сторінки;reset- створення кнопки для очищення форми;file- створення кнопки вибору файлу з комп'ютера;color- створення поля для вибору кольору;time- створення поля для вибору дати;image- створення поля із зображенням;
Це лише частина тих можливих значень атрибуту type, які ви можете застосувати на своєму сайті.
Атрибути:
- type - задає значення (тип) поля;
- form - потрібен для зв'язування поля з формою (form) по id;
- checked - встановлює поставлену галочку або ж оберає radio кнопку за замовчуванням;
- disabled - відключає поле для введення або будь-якого іншого взаємозв'язку з ним;
- placeholder - текст підказки прямо у полі;
- readonly - можливо вказати, що поле не буде можливим для редагування користувачем;
- required - встановлює чи обов'язкове це поле чи ні;
- value - встановлюється значення поля.
Приклад:
<h2>Форма з полями</h2>
<form>
<input type="text" name="name" id="name" placeholder="Ваше ім'я"><br>
<label for="maleFemale">Оберіть вашу стать</label><br>
<input type="radio" name="maleFemale" id="maleFemale" value="male">
<label>Чоловік</label>
<input type="radio" name="maleFemale" id="maleFemale" value="female">
<label>Жінка</label><br>
<label>Ваш улюблений колір</label><br>
<input type="color" id="color"><br>
<input type="submit" value="Надіслати">
<input type="reset" value="Очистити">
</form>Результат:
Форма з полями
Коментарі