. К нему прилагаются следующие атрибуты.
action
. Адрес скрипта или документа, который обрабатывает данные формы. В качестве значения указывается URL.
method
. Метод передачи данных обработчику. Можно указать GET (по умолчанию) или POST. GET подразумевает передачу данных в виде части URL. Возможно, вы видели в адресах что-то вроде?id=225. Это оно и есть. Метод POST работает по-другому, а потому передаваемые данные от пользователя скрыты. Он более безопасен, позволяет передавать больше информации, в том числе и файлы. Но всё это больше касается программирования, нежели HTML-разметки.
accept-charset
. Устанавливает кодировку.
autocomplete
. Включает (on) или отключает (off) автозаполнение форм, когда браузер сам подсказывает вам, что вводить, основываясь на том, что вы набирали в прошлый раз. Отключать функцию имеет смысл для конфиденциальных форм, чтобы обозреватель ненароком не показал важных данных.
name. Имя формы.
Есть и ещё атрибуты, но используются они крайне редко.
. Интересный тег, с помощью которого можно создать любой элемент ввода, какой именно - задаётся атрибутом type. Строго говоря, этот тег можно использовать и вне формы, но тогда вы не сможете указать адрес обработчика, и элемент страницы будет нефункциональным.
Значение
Описание
Флажки. С их помощью вы можете выбрать сразу несколько вариантов
Кнопка выбора файла
Скрытое поле, в браузере не отображается
Кнопка с картинкой
Поле для ввода пароля. Обычное текстовое поле, но вводимые символы скрываются за звёздочками (*)
Переключатели. Почти флажки, но с их помощью можно выбрать только один из предложенных вариантов
Кнопка сброса данных формы к первоначальным значениям
Кнопка отправки данных на сервер. Обычно вы нажимаете их, чтобы подтвердить ввод - Сохранить, Применить, ОК
Текстовое поле
Множество новых значений появилось в HTML5, но они, к сожалению, пока (июнь 2016) поддерживаются только частично.
autofocus
. Фокус ввода будет по умолчанию устанавливаться на том элементе, для которого указан этот атрибут.
checked
. Установить флажок или радиокнопку по умолчанию.
pattern
. С помощью этого атрибута можно заставить пользователя ввести данные в определённом формате. Например, ввести только одну цифру от 0 до 9 или только буквы латинского алфавита (должно быть знакомо). Пока поле не будет заполнено правильно, данные формы не будут переданы на обработку.
placeholder
. Задаёт текст-подсказку.
. Контейнер, с помощью которого создаётся список. Это может быть раскрывающийся список либо список с одним или множественным выбором. За элементы списка отвечают теги
.
size
. Главное свойство, которое указывает количество отображаемых строк списка. Например, если значение равно 1, то список получается раскрывающимся, в противном случае получается либо список, все элементы которого сразу видны, либо список, по элементам которого можно перемещаться с помощью полосы прокрутки.
multiple
. Атрибут без значений. Укажите его, чтобы получить список со множественным выбором.
required
. Делает список обязательным для выбора, то есть пока пользователь не укажет в нём значение, форма не отправится. Часто так поступают со списком Пол в регистрационных формах.
. Тег элемента списка, используемый внутри
.
value
. Значение пункта списка для обработки скриптом.
selected
. Пункт с этим атрибутом по умолчанию будет выделен, как будто пользователь выбрал именно его.
. Контейнер позволяет группировать элементы списка
.
disabled
. Делает группу списка недоступной для выбора (при этом она отображается другим цветом).
label
. Текст заголовка группы.
Пример формы
Теперь, когда все теги известны, создадим небольшую форму авторизации, данные которой обрабатывает файл script.php
, находящийся в папке с HTML-страницей.
Код будет таким.
Форма
Разберём некоторые его части.
- создаём форму, обрабатываемую файлом script.php. Данные передаются методом GET.
<
br
>
- тег перехода на следующую строку.
<
input
name
="
login
"
type
="
text
"
size
="25"
maxlength
="30"
value
="Михаил">
- создаём текстовое поле с именем login шириной в 25 символов. В качестве значения по умолчанию указываем Михаил, чтобы пользователю было понятно, что и как вводить.
<
input
name
="
pass
"
type
="
password
"
size
="25"
maxlength
="30"
value
="">
- создаём поле ввода пароля (символы замещаются звёздочками). Ширина поля - 25, максимальная длина пароля - 30 символов.
<
select
><
option
value
="
c
1">Гость
option
><
option
value
="
c
2">Администратор
option
>
select
>
- создаём простой раскрывающийся список из двух пунктов.
<
input
name
="
save
"
type
="
checkbox
"
value
="
yes
"> Запомнить
- добавляем флажок и пишем поясняющий текст.
<
br
><
input
type
="
submit
"
name
="
enter
"
value
="Вход">
- создаём кнопку, нажатие которой запускает процесс обработки данных.
- закрываем форму.
В браузере веб-форма будет выглядеть, как на рисунке ниже.
Её можно заполнять, но чтобы она начала работать, необходимо написать код и сохранить его в файле script.php
рядом с HTML-страницей.
26.02.2016
Всем привет!
Продолжаем изучать основы HTML. В этом уроке мы разберем, что такое
HTML
форма
и как она создается.
Если вы обратили внимание, сегодня ни один веб сайт не обходится без форм. Эти формы могут быть различные, например, форма обратной связи, форма для подачи заказа, форма регистрации и входа на сайт, форма отправки комментариев, отзывов, форма поиска и многие др.
Я думаю сейчас нужно вам показать примеры, как выглядят HTML формы визуально.
○ Форма поиска:
○ Форма входа на сайт:
○ Форма обратной связи:
○ Форма для подачи заказа:
Я думаю, вы уловили саму суть создания HTML форм. Итак, в сегодняшнем уроке я расскажу, как создать простую
HTML
форму
и какие теги можно использовать для создания различных полей формы.
Вот с этого момента прошу вашего особого внимания, потому как тема сложна и важная.
HTML
форма
– это поле, в которое пользователь вводит некую информацию. Но, эта информация должна каким-то образом еще и отправляться. Своего рода, HTML форма – это как мотоцикл без бензина, вроде все есть, но почему-то не едет. Так вот, чтобы форма заработала и отправляла информацию, которую ввел пользователь, нужно создать обработчик форм на языке . Но вы с обработчиком не заморачивайтесь, так как вы сейчас проходите только курс для начинающих. Мы еще разберем тему обработчика для форм в разделе «PHP». Так, что-то я отвлекся от основной темы.
Учимся создавать HTML формы
Любая HTML форма будет состоять из основного тега
. Внутри тега
вставляются остальные элементы формы, которые будут отображаться на веб странице.
Форма должна размещаться между тегами
.
Для тега
Элементы формы
○ Тег
input
Тег
input
– эта часть элемента поля формы предназначена для ввода небольшого текста, цифр.
Для тега
закрывающий тег не нужен
.
*атрибуты для тега <
input
>
name
- имя элемента
size
- размер поля
required
– поле обязательное для заполнения
autofocus
– указатель мышки при загрузке веб-страницы сразу будет на поле
maxlength
– этим атрибутом можно указать максимальное количество ввода символов в поле. По умолчанию, без атрибута maxlength, в поле можно будет вводить неограниченное количество символов
placeholder
– подсказка для пользователя, которая будет отображаться прямо внутри формы поля (раньше использовали атрибут value).
type
- тип элемента
Пример заполнений:
Тип элемента type
Текстовое поле
○ Текстовое поле «text»
:
Результат:
○ Поле для пароля «password»
:
Результат:
○ Поле для email «email»
:
Результат:
○ Кнопка для выбора файла с компьютера «file»
:
Результат:
○ Поле для ввода телефона «tel»
:
Результат:
○ Поле поиска «search»
:
Результат:
○ Поле выбора цвета «color»
:
Результат:
○ Поле для ввода и выбора цифр «number»
:
min
– минимальное значение
max
– максимальное значение
step
– шаг.
Результат:
○ Поле для выбора даты «date»
:
Результат:
○ Поле для выбора даты и местного времени в формате (05.05.2015 00:00)
:
Результат:
○ Выводить выпадающий календарь.
Поле для выбора года и месяца в формате (Июль 2015 г.).:
Результат:
○ Поле для выбора времени «time»
:
Результат:
○ Ползунок «range»
:
Результат:
○ Флажок (checkbox)
:
checked
– этот атрибут указывает, какой флажок должен быть включен по умолчанию
Результат:
○ Радиопереключатель «radio»
:
checked
– этот атрибут указывает, какой радиопереключатель должен быть включен по умолчанию
Результат:
Кнопки
○ Кнопка «button»
:
value
- надпись на кнопке
Результат:
○ Кнопка для отправки данных «submit»
:
value
- надпись на кнопке
Результат:
○ Кнопка сброса «reset»
:
value
- надпись на кнопке
Результат:
○ Кнопка картинкой
:
Результат:
○ Скрытое поле «hidden»
○ Тег select
Тег
select
– это часть элемента формы, предназначен для ввода выпадающего списка.
Для тега
закрывающий тег обязателен
.
Тег
является каркасом для выпадающего списка.
Чтобы создавать пункты выпадающего списка существует тег
.
Для тега
закрывающий тег обязателен
.
*атрибуты для тега
и
Name
– это имя всего списка. Задается только для тега
.
multiple
– для множественного выбора, только при выборе нужно удерживать клавишу «CTRL». Задается только для тега
.
Value
– задается для каждого пункта списка для тега
.
disabled
- блокирует выбор элемента в выпадающем списке. Задается только для тега
.
Не срочная
Срочная
Курьером
Результат:
Не срочная Срочная Курьером
Или вот так:
Не срочная
Срочная
Курьером
Результат:
Не срочная Срочная Курьером
Теперь заблокируем из списка «Срочная
» атрибутом «disabled
»:
Не срочная
Срочная
Курьером
Результат:
Не срочная Срочная Курьером
○ выпадающий список по группам
:
Для создания списка группы используется тег
Option
Textarea
Label
Fieldset
Legend
Результат:
Option Textarea
Label Fieldset Legend
○ для множественного выбора
:
Option
Textarea
Label
Fieldset
Legend
В теге
используется атрибут «multiple
».
Результат:
Option Textarea Label Fieldset Legend
Многострочное текстовое поле
○ Тег textarea
Тег
textarea
– это часть элемента поля формы, предназначен для ввода большого текста, цифр. закрывающий тег обязателен
.
*атрибуты для тега <
textarea
>
name
– имя поля
cols
– ширина поля
rows
– высота поля
placeholder
– подсказка для пользователя, которая будет отображаться прямо внутри формы поля.
Результат:
Или вот так:
Результат:
Введите текст
Или вот так:
Результат:
Оформление «Рамка» (fieldset)
○ Тег fieldset
Тег fieldset
– с помощью этого тега можно нарисовать рамку вокруг объекта.Закрывающий тег обязателен
.
Дополнительные теги
Тег legend
– указывает на заголовок. Закрывающий тег обязателен
.
Заголовок
Текст внутри рамки.
Результат:
Это все, что я хотел рассказать по теме «HTML-формы». Сейчас подведем итог и на практике попробуем создать простую форму, используя уже те знания, которые вы почерпнули из этой статьи.
Вот моя форма:
Результат:
Предыдущая запись
Следующая запись