60 подписчиков

2.2.7 Формы: описание элементов

28 января 202328 янв 2023

3 мин

Оглавление

Есть основные тэги, присущие формам.
1. Тэг form
2. Тэг select

На фото - не демонстрация йетти и не старички-лесовички вышли в поддержку экологии. Это форма военослужащих Ирана.

Поговорим лучше о формах в HTML.

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

Есть основные тэги, присущие формам.

<form> - тэг, открывающий форму
<select> - формирует в браузере выпадающий список
<textarea> - многострочное текстовое поле
<input> - самый часто встречающийся тэг в формах: это и вводимый текст (в одну строку), и загрузка файлов, и "скрытые" данные
<button> - кнопка, отправляющая данные

По клику на элемент button, браузер собирает данные со всех элементов input и select, имеющих у себя аттрибут name, находящися внутри формы и отправляет на сервер.

Еще раз акцентирую: отправятся только те данные, которые находятся между <form> и </form> и имеют имя!

Это важная тема, поэтому маленькой она вряд ли получится. Разделю на две части: описание и практика. Приступим.

1. Тэг form

Тэг имеет два основных аттрибута:

method. Может принимать два варианта начения: method="GET" и method="POST". Первый метод отправит данные через адресную строку браузера. Второй метод не поменяет адрес в браузере, но отправит данные "в фоне". Метод GET имеет ограничение на длину: максимум 2048 символов. Метод POST, как правило, имеет ограничение в 8 мегабайт (настраивается на стороне сервера - можно в принципе и увеличить, но смысла нет).
action. Этот аттрибут опционален, то есть указание его не обязательно. Если его не указывать, то страница вызовет сама себя. Иначе данные формы будут отправлены на страницу по указанному web-адресу.

2. Тэг select

Как и сказал, этот тэг формирует стандартный выпадающий список. Содержимое тэга всегда состоит из тэгов <option></option>. Тэгов может быть сколько угодно. Каждый тэг option - строка в выпадающем списке. Кроме того, строки в выпадающем списке можно группировать.

3. Тэг textarea

Тэг формирует многострочное поле для ввода текста. Длина текста может быть искуственно ограниченной, но по умолчанию оно ограничено только названными выше 8 мегабайтами, доступными для передачи методом POST. С этим связано одно ограничение: если вы используете это поле, то обязательно ставьте method="POST" у формы. С методом GET вы можете получить ситуацию, когда на сервер бует приходить "обрезанный" пакет данных.

Еще один момент у поля textarea связан с работой UI (User Interface - интерфейс пользователя): по умолчанию интерфейс браузера даёт возможность пользователю менять его размер. В правом нижнем углу поля небольшая иконка, потянув за которую, можно изменять размер поля, а это сломает вам всю вёрстку. Рекомендую сразу отключать его на уровне CSS, добавив правило.

textarea {resize: none;}

4. Тэг input

Самый "вариабельный" тэг, отображение которого меняется в зависимости от значения аттрибута type:

4.1 type="text" - обычное поле ввода данных. Добавлю заодно аттрибут placeholder: это строка приглашения

4.2 type="checkbox" - "галочка" в форме

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

4.4 type="file" - выбор и загрузка файла. Клик на пояивуюся кнопку "Choose File" откроет диалоговое окно выбора файла.

4.5 type="color" - выбор цвета с палитры. Формирует кнопку, клик на которую откроет модальное окно выбора цвета.

4.6 type="date" - ввод даты со встренным календарем. Клик на иконку справа в поле, открывает модальное окно с календарём. Язык календаря будет зависеть от основного языка системы: у меня на скрине January - по английски.

4.7 type="hidden" - скрытое поле для передачи внутренней информации (к примеру можно через это поле добавить какой-либо идентификатор, который при отправке формы на сервер будет отправлен вместе с основными данными)

Фактически, я указал основные тэги. Список несколько больше, о чем можно прочитать в документации по HTML.

5. Тэг button

Как говорил выше, тэг формирует кнопку отправки формы. При этом, есть второй вариант формирования такой же кнопки отправки:

<input type="submit">

Как видно, с точки зрения отображения, разницы нет

Еще немного о формах.

Есть такой любопытный тэг - <label></label>. Он создаёт подпись к полю формы. Клик на текст внутри этого тэга, выставляет фокус на связанное с ним поле.