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, параметры разделяются знаком «?».

<form action="index.html" method="post">
      <input type="text" id="name" name="student_name">
</form>

В примере выше над тегом 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>

Результат:
Submit

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>

Результат:
Name Email Password Biography Submit

Вот и все! До свидания!