Элемент (от англ. "input" ‒ «ввод») является основным элементом формы (HTML тег
Поле ввода принимает различный вид, в зависимости от значения атрибута type , применённого к данному элементу. Это могут быть разнообразные кнопки, поля ввода текста, пароля или имени файла, переключатели, флажки и т.д.
Так как тег является встроенным, то его не обязательно заключать в форму (тег
Примечание: Тег не может содержать какой-либо контент, он может содержать только атрибуты.
Не требуется.
Не все браузеры поддерживают типы, добавленные в HTML5. Если браузер не поддерживает какой-то из новых типов, то он будет считать, что это тип text .
Элемент поддерживает
HTML тег - является пустым элементом и содержит только атрибуты. Используется в пределах элемента
Поля для пользовательского ввода могут значительно отличаться друг от друга. В зависимости от значения атрибута type, поле ввода может быть текстовым полем, полем для пароля, радио кнопкой, простой кнопкой и тд.
Примечание: атрибут accept не поддерживается в IE9 и более ранних версиях.
Alt: Предоставляет альтернативный текст для пользователя, если он по каким-либо причинам не может просматривать изображения. Атрибут alt может использоваться только совместно с атрибутом type="image". autocomplete: Определяет, будет ли включено автозаполнение для поля ввода данных:
Примечание: атрибут autocomplete работает со следующими значениями атрибута type элемента : text, search, url, tel, email, password, datepickers, range и color.
Autofocus: Указывает браузеру, что элемент должен получить фокус после загрузки страницы. Значения для логического атрибута autofocus можно задавать следующими способами:
Примечание: атрибут autofocus не поддерживается в IE9 и более ранних версиях.
Checked: Указывает, что данный элемент будет выбран по умолчанию при загрузке страницы. Работает только с атрибутом type="checkbox" или type="radio". Значения для логического атрибута checked можно задавать следующими способами: Пример » disabled: Указывает, что элемент должен быть выключен (выключенный элемент является неактивным). Значения для логического атрибута disabled можно задавать следующими способами: Пример »
Примечание: атрибут disabled не работает с .
Form: Определяет форму с которой связан элемент . В качестве значения атрибута выступает идентификатор элемента
Если атрибут form не указан, то элемент должен быть потомком элемента
Примечание: атрибут form не поддерживается в IE.
Formaction: Указывает URL-адрес файла, который будет обрабатывать данные ввода, при отправке формы. Атрибут formaction используется только с type="submit" или type="image", и переопределяет атрибут action элемента
Примечание: атрибут formaction не поддерживается в IE9 и более ранних версиях.
Formenctype: Определяет способ кодирования данных формы при отправке на сервер. Может использоваться только совместно с атрибутом method="post" элемента
Примечание: атрибут formenctype не поддерживается в IE9 и более ранних версиях.
Formmethod: Определяет HTTP метод для отправки данных на указанный URL (для type="submit" и type="image"):
Примечание: атрибут formmethod не поддерживается в IE9 и более ранних версиях.
Formnovalidate: Указывает, что данные введенные в поле ввода не будут проверяться перед отправкой. Возможные значения логического атрибута novalidate:
Примечание: атрибут formnovalidate не поддерживается в IE9 и более ранних версиях, и в Safari.
Formtarget: Определяет имя фрейма или ключевое слово, которое указывает место для отображения ответа, полученного после отправки формы:
Примечание: атрибут formtarget не поддерживается в IE9 и более ранних версиях.
Height: Определяет высоту элемента в пикселях, используется только с (пример: height="100"). list: Устанавливает взаимосвязь между элементом и , позволяя для поля ввода указать список предварительно определенных вариантов. В качестве значения для атрибута выступает идентификатор элемента . Пример »
Примечание: атрибут list не поддерживается в IE9 и более ранних версиях, и в Safari.
Max: Указывает максимальное значение для ввода числа или даты. Можно использовать атрибут max совместно с атрибутом min для создания диапазона допустимых значений.
Примечание: атрибут max не поддерживается в IE9 и более ранних версиях, и в Firefox.
Maxlength: Определяет максимальное количество символов, которое можно будет ввести в поле ввода. Этот атрибут можно использовать для ограничения количества символов, которое разрешается пользователю ввести в данное поле. Например при запросе года можно ограничить количество символов, установив значение атрибута maxlength равным 4. Пример » min: Определяет минимальное значение для ввода числа или даты.
Примечание: атрибут min не поддерживается в IE9 и более ранних версиях, и в Firefox.
Multiple: Указывает, что пользователь может ввести более одного значения. Атрибут multiple работает только с type="email" и type="file". Возможные значения логического атрибута multiple: Пример »
Примечание: атрибут multiple не поддерживается в IE9 и более ранних версиях.
Name: Атрибут name определяет имя элемента, оно отправляется на сервер вместе с введенными в поле данными. Имя может использоваться в JavaScript для ссылки на элемент или для идентификации переданных данных на сервере (например, при обработке данных на сервере, имя элемента позволяет определить, что было введено в качестве имени пользователя, а что - в качестве пароля). pattern: Указывает регулярное выражение, которое определяет синтаксис данных, ввод которых должен быть разрешен в поле ввода. Шаблон регулярного выражения должен соответствовать введенному значению целиком. Для описания работы шаблона можно воспользоваться глобальным атрибутом title. Атрибут pattern работает со следующими значениями атрибута type: text, search, url, tel, email и password.
Примечание: атрибут pattern не поддерживается в IE9 и более ранних версиях, и в Safari.
Placeholder: Определяет короткую подсказку, которая описывает ожидаемое значение для поля ввода (пример: образец значения или краткое описание ожидаемого формата). Подсказка отображается в поле ввода, когда оно пустое и исчезает, когда пользователь начинает вводить данные или когда поле получает фокус (разница в работе атрибута зависит от используемого браузера), если поле теряет фокус и при этом данные в поле не были введены, то в поле ввода вновь отобразится подсказка.
Атрибут placeholder работает со следующими значениями атрибута type: text, search, url, tel, email и password. Пример »
Примечание: атрибут placeholder не поддерживается в IE9 и более ранних версиях.
Readonly: Указывает, что поле ввода может быть использовано только для чтения и не может быть изменено (однако, текст можно выделить и скопировать). Возможные значения логического атрибута readonly: Пример » required: Указывает, что поле ввода необходимо заполнить перед отправкой формы. Если пользователь попытается отправить форму, не введя в поле никакого значения, то на экране отобразится предупреждающее сообщение. Это сообщение будет отличаться по содержанию и стилизации в зависимости от браузера и типа поля ввода.
Атрибут required работает со следующими значениями атрибута type: text, search, url, tel, email, password, date pickers, number, checkbox, radio и file. Возможные значения логического атрибута required:
Примечание: атрибут required не поддерживается в IE9 и более ранних версиях, и в Safari.
Size: Указывает ширину поля ввода (в качестве единицы измерения выступает количество видимых символов). Так, например, значение 3 создает поле ввода текста, ширина которого достаточна для отображение трех введенных символов (хотя пользователь при желании может ввести и большее количество). Атрибут size работает со следующими значениями атрибута type: text, search, tel, url, email и password. Для указания максимального количества вводимых знаков, воспользуйтесь атрибутом maxlength. Пример » src: Указывает путь к графическому файлу для поля с изображением. Атрибут src является обязательным для элементов с type="image" и может использоваться только с ними. step: Определяет интервал чисел для элемента . Пример: если step="3", то возможные значения чисел могут быть: -3, 0, 3, 6 и тд. Атрибут step может использоваться совместно с атрибутами max и min, для создания диапазона допустимых значений.
Примечание: атрибут step не поддерживается в IE9 и более ранних версиях, и в Firefox.
Type: Указывает, какой тип элемента управления будет отображен. По умолчанию браузеры используют , если не указано другое или неизвестное значение атрибута type. Таким образом, браузеры, не поддерживающие новые значения, просто заменят их значением по умолчанию и отобразят обычное текстовое поле ввода.
Тег так же поддерживает Глобальные атрибуты и События
HTML-формы являются элементами управления, которые применяются для сбора информации от посетителей веб-сайта.
Веб-формы состоят из набора текстовых полей, кнопок, списков и других элементов управления, которые активизируются щелчком мыши. Технически формы передают данные от пользователя удаленному серверу.
Для получения и обработки данных форм используются языки веб-программирования, такие как PHP , Perl .
До появления HTML5 веб-формы представляли собой набор нескольких элементов , , завершающихся кнопкой . Для стилизации форм в разных браузерах приходилось прилагать немало усилий. Кроме того, формы требовали применения JavaScript для проверки введенных данных, а также были лишены специфических типов полей ввода для указания повседневной информации типа дат, адресов электронной почты и URL-адресов.
HTML5-формы решили большинство этих распространенных проблем благодаря наличию новых атрибутов, предоставив возможность изменять внешний вид элементов форм за счет CSS3 .
Основу любой формы составляет элемент
Элемент
Каждой группе элементов можно присвоить название с помощью элемента , который идет сразу за тегом
Имя *
E-mail
Элемент создает большинство полей формы. Атрибуты элемента отличаются в зависимости от типа поля, для создания которого используется этот элемент.
С помощью css-стилей можно изменить размер шрифта, тип шрифта, цвет и другие свойства текста, а также добавить границы, цвет фона и фоновое изображение. Ширина поля задается свойством width .
Элемент ... используется вместо элемента , когда нужно создать большие текстовые поля. Текст, отображаемый как исходное значение, помещается внутрь тега. Размеры поля устанавливаются при помощи атрибутов cols – размеры по горизонтали, rows – размеры по вертикали. Высоту поля можно задать свойством height . Все размеры считаются исходя из размера одного символа моноширинного шрифта.
Списки дают возможность расположить большое количество пунктов компактно. Раскрывающиеся списки создаются при помощи элемента ... . Они позволяют выбрать одно или несколько значений из предложенного множества. По умолчанию в поле списка отображается его первый элемент.
Для добавления в список пунктов используются элементы ... , которые располагаются внутри .
Для систематизации списков применяется элемент ... , который создает заголовки в списках.
Для списков возможно изменить размер шрифта, тип шрифта, цвет и другие свойства текста, а также добавить границы, цвет фона и фоновое изображение.
Надписи к элементам формы создаются с помощью элемента ... . Существует два способа группировки надписи и поля. Если поле находится внутри элемента , то атрибут for указывать не нужно.
Когда вы последний раз летали на самолете?
Кошка
Элемент ... создает кликабельные кнопки. В отличие от кнопок, созданных ( , , , ), внутрь элемента можно поместить контент — текст или изображение.
Для корректного отображения элемента разными браузерами нужно указывать атрибут type , например, .
Кнопки позволяют пользователям передавать данные в форму, очищать содержимое формы или предпринимать какие-либо другие действия. Можно создавать границы, изменять фон и выравнивать текст на кнопке.
Флажки в формах задаются с помощью конструкции , а переключатель — при помощи .
Флажков, в отличие от переключателей, в одной форме может быть установлено несколько. Если для флажков указан атрибут checked , то при загрузке станицы на соответствующих полях формы флажки уже будут установлены.
Элемент применяется при реализации выбора с помощью переключателей и флажков. Можно выбрать нужный пункт, просто щелкая кнопкой мыши на тексте, связанном с ним. Для этого нужно поместить внутрь элемента .
‘Input ’ («вводимая информация», прим. пер. ) это короткое слово, которым мы договорились обозначать «предложения, которые вы читаете и слушаете ». Input это противоположность слову ‘Output ’, которое в наших статьях значит «предложения, которые вы говорите или пишете».
Вы никогда не задумывались почему можно говорить на родном языке так легко? Вы хотите сказать что-то (выразить какие-то идеи) - и правильные фразы и предложения просто приходят к вам в голову. Большая часть процесса неосознанная: что-то просто появляется в вашей голове. Вы можете сказать это или нет, но вы не знаете, откуда это пришло. Вот модель, которая объясняет, как это возможно:
Конечно, эта модель очень упрощенная. Мозг ищет не целые предложения, а скорее части предложений (законченные по смыслу выражения). Он может построить очень сложные и длинные предложения из этих частей. Так что мозг не просто «имитирует» одно предложение за раз. Он использует много предложений одновременно, чтобы построить что-то оригинальное. Например мозг знает, что можно взять известное предложение и заменить в нем субъект. Например, если вы слышали «кошка под столом», можно легко сказать «собака под столом» или «книга под креслом».
input необходим для мозга. Чем больше правильных и понятных предложений знает мозг, тем лучше он способен выражать мысли.
Эта модель описывает ребенка постигающего его родной язык. Ребенок слушает его родителей и других людей. Его мозг понимает и запоминает слышимое и все лучше и лучше способен думать самостоятельно. Уже к 5 годам ребенок говорит довольно хорошо.
Но эта же модель может работь и при изучении иностранного языка. По сути мы считаем, что это едиственный способ овладеть языком в совершенстве.
Что эта модель значит для изучающих иностранный язык? Самое важное:
Если вы запомните все новые фразы из нескольких книг на английском, вы заметите, что он стал намного лучше. Вы будете удивлены, но подобные фразы будут просто приходить к вам в голову, когда вы говорите или пишете! И вы будете говорить практически без ошибок. Во время следующего теста по английкому вы безусловно заметите разницу. Например при необходимость выбрать ответ вы будете «чувстовать» правильный ответ. Вы можете не знать, «почему» он правильный (вы не знаете, какое это правило грамматики), но вы будете знать, что он правильный. Вы будете это знать, потому что вы знаете похожие предложения, и они правильные.
Это касается любой темы в языке. Выкиньте учебник английского! Вы будете понимать, что “I have seen Paul yesterday” неправильно, а “I saw Paul yesterday” правильно. Первое предложение будет просто звучать неправильно. Почему? Вы читали предложения, похожие на второе 200 раз, и похожие на первое 0 раз.
Я никогда не забуду, когда я открыл учебник “Practical English Usage”. Я уже заканчивал среднюю школу, и мой английский уже был на высоте. Учебник был полон вопросов и грамматических правил. Для каждого вопроса были несколько примеров, правильных и неправильных. Когда я смотрел на неправильный пример, я удивлялся «конечно он неправильный, звучит просто ужасно». Когдя я читал правило для него, я думал «я не знал, что для этого есть правило». У меня сложилось вмечатления, что я не знал ни одного правила из книги… Я в них не нуждался. (И даже если бы я захотел, я бы не смог запомнить все правила). Я мог просто посмотреть на предложение и сказать, выглядит ли оно правильно или нет . Я стал как носитель языка. За счет чтения книг, просмотра сериалов, прослушивания музыки и т.д. я получил много input’a. Существует много примеров, когда люди приблизились к совершенству от этого - например Майкл, я, и другие авторы секции
Приветствую вас, уважаемые читатели блога сайт. Сегодня я хочу поговорить о такой , как HTML формы. Какой бы не был движок вашего сайта (cms), на нем обязательно будут в том или ином виде использоваться формы, созданные с помощью тегов Form и Input, а так же атрибутов и параметров Button, Checked, Value, Checkbox, Radio, Checkbox, Submit.
Ну, и еще можно добавить к этому элементы для создания выпадающих списков и текстовых полей — Select, Option, Textarea, Label, Fieldset, Legend.
Та же строка поиска по сайту () создается с использованием этих тэгов, а поиск то на вашем проекте будет обязательно. Поэтому понимание того, как они устроены и работают, вам совсем не помешает для успешной работы над дизайном, да и при самостоятельной раскрутке и продвижении будет не лишним.
Так, с обоснованием необходимости изучения этих элементов, думаю, вопросов больше не должно возникнуть, поэтому самое время переходить непосредственно к изучению их возможных вариантов.
Да, хочу еще напомнить, что мы уже успели рассмотреть много материалов на тему языка гипертекстовой разметки, например, трех ) и .
По своей сути формы состоят из элементов, для создания которых внутри основного контейнера из тегов Form вставляют различные тэги — Checked, Value, Checkbox, Radio, Checkbox, Submit и др. Нам лишь нужно будет расположить ее код в любом удобном для этого месте шаблона сайта, указав с помощью тегов и их атрибутов, как она должна будет выглядеть.
Это может быть текстовое поле с кнопкой отправки введенного запроса, варианты выбора с радиокнопками (когда можно оставить нажатой только одну из предоставляемых кнопок), несколько текстовых полей с кнопкой для отправки () и многое другое.
Например, в случае «поиска», с помощью атрибута Value можно задать, что именно будет написано на кнопке расположенной рядом с полем для ввода запроса. Данные вводимые в формах должны быть в дальнейшем каким-то образом обработаны.
Например, в случае обратной связи пользователь, после того как заполнит поле со своим именем, введет свой E-mail и текст сообщения, а затем нажмет на кнопку отправки, будет вправе надеяться на отправку данных из формы на E-mail автора сайта. Но реализовать такое с помощью только одного языка гипертекстовой разметки (), к сожалению, не возможно.
Для этих целей потребуется специальная программа обработчик, которая после нажатия пользователем на кнопку отправки возьмет все данные из полей обратной связи и отправит их на E-mail владельцу ресурса. Какая именно программа будет это делать, вы должны указать сами с помощью атрибута Action.
Обычно программа обработки представляет из себя скрипт, написанный на языке PHP. Поэтому в атрибуте Action тэга Form вы должны будете прописать путь к файлу этого скрипта, лежащего на сервере вашего хостинга. Приведу в качестве примера подписку на RSS ленту моего блога посредством E-mail:
Немного непонятно, наверное, кажется по началу, но, думаю, что все прояснится по мере дальнейшего рассказа.
Любая форма должна быть заключена в открывающий и закрывающий тэги Form . Это своеобразный контейнер для их создания. У этого тега имеется ряд обязательных и необязательных атрибутов:
Рассмотрим остальные тэги, позволяющие создавать разнообразные вебформы. Самый универсальный – это Input . Внутри него обязательно прописывают атрибут Type, который определяет, что именно будет из себя представлять HTML форма, созданная с помощью этого тэга.
C помощью Input и Type можно создавать следующие элементы:
Input не имеет закрывающего тега. Что именно будет представлять из себя вебформа, созданная с помощью него, целиком и полностью зависит от параметра указанного в атрибуте Type. Если Type не указан, то по умолчанию будет создано текстовое поле.
Рассмотрим, для чего нужны остальные атрибуты:
Теперь давайте рассмотрим все примеры формы с Input . Внешний вид текстового поля похож на вид поля для ввода пароля, поэтому рассмотрим только вариант создания Text, например, для ввода адреса электронной почты:
Теперь давайте рассмотрим создание вебформы с радиокнопками (Radio):
Вам нравится ресурс KtoNanNovenkogo.ru?
Обратите внимание, что в этой форме два раза используется тег Input – по разу для создания каждой из двух радиокнопок. Причем, в каждом из них прописан атрибут Name с одинаковым значением (rezultat), а значение Value разное (YES и NO).
Это означает, что при ее обработке, в случае выбора любого из переключателей, будет отправлена переменная, название которой прописано в Name, но значение этой переменной будет зависеть от того, какой именно переключатель был выбран.
Рассмотрим пример создание вебформы с чекбоксами (Checkbox):
Какой движок(и) сайта вы предпочитаете?
Чекбоксы отличаются от радиокнопок возможностью выбрать сразу несколько вариантов. Name служит для определения в файле обработчика, в каком именно чекбоксе проставлены флажки,а Value — задает то значение, которое будет отослано в обработчик (если Value задан не будет, то в обработчик будет отправлен текст, расположенный рядом с данным чекбоксом).
Для начала хочу немного напомнить, что такое, собственно, вебформы и для чего они нужны на страницах сайта. Они в первую очередь призваны в удобном для пользователя виде повторять имеющиеся в любой операционной системе элементы: кнопки, поля для ввода текста, выпадающие списки, флажки, переключатели и тому подобные вещи.
Все пользователи без каких-либо дополнительный объяснений понимают назначение этих элементов и если они видят кнопку Html формы, то понимают, что на нее нужно нажать.
Причем, все составляющие ее элементы (вроде Select, Option, Textarea, Label, Fieldset, Legend) представляют собой уже законченные заготовки (контейнеры), для вставки которых достаточно будет лишь использовать нужный тег с нужными атрибутами и параметрами.
Браузеры сами знают, как отображать тот или иной элемент вебформы. Правда, варианты отображения одного и того же ее элемента в разных браузерах могут немного отличаться друг от друга, но, как правило, не существенно.
Т.о. получается, что вебформы в Html являются попыткой перенести ключевые элементы, используемые в любой операционной системе , на страницы вебсайта. Но для чего они могут понадобиться на страницах сайта?
В принципе, для того же, для чего аналогичные элементы используются в операционных системах — передача данных от пользователя. В случае форм данные от пользователя передаются на сервер, где обрабатываются специальной программой (язык гипертекстовой разметки, к сожалению, не позволяет вести обработку данных).
Хотя, данные можно отправить не только на сервер, но и, например, по электронной почте на адрес, заданный в атрибуте Action тэга Form. При отправке из Html данных на E-mail у пользователя, заполняющего поля, после нажатия им на кнопку отправки данных, запустится почтовая программа используемая на его компьютере по умолчанию.
Открывающий тег Form в таком случае должен выглядеть примерно так:
Все элементы вебформы, которые создают поля с выпадающими списками, формируются одинаковым образом. Сначала задается контейнер поля со списком с помощью открывающего и закрывающего Html тега Select. А затем внутри этого контейнера создаются отдельные контейнеры с пунктами (элементами) этого списка. Это делается с помощью открывающих и закрывающих тэгов Option.
Получается примерно так:
Но это упрощенная конструкция, т.к. у Select и Option имеется ряд атрибутов , которые определяют свойства и внешний вид создаваемого поля с выпадающим списком.
Формы с выпадающими списками можно разделить на два варианта. В первом варианте вы сможете выбрать только один элемент (строку) поля с выпадающим списком, во втором варианте — удерживая Ctrl или Shift сможете выбрать одновременно несколько из имеющихся пунктов.
При этом во втором варианте будут отправлены на сервер данные о всех выбранных пунктах. Какой именно выпадающий список будет создан, определяется наличием или отсутствием в тэге Select атрибута Multiple.
Multiple указывается в Select без параметра, т.к. пишется просто Multiple и все. Если он присутствует, то будет создана вебформа выпадающего списка с возможностью множественного выбора (удерживая Ctrl или Shift).
Вариант поля с выпадающим списком, в котором будет возможен множественный выбор , будет выглядеть примерно так:
Справа приведен пример вебформы выпадающего списка со множественным выбором, который создан на основе кода, приведенного выше. Как вы видите, удерживая Ctrl или Shift можно выделить несколько пунктов одновременно.
Если в тэге Select атрибута Multiple не будет, то выбрать можно будет только один элемент этого выпадающего списка (строку).
Пример, в котором можно выбрать только один пункт, вы можете видеть здесь:
Label Select SelectED сайт Legend
В создаваемый выпадающий список (с помощью Select и Option) можно добавить что-то вроде разделителей с заголовком групп, которые будут отличаться от остальных пунктов меню по начертанию шрифта.
Для создания группы из пунктов выпадающего списка нужно заключить их в открывающий и закрывающий теги формы Optgroup, а в открывающем тэге Optgroup прописать атрибут Label, в качестве параметра которого нужно будет ввести желаемое название группы.
Например так:
Остался еще один элемент вебформ, который мы не рассмотрели — Textarea (поле с возможностью ввода многострочного текста). Создается оно с помощью парного Html тега Textarea. Причем, в нем можно переносить текст на новую строку и он будет передаваться на сервер с учетом сделанных переносов.
Итак, для создания многострочного текстового поля нужно прописать открывающий и закрывающий Textarea, а между ними вы можете добавить текст, который будет виден при загрузке страницы с вебформой. Пользователь потом сможет стереть этот текст и написать свой.
Вместе с Textarea можно использовать следующие атрибуты:
Html тег Label позволяет реализовать одну очень интересную возможность в формах, которая имеется в операционных системах. Там, если вы помните, для того чтобы активировать какой-либо элемент, не обязательно щелкать именно по нему, можно щелкнуть и по названию этого элемента — все равно произойдет его активация.
В вебформах по умолчанию этого не происходит — нужно щелкать именно по самому элементу Html формы для его активации. Например, нужно щелкать по флажку, для того чтобы поставить в нем галочку. Щелчок же по тексту рядом с флажком результата не принесет. Попробуйте сами:
Как вы можете убедиться, по тексту щелкать для активации этого элемента бесполезно — нужно щелкать именно по нему самому. Вот именно такое положение вещей и призван исправить тэг Label. Он позволить сделать текст рядом с элементом веб формы кликабельным, что несомненно улучшит юзабилити .
Но как связать элемент Html формы и текст? Для этого нужно дописать в атрибут ID с уникальным параметром, а текст нужно окружить открывающим и закрывающим тэгами Label. И это еще не все. В открывающем теге Label нужно прописать атрибут For, параметр которого должен быть точно таким же, как и у атрибута ID в Html теге элемента формы. Получается примерно так:
Как вы можете видеть, теперь, благодаря использованию Label, элементы вебформы можно активировать не только щелчком по нему самому, но и щелчком по тексту, расположенному рядом.
Вы, наверное, часто видели, что большие формы в Html бывают разбиты на группы (Fieldset), которые обведены в рамочку и у каждой такой группы имеется свой заголовок (Legend). Реализуется это с помощью всего двух тэгов: Fieldset и Legend. Они парные, т.е. у них должны быть в обязательном порядке открывающий и закрывающий.
Так вот, для создания группы из составных частей вам нужно заключить все эти части в открывающий и закрывающий тэги Fieldset. А для того, чтобы задать для данной группы заголовок (Legend), вам нужно сразу же после открывающего Fieldset прописать конструкцию из открывающего и закрывающего Legend, между которыми необходимо вставить текст заголовка группы.
Вот пример создания групп с помощью Fieldset и Legend:
Удачи вам! До скорых встреч на страницах блога сайт
посмотреть еще ролики можно перейдя на
Вам может быть интересно
Select, Option, Textarea, Label, Fieldset, Legend - теги Html формы выпадающих списков и текстового поля Списки в Html коде - теги UL, OL, LI и DL MailTo - что это и как в Html создать ссылку для отправки Емейла Как задаются цвета в Html и CSS коде, подбор RGB оттенков в таблицах, выдаче Яндекса и других программах