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