HTML - Формы

09:55 , 13 Август 2019
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

Это самый популярный элемент HTML-формы. Используется для создания текстовых полей, в которые пользователь вводит информацию (например: пароль, адрес почты и т. д.).

Создадим текстовое поле, в которое пользователь сможет ввести свое имя.


Пример:


<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>


Результат:



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

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

Вопросы / Комментарии / Отзывы