Создание формы в html шаблон. Формы в HTML. Пример создания формы регистрации
Формы предназначены для пересылки данных от пользователя к веб-серверу. Формы в HTML могут состоять из текстовых полей и текстовых областей, флажков и переключателей, а также раскрывающихся списков. Все это — элементы формы. Каждый элемент служит для того, чтобы передать какое-либо значение сайту.
По своей сути HTML-форма — это веб-страница на которой вы видите области для ввода своей информации. После того, как вы заполните форму и нажмете кнопку отправить, информация из формы упаковывается и отсылается веб-серверу для обработки серверным сценарием (файлом-обработчиком). После обработки к вам возвращается в качестве ответа другая веб-страница. Следующий рисунок наглядно демонстрирует как работает форма:
Нет ничего сложного в создании HTML-форм. Самый простой способ получить представление о формах — это разобрать небольшой HTML-код, а затем посмотреть, как он работает. В следующем примере показан синтаксис создания простой HTML-формы:
Пример: Простая HTML-форма
- Попробуй сам »
Моя первая форма:
Имя:
Фамилия:
Элемент
Формы вставляются на веб-страницы посредством элемента
. Он представляет собой контейнер для всего содержимого формы, включая такие элементы, как текстовые поля и кнопки, а также любые другие теги языка HTML. Однако он не может содержать в себе другой элемент
.
Для отправки формы на сервер используется кнопка «Submit», того же результат получится, если нажать клавишу «Enter» в пределах формы. Если кнопка «Submit» отсутствует в форме, клавиша «Enter» может быть использована для отправки.
Большинство атрибутов элемента
влияют на обработку формы, а не на ее дизайн. Наиболее распространёнными из которых являются action
и method
. Атрибут action
содержит URL, на который информация в форме будет отправлена для обработки сервером. Атрибут method
является методом HTTP, который должны использовать браузеры для отправки данных формы.
Элемент
Практически все поля для формы создается с помощью элемента (от англ. input — ввод). Внешний вид элемента меняются в зависимости от значения его атрибута type :
Вот некоторые значения атрибута type :
Ввод текста и пароля
Одним из самых простых типов элементов формы является текстовое поле, предназначенное для ввода текста из одной строки. Данный тип ввода текста установлен по умолчанию, а следовательно, именно однострочное поле отобразится, если вы забудете указать атрибут type . Для добавления однострочного поля ввода текста в форму следует внутри элемента прописать атрибут type со значением text:
Поле ввода пароля является разновидностью обычного текстового поля. Оно поддерживает те же атрибуты, что и однострочное текстовое поле. Атрибут name устанавливает имя поля ввода пароля, которое будет отправлено на сервер вместе с паролем, введенным пользователем. Чтобы создать поле для ввода пароля, необходимо задать значение password атрибуту type (password (англ.) — пароль):
Пример создания формы с полем для ввода пароля:
Пример: Поле ввода пароля
- Попробуй сам »
Ваш логин:
Пароль:
Вместе с этим атрибутом можно использовать атрибут maxlenght
, значение которого определяет максимальное количество символов, которые можно ввести в данную строку. Можно также задать длину поля ввода, используя атрибут size
. По умолчанию, в большинстве браузеров ширина текстового поля ограничена 20 символами. Для управления шириной элементов новых форм, вместо атрибута size
, рекомендуется использовать средства каскадных таблиц стилей (CSS).
Атрибут value
задает значение, которое по умолчанию отображается в текстовом поле в момент загрузки формы. Введя в поле значение по умолчанию, можно пояснить пользователю, какие именно данные и в каком формате вы хотите, чтобы пользователь сюда занес. Это как образец, ведь пользователю гораздо удобнее заполнять форму, видя перед собой пример.
Переключатели (radio)
Элемент типа radio создает переключатели, которые используют принцип логического «ИЛИ», позволяя выбрать только одно из нескольких значений: если вы выбираете одно положение, то все остальные становятся неактивными. Основной синтаксис элемента-переключателя:
Атрибут name
для переключателей обязателен и играет важную роль в объединении нескольких элементов-переключателей в группу. Для объединения переключателей в группу необходимо установить одинаковое значение атрибута name
и разное значение атрибута value
. Атрибут vаluе
устанавливает значение выбранного переключателя, которое будет отправлено серверу. Значение каждого элемента-переключателя должно быть уникальным внутри группы, для того, чтобы сервер знал, какой вариант ответа выбрал пользователь.
Наличие атрибута checked
(с англ. — установлен) у элемента-переключателя указывает на то, какой из предлагаемых вариантов должен быть выбран по умолчанию при загрузке страницы, если это необходимо. Данный атрибут может быть установлен только у одного элемента-переключателя из группы:
- Попробуй сам »
Сколько Вам лет?
- младше 18
- от 18 до 24
- от 25 до 35
- более 35
Атрибут action.
Главным для элемента является атрибут action , который указывает обработчик данных для формы. Обработчик данных — это файл, описывающий, что нужно делать с данными формы. В качестве результата этой обработки выдается новая HTML-страница, которая возвращается браузеру. Другими словами в атрибуте action указывается URL-путь к файлу-обработчику на сервере (иногда называемого страницей сценария) для обработки формы. Синтаксис следующий:
Файл обработки находится на сервере mytestserver.com
в папке namefolder
и название серверного сценария, который будет обрабатывать данные — obrabotchik.php
. Именно ему и будут переданы все данные, введенные вами в форму на веб-странице. Расширение.php указывает на то, что указанная форма обрабатывается сценарием написанном на языке PHР. Сам обработчик может быть написан на другом языке, например это может быть язык сценариев Python, Ruby и др.
Желательно всегда задавать значение атрибута action
. Если форма должна передать значения на ту же страницу, где она расположена в качестве значения атрибута action укажите пустую строку: action="".
Атрибут method
Атрибут method задает то, каким образом информация должна быть передана на сервер. Выбор метода отправки формы зависит от данных, которые необходимо отправить вместе с ней. Здесь основную роль играет объем этих данных. Наиболее популярными являются два метода передачи исходных данных вашей формы из браузера на сервер: GET и POST . Метод устанавливается любой на выбор, и если вы его не указали, по умолчанию будет использоваться GET . Рассмотрим применение каждого из них.
Метод POST
Метод POST упаковывает данные формы и отсылает их серверу незаметно для пользователя, поскольку данные содержатся в теле сообщения. Веб-браузер, при использовании метода POST отправляет на сервер запрос, состоящий из специальных заголовков за которыми следуют данные формы. Так как содержимое этого запроса доступно только серверу, метод POST применяется для передачи конфиденциальных данных, таких как пароли, реквизиты банковских карт и другая персональная информация пользователей. Метод POST также подходит для отправки больших объемов информации, так как в отличие от метода GET , у него нет ограничений по количеству передаваемых символов.
Метод GET
Как вы уже знаете основная работа браузера — это получать веб-страницы от сервера. Так вот, когда вы используете метод GET , ваш браузер просто получает веб-страницу, как делает это всегда. Метод GET также упаковывает данные формы, но, прежде чем отправить запрос серверу, присоединяет их в конец URL-адреса. Чтобы понять, как работает метод GET , давайте посмотрим его в действии. Откройте в блокноте (например Notepad++) первый пример из этого урока (Пример: Простая HTML-форма) и внесите в HTML-код небольшое изменение:
Атрибуты
Устанавливает кодировку, в которой сервер может принимать и обрабатывать данные. Адрес программы или документа, который обрабатывает данные формы. Включает автозаполнение полей формы. Способ кодирования данных формы. Метод протокола HTTP. Имя формы. Отменяет встроенную проверку данных формы на корректность ввода. Имя окна или фрейма, куда обработчик будет загружать возвращаемый результат.Закрывающий тег
Обязателен.
HTML5 IE Cr Op Sa Fx
Результат данного примера показан на рис. 1.
Рис. 1. Вид элементов формы в окне браузера
Весь интерактив - поля ввода, флажки, переключатели, раскрывающиеся списки, кнопки - это веб-формы и их элементы. В форме вы оставляете комментарий, с помощью формы регистрируетесь, через форму авторизуетесь, пользуетесь формой поиска, голосуете в опросах, загружаете файлы, оформляете подписки - всё это вы делаете с помощью веб-форм.
Внутреннее устройство
Фактически форма состоит из двух частей: визуального оформления и скрипта, который обрабатывает введённые данные. Чтобы написать скрипт, нужно владеть одним из языков программирования. Мы здесь их изучением не занимаемся, поэтому будем разбирать HTML-составляющую - учиться создавать интерфейс формы, предполагая, что где-то у нас уже есть обрабатывающий её скрипт.
HTML-форма создаётся с помощью парного тега , внутри которого располагаются теги её элементов.
Теги
Перед тем, как показывать примеры, пройдёмся по тегам.
. Создаёт форму. Если сравнивать форму с таблицей, то тег выполняет ту же роль, что и тег Есть и ещё атрибуты, но используются они крайне редко.
. Интересный тег, с помощью которого можно создать любой элемент ввода, какой именно - задаётся атрибутом type. Строго говоря, этот тег можно использовать и вне формы, но тогда вы не сможете указать адрес обработчика, и элемент страницы будет нефункциональным. Значение
Описание
Флажки. С их помощью вы можете выбрать сразу несколько вариантов Кнопка выбора файла Скрытое поле, в браузере не отображается Кнопка с картинкой Поле для ввода пароля. Обычное текстовое поле, но вводимые символы скрываются за звёздочками (*) Переключатели. Почти флажки, но с их помощью можно выбрать только один из предложенных вариантов Кнопка сброса данных формы к первоначальным значениям Кнопка отправки данных на сервер. Обычно вы нажимаете их, чтобы подтвердить ввод - Сохранить, Применить, ОК
Текстовое поле Множество новых значений появилось в HTML5, но они, к сожалению, пока (июнь 2016) поддерживаются только частично. Теперь, когда все теги известны, создадим небольшую форму авторизации, данные которой обрабатывает файл 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-страницей. Внешний вид HTML-формы может быть значительно улучшена с помощью CSS: Используйте width свойство, чтобы определить ширину поля ввода: Приведенный выше пример относится ко всем
элементов. Если вы хотите, чтобы стиль определенный тип входного сигнала, можно использовать атрибут селекторы: Используйте padding свойство, чтобы добавить пространство внутри текстового поля. Совет:
Если у вас есть много входов после того, как друг с другом, вы также можете добавить margin , чтобы добавить больше пространства за их пределами: Используйте border собственности, чтобы изменить размер и цвет границы, а также использовать border-radius свойство, чтобы добавить закругленные углы: Если вы хотите только нижнюю границу, используйте border-bottom свойство: Используйте background-color свойство, чтобы добавить цвет фона на вход, и color свойство изменять цвет текста: По умолчанию некоторые браузеры будут добавлять синий контур вокруг входа, когда он получает фокус (нажал на). Вы можете удалить это поведение путем добавления outline: none; на вход. Используйте:focus селектор, чтобы сделать что - то с полем ввода, когда он получает фокус: Если вы хотите иконку внутри входа используйте background-image свойства и поместить его с background-position собственности. Также обратите внимание, что мы добавим большой левый отступ резервировать пространство иконы: input
{ В этом примере мы используем CSS3 transition свойство анимировать ширину поля поиска, когда он получает фокус. Вы узнаете больше о transition собственности позже, в нашем Я абсолютно уверен, что, бегая по Интернету, Вы ни раз встречали различные формы, например, форму регистрации, форму входа в систему, форму обратной связи и многие-многие другие HTML формы
. Собственно, форма состоит из различных элементов ввода: текстовых полей, текстовых областей, радио-кнопок, переключателей, кнопок и так далее. И в этой статье Вы научитесь создавать абсолютно любые . Сначала создайте простейшую HTML-страницу
, в которую добавьте контейнер (тег А теперь займёмся формой. Форма начинается с тега , соответственно, заканчивается закрывающим тегом
. У этого тега есть несколько атрибутов, которые очень желательно заполнять. Но для начала давайте создадим простейшую форму с атрибутами тега , чтобы Вам было понятнее назначение каждого из них: Здесь у нас начинается описание формы, у которой есть следующие атрибуты: 1) Атрибут "name
". Значение этого атрибута означает имя HTML формы
. Встаёт вопрос, зачем это надо? Ответ очень простой: если Вы будете использовать не одну форму, а несколько, то чтобы отличить одну форму от другой, необходимо задавать различные имена. А сами имена нужны для того, чтобы обращаться к формам, например, через JavaScript
. Я Вам открою маленький секрет, который я Вам не советую использовать, но честности ради, скажу о нём. На самом-то деле, формы можно легко различать и без имён, поэтому, вообще говоря, имя формы совсем необязательно. Но я НАСТОЯТЕЛЬНО
рекомендую давать формам имена, ведь Вам самим так будет проще понять, за что каждая из форм отвечает. 2) Атрибут "action
". Значение этого атрибута отвечает за путь к файлу скрипта, который будет обрабатывать форму. То есть мало ввести данные в форму, их же ведь ещё нужно соответствующим образом обработать, и вот как раз путь к этому файлу-обработчику
и находится в значении атрибута "action
". 3) Атрибут "method
". У него может быть одно из двух очень популярных значения: "post
" и "get
". Этот атрибут определяет способ отправки. Не буду вдаваться в подробности, просто скажу, что первый способ является скрытой отправкой данных, а второй открытой. Чтобы стало ещё понятнее, то давайте рассмотрим два адреса перехода: а) http://mysite.ru/scipt/request.php
б) http://mysite.ru/script/request.php?a=7&b=Michael
В первом случае, пользователь не видит, что отправляет (метод "post
"), а во втором он реально видит имена переменных и их значения (метод "get
"). Вы, в конце статьи, можете попытаться отправить форму с помощью двух разных методов и убедиться в их различии. Но пока что скажу, что ГОРАЗДО
чаще используют метод "post
", то есть скрытую отправку. Это было описание самой формы, а теперь же можно заняться добавлением элементов в форму. Первое, что мы добавим - это текстовое поле. Добавляется текстовое поле с помощью тега
, а точнее с помощью атрибута этого тега "type
" со значением "text
". Также перед созданием текстового поля рекомендуется написать, что это за поле, например, "Ваше имя
". Внутри тега напишите такую строчку: Ваше имя: Опять же, давайте разберём атрибуты: 1) Атрибут "type
" отвечает за тип элемента ввода. В данном случае, мы указали, что это обычное текстовое поле. В следующих элементах мы будем менять значение этого атрибута. 2) Атрибут "name
" отвечает за имя элемента. Здесь мы указали, что имя данного поля firstname
. 3) Атрибут "value
" отвечает за значение этого поля по умолчанию. Как говорится, лучше один раз увидеть, чем сто раз услышать, поэтому лучше Вы наберите (причём, именно наберите, а не скопируйте!
) этот текст в редакторе, а потом посмотрите результат в браузере. Теперь создадим ещё одно похожее поле, но только не для ввода обычных символов, а для ввода пароля. То есть должно быть всё то же самое, но только текст должен быть скрыт за звёздочками
. Поэтому, перейдя на следующую строку (тег Ваш пароль: Как видите, теперь значением атрибута "type"
является "password
". Остальные атрибуты те же, что и для обычного текстового поля. Следующий элемент - это выпадающий список. Создаётся он чуть посложнее, так как тут необходимо не только объявить создание выпадающего списка, но ещё и добавить элементы в этот список. Напишем, перейдя на следующую строку (далее, упоминать об этом не буду) следующий HTML-код
. Выберите вариант: Тег означает начало выпадающего списка. Заканчивается список тегом
. Атрибут "name
" ясен, ибо уже объяснял его несколько раз. Элементы списка создаются с помощью тега . Значение атрибута "value
" означает, какой значение будет у переменной choice
(например, в JavaScript
), то есть либо choice = 1
, либо choice = 2
, либо choice = 3
. Сразу после окончания описания тега ставится то, что увидит пользователь в выпадающем списке. Опять же, лучше посмотрите в браузере, и Вам всё сразу станет понятно. Теперь добавим текстовую область, используя тег Здесь мы с Вами создаём текстовую область высотой в 10
строк (значение атрибута "rows
") и шириной в 15
символов (значение атрибута "cols
"). Внутри этого парного тега указывается текст в текстовой области по умолчанию. Собственно, здесь больше нечего сказать. Двигаемся дальше. Следующий элемент - это радио-кнопка. Радио-кнопка - это набор таких "кружочков
", из которых можно выбрать только один. Создаются радио-кнопки с помощью HTML-тега
, а, точнее, с помощью значения "radio
" атрибута "type
". Напишем такой HTML-код
: Выберите что-нибудь одно: Тут я остановлюсь на атрибуте "name
", потому что помимо задания имени у него есть ещё одна очень важная особенность. Если Вы НЕ
сделаете одинаковыми имена у этих трёх радио-кнопок, то они станут независимыми, а, следовательно, можно будет выбрать сразу несколько вариантов. Чтобы в этом убедиться, поменяйте имена, а потом попытайтесь выбрать сразу несколько вариантов, и Вы сразу убедитесь в моих словах. Поэтому одна группа радиокнопок должна иметь одно и то же значение атрибута "name
". Атрибут "value
" означает значение переменной "choiceradio
" (опять же, например, в JavaScript
). Сразу после описания тега
идёт текст, который увидит пользователь рядом с соответствующей радио-кнопкой. Ещё одним элементом формы являются переключатели (checkbox
). Создаются они опять же с помощью тега
. Напишем следующие строчки: Вы согласны с нашими правилами: Я думаю, что здесь всё прозрачно, поэтому объяснять не буду. Советую лишь просто посмотреть, как это выглядит, в браузере. И скажу, что если флажок будет стоять, то значение переменной "terms
" будет "yes
", если не будет стоять, то значение этой переменной будет "", то есть пустой строкой. Ещё одним элементом является поле для выбора файла. Наверняка, Вы когда-нибудь загружали файлы на сервер и Вам часто приходилось использовать для этого поле вставки имени файла. Вот такое поле создаётся с помощью уже надоевшего тега
. Напишем так: Выберите файл для загрузки:
. К нему прилагаются следующие атрибуты.
Пример формы
Стилизация поля ввода
проложенные Входы
Граничит Входы
Цветные входы
Входы Фокусированные
Ввод с помощью значка / изображения
пример
background-color: white;
background-image: url("searchicon.png");
background-position: 10px 10px;
background-repeat:
no-repeat;
padding-left: 40px;
}Анимированные Поиск Входной
), напишем такой код:
Вариант 1
Вариант 2
Вариант 3
Предыдущая статья: Как разделить жесткий диск на разделы Как разбить на разделы в биосе
Следующая статья: Перезаправляемые картриджи для струйных принтеров CANON, EPSON, HP Цветной лазерный мфу с перезаправляемыми картриджами