Всем привет!
Продолжаем изучать основы 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
Многострочное текстовое поле
○ Тег textarea
Тег
textarea
– это часть элемента поля формы, предназначен для ввода большого текста, цифр. закрывающий тег обязателен
.
*атрибуты для тега <
textarea
>
name
– имя поля
cols
– ширина поля
rows
– высота поля
placeholder
– подсказка для пользователя, которая будет отображаться прямо внутри формы поля.
Результат:
Или вот так:
Результат:
Введите текст
Или вот так:
Результат:
Оформление «Рамка» (fieldset)
○ Тег fieldset
Тег fieldset
– с помощью этого тега можно нарисовать рамку вокруг объекта. Закрывающий тег обязателен
.
Дополнительные теги
Результат:
Это все, что я хотел рассказать по теме «HTML-формы». Сейчас подведем итог и на практике попробуем создать простую форму, используя уже те знания, которые вы почерпнули из этой статьи.
Вот моя форма:
Результат:
Предыдущая запись Следующая запись
В процессе навигации по сайтам пользователь, в основном, только щёлкает по ссылкам
чтобы перемещаться по веб-страницам.
Но понятно, что пользователю иногда требуется обеспечить собственные поля ввода
. Эти виды взаимодействия включают в себя:
регистрацию и вход на сайтах;
ввод личной информации (имя, адрес, данные кредитной карты и др.);
фильтрацию контента (с помощью выпадающих списков, флажков и др.);
выполнение поиска;
загрузку файлов.
Чтобы приспособиться к этим потребностям, HTML предлагает интерактивные элементы управления
формы:
текстовые поля (для одной или нескольких строк);
переключатели;
флажки;
выпадающие списки;
виджеты для загрузки;
кнопки отправки.
Эти элементы управления задействуют разные теги
HTML, но большинство из них использует тег
. Поскольку это самозакрывающий элемент, тип поля определяется его атрибутом type
: