HTML формы

Форма в HTML это часть документа, которая позволяет пользователю ввести интересующую нас информацию, которую впоследствии можно принять и обработать на стороне сервера. Другими словами, формы используются для сбора информации введённой пользователями.

Синтаксически парный тег <form> определяет форму в HTML документе. Элемент <form> по большому счету просто является контейнером, внутри которого могут размещаться различные надписи, элементы управления и типы входных элементов, флажки, радио-кнопки, кнопки отправки и прочие HTML элементы, которые мы с Вами сейчас рассмотрим.

Элемент имеет следующий синтаксис:

<form>
элементы формы
</form>

Элемент <input> является основным элементом формы и определяет пользовательское поле для ввода информации. Поле ввода принимает различный вид, в зависимости от значения атрибута type, применённого к данному элементу:

С выходом HTML 5 к элементу <input> добавилось 12 новых типов (видов) полей, но к сожалению, пока не все из них имеют полную поддержку всеми передовыми браузерами. Как вы понимаете, к самым часто используемым видам полей относятся те, которые были введены задолго до HTML 5, например, такие как:

• checkbox (флаговая кнопка).
• radio (радиокнопка).
• submit (кнопка отправки формы).
• text (однострочное текстовое поле).

Давайте рассмотрим пример использования этих элементов управления внутри формы:

<!DOCTYPE html>
<html>
  <head>
    <title>HTML формы</title>
  </head>
  <body>
    <form>
      Имя: <input type="text" name="firstname" value="Введите имя" /> <br />
      <br />
      Фамилия: <input type="text" name="lastname" value="Введите фамилию" /> <br />
      <br />
      Мужчина <input type="radio" name="sex" value="male" checked /> Женщина
      <input type="radio" name="sex" value="female" /> <br />
      <br />
      О себе: <br />
      <input type="checkbox" name="type1" value="low" />Меньше 18<br />
      <input type="checkbox" name="type2" value="2old" />От 18 до 35<br />
      <input type="checkbox" name="type3" value="high" />Больше 35<br />
      <input type="checkbox" name="type4" value="busy" />Женат /-а<br />
      <input type="checkbox" name="type5" value="cat" />Есть кошка<br />
      <br />
      <input type="submit" name="submit" value="отправить" />
    </form>
  </body>
</html>

И так по порядку, что мы сделали в этом примере:

• Разместили два однострочных текстовых поля (<input type = "text">) для ввода пользователем своего имени и фамилии. Присвоили этим полям уникальные имена атрибутом name (для корректной передачи и обработки формы обязательно указывайте для каждого элемента <input> этот атрибут). Кроме того атрибутом value установили для этих полей значения по умолчанию (при заполнении полей значение этого атрибута будет соответствовать пользовательскому вводу).
• Разместили две радиокнопки (<input type = "radio">) для выбора одного из ограниченного числа вариантов. Обратите внимание, что для радиокнопок необходимо указывать одинаковое имя, чтобы была возможность выбрать только один вариант из предложенных.
Для первой радиокнопки мы указали атрибут checked, который указывает, что элемент должен быть предварительно выбран при загрузке страницы (в данном случае поле со значением male). Он применяется только для полей <input type = "checkbox"> и <input type = "radio">, в противном случае он игнорируется.
• Разместили пять флаговых кнопок (чекбоксов), которые позволяют пользователям указать необходимые параметры (выбрать необходимые значения). Присвоили этим полям уникальные имена атрибутом name и атрибутом value установили для этих полей необходимые значения.
• Заключительный элемент, который мы разместили внутри формы это кнопка, которая служит для отправки формы (<input type = "submit">). У кнопки по аналогии с другими элементами имеется свое имя (атрибут name) и значение (атрибут value).

Результат нашего примера в браузере:

Обращаю Ваше внимание, что в рамках изучения HTML мы не будем рассматривать то, как серверы обрабатывают входные данные, лишь рассмотрим базовые принципы передачи формы.

<form action = "example.php">

Обратите внимаение, что в атрибуте action указывается URL адрес того места, куда отправляется форма. Если для формы не задан атрибут action, то значением по умолчанию этого атрибута считается текущая страница (обработчик формы - текущая страница). В приведенном выше примере, предпологается, что скрипт обработки формы находится внутри страницы "example.php".

Еще одним важным атрибутом при работе с элементом <form> является атрибут method, он определяет метод HTTP (get или post), который используется при передаче формы:

<form action =  "example.php" method =  "get">
или:
<form  action = "example.php"  method = "post">

Вы можете использовать get (метод по умолчанию) если форма отправки является пассивной (как поисковой запрос) и не содержит конфиденциальной информации. При использовании метода get данные формы будут видны при передаче в адресе страницы:

http://www.kakoitosait.ru/example.php?firstname=Вася&lastname=Пупкин

Используйте метод post если форма использует обновление каких-либо данных, или включает в себя конфиденциальную информацию (например пароль). Метод post предлагает лучшую безопасность, так как представленные данные отправляются на сервер в теле сообщения запроса.

Группировка данных формы

Тег <fieldset> служит для визуальной группировки элементов, размещенных внутри формы (HTML тег <form>). Во всех основных браузерах, данный элемент выделяется рамкой, а содержимое элемента получает внутренние отступы со всех сторон.

Тег <legend> определяет заголовок для <fieldset> элемента, с помощью которого группируются элементы формы.

Пример использования:

<!DOCTYPE html>
<html>
  <head>
    <title>Группировка данных формы</title>
  </head>
  <body>
    <form>
      <fieldset>
        <legend>Пожалуйста, представьтесь</legend>
        Имя: <input type="text" name="firstname" value="Введите имя" /> <br />
        <br />
        Фамилия: <input type="text" name="lastname" value="Введите фамилию" /> <br />
        <br />
        Мужчина <input type="radio" name="sex" value="male" checked /> Женщина
        <input type="radio" name="sex" value="female" /><br />
        <br />
        <input type="submit" name="submit" value="отправить" />
      </fieldset>
    </form>
  </body>
</html>

В этом примере мы:

• Разместили внутри формы (парный тег <form>) элемент <fieldset>, благодаря которому мы группируем элементы формы, вокруг формы появляется рамка (внешний вид рамки может отличаться в зависимости от браузера). Тегом <legend> мы определяем для нашей рамки заголовок "Пожалуйста, представьтесь".
• Разместили два однострочных текстовых поля (<input type = "text">) для ввода пользователем своего имени и фамилии. Присвоили этим полям уникальные имена атрибутом name (для корректной передачи и обработки формы обязательно указывайте для каждого элемента <input> этот атрибут). Кроме того атрибутом value установили для этих полей значения по умолчанию (при заполнении полей значение этого атрибута будет соответствовать пользовательскому вводу).
• Разместили две радиокнопки (<input type = "radio">) для выбора одного из ограниченного числа вариантов. Обратите внимание, что для радиокнопок необходимо указывать одинаковое имя, чтобы была возможность выбрать только один вариант из предложенных.
• Заключительный элемент это кнопка, которая служит для отправки формы (<input type = "submit">). У кнопки по аналогии с другими элементами имеется свое имя (атрибут name) и значение (атрибут value).

Результат нашего примера в браузере:

Текстовая метка

Тег <label> (англ. - метка) служит текстовой меткой для элемента <input>. По своему виду метка ничем не отличается от обычного текста, но благодаря ей пользователь может выбрать элемент формы кликом по тексту, расположенному внутри элемента <label>, а не по самому элементу <input>.

Чтобы определить к какому элементу формы относится текущая метка, необходимо использовать атрибут for тега <label>. Значение атрибута for должно соответствовать значению глобального атрибута id того элемента формы, к которому будет относится метка. Атрибут for можно не использовать, если элемент <input> будет находиться внутри элемента <label>.

Рассмотрим пример использования:

