HTML-формы. Создания форм в HTML
Описание
HTML тег
Рассматривая основыные теги HTML мы не можем не затронуть такой важный элемент как формы. Часто на web-страницах необходима обратная связь. Например, заполнение анкеты на сайте, регистрация, авторизация, комментарии и т.д. Во всех этих случаях пользователь заполняет специальные области (поля формы) на странице, после чего происходит отправка данных на сервер. Для создания обратной связи используются формы. Форма это фрагмент HTML документа предназначенный для ввода информации пользователем.
На рисунке представлена форма регистрации студента на сайте образовательного учреждения.
Для создания формы используется контейнер
с атрибутом action, в котором указывается страница на сервере, которая будет обрабатывать данные переданные формой.Структура простейшей формы:
элементы форм…
В каждой форме необходимо также наличие кнопки submit, предназначенной для отправки данных после заполнения формы.
Структура кнопки:
Итак, для записи практически всех элементов форм используется тэг с атрибутом type. Для создания кнопки, которая сбрасывать все данные с форм используется следующая структура:
Для создания текстового поля (textfield) существует параметр text. При этом используются параметры: name – имя поля; size – для поля в симолах; maxlength – максимально возможное количество символов в поле; value – информация, отображаемая в форме по умолчанию
Пример записи формы с двумя текстовыми полями:
Результат работы формы представлен на рисунке.
В случае, если в текстовое поле необходимо ввести большое количество информации, например, комментарий используется форма текстовой области (textarea),которая создается при помощи тэга
К вышеуказанному коду добавим поле текстовой области:
Комментарий:
Результат работы кода с текстовой областью представлен на рисунке.
Следующим элементом форм являются списки, позволяющие сделать выбор из представленного множества значений. Создать форму списка позволяют тэги
Структура записи списка:
Для того, чтобы элемент был выделен при загрузке страницы необходимо в тэге
Аналогичным способом выбора являются элементы формы флажок (checkbox) и радиокнопка (radiobutton). Отличие этих элементов состоит в том, что флажок позволяет сделать множественный выбор, а радиокнопка только единичный.
Структура записи флажка и радиокнопки:
текст
Радиокнопка:
текст
В указанных в структуре элементах для выделения флажка и радиокнопки по умолчанию используется атрибут checked. Пример использования флажка, радиокнопки, а также HTML код представлены на рисунке.
Еще одним элементом формы является кнопка, задаваемая при помощи атрибута typeтэга со значением button:
В указанном коде для создания кнопки присутствует параметр onclick, в котором как правило задается код на языке программирования для выполнения того или иного действия при нажатии на эту кнопку:
Для вывода сообщения в специальном окне используется команда на языке jаvascript – aler. Результат работы примера представлен на рисунке.
Для вставки изображения в кнопку используется код, представленный в следующем примере:
При регистрации и входе на сайты используется поле со скрытым тестом, отображаемым в виде звездочек. Это элемент формы password:
Часто регистрация на сайте разбивается на несколько страниц и каждая последующая должна содержать в себе информацию из предыдущей. Для того чтобы скрыть передаваемую информацию используется элемент формы hidden:
Элемент формы hiddenбудет невидим в окне браузера.
Для загрузки файлов на сервер в формах имеется элемент file. Пример кода для загрузки файлов на сервер представлен ниже:
Итак, в этой теме были рассмотрены элементы форм для создания различных HTMLстраниц, которые вместе с обработчиками сценария на компьютере или сервере позволяют разрабатывать полноценные web-приложения.
Весь интерактив - поля ввода, флажки, переключатели, раскрывающиеся списки, кнопки - это веб-формы и их элементы. В форме вы оставляете комментарий, с помощью формы регистрируетесь, через форму авторизуетесь, пользуетесь формой поиска, голосуете в опросах, загружаете файлы, оформляете подписки - всё это вы делаете с помощью веб-форм.
Внутреннее устройство
Фактически форма состоит из двух частей: визуального оформления и скрипта, который обрабатывает введённые данные. Чтобы написать скрипт, нужно владеть одним из языков программирования. Мы здесь их изучением не занимаемся, поэтому будем разбирать 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-страницей.
26.02.2016 Всем привет! Я думаю сейчас нужно вам показать примеры, как выглядят HTML формы визуально. ○ Форма поиска:
○ Форма входа на сайт:
○ Форма обратной связи:
○ Форма для подачи заказа:
Я думаю, вы уловили саму суть создания HTML форм. Итак, в сегодняшнем уроке я расскажу, как создать простую
HTML
форму
и какие теги можно использовать для создания различных полей формы. Вот с этого момента прошу вашего особого внимания, потому как тема сложна и важная. HTML
форма
– это поле, в которое пользователь вводит некую информацию. Но, эта информация должна каким-то образом еще и отправляться. Своего рода, HTML форма – это как мотоцикл без бензина, вроде все есть, но почему-то не едет. Так вот, чтобы форма заработала и отправляла информацию, которую ввел пользователь, нужно создать обработчик форм на языке . Но вы с обработчиком не заморачивайтесь, так как вы сейчас проходите только курс для начинающих. Мы еще разберем тему обработчика для форм в разделе «PHP». Так, что-то я отвлекся от основной темы. Любая HTML форма будет состоять из основного тега
Форма должна размещаться между тегами ○ Тег
input
Тег
input
– эта часть элемента поля формы предназначена для ввода небольшого текста, цифр. *атрибуты для тега <
input
>
Пример заполнений:
Текстовое поле
○ Текстовое поле «text»
:
Результат: ○ Поле для пароля «password»
:
Результат: ○ Поле для email «email»
:
Результат: ○ Кнопка для выбора файла с компьютера «file»
:
Результат: ○ Поле для ввода телефона «tel»
:
Результат: ○ Поле поиска «search»
:
Результат: ○ Поле выбора цвета «color»
:
Результат: ○ Поле для ввода и выбора цифр «number»
:
Результат: ○ Поле для выбора даты «date»
:
Результат: ○ Поле для выбора даты и местного времени в формате (05.05.2015 00:00)
:
Результат: ○ Выводить выпадающий календарь.
Результат: ○ Поле для выбора времени «time»
:
Результат: ○ Ползунок «range»
:
Результат: ○ Флажок (checkbox)
:
checked
– этот атрибут указывает, какой флажок должен быть включен по умолчанию Результат: ○ Радиопереключатель «radio»
:
checked
– этот атрибут указывает, какой радиопереключатель должен быть включен по умолчанию Результат: Кнопки
○ Кнопка «button»
:
value
- надпись на кнопке Результат: ○ Кнопка для отправки данных «submit»
:
value
- надпись на кнопке Результат: ○ Кнопка сброса «reset»
:
value
- надпись на кнопке Результат: ○ Кнопка картинкой
: Результат: ○ Скрытое поле «hidden»
○ Тег select
Тег
select
– это часть элемента формы, предназначен для ввода выпадающего списка. Чтобы создавать пункты выпадающего списка существует тег
закрывающий тег обязателен
. *атрибуты для тега
Результат: Не срочная Срочная Курьером Или вот так:
Результат: Не срочная Срочная Курьером Теперь заблокируем из списка «Срочная
» атрибутом «disabled
»:
Результат: Не срочная Срочная Курьером ○ выпадающий список по группам
: Для создания списка группы используется тег
Результат: Option Textarea ○ для множественного выбора
:
В теге Результат: Option Textarea Label Fieldset Legend ○ Тег textarea
Тег
textarea
– это часть элемента поля формы, предназначен для ввода большого текста, цифр.
*атрибуты для тега <
textarea
>
Результат: Или вот так:
Результат: Введите текст Или вот так:
Результат: ○ Тег fieldset
Тег fieldset
– с помощью этого тега можно нарисовать рамку вокруг объекта.
Дополнительные теги
Результат: Это все, что я хотел рассказать по теме «HTML-формы». Сейчас подведем итог и на практике попробуем создать простую форму, используя уже те знания, которые вы почерпнули из этой статьи. Вот моя форма:
Результат: Предыдущая запись Приветствую вас, уважаемые читатели блога сайт. Сегодня я хочу поговорить о такой , как HTML формы. Какой бы не был движок вашего сайта (cms), на нем обязательно будут в том или ином виде использоваться формы, созданные с помощью тегов Form и Input, а так же атрибутов и параметров Button, Checked, Value, Checkbox, Radio, Checkbox, Submit. Ну, и еще можно добавить к этому элементы для создания выпадающих списков и текстовых полей — Select, Option, Textarea, Label, Fieldset, Legend. Та же строка поиска по сайту () создается с использованием этих тэгов, а поиск то на вашем проекте будет обязательно. Поэтому понимание того, как они устроены и работают, вам совсем не помешает для успешной работы над дизайном, да и при самостоятельной раскрутке и продвижении будет не лишним. Так, с обоснованием необходимости изучения этих элементов, думаю, вопросов больше не должно возникнуть, поэтому самое время переходить непосредственно к изучению их возможных вариантов. Да, хочу еще напомнить, что мы уже успели рассмотреть много материалов на тему языка гипертекстовой разметки, например, трех ) и . По своей сути формы состоят из элементов, для создания которых внутри основного контейнера из тегов Form вставляют различные тэги — Checked, Value, Checkbox, Radio, Checkbox, Submit и др. Нам лишь нужно будет расположить ее код в любом удобном для этого месте шаблона сайта, указав с помощью тегов и их атрибутов, как она должна будет выглядеть. Это может быть текстовое поле с кнопкой отправки введенного запроса, варианты выбора с радиокнопками (когда можно оставить нажатой только одну из предоставляемых кнопок), несколько текстовых полей с кнопкой для отправки () и многое другое. Например, в случае «поиска», с помощью атрибута Value можно задать, что именно будет написано на кнопке расположенной рядом с полем для ввода запроса. Данные вводимые в формах должны быть в дальнейшем каким-то образом обработаны. Например, в случае обратной связи пользователь, после того как заполнит поле со своим именем, введет свой E-mail и текст сообщения, а затем нажмет на кнопку отправки, будет вправе надеяться на отправку данных из формы на E-mail автора сайта. Но реализовать такое с помощью только одного языка гипертекстовой разметки (), к сожалению, не возможно. Для этих целей потребуется специальная программа обработчик, которая после нажатия пользователем на кнопку отправки возьмет все данные из полей обратной связи и отправит их на E-mail владельцу ресурса. Какая именно программа будет это делать, вы должны указать сами с помощью атрибута Action. Обычно программа обработки представляет из себя скрипт, написанный на языке PHP. Поэтому в атрибуте Action тэга Form вы должны будете прописать путь к файлу этого скрипта, лежащего на сервере вашего хостинга. Приведу в качестве примера подписку на RSS ленту моего блога посредством E-mail: Немного непонятно, наверное, кажется по началу, но, думаю, что все прояснится по мере дальнейшего рассказа. Любая форма должна быть заключена в открывающий и закрывающий тэги Form
. Это своеобразный контейнер для их создания. У этого тега имеется ряд обязательных и необязательных атрибутов: Рассмотрим остальные тэги, позволяющие создавать разнообразные вебформы. Самый универсальный – это Input
. Внутри него обязательно прописывают атрибут Type, который определяет, что именно будет из себя представлять HTML форма, созданная с помощью этого тэга. C помощью Input и Type можно создавать следующие элементы: Input не имеет закрывающего тега. Что именно будет представлять из себя вебформа, созданная с помощью него, целиком и полностью зависит от параметра указанного в атрибуте Type. Если Type не указан, то по умолчанию будет создано текстовое поле. Рассмотрим, для чего нужны остальные атрибуты: Теперь давайте рассмотрим все примеры формы с Input
. Внешний вид текстового поля похож на вид поля для ввода пароля, поэтому рассмотрим только вариант создания Text, например, для ввода адреса электронной почты: Теперь давайте рассмотрим создание вебформы с радиокнопками (Radio): Обратите внимание, что в этой форме два раза используется тег Input – по разу для создания каждой из двух радиокнопок. Причем, в каждом из них прописан атрибут Name с одинаковым значением (rezultat), а значение Value разное (YES и NO). Это означает, что при ее обработке, в случае выбора любого из переключателей, будет отправлена переменная, название которой прописано в Name, но значение этой переменной будет зависеть от того, какой именно переключатель был выбран. Рассмотрим пример создание вебформы с чекбоксами (Checkbox): Чекбоксы отличаются от радиокнопок возможностью выбрать сразу несколько вариантов. Name служит для определения в файле обработчика, в каком именно чекбоксе проставлены флажки,а Value — задает то значение, которое будет отослано в обработчик (если Value задан не будет, то в обработчик будет отправлен текст, расположенный рядом с данным чекбоксом). Для начала хочу немного напомнить, что такое, собственно, вебформы и для чего они нужны на страницах сайта. Они в первую очередь призваны в удобном для пользователя виде повторять имеющиеся в любой операционной системе элементы: кнопки, поля для ввода текста, выпадающие списки, флажки, переключатели и тому подобные вещи. Все пользователи без каких-либо дополнительный объяснений понимают назначение этих элементов и если они видят кнопку Html формы, то понимают, что на нее нужно нажать. Причем, все составляющие ее элементы (вроде Select, Option, Textarea, Label, Fieldset, Legend) представляют собой уже законченные заготовки (контейнеры), для вставки которых достаточно будет лишь использовать нужный тег с нужными атрибутами и параметрами. Браузеры сами знают, как отображать тот или иной элемент вебформы. Правда, варианты отображения одного и того же ее элемента в разных браузерах могут немного отличаться друг от друга, но, как правило, не существенно. Т.о. получается, что вебформы в Html являются попыткой перенести ключевые элементы, используемые в любой операционной системе
, на страницы вебсайта. Но для чего они могут понадобиться на страницах сайта? В принципе, для того же, для чего аналогичные элементы используются в операционных системах — передача данных от пользователя. В случае форм данные от пользователя передаются на сервер, где обрабатываются специальной программой (язык гипертекстовой разметки, к сожалению, не позволяет вести обработку данных). Хотя, данные можно отправить не только на сервер, но и, например, по электронной почте на адрес, заданный в атрибуте Action тэга Form. При отправке из Html данных на E-mail у пользователя, заполняющего поля, после нажатия им на кнопку отправки данных, запустится почтовая программа используемая на его компьютере по умолчанию. Открывающий тег Form в таком случае должен выглядеть примерно так: Вместе с Textarea можно использовать следующие атрибуты: Html тег Label позволяет реализовать одну очень интересную возможность в формах, которая имеется в операционных системах. Там, если вы помните, для того чтобы активировать какой-либо элемент, не обязательно щелкать именно по нему, можно щелкнуть и по названию этого элемента — все равно произойдет его активация. В вебформах по умолчанию этого не происходит — нужно щелкать именно по самому элементу Html формы для его активации. Например, нужно щелкать по флажку, для того чтобы поставить в нем галочку. Щелчок же по тексту рядом с флажком результата не принесет. Попробуйте сами: Как вы можете убедиться, по тексту щелкать для активации этого элемента бесполезно — нужно щелкать именно по нему самому. Вот именно такое положение вещей и призван исправить тэг Label. Он позволить сделать текст рядом с элементом веб формы кликабельным, что несомненно улучшит юзабилити
. Но как связать элемент Html формы и текст? Для этого нужно дописать в атрибут ID с уникальным параметром, а текст нужно окружить открывающим и закрывающим тэгами Label. И это еще не все. В открывающем теге Label нужно прописать атрибут For, параметр которого должен быть точно таким же, как и у атрибута ID в Html теге элемента формы. Получается примерно так: Как вы можете видеть, теперь, благодаря использованию Label, элементы вебформы можно активировать не только щелчком по нему самому, но и щелчком по тексту, расположенному рядом. Вы, наверное, часто видели, что большие формы в Html бывают разбиты на группы (Fieldset), которые обведены в рамочку и у каждой такой группы имеется свой заголовок (Legend). Реализуется это с помощью всего двух тэгов: Fieldset и Legend. Они парные, т.е. у них должны быть в обязательном порядке открывающий и закрывающий. Так вот, для создания группы из составных частей вам нужно заключить все эти части в открывающий и закрывающий тэги Fieldset. А для того, чтобы задать для данной группы заголовок (Legend), вам нужно сразу же после открывающего Fieldset прописать конструкцию из открывающего и закрывающего Legend, между которыми необходимо вставить текст заголовка группы. Вот пример создания групп с помощью Fieldset и Legend: Удачи вам! До скорых встреч на страницах блога сайт Вам может быть интересно Select, Option, Textarea, Label, Fieldset, Legend - теги Html формы выпадающих списков и текстового поля
. К нему прилагаются следующие атрибуты.
Пример формы
Продолжаем изучать основы HTML. В этом уроке мы разберем, что такое
HTML
форма
и как она создается.
Если вы обратили внимание, сегодня ни один веб сайт не обходится без форм. Эти формы могут быть различные, например, форма обратной связи, форма для подачи заказа, форма регистрации и входа на сайт, форма отправки комментариев, отзывов, форма поиска и многие др.Учимся создавать HTML формы
Для тега
Элементы формы
Для тега
закрывающий тег не нужен
.Тип элемента type
Поле для выбора года и месяца в формате (Июль 2015 г.).:
Для тега
закрывающий тег обязателен
.
Тег
Label Fieldset Legend Многострочное текстовое поле
закрывающий тег обязателен
.Оформление «Рамка» (fieldset)
Закрывающий тег обязателен
.
Следующая запись Зачем нужны и как работают формы на современных сайтах
Теги Form и Input для создания кнопок, чекбоксов и радиокнопок
Примеры форм, созданных на Input с различными значениями для Type
Другие атрибуты тэга Input и примеры их использования
Select, Option, Textarea, Label, Fieldset, Legend — выпадающие списки, текстовые области и другие элементы вебформ
Label — для чего нужен этот Html тэг в форме
Fieldset и Legend — разбиваем форму на части
посмотреть еще ролики можно перейдя на
");">
Списки в Html коде - теги UL, OL, LI и DL
MailTo - что это и как в Html создать ссылку для отправки Емейла
Как задаются цвета в Html и CSS коде, подбор RGB оттенков в таблицах, выдаче Яндекса и других программах
Другие статьи: