Интерактивные формы html. Создание HTML форм

07.07.2019

Я абсолютно уверен, что, бегая по Интернету, Вы ни раз встречали различные формы, например, форму регистрации, форму входа в систему, форму обратной связи и многие-многие другие 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 . Сразу после окончания описания тега ставится то, что увидит пользователь в выпадающем списке. Опять же, лучше посмотрите в браузере, и Вам всё сразу станет понятно.

Теперь добавим текстовую область, используя тег </b>:</p><p>Напишите что-нибудь:<br><br><br><textarea name = "message" rows = "10" cols = "15">Сообщение

Здесь мы с Вами создаём текстовую область высотой в 10 строк (значение атрибута "rows ") и шириной в 15 символов (значение атрибута "cols ").

Внутри этого парного тега указывается текст в текстовой области по умолчанию. Собственно, здесь больше нечего сказать. Двигаемся дальше.

Следующий элемент - это радио-кнопка. Радио-кнопка - это набор таких "кружочков ", из которых можно выбрать только один. Создаются радио-кнопки с помощью HTML-тега , а, точнее, с помощью значения "radio " атрибута "type ". Напишем такой HTML-код :

Выберите что-нибудь одно:
Вариант 1
Вариант 2
Вариант 3

Тут я остановлюсь на атрибуте "name ", потому что помимо задания имени у него есть ещё одна очень важная особенность. Если Вы НЕ сделаете одинаковыми имена у этих трёх радио-кнопок, то они станут независимыми, а, следовательно, можно будет выбрать сразу несколько вариантов. Чтобы в этом убедиться, поменяйте имена, а потом попытайтесь выбрать сразу несколько вариантов, и Вы сразу убедитесь в моих словах. Поэтому одна группа радиокнопок должна иметь одно и то же значение атрибута "name ". Атрибут "value " означает значение переменной "choiceradio " (опять же, например, в JavaScript ). Сразу после описания тега идёт текст, который увидит пользователь рядом с соответствующей радио-кнопкой.

Ещё одним элементом формы являются переключатели (checkbox ). Создаются они опять же с помощью тега . Напишем следующие строчки:

Вы согласны с нашими правилами:

Я думаю, что здесь всё прозрачно, поэтому объяснять не буду. Советую лишь просто посмотреть, как это выглядит, в браузере. И скажу, что если флажок будет стоять, то значение переменной "terms " будет "yes ", если не будет стоять, то значение этой переменной будет "", то есть пустой строкой.

Ещё одним элементом является поле для выбора файла. Наверняка, Вы когда-нибудь загружали файлы на сервер и Вам часто приходилось использовать для этого поле вставки имени файла. Вот такое поле создаётся с помощью уже надоевшего тега . Напишем так:

Выберите файл для загрузки:

Форма в HTML это часть документа, которая позволяет пользователю ввести интересующую нас информацию, которую впоследствии можно принять и обработать на стороне сервера. Другими словами, формы используются для сбора информации введённой пользователями.

Чтобы определить к какому элементу формы относится текущая метка, необходимо использовать атрибут for тега . Значение атрибута for должно соответствовать значению глобального атрибута того элемента формы, к которому будет относится метка. Атрибут for можно не использовать, если элемент будет находиться внутри элемента .

Рассмотрим пример использования:
</span>Пример использования тега <label><span> for = "yes" > Да Нет >

Да Нет >

В этом примере мы:

Внутри первой формы:
Разместили две радиокнопки ( ) для выбора одного из ограниченного числа вариантов. Еще раз обратите внимание, что для радиокнопок внутри одной формы необходимо указывать одинаковое имя , значения мы указали разные. Для первой checked , который указывает, что элемент должен быть предварительно выбран при загрузке страницы (в данном случае радиокнопка со значением yes ). Кроме того, мы указали для радиокнопок глобальные атрибуты , которые определяют уникальный идентификатор для элемента.

Разместили два элемента , которые определяют текстовые метки для наших текстовых полей. Обратите внимание, что мы использовали атрибут for , чтобы определить к какому элементу формы относится текущая метка. Значение атрибута for соответствует значению глобального атрибута необходимой нам радиокнопки.

Внутри второй формы:
Разместили две радиокнопки ( ) для выбора одного из ограниченного числа вариантов. Для второй радиокнопки мы указали атрибут checked , который указывает, что элемент должен быть предварительно выбран при загрузке страницы (в данном случае радиокнопка со значением no ). Кроме того, мы указали для радиокнопок уникальные значения в рамках формы и одинаковые имена.

Разместили два элемента , внутри них мы разместили наши радиокнопки. В отличии от предыдущего метода отсутствует необходимость указывать для радиокнопок глобальные атрибуты (идентификатор для элемента), а для текстовых меток использовать атрибут for , чтобы на них сослаться (сделать привязку).

В браузере оба варианта (метода) использования текстовых меток выглядят идентично:

Подсказка для полей ввода

Давайте рассмотри пример использования:
Пример использования атрибута placeholder<span>
Login: type = "text" name = "login" placeholder = "Введите ваш логин" >

Password: type = "password" name = "password" placeholder = "Введите ваш пароль" >

В данном примере мы указали для элемента с типом text (однострочное текстовое поле) и типом password (поле с паролем) текстовую подсказку для пользователя (атрибут placeholder), которая описывает ожидаемое значение для ввода.

Результат нашего примера:

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

Используя полученные знания составьте следующую форму оформления заказа:

Нюанс: в полях, где предполагается выбор, должна быть возможность осуществления выбора кликом по тексту, а не только по самому элементу.

После того как вы выполните упражнение проинспектируйте код страницы, открыв пример в отдельном окне, чтобы убедиться, что вы все выполнили правильно.

2018-06-28

Создаем формы HTML

Здравствуйте уважаемый посетитель!

В предыдущих разделах мы создали основные элементы сайта, а также рассмотрели вопросы, связанные с наполнением контента. И теперь можем перейти к следующей довольно важной и обширной теме - к работе с формами HTML.

HTML-формы важнейшие элементы взаимодействия, определяющие интерактивную часть веб-страницы. Без которых не может обойтись ни один полноценный сайт. Ведь именно с их помощью осуществляется основной обмен между пользователем и стороной сервера.

Но в то же время, формы являются довольно сложными элементами интерфейса, с большим разнообразием функциональных компонентов и текстовых полей. Поэтому, в данном разделе постараемся более подробно рассмотреть основные ее элементы, уделив особое внимание практическому их применению в создаваемом сайте.

Причем здесь также будут затронуты и вопросы работы с базой данных MySQL. Так как применение форм в наших примерах будет неразрывно связано с их взаимодействием с таблицами БД. В которых будут сохраняться введённые пользователями данные, используемые в дальнейшем сервером при обработке запросов.

В общем о формах HTML

форма онлайн заказа

Форма авторизации

форма обратной связи

В общем о формах HTML

Форма на веб-странице устанавливается блочным элементом
, который представляет собой контейнер, включающий в себя все элементы, отвечающие за обработку ввода данных, такие как , , .</p> <p>При этом у тега <form> имеется несколько атрибутов, но два из них являются обязательными. Это "action", который содержит адрес, определяющий, куда будет отправлена форма и "method", определяющий способ (POST или GET), которым она будет отправлена.</p> <p>Что касается ее элементов, то самым разносторонним является тег <input> с помощью которого передается большая часть информации и создаются разные элементы интерфейса. Причем тип полей ввода определяется его основным атрибутом "type", от значения которого зависит их функциональное предназначение.</p> <p>Так, при при значении "text" - текстовое поле, "password" - поле с паролем, "email" - поле для ввода адреса электронной почты, "radio" - переключатель, "checkbox" - флажок, "submit" - кнопка для отправки формы.</p> <p>Ниже показан пример с использования элемента <input> для разных видов полей.</p> <ol><p><form name =<b>"example" </b> action =<b>"#" </b> method =<b>"post" </b> ></p> <p><input type =<b>"text" </b> name =<b>"login" </b> ></p> <p><input type =<b>"email" </b> name =<b>"email" </b> ></p> <p><input type =<b>"password" </b> name =<b>"password" </b> ></p> <p><input type =<b>"submit" </b> name =<b>"button" </b> value =<b>"Отправить" </b> ></p> <li> </ol><p>Рис.1 Пример формы HTML</p> <p>В данном примере видно, что для элемента <input> в зависимости от значения атрибута "type", поле может принимать различный вид. Например, в первом элементе (поз.2) поле предназначено для ввода текстовой информации (в данном случае для логина). В следующем (поз.3) - для ввода e-mail, далее (поз.4) - для пароля, а в последнем (поз.5) - кнопка для отправки формы.</p> <p>Конечно, это упрощенный пример, в котором в основном использованы обязательные атрибуты. В реальности же обычно применяются и другие, определяющие характеристики полей.</p> <p>При этом для каждого элемента имеется свой список атрибутов. Все их перечислять здесь не стоит, так как их достаточно много, и эту информацию лучше брать из специально предназначенной для этого справочной литературе по HTML.</p> <p>В сети интернет можно найти большое количество заслуживающих доверия справочников по HTML. Например, как я уже ранее упоминал, для этих целей можно использовать справочник по веб-технологиям <b>WebReference.ru, </b> одна из частей которого посвящена подробному описанию всех имеющихся в HTML5 элементов.</p> <p>скриншот 33</p> <p>Мы же здесь будем практически создавать формы для построения функциональных узлов нашего сайта. И постараемся как можно больше использовать разные элементы с различными атрибутами.</p> <h2><i>форма онлайн заказа </i></h2> <p>В создаваемом сайте предусматривается оформление заказа на установку противоугонной маркировки стекол автомобиля. Для этого необходимо ввести данные автомобиля и выбрать способа маркировки. После чего, на основе введенных данных, пользователю должна предоставляться информация о стоимости выполнения работ. Причем как полной стоимости, так и рассчитанной с учетом скидок.</p> <p>Соответствующий вариант формы онлайн заказа, который мы будем создавать, приведен на следующем скриншоте.</p> <br><img src='https://i1.wp.com/rabota-vinete.ru/images/article/sait/form/sozdat-formu-html/forma-onlajn-zakaza.jpg' width="100%" loading=lazy><p>Рис.2 Форма онлайн заказа</p> <p>Здесь будут использоваться следующие элементы:</p> <ul><li><input> с полем ввода текста;</li> <li><select>;</li> <li><option>.</li> </ul><p>Форма регистрации, используемая в создаваемом сайте совмещена с онлайн заказом. Это связано с тем, что в данном случае личный кабинет пользователя предназначен для отображения состояния сделанных заказов и оформления новых. Поэтому вполне логично в этом варианте производить регистрацию одновременно с выполнением первого заказа.</p> <p>Ниже показано, как предполагается сформировать эту функциональную часть.</p> <p>Для увеличения / уменьшения размера изображения кликните по картинке</p> <br><img src='https://i0.wp.com/rabota-vinete.ru/images/article/sait/form/sozdat-formu-html/forma-registracii.jpg' width="100%" loading=lazy><p>Рис.3 форма регистрации</p> <p>Элементы, которые должны быть предусмотрены в этом варианте:</p> <ul><li><label>;</li> <li><input> с полем ввода текста;</li> <li><input> с полем ввода e-mail;</li> <li><input> с полем ввода пароля;</li> <li><input> с кнопкой для отправки формы (совмещенная с формой онлайн заказа).</li> </ul><h2><i>Форма авторизации </i></h2> <p>Для входа в личный кабинет необходима авторизация. Обычно такая форма состоит из полей ввода логина, пароля и кнопки для ее отправки. Также для восстановления учетных данных часто используются дополнительные ссылки типа: "Забыли логин?", "Забыли пароль?".</p> <p>Несмотря на то, что такие дополнительные ссылки обычно располагаются вместе с элементами формы регистрации, но по сути к ее элементами они не относятся.</p> <p>Ниже показан общий вид панели пользователя с элементами авторизации.</p> <p>Для увеличения / уменьшения размера изображения кликните по картинке</p> <br><img src='https://i1.wp.com/rabota-vinete.ru/images/article/sait/form/sozdat-formu-html/forma-avtorizacii.jpg' width="100%" loading=lazy> <p>В этом случае будут использоваться следующие элементы:</p> <ul><li><label>;</li> <li><input> с полем ввода текста;</li> <li><input> с полем ввода пароля;</li> <li><input> </li> </ul><h2><i>форма обратной связи </i></h2> <p>Само название этой формы говорит о ее назначении. Поэтому здесь должны быть все необходимые поля для отправки сообщения. В данном случае она будет состоять из четырех полей: два для ввода имени и почтового адреса отправителя и два для передачи самого сообщения.</p> <p>Внешний вид такой формы показан на следующем скриншоте.</p> <p>Для увеличения / уменьшения размера изображения кликните по картинке</p> <br><img src='https://i1.wp.com/rabota-vinete.ru/images/article/sait/form/sozdat-formu-html/forma-obratnoj-svyazi.jpg' width="100%" loading=lazy><p>Рис.5 Форма обратной связи</p> <p>Здесь, помимо уже используемых элементов, должен добавиться еще один (<textarea>), с помощью которого в поле можно будет вводить несколько строк текста. А весь перечень для этого варианта примет следующий вид:</p> <ul><li><label>;</li> <li><input> с полем ввода текста;</li> <li><input> с полем ввода e-mail;</li> <li><textarea> с областью, в которую можно вводить несколько строк текста.</li> <li><input> с кнопкой для отправки формы.</li> </ul><p>Таким образом, в этой, по сути, вводной статье, мы рассмотрели некоторые общие вопросы, связанные с формами HTML. И определились, с какими конкретными примерами мы будем в дальнейшем работать.</p> <p>После чего можем перейти и к практическому созданию форм, составляя для каждого случая необходимый код и описывая их взаимодействие с соответствующими таблицами MySQL. Но это будет уже в следующих статьях.</p> <p>С уважением, Николай Гришин</p> <ul><li>Следующая сатья: </li></ul> <p>Приветствую вас, уважаемые читатели блога сайт. Сегодня я хочу поговорить о такой , как HTML формы. Какой бы не был движок вашего сайта (cms), на нем обязательно будут в том или ином виде использоваться формы, созданные с помощью тегов Form и Input, а так же атрибутов и параметров Button, Checked, Value, Checkbox, Radio, Checkbox, Submit.</p><p>Ну, и еще можно добавить к этому элементы для создания выпадающих списков и текстовых полей — Select, Option, Textarea, Label, Fieldset, Legend.</p><h2>Зачем нужны и как работают формы на современных сайтах</h2><p>Та же строка поиска по сайту () создается с использованием этих тэгов, а поиск то на вашем проекте будет обязательно. Поэтому понимание того, как они устроены и работают, вам совсем не помешает для успешной работы над дизайном, да и при самостоятельной раскрутке и продвижении будет не лишним.</p><p>Так, с обоснованием необходимости изучения этих элементов, думаю, вопросов больше не должно возникнуть, поэтому самое время переходить непосредственно к изучению их возможных вариантов.</p><p>Да, хочу еще напомнить, что мы уже успели рассмотреть много материалов на тему языка гипертекстовой разметки, например, трех ) и .</p><p>По своей сути формы состоят из элементов, для создания которых внутри основного контейнера из тегов Form вставляют различные тэги — Checked, Value, Checkbox, Radio, Checkbox, Submit и др. Нам лишь нужно будет расположить ее код в любом удобном для этого месте шаблона сайта, указав с помощью тегов и их атрибутов, как она должна будет выглядеть.</p><p>Это может быть текстовое поле с кнопкой отправки введенного запроса, варианты выбора с радиокнопками (когда можно оставить нажатой только одну из предоставляемых кнопок), несколько текстовых полей с кнопкой для отправки () и многое другое.</p><p>Например, в случае «поиска», с помощью атрибута Value можно задать, что именно будет написано на кнопке расположенной рядом с полем для ввода запроса. Данные вводимые в формах должны быть в дальнейшем каким-то образом обработаны.</p><p>Например, в случае обратной связи пользователь, после того как заполнит поле со своим именем, введет свой E-mail и текст сообщения, а затем нажмет на кнопку отправки, будет вправе надеяться на отправку данных из формы на E-mail автора сайта. Но реализовать такое с помощью только одного языка гипертекстовой разметки (), к сожалению, не возможно.</p><p>Для этих целей потребуется специальная программа обработчик, которая после нажатия пользователем на кнопку отправки возьмет все данные из полей обратной связи и отправит их на E-mail владельцу ресурса. Какая именно программа будет это делать, вы должны указать сами с помощью атрибута Action.</p><p>Обычно программа обработки представляет из себя скрипт, написанный на языке PHP. Поэтому в атрибуте Action тэга Form вы должны будете прописать путь к файлу этого скрипта, лежащего на сервере вашего хостинга. Приведу в качестве примера подписку на RSS ленту моего блога посредством E-mail:</p><form action="https://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open(" http: true><input name="email" type="text" value="Введите Ваш e-mail" class="subscribe_textieldpost" onfocus="if (this.value == " e-mail onblur="if (this.value == "><input type="hidden" value="Ktonanovenkogoru" name="uri"><input type="hidden" value="<?php bloginfo(" name>" name="title"><br><input type="hidden" name="loc" value="ru_RU"><input type="image" src="https://ktonanovenkogo.ru/wp-content/themes/Organic/images/b_subscribe.png" value="Subscribe" class="subscribepost"></form><p>Немного непонятно, наверное, кажется по началу, но, думаю, что все прояснится по мере дальнейшего рассказа.</p><h3>Теги Form и Input для создания кнопок, чекбоксов и радиокнопок</h3><p>Любая форма должна быть заключена в открывающий и закрывающий тэги <b>Form </b>. Это своеобразный контейнер для их создания. У этого тега имеется ряд обязательных и необязательных атрибутов:</p><ol><li>Name – уникальное имя, которое нужно указывать, если в Html файле, где вы что-то делаете, будет использоваться несколько вебформ</li><li>Action – обязательный атрибут указывающий путь к скрипту, которому будут переданы данные из нее для дальнейшей обработки</li><li>Method – с помощью него вы можете изменить метод передачи данных из этой вебформы скрипту файла обработчика. Если вы его не укажете, то по умолчанию будет использоваться метод Get, который, собственно говоря, предназначен в основном для переменных и коротких сообщений, и к тому же открытым способом передавая данные через адресную строку браузера. Для передачи данных форм скрипту обработчика все же лучше использовать <b>метод POST </b>, предназначенный специально для передачи текстовых сообщений закрытым способом</li> </ol><p>Рассмотрим остальные тэги, позволяющие создавать разнообразные вебформы. Самый универсальный – это <b>Input </b>. Внутри него обязательно прописывают атрибут Type, который определяет, что именно будет из себя представлять HTML форма, созданная с помощью этого тэга.</p><p>C помощью Input и Type можно создавать следующие элементы:</p><ol><li>однострочные текстовые поля (Type="Text")</li><li>поля для ввода пароля (Type="Password")</li><li>чекбоксы (Type="Checkbox")</li><li>радиокнопки (Type="Radio")</li><li>скрытые поля (Type="Hidden")</li><li>обычные кнопки (Type="Button")</li><li>кнопки для отправки данных в обработчик (Type="Submit")</li><li>кнопки для приведения вебформы к исходному состоянию (Type="Reset")</li><li>поля для загрузки файлов на сервер (Type="File)</li><li>кнопки с изображением (Type="Image")</li> </ol><p>Input не имеет закрывающего тега. Что именно будет представлять из себя вебформа, созданная с помощью него, целиком и полностью зависит от параметра указанного в атрибуте Type. Если Type не указан, то по умолчанию будет создано текстовое поле.</p><h3>Примеры форм, созданных на Input с различными значениями для Type</h3> <h3>Другие атрибуты тэга Input и примеры их использования</h3><p>Рассмотрим, для чего нужны остальные атрибуты:</p><ol><li>Name – в случае, если данные должны быть отправлены в скрипт программы обработчика, то вы должны обязательно указать параметр для атрибута Name. Под этим именем данные, отправленные из формы, будут фигурировать в программе обработчика информации.</li><li>Size — с помощью него задается размер поля создаваемой вебформы. Значение указывается в количестве символов, которое сможет поместиться в данном поле. Если Size не указан, то ширина будет принята по умолчанию равной 24 символам</li><li>Maxlength — по умолчанию количество символов, которое можно будет ввести в Html форму, не ограничено, но с помощью Maxlength можно задать это ограничение. Больше символов, чем в нем будет указано, вам ввести в поле не удастся</li><li>Value — с помощью него можно задать, что именно будет написано по умолчанию в поле или же на кнопке отправки данных</li><li>Checked — это атрибут-флаг, который можно вставить в Input для радиокнопок (radio) или же для чекбоксов (checkbox). В этом случае данная радиокнопка или чекбокс будут активными при загрузке страницы с вебформой (в них уже будет стоять галочка)</li> </ol><p>Теперь давайте рассмотрим все <b>примеры формы с Input </b>. Внешний вид текстового поля похож на вид поля для ввода пароля, поэтому рассмотрим только вариант создания Text, например, для ввода адреса электронной почты:</p><p><img src='https://i0.wp.com/ktonanovenkogo.ru/image/26-06-201323-44-45.png' width="100%" loading=lazy></p><form name="ktonanovenkogoru" method="post" action="script_obrabotchika.php">Введите Ваш E-mail:<br><input name="email" type="text" value="Введите Ваш e-mail" class="subscribe_textieldpost" onfocus="if (this.value == " e-mail onblur="if (this.value == "></form><p>Теперь давайте рассмотрим создание вебформы с радиокнопками (Radio):</p><p><img src='https://i0.wp.com/ktonanovenkogo.ru/image/26-06-201323-45-36.png' width="100%" loading=lazy></p><form name="rad" method="post" action="script_obrabotchika.php"><p>Вам нравится ресурс KtoNanNovenkogo.ru?</p><input name="rezultat" type="radio" value="yes" checked>Да?<br><input name="rezultat" type="radio" value="no">Нет? </form><p>Обратите внимание, что в этой форме два раза используется тег Input – по разу для создания каждой из двух радиокнопок. Причем, в каждом из них прописан атрибут Name с одинаковым значением (rezultat), а значение Value разное (YES и NO).</p><p>Это означает, что при ее обработке, в случае выбора любого из переключателей, будет отправлена переменная, название которой прописано в Name, но значение этой переменной будет зависеть от того, какой именно переключатель был выбран.</p><p>Рассмотрим пример создание вебформы с чекбоксами (Checkbox):</p><p><img src='https://i2.wp.com/ktonanovenkogo.ru/image/26-06-201323-46-30.png' width="100%" loading=lazy></p><form name="ktonanovenkogoru" method="post" action="obrabotchik.php"><p>Какой движок(и) сайта вы предпочитаете?</p><input type="checkbox" name="wp" value="yes" checked>WordPress <br><input type="checkbox" name="joom" value="yes">Joomla <br><input type="checkbox" name="smf" value="yes">SMF<br></form><p>Чекбоксы отличаются от радиокнопок возможностью выбрать сразу несколько вариантов. Name служит для определения в файле обработчика, в каком именно чекбоксе проставлены флажки,а Value — задает то значение, которое будет отослано в обработчик (если Value задан не будет, то в обработчик будет отправлен текст, расположенный рядом с данным чекбоксом).</p><h2>Select, Option, Textarea, Label, Fieldset, Legend — выпадающие списки, текстовые области и другие элементы вебформ</h2><p>Для начала хочу немного напомнить, что такое, собственно, вебформы и для чего они нужны на страницах сайта. Они в первую очередь призваны в удобном для пользователя виде повторять имеющиеся в любой операционной системе элементы: кнопки, поля для ввода текста, выпадающие списки, флажки, переключатели и тому подобные вещи.</p><p>Все пользователи без каких-либо дополнительный объяснений понимают назначение этих элементов и если они видят кнопку Html формы, то понимают, что на нее нужно нажать.</p><p>Причем, все составляющие ее элементы (вроде Select, Option, Textarea, Label, Fieldset, Legend) представляют собой уже законченные заготовки (контейнеры), для вставки которых достаточно будет лишь использовать нужный тег с нужными атрибутами и параметрами.</p><p>Браузеры сами знают, как отображать тот или иной элемент вебформы. Правда, варианты отображения одного и того же ее элемента в разных браузерах могут немного отличаться друг от друга, но, как правило, не существенно.</p><p>Т.о. получается, что вебформы в Html являются попыткой перенести ключевые <b>элементы, используемые в любой операционной системе </b>, на страницы вебсайта. Но для чего они могут понадобиться на страницах сайта?</p><p>В принципе, для того же, для чего аналогичные элементы используются в операционных системах — передача данных от пользователя. В случае форм данные от пользователя передаются на сервер, где обрабатываются специальной программой (язык гипертекстовой разметки, к сожалению, не позволяет вести обработку данных).</p><p>Хотя, данные можно отправить не только на сервер, но и, например, по электронной почте на адрес, заданный в атрибуте Action тэга Form. При отправке из Html данных на E-mail у пользователя, заполняющего поля, после нажатия им на кнопку отправки данных, запустится почтовая программа используемая на его компьютере по умолчанию.</p><p>Открывающий тег Form в таком случае должен выглядеть примерно так:</p><p> <form action="mailto:qwertydmitriy@gmail.com" enctype="text/plain"> </p><h3>Select и Option — тэги выпадающих списков</h3><p>Все элементы вебформы, которые создают поля с выпадающими списками, формируются одинаковым образом. Сначала задается контейнер поля со списком с помощью открывающего и закрывающего Html тега Select. А затем внутри этого контейнера создаются отдельные контейнеры с пунктами (элементами) этого списка. Это делается с помощью открывающих и закрывающих тэгов Option.</p><p>Получается примерно так:</p><p><img src='https://i2.wp.com/ktonanovenkogo.ru/image/27-06-20130-21-18.png' width="100%" loading=lazy></p><p>Но это упрощенная конструкция, т.к. <b>у Select и Option имеется ряд атрибутов </b>, которые определяют свойства и внешний вид создаваемого поля с выпадающим списком.</p><ol><li>Name — вы должны задать уникальное имя для данного элемента вебформы, создаваемого с помощью Select. Это имя будет передано на сервер в программу обработчик данных в качестве имени для переменной. В качестве значения этой переменной будет передано значение атрибута Value (задается в Option для каждого пункта) того пункта выпадающего списка, который выберет пользователь.</li><li>Size — с помощью него можно задать количество отображаемых пунктов. Иначе говоря, с помощь Size можно задать высоту списка, измеряемую в количестве отображаемых строк. Если вы не указываете в явном виде значение Size в теге Select, то будет использоваться значение высоты выпадающего списка по умолчанию, при этом она будет разной в случае отсутствия или присутствия в Select атрибута Multiple: <ol><li>Если Multiple в Select присутствует, то высота выпадающего списка в вебформе будет по умолчанию равна количеству его элементов. Т.е. будут показаны все элементы выпадающего списка с множественным выбором. См. пример множественного ниже. Если атрибут Size в Select задать меньше количества пунктов, то справа появится полоса прокрутки.</li><li>Если Multiple в Select отсутствует, то высота выпадающего списка в вебформе будет по умолчанию равна одной строке. Т.е. видна будет только одна строка, а остальные пункты будут доступны только при нажатии на кнопку лифта (справа). См. пример приведенный ниже</li> </ol></li><li>Multiple — приписывание данного атрибута в теге Select позволит вам создать выпадающий список с возможность одновременного выбора нескольких пунктов. Подробнее об этом атрибуте читайте ниже.</li> </ol><p>Формы с выпадающими списками можно разделить на два варианта. В первом варианте вы сможете выбрать только один элемент (строку) поля с выпадающим списком, во втором варианте — удерживая Ctrl или Shift сможете выбрать одновременно несколько из имеющихся пунктов.</p><p>При этом во втором варианте будут отправлены на сервер данные о всех выбранных пунктах. Какой именно выпадающий список будет создан, определяется наличием или отсутствием в тэге Select атрибута Multiple.</p><p>Multiple указывается в Select без параметра, т.к. пишется просто Multiple и все. Если он присутствует, то будет создана вебформа выпадающего списка с возможностью множественного выбора (удерживая Ctrl или Shift).</p><p>Вариант поля с выпадающим списком, в котором будет <b>возможен множественный выбор </b>, будет выглядеть примерно так:</p><p><img src='https://i2.wp.com/ktonanovenkogo.ru/image/27-06-20130-23-55.png' width="100%" loading=lazy></p><p>Справа приведен пример вебформы выпадающего списка со множественным выбором, который создан на основе кода, приведенного выше. Как вы видите, удерживая Ctrl или Shift можно выделить несколько пунктов одновременно.</p><p>Если в тэге Select атрибута Multiple не будет, то выбрать можно будет только один элемент этого выпадающего списка (строку).</p><p><img src='https://i0.wp.com/ktonanovenkogo.ru/image/27-06-20130-25-25.png' width="100%" loading=lazy></p><p>Пример, в котором можно выбрать только один пункт, вы можете видеть здесь:</p><p>Label Select SelectED сайт Legend</p><h3>Атрибуты тега Option</h3><br><img src='https://i0.wp.com/ktonanovenkogo.ru/image/27-06-20130-36-11.png' width="100%" loading=lazy><p>В создаваемый выпадающий список (с помощью Select и Option) можно добавить что-то вроде разделителей с заголовком групп, которые будут отличаться от остальных пунктов меню по начертанию шрифта.</p><p>Для создания группы из пунктов выпадающего списка нужно заключить их в открывающий и закрывающий теги формы Optgroup, а в открывающем тэге Optgroup прописать атрибут Label, в качестве параметра которого нужно будет ввести желаемое название группы.</p><p>Например так:</p><p><img src='https://i2.wp.com/ktonanovenkogo.ru/image/27-06-20130-38-10.png' width="100%" loading=lazy></p><p>Label Select <br> SelectED сайт Legend <br></p><h2>Textarea — создание текстового поля в форме</h2><p>Остался еще один элемент вебформ, который мы не рассмотрели — Textarea (поле с возможностью ввода многострочного текста). Создается оно с помощью парного Html тега Textarea. Причем, в нем можно переносить текст на новую строку и он будет передаваться на сервер с учетом сделанных переносов.</p><p>Итак, для создания многострочного текстового поля нужно прописать открывающий и закрывающий Textarea, а между ними вы можете добавить текст, который будет виден при загрузке страницы с вебформой. Пользователь потом сможет стереть этот текст и написать свой.</p><p> <form> <textarea rows="3" cols="15" name="textt">
Что вы можете сообщить о себе?
Вместе с Textarea можно использовать следующие атрибуты:
Name — вы задаете имя для этого элемента вебформы. Оно будет передано на сервер в программу обработчика данных
Cols — вы можете задать с помощью него ширину создаваемого многострочного поля в символах.
Rows — задаем высоту создаваемого многострочного поля (в строках). Если строк у текста, вводимого пользователем, окажется больше, чем высота многострочного поля для текста, то справа от поля в вебформе появится полоса прокрутки.
Readonly — запрет пользователям на изменение или добавление своего текста в это поле (только для чтения).
Disabled — пользователь, так же как в случае с атрибутом Readonly, не сможет изменить содержимое текстового поля в вебформе, но оно изменит свой цвет на серый, обозначающий его неактивность.

Label — для чего нужен этот Html тэг в форме
Html тег Label позволяет реализовать одну очень интересную возможность в формах, которая имеется в операционных системах. Там, если вы помните, для того чтобы активировать какой-либо элемент, не обязательно щелкать именно по нему, можно щелкнуть и по названию этого элемента — все равно произойдет его активация.
В вебформах по умолчанию этого не происходит — нужно щелкать именно по самому элементу Html формы для его активации. Например, нужно щелкать по флажку, для того чтобы поставить в нем галочку. Щелчок же по тексту рядом с флажком результата не принесет. Попробуйте сами:
Label
Select
SelectED
Как вы можете убедиться, по тексту щелкать для активации этого элемента бесполезно — нужно щелкать именно по нему самому. Вот именно такое положение вещей и призван исправить тэг Label. Он позволить сделать текст рядом с элементом веб формы кликабельным, что несомненно улучшит юзабилити .
Но как связать элемент Html формы и текст? Для этого нужно дописать в атрибут ID с уникальным параметром, а текст нужно окружить открывающим и закрывающим тэгами Label. И это еще не все. В открывающем теге Label нужно прописать атрибут For, параметр которого должен быть точно таким же, как и у атрибута ID в Html теге элемента формы. Получается примерно так:

Как вы можете видеть, теперь, благодаря использованию Label, элементы вебформы можно активировать не только щелчком по нему самому, но и щелчком по тексту, расположенному рядом.
Fieldset и Legend — разбиваем форму на части
Вы, наверное, часто видели, что большие формы в Html бывают разбиты на группы (Fieldset), которые обведены в рамочку и у каждой такой группы имеется свой заголовок (Legend). Реализуется это с помощью всего двух тэгов: Fieldset и Legend. Они парные, т.е. у них должны быть в обязательном порядке открывающий и закрывающий.
Так вот, для создания группы из составных частей вам нужно заключить все эти части в открывающий и закрывающий тэги Fieldset. А для того, чтобы задать для данной группы заголовок (Legend), вам нужно сразу же после открывающего Fieldset прописать конструкцию из открывающего и закрывающего Legend, между которыми необходимо вставить текст заголовка группы.
Вот пример создания групп с помощью Fieldset и Legend:

Удачи вам! До скорых встреч на страницах блога сайт
посмотреть еще ролики можно перейдя на
");">
Вам может быть интересно
Select, Option, Textarea, Label, Fieldset, Legend - теги Html формы выпадающих списков и текстового поля
Списки в Html коде - теги UL, OL, LI и DL
MailTo - что это и как в Html создать ссылку для отправки Емейла
Как задаются цвета в Html и CSS коде, подбор RGB оттенков в таблицах, выдаче Яндекса и других программах

Формы предназначены для пересылки данных от пользователя к веб-серверу. Формы в 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

Сколько Вам лет?

младше 18

от 18 до 24

от 25 до 35

более 35

Флажки (checkbox)

Элемент типа checkbox создает флажки, которые напоминают переключатели тем, что дают пользователю возможность выбирать из предложенных вами вариантов. Главным отличием от переключателей является то, что посетитель может выбрать сразу несколько вариантов, а сами флажки обозначаются квадратиками, а не кружочками. Как и в случае с переключателями, группа флажков создается путем назначения каждому пункту одного и того же значения атрибута name , однако каждый флажок имеет собственное значение. Основной синтаксис флажка:

Атрибут checked , как и в случае с переключателями, указывает, что данный флажок должен быть установлен по умолчанию при загрузке страницы. Данный атрибут может быть установлен одновременно для нескольких флажков группы.
В следующем примере использование флажков заданы несколько выбранных по умолчанию вариантов ответа:

