) должны находиться внутри
элемента
.Текстовые поля Почти всем формам требуется текстовый
ввод от пользователей, чтобы ввести своё имя, адрес электронной почты, пароль, адрес и др. Текстовые поля формы приходят в разных вариантах.
Хотя эти поля очень похожи и позволяют пользователям вводить текст любого рода (даже неправильный), их тип обеспечивает специфическую семантику
для ввода, определяя, какую информацию поле должно
содержать.
Браузеры могут впоследствии немного изменить интерфейс элемента управления, чтобы повысить интерактивность
или подсказать, какое содержимое ожидается.
К примеру, поле для пароля показывает точки вместо символов. А поле для чисел позволяет увеличивать/уменьшать значение с помощью клавиш вверх и вниз.
placeholder Текстовые поля могут отображать подсказывающий
текст, который исчезнет, как только будет введён некоторый текст.
Если вы начинаете набирать что-то, то увидите как текст «Введите своё имя» исчезнет.
Так как элементы формы сами по себе не очень описательны, им, как правило, предшествует текстовая метка
.
Email
В то время как placeholder
уже обеспечивает некоторую подсказку о том, какое ожидается содержание, метки имеют преимущество оставаясь видимыми в любое время и могут использоваться наряду с другими типами элементов формы, таких как флажки или переключатели.
Хотя вы можете применять короткие абзацы для описания элементов формы, использование
является семантически более правильным, потому что они существуют только в формах.
также может быть связан с определённым элементом формы с помощью атрибута for
, соответствующему значению id
у поля.
Имя
При щелчке по метке фокус переходит к текстовому полю и помещает курсор внутрь него. Пока эта связка кажется бесполезной, но пригодится с флажками и переключателями.
Флажки Флажки
- это элементы формы, которые имеют только два состояния: включено или выключено. Они в основном позволяют пользователю сказать: «Да» или «Нет» для чего-то.
Запомнить меня
Поскольку может оказаться сложно щёлкнуть по небольшому флажку, рекомендуется поместить флажок и его описание внутрь
.
Я согласен с условиями
Вы можете щёлкнуть по тексту «Я согласен с условиями» чтобы переключить флажок.
По умолчанию флажок выключен. Вы можете пометить его включенным, просто используя атрибут checked
.
Использовать мой платёжный адрес
Переключатели Вы можете предоставить пользователю список вариантов
на выбор с помощью переключателей.
Для работы этого элемента формы, ваш HTML-код должен сгруппировать
список переключателей вместе. Это достигается с помощью одного и того же значения для атрибута name:
Семейное положение
Холост
Женат
Разведён
Вдовец
Поскольку все переключатели используют одинаковое значение атрибута name
(в данном случае значение status
), выбор одного из вариантов отменит все остальные. Переключатели являются взаимоисключающими
.
Разница между переключателями и флажками Хотя флажок существует сам по себе
, переключатели могут появляться только в виде списка
(что означает, по меньшей мере два варианта).
Кроме того, щелчок по флажку является произвольным
, в то время как выбор одного из переключателей является обязательным
. Вот почему невозможно выключить переключатель, если выбрать ближайший вариант. В конце концов, всегда выбирается один из переключателей.
Выпадающие меню Если количество вариантов для выбора занимает слишком много места, вы можете воспользоваться выпадающими меню
.
Они работают подобно переключателям, отличается только компоновка.
Январь
Февраль
Март
Апрель
Май
Июнь
Июль
Август
Сентябрь
Октябрь
Ноябрь
Декабрь
Множественный выбор из выпадающего меню Если добавить атрибут multiple
, вы можете предоставить возможность выбрать несколько вариантов.
Какими браузерами вы пользуетесь?
Google Chrome
Internet Explorer
Mozilla Firefox
Opera
Safari
Выберите несколько вариантов посредством удержания Ctrl (или ⌘) и щелчка. Это может быть хорошей альтернативой применению несколько флажков в строке.
Пример: полная форма регистрации
Обращение
Г-н
Г-жа
Имя
Фамилия
Email
Телефон
Пароль
Подтвердите пароль
Страна
Канада
Франция
Германия
Италия
Япония
Россия
Великобритания
США
Я согласен с условиями использования
Зарегистрироваться
Также доступны и другие элементы форм, но мы рассмотрели наиболее используемые.
2018-06-28
Создаем формы HTML
Здравствуйте уважаемый посетитель!
В предыдущих разделах мы создали основные элементы сайта, а также рассмотрели вопросы, связанные с наполнением контента. И теперь можем перейти к следующей довольно важной и обширной теме - к работе с формами HTML.
HTML-формы важнейшие элементы взаимодействия, определяющие интерактивную часть веб-страницы. Без которых не может обойтись ни один полноценный сайт. Ведь именно с их помощью осуществляется основной обмен между пользователем и стороной сервера.
Но в то же время, формы являются довольно сложными элементами интерфейса, с большим разнообразием функциональных компонентов и текстовых полей. Поэтому, в данном разделе постараемся более подробно рассмотреть основные ее элементы, уделив особое внимание практическому их применению в создаваемом сайте.
Причем здесь также будут затронуты и вопросы работы с базой данных MySQL. Так как применение форм в наших примерах будет неразрывно связано с их взаимодействием с таблицами БД. В которых будут сохраняться введённые пользователями данные, используемые в дальнейшем сервером при обработке запросов.
В общем о формах HTML
форма онлайн заказа
Форма авторизации
форма обратной связи
В общем о формах HTML
Форма на веб-странице устанавливается блочным элементом
, который представляет собой контейнер, включающий в себя все элементы, отвечающие за обработку ввода данных, такие как , , или .
При этом у тега
имеется несколько атрибутов, но два из них являются обязательными. Это "action", который содержит адрес, определяющий, куда будет отправлена форма и "method", определяющий способ (POST или GET), которым она будет отправлена.
Что касается ее элементов, то самым разносторонним является тег с помощью которого передается большая часть информации и создаются разные элементы интерфейса. Причем тип полей ввода определяется его основным атрибутом "type", от значения которого зависит их функциональное предназначение.
Так, при при значении "text" - текстовое поле, "password" - поле с паролем, "email" - поле для ввода адреса электронной почты, "radio" - переключатель, "checkbox" - флажок, "submit" - кнопка для отправки формы.
Ниже показан пример с использования элемента для разных видов полей.
"example"
action
="#"
method
="post"
>
"text"
name
="login"
>
"email"
name
="email"
>
"password"
name
="password"
>
"submit"
name
="button"
value
="Отправить"
>
Рис.1 Пример формы HTML
В данном примере видно, что для элемента в зависимости от значения атрибута "type", поле может принимать различный вид. Например, в первом элементе (поз.2) поле предназначено для ввода текстовой информации (в данном случае для логина). В следующем (поз.3) - для ввода e-mail, далее (поз.4) - для пароля, а в последнем (поз.5) - кнопка для отправки формы.
Конечно, это упрощенный пример, в котором в основном использованы обязательные атрибуты. В реальности же обычно применяются и другие, определяющие характеристики полей.
При этом для каждого элемента имеется свой список атрибутов. Все их перечислять здесь не стоит, так как их достаточно много, и эту информацию лучше брать из специально предназначенной для этого справочной литературе по HTML.
В сети интернет можно найти большое количество заслуживающих доверия справочников по HTML. Например, как я уже ранее упоминал, для этих целей можно использовать справочник по веб-технологиям WebReference.ru,
одна из частей которого посвящена подробному описанию всех имеющихся в HTML5 элементов.
скриншот 33
Мы же здесь будем практически создавать формы для построения функциональных узлов нашего сайта. И постараемся как можно больше использовать разные элементы с различными атрибутами.
форма онлайн заказа
В создаваемом сайте предусматривается оформление заказа на установку противоугонной маркировки стекол автомобиля. Для этого необходимо ввести данные автомобиля и выбрать способа маркировки. После чего, на основе введенных данных, пользователю должна предоставляться информация о стоимости выполнения работ. Причем как полной стоимости, так и рассчитанной с учетом скидок.
Соответствующий вариант формы онлайн заказа, который мы будем создавать, приведен на следующем скриншоте.
Рис.2 Форма онлайн заказа
Здесь будут использоваться следующие элементы:
Форма регистрации, используемая в создаваемом сайте совмещена с онлайн заказом. Это связано с тем, что в данном случае личный кабинет пользователя предназначен для отображения состояния сделанных заказов и оформления новых. Поэтому вполне логично в этом варианте производить регистрацию одновременно с выполнением первого заказа.
Ниже показано, как предполагается сформировать эту функциональную часть.
Для увеличения / уменьшения размера изображения кликните по картинке
Рис.3 форма регистрации
Элементы, которые должны быть предусмотрены в этом варианте:
Форма авторизации
Для входа в личный кабинет необходима авторизация. Обычно такая форма состоит из полей ввода логина, пароля и кнопки для ее отправки. Также для восстановления учетных данных часто используются дополнительные ссылки типа: "Забыли логин?", "Забыли пароль?".
Несмотря на то, что такие дополнительные ссылки обычно располагаются вместе с элементами формы регистрации, но по сути к ее элементами они не относятся.
Ниже показан общий вид панели пользователя с элементами авторизации.
Для увеличения / уменьшения размера изображения кликните по картинке
В этом случае будут использоваться следующие элементы:
форма обратной связи
Само название этой формы говорит о ее назначении. Поэтому здесь должны быть все необходимые поля для отправки сообщения. В данном случае она будет состоять из четырех полей: два для ввода имени и почтового адреса отправителя и два для передачи самого сообщения.
Внешний вид такой формы показан на следующем скриншоте.
Для увеличения / уменьшения размера изображения кликните по картинке
Рис.5 Форма обратной связи
Здесь, помимо уже используемых элементов, должен добавиться еще один (), с помощью которого в поле можно будет вводить несколько строк текста. А весь перечень для этого варианта примет следующий вид:
Таким образом, в этой, по сути, вводной статье, мы рассмотрели некоторые общие вопросы, связанные с формами HTML. И определились, с какими конкретными примерами мы будем в дальнейшем работать.
После чего можем перейти и к практическому созданию форм, составляя для каждого случая необходимый код и описывая их взаимодействие с соответствующими таблицами MySQL. Но это будет уже в следующих статьях.
С уважением, Николай Гришин
Зачастую на Web – сайтах можно встретить страницы с размещенными на них HTML - формами. Веб-формы – удобный способ получения информации от посетителей вашего сайта. Пример тому – , – которая обеспечивает обратную связь с посетителями и разработчиками сайта. Формы так же удобны и для разработчиков сайта при разработке CMS, которая позволяет поддерживать главное свойство сайта - актуальность. Данная статья посвящена основам создания HTML-форм, их обработке и способам передачи данных из экранных форм в PHP-сценарии.
1) Создание простой формы Теги
и
задают начало и конец формы. Начинающий форму тег
содержит два атрибута: action
и method
. Атрибут action содержит адрес URL сценария, который должен быть вызван для обработки сценария. Атрибут method
указывает браузеру, какой вид HTTP запроса необходимо использовать для отправки формы; возможны значения POST
и GET
.
Замечание Главное отличие методов POST и GET заключается в способе передачи информации. В методе GET параметры передаются через адресную строку, т.е. по сути в HTTP-заголовке запроса, в то время как в методе POST параметры передаются через тело HTTP-запроса и никак не отражаются на виде адресной строки.
$text
=
nl2br
($_POST
[
"mytext"
]);
?>
Задача:
Пусть необходимо создать выпадающий список с годами с 2000 по 2050.Решение:
Необходимо создать HTML форму c элементом SELECT и PHP – сценарий для обработки формы.
Обсуждение:
Для начала создадим два файла: form.html
и action.php
. В файле form.html
будет содержаться html-форма с выпадающим списком. Причем значения в списке можно указать двумя способами:
I. Ввод данных вручную:
2000
2001
2002
……………………………………………
2050
II. Ввод данных через цикл:
$year
=
2000
;
for ($i
=
0
;
$i
<=
50
;
$i
++)
// Цикл от 0 до 50
{
$new_years
=
$year
+
$i
;
// Формируем новое значение
echo
""
.
$new_years
.
" "
;
//Формируем новую строчку
}
?>
Как видно, второй пример с циклом, более компактный. Думаю, не стоит приводить скрипт обработчика данной формы, потому что он обрабатывается точно так же как текстовое поле, т.е. значения списка можно извлечь из суперглобального массива $_POST
.
Описание:
Создадим HTML-форму для отправки файла на сервер.
В данной html-форме присутствует элемент browse
, который открывает диалоговое окно для выбора файла для загрузки на сервер. При нажатии на кнопку "Передать файл"
, файл передается сценарию-обработчику.
Затем необходимо написать сценарий обработчик action.php
. Перед написание обработчика необходимо определиться в какой каталог мы будет копировать файл:
if(isset($_FILES
[
"myfile"
]))
// Если файл существует
{
$catalog
=
"../image/"
;
// Наш каталог
if (is_dir
($catalog
))
// Если такой каталог есть
{
$myfile
=
$_FILES
[
"myfile"
][
"tmp_name"
];
// Времменый файл
$myfile_name
=
$_FILES
[
"myfile"
][
"name"
];
// Имя файла
if(!
copy
($myfile
,
$catalog
)) echo
"Ошибка при копировании файла "
.
$myfile_name
// Если неудалось скопировать файл
}
else
mkdir
("../image/"
);
// Если такого каталога нет, то мы его создадим
}
?>
Замечание Если вы доверяете пользователям закачивать на ваш сервер любые файлы, нужно быть предельно осторожным. Злоумышленники могут внедрить «нехороший» код в картинку или файл и отправить на сервер. В таких случаях нужно жестоко контролировать загрузку файлов.
Данный пример демонстрирует создание каталога и копирование файла в этот каталог на сервер.
Также хотел бы продемонстрировать пример с элементом checkbox
. Этот элемент немного отличается от других элементов тем, что если не один из элементов checkbox
’a не выбран, то суперглобальная переменная $_POST
вернет пустое значение:
Синий
Черный
Белый
if (!empty($_POST
[
"mycolor"
])) echo
$_POST
[
"mycolor"
];
// Если выбран хоть 1 элемент
else echo
"Выберите значение"
;
?>
Сейчас практически ни один сайт не обходится без элементов интерфейса вроде полей ввода текста, кнопок, переключателей и флажков. Они необходимы для взаимодействия с пользователем, чтобы он мог искать на сайте по ключевым словам, писать комментарии, отвечать на опросы, прикреплять фотографии и делать много других подобных вещей. Именно формы и обеспечивают получение данных от пользователя и передачу их на сервер, где они уже подвергаются анализу и обработке. Так что если вы планируете сделать нечто подобное на сайте, без форм не удастся это реализовать.
Сама форма создаётся с помощью тега
, внутри которой могут быть любые необходимые теги, и характеризуется следующими необязательными параметрами:
адрес программы на веб-сервере, которая будет обрабатывать содержимое данных формы;
элементами формы, которые представляют собой стандартные поля для ввода информации пользователем;
кнопку отправки данных на сервер.
Допускается использовать несколько форм на странице, но они не должны вкладываться одна в другую (пример 1).
Пример 1. Ошибочное использование форм
HTML5
IE
Cr
Op
Sa
Fx
Формы
Перед отправкой данных браузер подготавливает информацию в виде пары «имя=значение», где имя определяется атрибутом name тега
или другим тегом допустимым в форме, а значение введено пользователем или установлено в поле формы по умолчанию. После нажатия пользователем кнопки Submit, происходит вызов обработчика формы, который получает введенную в форме информацию, а дальше делает с ней то, что предполагает разработчик. В качестве обработчика формы обычно выступает программа, заданная атрибутом action тега
. Программа может быть написана на любом серверном языке вроде PHP, Python, C# и др.
Часто бывает, что текущая страница написанная, допустим, на PHP, сама является обработчиком формы, в таком случае можно указать пустое значение атрибута action
или вообще его опустить. В простейшем случае тег
не содержит никаких атрибутов и представлен в примере 2.
Пример 2. Простая форма
HTML5
IE
Cr
Op
Sa
Fx
Формы
В качестве значения атрибута action
можно указать также адрес электронной почты, начиная его с ключевого слова mailto:
. При отправке формы будет запущена почтовая программа, установленная по умолчанию. В целях безопасности в браузере задано, что отправить незаметно информацию, введенную в форме, по почте невозможно. Для корректной интерпретации данных используйте атрибут enctype
со значением text/plain
в теге
(пример 3).
Пример 3. Отправка формы по почте
HTML5
IE
Cr
Op
Sa
Fx
Формы
Браузеры неоднозначно работают с таким кодом. Firefox предложит список подходящих приложений для отправки почты (рис. 1), Internet Explorer выведет предупреждение (рис. 2) и попытается запустить программу, сопоставленную с почтой, Opera подобно Firefox предложит список вариантов подходящих для отправки почты (рис. 3).
Рис. 1. Запуск приложения в Firefox
Рис. 2. Предупреждение Internet Explorer
Рис. 3. Выбор программы в Opera
Приветствую вас, уважаемые читатели блога сайт. Сегодня я хочу поговорить о такой , как 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:
" name="title">Немного непонятно, наверное, кажется по началу, но, думаю, что все прояснится по мере дальнейшего рассказа.
Теги Form и Input для создания кнопок, чекбоксов и радиокнопок Любая форма должна быть заключена в открывающий и закрывающий тэги Form
. Это своеобразный контейнер для их создания. У этого тега имеется ряд обязательных и необязательных атрибутов:
Name – уникальное имя, которое нужно указывать, если в Html файле, где вы что-то делаете, будет использоваться несколько вебформ Action – обязательный атрибут указывающий путь к скрипту, которому будут переданы данные из нее для дальнейшей обработки Method – с помощью него вы можете изменить метод передачи данных из этой вебформы скрипту файла обработчика. Если вы его не укажете, то по умолчанию будет использоваться метод Get, который, собственно говоря, предназначен в основном для переменных и коротких сообщений, и к тому же открытым способом передавая данные через адресную строку браузера. Для передачи данных форм скрипту обработчика все же лучше использовать метод POST
, предназначенный специально для передачи текстовых сообщений закрытым способом
Рассмотрим остальные тэги, позволяющие создавать разнообразные вебформы. Самый универсальный – это Input
. Внутри него обязательно прописывают атрибут Type, который определяет, что именно будет из себя представлять HTML форма, созданная с помощью этого тэга.
C помощью Input и Type можно создавать следующие элементы:
однострочные текстовые поля (Type="Text") поля для ввода пароля (Type="Password") чекбоксы (Type="Checkbox") радиокнопки (Type="Radio") скрытые поля (Type="Hidden") обычные кнопки (Type="Button") кнопки для отправки данных в обработчик (Type="Submit") кнопки для приведения вебформы к исходному состоянию (Type="Reset") поля для загрузки файлов на сервер (Type="File) кнопки с изображением (Type="Image")
Input не имеет закрывающего тега. Что именно будет представлять из себя вебформа, созданная с помощью него, целиком и полностью зависит от параметра указанного в атрибуте Type. Если Type не указан, то по умолчанию будет создано текстовое поле.
Примеры форм, созданных на Input с различными значениями для Type
Другие атрибуты тэга Input и примеры их использования Рассмотрим, для чего нужны остальные атрибуты:
Name – в случае, если данные должны быть отправлены в скрипт программы обработчика, то вы должны обязательно указать параметр для атрибута Name. Под этим именем данные, отправленные из формы, будут фигурировать в программе обработчика информации. Size — с помощью него задается размер поля создаваемой вебформы. Значение указывается в количестве символов, которое сможет поместиться в данном поле. Если Size не указан, то ширина будет принята по умолчанию равной 24 символам Maxlength — по умолчанию количество символов, которое можно будет ввести в Html форму, не ограничено, но с помощью Maxlength можно задать это ограничение. Больше символов, чем в нем будет указано, вам ввести в поле не удастся Value — с помощью него можно задать, что именно будет написано по умолчанию в поле или же на кнопке отправки данных Checked — это атрибут-флаг, который можно вставить в Input для радиокнопок (radio) или же для чекбоксов (checkbox). В этом случае данная радиокнопка или чекбокс будут активными при загрузке страницы с вебформой (в них уже будет стоять галочка)
Теперь давайте рассмотрим все примеры формы с Input
. Внешний вид текстового поля похож на вид поля для ввода пароля, поэтому рассмотрим только вариант создания Text, например, для ввода адреса электронной почты:
Введите Ваш E-mail: Теперь давайте рассмотрим создание вебформы с радиокнопками (Radio):
Вам нравится ресурс KtoNanNovenkogo.ru?
Да? Нет?
Обратите внимание, что в этой форме два раза используется тег Input – по разу для создания каждой из двух радиокнопок. Причем, в каждом из них прописан атрибут Name с одинаковым значением (rezultat), а значение Value разное (YES и NO).
Это означает, что при ее обработке, в случае выбора любого из переключателей, будет отправлена переменная, название которой прописано в Name, но значение этой переменной будет зависеть от того, какой именно переключатель был выбран.
Рассмотрим пример создание вебформы с чекбоксами (Checkbox):
Какой движок(и) сайта вы предпочитаете?
WordPress Joomla SMFЧекбоксы отличаются от радиокнопок возможностью выбрать сразу несколько вариантов. Name служит для определения в файле обработчика, в каком именно чекбоксе проставлены флажки,а Value — задает то значение, которое будет отослано в обработчик (если Value задан не будет, то в обработчик будет отправлен текст, расположенный рядом с данным чекбоксом).
Select, Option, Textarea, Label, Fieldset, Legend — выпадающие списки, текстовые области и другие элементы вебформ Для начала хочу немного напомнить, что такое, собственно, вебформы и для чего они нужны на страницах сайта. Они в первую очередь призваны в удобном для пользователя виде повторять имеющиеся в любой операционной системе элементы: кнопки, поля для ввода текста, выпадающие списки, флажки, переключатели и тому подобные вещи.
Все пользователи без каких-либо дополнительный объяснений понимают назначение этих элементов и если они видят кнопку Html формы, то понимают, что на нее нужно нажать.
Причем, все составляющие ее элементы (вроде Select, Option, Textarea, Label, Fieldset, Legend) представляют собой уже законченные заготовки (контейнеры), для вставки которых достаточно будет лишь использовать нужный тег с нужными атрибутами и параметрами.
Браузеры сами знают, как отображать тот или иной элемент вебформы. Правда, варианты отображения одного и того же ее элемента в разных браузерах могут немного отличаться друг от друга, но, как правило, не существенно.
Т.о. получается, что вебформы в Html являются попыткой перенести ключевые элементы, используемые в любой операционной системе
, на страницы вебсайта. Но для чего они могут понадобиться на страницах сайта?
В принципе, для того же, для чего аналогичные элементы используются в операционных системах — передача данных от пользователя. В случае форм данные от пользователя передаются на сервер, где обрабатываются специальной программой (язык гипертекстовой разметки, к сожалению, не позволяет вести обработку данных).
Хотя, данные можно отправить не только на сервер, но и, например, по электронной почте на адрес, заданный в атрибуте Action тэга Form. При отправке из Html данных на E-mail у пользователя, заполняющего поля, после нажатия им на кнопку отправки данных, запустится почтовая программа используемая на его компьютере по умолчанию.
Открывающий тег Form в таком случае должен выглядеть примерно так:
Select и Option — тэги выпадающих списков Все элементы вебформы, которые создают поля с выпадающими списками, формируются одинаковым образом. Сначала задается контейнер поля со списком с помощью открывающего и закрывающего Html тега Select. А затем внутри этого контейнера создаются отдельные контейнеры с пунктами (элементами) этого списка. Это делается с помощью открывающих и закрывающих тэгов Option.
Получается примерно так:
Но это упрощенная конструкция, т.к. у Select и Option имеется ряд атрибутов
, которые определяют свойства и внешний вид создаваемого поля с выпадающим списком.
Name — вы должны задать уникальное имя для данного элемента вебформы, создаваемого с помощью Select. Это имя будет передано на сервер в программу обработчик данных в качестве имени для переменной. В качестве значения этой переменной будет передано значение атрибута Value (задается в Option для каждого пункта) того пункта выпадающего списка, который выберет пользователь. Size — с помощью него можно задать количество отображаемых пунктов. Иначе говоря, с помощь Size можно задать высоту списка, измеряемую в количестве отображаемых строк. Если вы не указываете в явном виде значение Size в теге Select, то будет использоваться значение высоты выпадающего списка по умолчанию, при этом она будет разной в случае отсутствия или присутствия в Select атрибута Multiple:
Если Multiple в Select присутствует, то высота выпадающего списка в вебформе будет по умолчанию равна количеству его элементов. Т.е. будут показаны все элементы выпадающего списка с множественным выбором. См. пример множественного ниже. Если атрибут Size в Select задать меньше количества пунктов, то справа появится полоса прокрутки. Если Multiple в Select отсутствует, то высота выпадающего списка в вебформе будет по умолчанию равна одной строке. Т.е. видна будет только одна строка, а остальные пункты будут доступны только при нажатии на кнопку лифта (справа). См. пример приведенный ниже
Multiple — приписывание данного атрибута в теге Select позволит вам создать выпадающий список с возможность одновременного выбора нескольких пунктов. Подробнее об этом атрибуте читайте ниже.
Формы с выпадающими списками можно разделить на два варианта. В первом варианте вы сможете выбрать только один элемент (строку) поля с выпадающим списком, во втором варианте — удерживая Ctrl или Shift сможете выбрать одновременно несколько из имеющихся пунктов.
При этом во втором варианте будут отправлены на сервер данные о всех выбранных пунктах. Какой именно выпадающий список будет создан, определяется наличием или отсутствием в тэге Select атрибута Multiple.
Multiple указывается в Select без параметра, т.к. пишется просто Multiple и все. Если он присутствует, то будет создана вебформа выпадающего списка с возможностью множественного выбора (удерживая Ctrl или Shift).
Вариант поля с выпадающим списком, в котором будет возможен множественный выбор
, будет выглядеть примерно так:
Справа приведен пример вебформы выпадающего списка со множественным выбором, который создан на основе кода, приведенного выше. Как вы видите, удерживая Ctrl или Shift можно выделить несколько пунктов одновременно.
Если в тэге Select атрибута Multiple не будет, то выбрать можно будет только один элемент этого выпадающего списка (строку).
Пример, в котором можно выбрать только один пункт, вы можете видеть здесь:
Label Select SelectED сайт Legend
Атрибуты тега Option В создаваемый выпадающий список (с помощью Select и Option) можно добавить что-то вроде разделителей с заголовком групп, которые будут отличаться от остальных пунктов меню по начертанию шрифта.
Для создания группы из пунктов выпадающего списка нужно заключить их в открывающий и закрывающий теги формы Optgroup, а в открывающем тэге Optgroup прописать атрибут Label, в качестве параметра которого нужно будет ввести желаемое название группы.
Например так:
Label Select SelectED сайт Legend
Textarea — создание текстового поля в форме Остался еще один элемент вебформ, который мы не рассмотрели — Textarea (поле с возможностью ввода многострочного текста). Создается оно с помощью парного Html тега Textarea. Причем, в нем можно переносить текст на новую строку и он будет передаваться на сервер с учетом сделанных переносов.
Итак, для создания многострочного текстового поля нужно прописать открывающий и закрывающий Textarea, а между ними вы можете добавить текст, который будет виден при загрузке страницы с вебформой. Пользователь потом сможет стереть этот текст и написать свой.
Что вы можете сообщить о себе? Вместе с 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 оттенков в таблицах, выдаче Яндекса и других программах