HTML - Формы

Создание HTML-формы – неотъемлемая часть сайта и важный навык веб-разработчиков. Используйте это руководство для изучения элементов HTML-форм.
HTML-формы требуются для сбора данных от посетителей сайта. Например, при регистрации на Uber, Netflix или Facebook пользователь вводит свое имя, почту и пароль.
Примечание: В примерах ниже уже заданы CSS стили, поэтому они отличаются от того, что получится у вас. CSS файлы можно скачать отсюда:
Пример:
<form action="index.html" method="post">
</form>
Атрибуты:
- action – это веб-адрес (URL) программы, которая обрабатывает данные формы.
- Method – это HTTP метод, который используется браузером для отправки формы.
Возможные значения: POST или GET. POST – отправляет данные формы на сервер. GET – данные отправляются внутри URL, параметры разделяются знаком «?».
Примечание: Нельзя создать форму внутри формы. То есть использование элемента
В примере выше над тегом input были добавлены три атрибута.
type
Указывает на тип ввода. При значении text пользователь должен вводить текстовые данные. У этого атрибута имеется множество значений, например, email, tel (для номера телефона), password и т. д.
Пример: при попытке зайти в свой профиль на сайте (Amazon/Netflix) необходимо указать почту и пароль. Для этих целей используется элемент input. Атрибуты type будут иметь значения email и password соответственно.
id
Это не обязательное, но весьма полезное поле HTML-формы. Например, для определения элементов в CSS/JavaScript. Идентификаторы используются для сопоставления меток с нужными элементами управления формой.
name
Обязательный атрибут. При передаче HTML-формы в серверный код сервер должен интерпретировать данные из формы и правильно их обработать.
placeholder
Атрибут подсказывает пользователю, что именно необходимо ввести в поле ввода HTML-формы. Исчезает, как только пользователь начинает печатать в поле.
Примечание: Использование разных значений в атрибуте type выводит разный результат:
Пример:
<form action="index.html" method="post">
<input type="text" id="name" name="student_name">
<input type="email" id="mail" name="student_email">
<input type="password" id="password" name="student_password">
</form>
Результат:
Textarea
Иногда одной строки текста бывает недостаточно, а простой элемент input совершенно не подходит. Например, на некоторых сайтах добавляются формы, в которых пользователи оставляют свои отзывы и задают вопросы. В таких случаях лучше прибегнуть к элементу textarea.
Элемент <textarea> не является самозакрывающимся тегом, поэтому требует открывающей и закрывающей скобки.
Атрибуты:
- id – см. <input/>.
- name – см. <input/>.
- placeholder – см. <input/>.
- cols – задает видимую ширину текстовой области.
- rows – задает видимое количество строк в текстовой области.
Пример:
<form action="index.html" method="post">
<textarea id="bio" placeholder="Student Bio" name="student_bio"></textarea>
</form>
Результат:
Button
Один из важнейших элементов HTML-формы. Без кнопки вы не сможете отправить и обработать данные формы на сервере.
В элементе задается атрибут type, который может принимать три разных значения: submit, reset и button.
Атрибуты:
type=”reset” – при нажатии очищает все данные формы.
type=”button” – в нем нет какого-то стандартного поведения. В основном используется в JavaScript для программирования настраиваемого поведения.
type=”submit” – стандартное поведение кнопки «Отправить», т. е. передача данных на сервер.
Пример:
<form action="index.html" method="post">
<input type="text" id="name" placeholder="Name" name="student_name">
<input type="email" id="mail" placeholder="Email" name="student_email">
<input type="password" id="password" placeholder="Password" name="student_password">
<textarea id="bio" name="student_bio" placeholder="Student BIO"></textarea>
<button type="submit">Submit</button>
</form>
Результат:
Label
Пока что пользователь не сможет понять, для чего нужен каждый элемент HTML-формы. Вы не можете предугадать, куда вводить адрес почты, а куда – пароль. Формы смотрятся недоделанными и непонятными.
Каждую строку HTML-формы можно отметить элементом label.
Наиболее популярным атрибутом label является for.
Атрибуты:
for – связывает метку строки с определенным элементом формы. Соответствие проверяется по ID. Значением атрибута ID для элемента input в примере выше является email. Оно совпадает со значением атрибута for для элемента label. Таким образом, оба элемента связаны.
Пример:
<form action="index.html" method="post">
<label for="name">Name</label>
<input type="text" id="name" name="student_name">
<label for="mail">Email</label>
<input type="email" id="mail" name="student_email">
<label for="password">Password</label>
<input type="password" id="password" name="student_password">
<label for="bio">Biography</label>
<textarea id="bio" name="student_bio"></textarea>
<button type="submit">Submit</button>
</form>
Результат:
Source
Вот и все! До свидания!
Вопросы / Комментарии / Отзывы