📙Тег form

Что это такое?

Форма - это одно или несколько полей для ввода информации пользователем. Позже эта информация может быть прочитана программой или отправлена на сервер. Вот так может выглядеть стандартная форма в HTML:

Где они используются?

  1. Ввод любого рода информации (имя, телефон, email, пароль и пр.)

  2. Фильтр отображаемого контента (выпадающий список, флажки и пр.)

  3. Поиск информации (пользователь вводит ключевое слово)

  4. Загрузка файлов

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

Как их использовать в коде?

Ну и самая интересная часть: как их использовать в коде?

  1. Добавить форму в HTML код при помощи тега <form>.

    Он является блочным элементом. Закрывающий тег обязателен. Форма будет содержать данные только из тех полей ввода, которая находятся внутри тега <form> (то есть между открывающим и закрывающим тегами).

    Тег <form> имеет несколько атрибутов, подробнее о которых можно прочитать здесь, однако, есть два обязательных:

    • action - содержит адрес, на который будут отправлены все данные внутри формы

    • method - GET или POST (пока что с методами разбираться не нужно)

  2. Добавить поля ввода и прочие вспомогательные элементы внутрь тега <form>.

  3. Добавить кнопку для выполнения действия (отправки формы, когда все данные были заполнены).

    Кнопки можно дабавить двумя способами:

    <input type="button" value="Button">

    <button>Button</button>

    Button

    В зависимости от назначения кнопки бывают разных типов. Ниже самые основные:

    • Submit - предназанчена для отправки данных на сервер, при ее нажатии происходит перезагрузка страницы

    <input type="submit">

    • Reset - предназначена для очистки введенной в полях формы информации. Если в поле ввода ниже ввести какой-то текст, при нажатии кнопки Reset он будет удален. Все остальные поля в форме также будут очищены.

    <input type="reset">

    Детально о типах кнопок, их атрибутах и способах добавления можно почитать здесь.

Поля ввода внутри формы

Существует несколько основных типов полей ввода. Ниже представлены самые часто используемые из них.

  1. Поле для ввода текста.

    Чтобы создать такое поле, используется тег <input> с атрибутом type="text". Атрибут type указывает какого вида информацию можно будет ввести в данное поле. Другие часто используемые значения атрибута type при создании поля для ввод текста включают password (поле для ввода пароля - введенный текст будет автоматом зашифрован), tel (телефон), number (число, в такое поле нельзя будет ввести текст), email (адрес электроной почты).

    Ниже приведен пример создания формы с разными полями для ввода текста:

    <form action="">
  <label><input type="text">Текст</label>
  <label><input type="password">Пароль</label>
  <label><input type="tel">Телефон</label>
  <label><input type="number">Число</label>
  <label><input type="email">email</label>
</form>

    И вот как это будет выглядеть в браузере:

    ТекстПарольТелефонЧислоemail

    Примечание

    Обратите внимание, что при использовании тега "input" закрывающий тег не ставится.

  2. Поле для ввода многострочного текста.

    По сути это то же самое, что и поле для ввода обычного текста, но в данном поле можно ввести несколько строк (нажав клавишу Enter при ввыоде текста). Для создания используется тег <textarea>. Закрывающий тег обязателен.

    <form action="">
  <textarea></textarea>
</form>

    Вот как будет выглядеть такое поле в браузере:

  3. Флажок.

    Создать один или несколько флажков можно с помощью того же тега input с атрибутом типа checkbox - <input type="checkbox">. Ниже представлен небольшой пример создания нескольких флажков. При создании нескольких флажков пользователь может отметить все из них.

    <form action="">
  <label><input type="checkbox">У меня есть машина</label>
  <label><input type="checkbox">У меня есть мотоцикл</label>
  <label><input type="checkbox">У меня есть велосипед</label>
</form>

    У меня есть машина У меня есть мотоцикл У меня есть велосипед

    Примечание

    Обратите внимание, что тег "input" находится внутри тега "label". "label" - это вспомогательный тег, который позволяет добавить какой-то текст рядом с полем ввода. При использовании "label" вместе с "input" типа "checkbox", галочка будет отмечаться не только при нажатии на сам флаг, но и при нажатии на текст рядом с ним.

  4. Переключатели.

    Переключатели похожи на кнопки флажки за одним исключением - в группе переключателей пользователь может выбрать только какое-то одно значение. Создаются переключатели с помощью <input type="radio">.

    <form action="">
  <label><input name="age" type="radio">До 18 лет</label>
  <label><input name="age" type="radio">18-25 лет</label>
  <label><input name="age" type="radio">26-35 лет</label>
  <label><input name="age" type="radio">Более 35 лет</label>
</form>

    Выберите ваш возраст: До 18 лет 18-25 лет 26-35 лет Более 35 лет

    В данном случае атрибут name у переключателя позволяет объединить несколько из них в одну группу. Если пользователь выбирает какой-то переключатель, все остальные переключатели с таким же атрибутом name будут автоматически выключены.

  5. Выпадающее меню.

    Выпадающее меню позволяет выбарть одну из опций в выпадающем списке. Создать выпадающее меню можно с помощью тега <select>. Внутри данного тега могут быть размещены несколько тегов <option> - каждый из них будет являться одним из элементов выпадающего списка.

    <form action="">
  <select>
    <option>Январь</option>
    <option>Февраль</option>
    <option>Март</option>
    <option>Апрель</option>
    <option>Май</option>
    <option>Июнь</option>
    <option>Июль</option>
    <option>Август</option>
    <option>Сентябрь</option>
    <option>Октябрь</option>
    <option>Ноябрь</option>
    <option>Декабрь</option>
  </select>
<form action="">

    Январь Февраль Март Апрель Май Июнь Июль Август Сентябрь Октябрь Ноябрь Декабрь

  6. Поле для загрузки файла.

    Такое поле создается с помощью <input type="file">. Браузер автоматом создаст кнопку, по нажатию на которую откроется проводник, где можно будет выбрать, какой файл вы хотите загрузить.

    <form action="">
  <input type="file">
</form>>

Как правильно организовать элементы внутри формы?

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

  1. <label> - содержит подписи для формы, включает в себя текст, описывающий поля к которым он относится.

    <label>
  <input type="radio" name="day" value="Friday" checked> Пятница
</label>
<label>
  <input type="radio" name="day" value="Saturday"> Суббота
</label>
<label>
  <input type="radio" name="day" value="Sunday"> Воскресенье
</label>

    Пятница Суббота Воскресенье

  2. <fieldset> - подобно тегу <section> группирует поля формы в отдельные разделы, является блочным элементом.

    <fieldset>
  <label>
    Имя пользователя
    <input type="text" name="username">
  </label>
  <label>
    Пароль
    <input type="text" name="password">
  </label>
</fieldset>

    Имя пользователя Пароль

  3. <legend> - работает исключительно в паре с <fieldset>. Является его заголовком.

    <fieldset>
  <legend>Вход в систему</legend>
  <label>
    Имя пользователя
    <input type="text" name="username">
  </label>
  <label>
    Пароль
    <input type="text" name="password">
  </label>
</fieldset>

    Вход в системуИмя пользователя Пароль

Как задать стили формам?

В примерах выше каждое поле в форме имеет стандартный внешний вид, заданный браузером. Причем в разных браузерах поля ввода будут выглядеть по-разному. Как быть, если нужно изменить поле в соответствии с дизайном страницы? Тут на помощь приходят CSS стили. С их помощью возможно задавать стили практически каждому элементу формы.

В ссылках ниже вы найдете примеры стилизации форм:

PreviousСеммантика в HTML5NextGIT

Last updated