<!DOCTYPE html>
<html>
  <head>
    <title>Пример использования тега <label></title>
  </head>
  <body>
    <form>
      <label for="yes">Да</label>
      <!--Здесь мы создаём метку для тега input c id = "yes"-->
      <input type="radio" id="yes" name="choice" value="yes" checked />
      <label for="no">Нет</label><!--Здесь мы создаём метку для тега input c id = "no"-->
      <input type="radio" id="no" name="choice" value="no" /> </form
    ><br />
    <form>
      <label>Да <input type="radio" name="choice2" value="yes" /> </label
      ><!--Здесь мы  помещаем теги <input>
			внутрь тегов <label> (при этом атрибут for не требуется)-->
      <label>Нет <input type="radio" name="choice2" value="no" checked /></label>
    </form>
  </body>
</html>

В этом примере мы:

• Внутри первой формы:
  • Разместили две радиокнопки (<input type = "radio">) для выбора одного из ограниченного числа вариантов. Еще раз обратите внимание, что для радиокнопок внутри одной формы необходимо указывать одинаковое имя, значения мы указали разные. Для первой радиокнопки мы указали атрибут checked, который указывает, что элемент должен быть предварительно выбран при загрузке страницы (в данном случае радиокнопка со значением yes). Кроме того, мы указали для радиокнопок глобальные атрибуты id, которые определяют уникальный идентификатор для элемента.
  • Разместили два элемента <label>, которые определяют текстовые метки для наших текстовых полей. Обратите внимание, что мы использовали атрибут for, чтобы определить к какому элементу формы относится текущая метка. Значение атрибута for соответствует значению глобального атрибута id необходимой нам радиокнопки.
• Внутри второй формы:
  • Разместили две радиокнопки (<input type = "radio">) для выбора одного из ограниченного числа вариантов. Для второй радиокнопки мы указали атрибут checked, который указывает, что элемент должен быть предварительно выбран при загрузке страницы (в данном случае радиокнопка со значением no). Кроме того, мы указали для радиокнопок уникальные значения в рамках формы и одинаковые имена.
  • Разместили два элемента <label>, внутри них мы разместили наши радиокнопки. В отличии от предыдущего метода отсутствует необходимость указывать для радиокнопок глобальные атрибуты id (идентификатор для элемента), а для текстовых меток использовать атрибут for, чтобы на них сослаться (сделать привязку).

В браузере оба варианта (метода) использования текстовых меток выглядят идентично:

Подсказка для полей ввода

Атрибут placeholder (HTML тега <input>) указывает подсказку, которая описывает ожидаемое значение для ввода в элемент. Подсказка отображается в поле ввода до того, как пользователь вводит значение.

Атрибут может быть использован с полями данных следующих типов (атрибут type):

• email (поле для адреса электронной почты).
• password (поле с паролем, в котором скрываются символы).
• search (текстовое поле для ввода строки поиска).
• text (однострочное текстовое поле).
• tel (поле для ввода номера телефона).
• url (поле для ввода URL-адреса).

Давайте рассмотри пример использования:

<!DOCTYPE html>
<html>
  <head>
    <title>Пример использования атрибута placeholder</title>
  </head>
  <body>
    <form>
      Login: <input type="text" name="login" placeholder="Введите ваш логин" /><br /><br />
      Password: <input type="password" name="password" placeholder="Введите ваш пароль" /><br />
      <button type="submit">Далее</button>
    </form>
  </body>
</html>

В данном примере мы указали для элемента <input> с типом text (однострочное текстовое поле) и типом password (поле с паролем) текстовую подсказку для пользователя (атрибут placeholder), которая описывает ожидаемое значение для ввода.

Результат нашего примера:

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

• Используя полученные знания составьте следующую форму оформления заказа:

Практическое задание № 22.

Нюанс: в полях, где предполагается выбор, должна быть возможность осуществления выбора кликом по тексту, а не только по самому элементу.

После того как вы выполните упражнение проинспектируйте код страницы, открыв пример в отдельном окне, чтобы убедиться, что вы все выполнили правильно.