Довідники HTML5 input

Що таке 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>
Результат:

Форма з полями






Коментарі
Додати коментар

Поки що коментарів немає