Всем доброго времени суток. На связи Алексей Гулынин. В прошлой статье мы разобрали проблему с кодировкой на сайте
. В данной статье я бы хотел рассказать о создании форм в HTML
. Мне кажется, что это самая важная тема в HTML. Мне вспоминаются слова моей учительницы по английскому языку. Она говорила, если вы знаете значения всех словоформ глагола get, то вы сможете объясниться на английском только с их помощью. То же самое и с формами в HTML
. Если вы знаете формы — вы уже неплохо знаете HTML. Сейчас наверное уже практически и нет сайтов, на которых отсутствуют формы 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
Многострочное текстовое поле
○ Тег textarea
Тег
textarea
– это часть элемента поля формы, предназначен для ввода большого текста, цифр. закрывающий тег обязателен
.
*атрибуты для тега <
textarea
>
name
– имя поля
cols
– ширина поля
rows
– высота поля
placeholder
– подсказка для пользователя, которая будет отображаться прямо внутри формы поля.
Результат:
Или вот так:
Результат:
Введите текст
Или вот так:
Результат:
Оформление «Рамка» (fieldset)
○ Тег fieldset
Тег fieldset
– с помощью этого тега можно нарисовать рамку вокруг объекта. Закрывающий тег обязателен
.
Дополнительные теги
Результат:
Это все, что я хотел рассказать по теме «HTML-формы». Сейчас подведем итог и на практике попробуем создать простую форму, используя уже те знания, которые вы почерпнули из этой статьи.
Вот моя форма:
Результат:
Предыдущая запись Следующая запись
Описание
HTML тег
HTML форма
- это инструмент, с помощью которого HTML-документ может послать
некоторую информацию в некоторую заранее определенную точку внешнего мира,
где информация будет некоторым образом обработана.
Рассказать о формах в Самоучителе, посвященному HTML, достаточно трудно. Причина
очень простая: создать форму HTML гораздо проще, чем ту "точку внешнего
мира", в которую HTML форма будет посылать информацию. В качестве такой
"точки" в большинстве случаев выступает программа, написанная
на Перл или Си.
Программы, обрабатывающие данные, переданные формами, часто
называют CGI-скриптами. Сокращение CGI (Common Gateways Interface) означает
"общепринятый интерфейс шлюзов". Написание CGI-скриптов в большинстве
случаев требует хорошего знания соответствующего языка программирования
и возможностей операционной системы Unix.
В настоящее время определенное распространение получил язык PHP/FI,
инструкции которого можно встраивать прямо в HTML-документы (документы
при этом сохраняются в виде файлов с расширением *.pht или
*.php).
HTML формы передают информацию программам-обработчикам в виде пар
[имя переменной]=[значение переменной] . Имена переменных следует
задавать латинскими буквами. Значения переменных воспринимаются обработчиками
как строки, даже если они содержат только цифры.
Как устроена HTML форма
Форма открывается тегом
. HTML-документ может содержать в себе несколько форм,
однако формы не должны находиться одна внутри другой. HTML-текст, включая
теги, может размещаться внутри форм без ограничений.