HTML теги, определяющие HTML формы на сайте

Создаем сайты и отдельные страницы в сети интернет для общения с посетителями.

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

Пример HTML формы | Вход на сайт

Теги, атрибуты и значения

• - определяют форму.
• name="" - определяет имя формы.
• method="" - определяет способ отправки данных из формы. Значения: "get" (по умолчанию) и "post" . Чаше используется метод "post" , так как позволяет передавать большие объемы данных.
• action="" - определяет url по которому данные отправляются на обработку. В нашем случае - enter_data.php ..
• - определяют такие элементы формы как кнопки, переключатели, текстовые поля для ввода данных.
• type="text" - определяет текстовое поле для ввода данных.
• type="password" - определяет поле для ввода пароля, при этом текст отображается в виде звездочек или кружочков.
• type="checkbox" - определяет переключатель.
• type="hidden" - определяет скрытый элемент формы - используется для передачи дополнительной информации на сервер.
• size="25" - длина текстового поля в символах.
• maxlength="30" - максимально допустимое количество вводимых символов.
• value="" - определяет значение, которое будет отправлено на обработку если относится к радиобутонам или переключателям. Значение данного атрибута в составе текстового поля или кнопки будет показано как, например, Вася или Вход в примере выше.

Пример HTML формы | Комментарии на сайте

Теги, атрибуты и значения

• action="http://сайт/comments.php" - определяет url по которому будут отправлены данные из формы.
• id="" - определяет имя, идентификатор элемента формы.
• name="" - определяет имя элемента формы.
• - определяют текстовое поле в составе формы.
• cols="" - определяет количество колонок текстового поля формы.
• rows="" - определяет количество рядов текстового поля формы.

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

Пример HTML формы | Выпадающий список

Теги, атрибуты и значения

• - определяют список с позициями для выбора.
• size="" - определяeт количество видимых позиций списка. Если значение равно 1 , мы имеем дело с выпадающим списком.
• - определяют позиции (пункты) списка.
• value="" - содержит значение, которое будет отправлено формой по указанному url на обработку.
• selected="selected" - выделяет позицию списка в качестве примера.

Пример HTML формы | Список с полосой прокрутки

Увеличив значение атрибута size="" , мы получим список с полосой прокрутки:

Для этого варианта применим флажок multiple="multiple" , который делает возможным выбор нескольких позиций. Его отсутствие разрешает выбрать только один пункт.

Смотрите дополнительно:

Атрибуты формы:

• В атрибуте action указывается серверный файл со скриптом, ответственным за основную обработку данных, пересылаемых из формы. Обычно код этого файла пишется на серверном языке программирования, например, на языке php или perl .
• Атрибут enctype указывает на тип передаваемой на сервер информации, если это просто текстовые данные — text/plain , если с формой отсылаются файлы, то следует указать multipart/form-data .
• Атрибут method указывает и определяет форму передачи данных. Подробно мы на этом останавливаться не будем, однако следует сказать, что для более надежной передачи следует указать метод post .

Элементы формы html

<input type = "text" name = "login" size = "20" value = "Логин" maxlength = "25" >

Результат:

• Значение атрибута type — text — указывает на то, что это именно текстовое поле
• size — размер текстового поля в символах
• maxlength — максимальное кол-во вмещающихся в поле символов
• value — первоначальный текст в текстовом поле
• name — имя элемента, необходимо для обработки данных в файле-обработчике

Результат:


Вместо текста в поле отображается маска — звездочки или кружочки

<input type = "submit" value = "Отправить данные" >

Результат:

Кнопка submit собирает все данные с формы, введенные пользователем и отправляет их по адресу, указанному в атрибуте action формы.

<input type = "reset" value = "Очистить форму" >

Результат:

Кнопка возвращает состояние всех элементов управления к первоначальному (очищает форму)

<input type = "checkbox" name = "asp" value = "yes" > ASP<br > <input type = "checkbox" name = "js" value = "yes" checked = "checked" > javascript<br > <input type = "checkbox" name = "php" value = "yes" > PHP<br > <input type = "checkbox" name = "html" value = "yes" checked = "checked" > HTML<br >

ASP
javascript
PHP
HTML



Результат:

ASP
javascript
PHP
HTML

В html флажок служит для организации множественного выбора, т.е. когда необходимо и возможно выбрать несколько вариантов ответа

<input type = "radio" name = "book" value = "asp" > ASP<br > <input type = "radio" name = "book" value = "js" > Javascript<br > <input type = "radio" name = "book" value = "php" > PHP<br > <input type = "radio" name = "book" value = "html" checked = "checked" > HTML<br >

ASP
Javascript
PHP
HTML




Результат:

ASP
Javascript
PHP
HTML

radio кнопка html служит для единственного выбора из нескольких вариантов

Атрибут checked устанавливает сразу элемент отмеченным

Важно: Для элементов radio необходимо, чтобы значение атрибута name у всех элементов в группе было одинаковым: в таком случае элементы будут работать взаимосвязано, при включении одного элемента, другие буду отключаться

Выпадающий список HTML

Рассмотрим пример добавления выпадающего списка:

ASP JavaScript PHP HTML

Результат:

• Выпадающий список состоит из главного тега — select — который имеет закрывающую пару, а каждый пункт списка — это тег option , внутри которого отображается текст пункта
• Атрибут size со значением «1» указывает на то, что список в свернутом виде отображает один пункт, остальные открываются при щелчке на стрелочке меню
• Атрибут selected у пункта (option) указывает на то, что именно этот пункт будет изначально виден, а остальные пункты «свернуты»

Для больших и сложных списков есть возможность добавить подзаголовки — тег optgroup с атрибутом label (надпись):

ASP JavaScript PHP HTML ASP по-русски JavaScript по-русски

Для предоставления возможности выбора нескольких пунктов одновременно необходимо добавить атрибут multiple . Но в таком случае и атрибут size следует установить в значение, большее, чем 1:

Текст

Результат:

• Ширина элемента зависит от атрибута cols , который указывает сколько символов помещается по горизонтали
• Атрибут rows определяет количество строк в элементе

Другие элементы

Дополнительные элементы и атрибуты

• Для элементов управления radio и checkbox удобно использовать дополнительные элементы, которые, во-первых, делают привязку текста к самому элементу radio или checkbox, во-вторых, добавляют обводку при клике:

<input type = "checkbox" id = "book1" > <label for = "book1" > ASP</ label >

ASP

В примере создана надпись (тег label) для элемента checkbox . Привязка осуществляется через атрибут id , значение которого указано в атрибуте for надписи.

Результат:



• Атрибут disabled позволяет блокировать элемент, делая его недоступным для изменения пользователем:

<input type = "text" name = "login" size = "20" value = "Логин" maxlength = "25" disabled = "disabled" > <input type = "checkbox" name = "asp" value = "yes" > ASP<br > <input type = "checkbox" name = "js" value = "yes" checked = "checked" disabled = "disabled" > javascript<br >


ASP
javascript

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

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

Рассмотрим пример использования:

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

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

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

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

Давайте рассмотри пример использования:

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

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

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

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

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

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

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

2018-06-28

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

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

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

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

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

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

• В общем о формах HTML
• форма онлайн заказа
• Форма авторизации
• форма обратной связи

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

Форма на веб-странице устанавливается блочным элементом