2. Что такое форма
Форма — это элемент веб-страницы, который позволяет пользователю вводить данные.
Формы используются для: - регистрации пользователей - входа на сайт - отправки сообщений - оформления заказов - поиска информации
Тег формы <form>
Для создания формы используется тег:
<form>
Пример:
<form>
</form>
Все элементы формы размещаются внутри этого тега.
Поле ввода <input>
Тег <input> используется для ввода данных.
Пример:
<input type="text">
Этот элемент создаёт текстовое поле.
Основные типы input
HTML поддерживает различные типы полей ввода.
| Тип | Назначение |
|---|---|
| text | текст |
| password | пароль |
| электронная почта | |
| number | число |
| checkbox | флажок |
| radio | переключатель |
| submit | кнопка отправки |
Поле для текста
<input type="text">
Пример формы:
<form>
Имя:<br>
<input type="text">
</form>
Поле для пароля
<input type="password">
При вводе символы скрываются.
Поле для электронной почты
<input type="email">
Браузер может автоматически проверять правильность email.
Поле для числа
<input type="number">
Позволяет вводить только числовые значения.
Флажки (checkbox)
Флажки позволяют выбрать несколько вариантов.
<input type="checkbox"> HTML<br>
<input type="checkbox"> CSS<br>
<input type="checkbox"> JavaScript
Переключатели (radio)
Переключатели позволяют выбрать один вариант.
<input type="radio" name="gender"> Мужской<br>
<input type="radio" name="gender"> Женский
Важно: одинаковое значение name объединяет элементы в группу.
Кнопка отправки
Для отправки формы используется:
<input type="submit">
Пример:
<input type="submit" value="Отправить">
Текстовое поле (textarea)
Для ввода большого текста используется:
<textarea></textarea>
Пример:
<textarea rows="5" cols="30"></textarea>
Пример формы
<!DOCTYPE html>
<html>
<head>
<title>Форма</title>
</head>
<body>
<h1>Регистрация</h1>
<form>
Имя:<br>
<input type="text"><br><br>
Email:<br>
<input type="email"><br><br>
Пароль:<br>
<input type="password"><br><br>
<input type="submit" value="Отправить">
</form>
</body>
</html>
Рекомендации
При создании форм рекомендуется: - подписывать поля ввода; - использовать подходящий тип input; - располагать элементы аккуратно; - проверять ввод данных.