Пример: Использование переключателей

Попробуй сам »

Джаз

Блюз

Рок

Шансон

Кантри

Какие музыкальные жанры Вы любите?

Джаз

Блюз

Рок

Шансон

Кантри

Кнопки подтверждения (submit) и очистки (reset)

Элемент типа submit создает кнопку, при нажатии которой происходит отправка браузером серверному сценарию на обработку данных, введенных пользователем в форму. Если создаем кнопку, очищающую форму, то присваиваем атрибуту type значение «reset» . Элементу типа submit может быть присвоен необязательный атрибут name . Атрибут vаluе используется в данном элементе для указания текста, обозначающего надпись на кнопке. По умолчанию в браузерах на кнопке пишется «Отправить» (Submit), если вас данная надпись не устраивает — введите ее самостоятельно. Поскольку в разных браузерах стили кнопок подтверждения могут отличаться, поэтому лучше самостоятельно настроить стиль кнопки, воспользовавшись средствами CSS либо использовать графические кнопки.
Создание кнопок подтверждения и очистки:

Пример: Использование submit и reset

Попробуй сам »

После щелчка на кнопке Reset происходит сброс любых введенных пользователем данных.

Атрибут 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-код небольшое изменение:

т.е. замените POST на GET .
Сохраните файл под именем file_name.html и обновите страницу браузера (F5), затем заполните форму, например Вася Пупкин , и нажмите кнопку «Отправить». В адресной строке браузера Вы увидите что-то типа этого:
File_name.html?firstname=Вася&lastname=Пупкин
Теперь вы видите имя каждого элемента формы, а также его значение, прямо здесь, в URL-адресе.
URL-адрес отделяется от остальных данных формы символом знака вопроса, а имена и значения переменных разделяются знаком амперсанд (&) .
Этот метод нужно использовать, если вы не передаете больших объемов информации.
Этот метод не подойдет, если данные в вашей форме являются конфиденциальными, например хранят номер банковской карты или пароль.
Кроме того, метод GET непригоден, если вместе с формой вы хотите переслать на сервер файлы.

Группировка элементов формы

Элементы формы, связанные по смыслу, можно сгруппировать между тегами
и
. Браузер отобразит
в виде рамки вокруг группы элементов формы. Внешний вид рамки может быть изменен с помощью каскадных таблиц стилей (CSS).
Чтобы добавить заголовок для каждой группы, понадобится элемент , который задает встраиваемый в рамку текст заголовка группы.

Интерактивные формы html. Создание HTML форм

Подсказка для полей ввода

Вопросы и задачи по теме

Создаем формы HTML

В общем о формах HTML

Label — для чего нужен этот Html тэг в форме

Fieldset и Legend — разбиваем форму на части

Пример: Простая HTML-форма

Элемент

Элемент

Ввод текста и пароля

Пример: Поле ввода пароля

Переключатели (radio)

Флажки (checkbox)

Пример: Использование переключателей

Кнопки подтверждения (submit) и очистки (reset)

Пример: Использование submit и reset

Атрибут action.

Атрибут method

Метод POST

Метод GET

Группировка элементов формы

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам:

Ваш комментарий (необязательно):