Узнайте о создании форм в HTML: структура документов, добавление форм, использование различных типов полей ввода, списков, кнопок и других элементов. Подробные примеры кода помогут быстро освоить основы работы с формами.
Формы в HTML используются для взаимодействия с пользователем через веб-страницы. Они позволяют собирать данные от пользователей, такие как имя, адрес электронной почты, пароль и другие сведения, а затем отправлять их на сервер для обработки.
9.1. Структура документа с формами
Форма в HTML определяется тегом <form>. Внутри этого тега размещаются различные элементы управления, такие как поля ввода текста, кнопки, списки и так далее. Вот пример простой структуры документа с формой:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Пример формы</title>
</head>
<body>
<h1>Регистрация</h1>
<!-- Открываем форму -->
<form action="/submit-form" method="post">
<!-- Здесь будут располагаться элементы формы -->
<!-- Закрываем форму -->
</form>
</body>
</html>
9.2. Добавление формы в документ
Чтобы добавить форму в документ, используется тег <form>, который имеет два основных атрибута:
action– указывает URL-адрес, куда будет отправлена форма после нажатия кнопки отправки.method– определяет метод передачи данных (getилиpost).
Вот пример добавления формы с методом POST:
<form action="/submit-form" method="post">
<!-- Содержимое формы -->
</form>
9.3. Тег input
Тег <input> является одним из самых часто используемых при создании форм. Он позволяет создавать различные типы полей ввода, таких как текстовые поля, кнопки, чекбоксы и многое другое. Тип элемента задается с помощью атрибута type.
9.3.1. Текстовое поле и поле ввода пароля
Для создания текстового поля и поля ввода пароля используются следующие типы:
text– обычное текстовое поле.password– поле для ввода паролей, где символы скрыты.
Пример кода:
<!-- Текстовое поле -->
<input type="text" name="username" placeholder="Введите ваше имя">
<!-- Поле для ввода пароля -->
<input type="password" name="password" placeholder="Введите ваш пароль">
Результат:
9.3.2. Кнопки Сброс, Отправить и командная кнопка
Кнопки также создаются с использованием тега <input>, но с разными значениями атрибута type:
reset– кнопка сброса всех значений формы.submit– кнопка отправки формы.button– обычная кнопка без действий по умолчанию.
Пример кода:
<!-- Кнопка сброса -->
<input type="reset" value="Очистить форму">
<!-- Кнопка отправки -->
<input type="submit" value="Отправить">
<!-- Обычная кнопка -->
<input type="button" value="Нажмите меня!" onclick="alert('Привет!')">
Результат:
9.3.3. Скрытое поле hidden
Скрытые поля используются для передачи данных, которые пользователь не видит, но они отправляются вместе с формой. Например, можно использовать скрытое поле для хранения идентификатора записи в базе данных.
Пример кода:
<input type="hidden" name="record_id" value="12345">
Результат:
9.3.4. Поле для установки флажка
Флажки (чекбоксы) позволяют выбрать одно или несколько значений из предложенных вариантов. Для создания чекбоксов используется тип checkbox.
Пример кода:
<input type="checkbox" name="agree_terms" value="yes"> Согласен с условиями использования
Результат:
Согласен с условиями использования9.3.5. Элемент-переключатель
Элементы-переключатели (радио-кнопки) позволяют выбрать только один вариант из нескольких возможных. Для создания радио-кнопок используется тип radio.
Пример кода:
<p>Выберите вашу любимую книгу:</p>
<input type="radio" name="favorite_book" value="book1"> Книга 1<br>
<input type="radio" name="favorite_book" value="book2"> Книга 2<br>
<input type="radio" name="favorite_book" value="book3"> Книга 3
Результат:
Выберите вашу любимую книгу:
Книга 1Книга 2
Книга 3
9.3.6. Поле выбора файла
Поле выбора файла позволяет пользователю загрузить файл с компьютера. Для этого используется тип file.
Пример кода:
<input type="file" name="upload_file">
Результат:
9.3.7. Элементы для ввода числа и выбора значения из диапазона
Для ввода чисел и выбора значений из диапазона используются типы number и range.
Пример кода:
<!-- Ввод числа -->
<input type="number" name="age" min="18" max="100" step="1">
<!-- Выбор значения из диапазона -->
<input type="range" name="volume" min="0" max="100" step="10">
Результат:
9.3.8. Элемент для ввода даты
Для ввода даты используется тип date.
Пример кода:
<input type="date" name="birthday">
Результат:
9.4. Список автодополнения
Список автодополнения создается с помощью комбинации тега <datalist> и атрибута list у тега <input>. Это позволяет пользователю выбирать значение из списка предложений.
Пример кода:
<input type="text" name="city" list="cities">
<datalist id="cities">
<option value="Москва"></option>
<option value="Санкт-Петербург"></option>
<option value="Новосибирск"></option>
</datalist>
Результат:
9.5. Тег textarea. Текстовая область
Тег <textarea> используется для создания многострочного текстового поля. Он особенно полезен для ввода больших объемов текста, таких как комментарии или сообщения.
Пример кода:
<textarea name="message" rows="5" cols="40">Ваше сообщение...</textarea>
Результат:
9.6. Тег select. Список с предопределенными значениями
Тег <select> создает выпадающий список, позволяющий пользователю выбрать одно или несколько значений из предложенного набора.
Пример кода:
<select name="color">
<option value="red">Красный</option>
<option value="green">Зелёный</option>
<option value="blue">Синий</option>
</select>
Результат:
9.7. Тег button. Кнопка
Тег <button> также может использоваться для создания кнопок. Основное отличие от <input type="button"> заключается в том, что внутри тега <button> можно размещать текст и даже HTML-элементы.
Пример кода:
<button type="submit">Отправить</button>
Результат:
9.8. Тег label
Тег <label> связывает текст с элементом формы, чтобы улучшить доступность и удобство использования. Когда пользователь кликает на текст, связанный с полем ввода, фокус перемещается на само поле.
Пример кода:
<label for="email">Email:</label>
<input type="email" id="email" name="email">
Результат:
9.9. Группировка элементов формы
Для группировки связанных элементов формы используется тег <fieldset>. Внутри него можно разместить заголовок с помощью тега <legend>.
Пример кода:
<fieldset>
<legend>Контактная информация</legend>
<label for="name">Имя:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="phone">Телефон:</label>
<input type="tel" id="phone" name="phone">
</fieldset>
Результат:
