Для чего нужен тег label
Всегда используйте label
Это перевод статьи Адама Сильвера — «Always use a label».
Иногда дизайнеры слишком сильно упрощают форму, убирая подпись к полю (примечание переводчика: здесь и далее имеется в виду тег label). Проблема в том, что минимализм не всегда означает простоту в использовании, а это, безусловно, и происходит с подписями.
На самом деле, подпись к полю является важной частью для создания лёгких в использовании форм. Вот почему:
1) Зрячие пользователи смогут видеть инструкции и будут знать, что делать. Без подписей к полям в лучшем случае это будет сложно.
Подпись к полю помогает зрячим пользователям понять, что нужно вводить
2) Незрячие пользователи смогут услышать инструкции благодаря использованию скринридеров. Без подписей к полям это будет невозможно.
Поле «Username» доступно для чтения скринридерами
3) Пользователи с моторными нарушениями смогут легче найти и активировать элементы с помощью мышки или пальца благодаря увеличению размеров активной области. Это происходит потому, что клик и нажатие пальцем по подписи работает так, будто пользователь кликнул по самому элементу управления.
Большая площадь поля помогает пользователям с моторными нарушениями активировать элемент
Но для меню выбора вида/размера/цвета/количества не нужны подписи, не так ли?
Нужны, и, к сожалению, довольно часто подписей нет в формах выбора товаров. ASOS страдает этой проблемой, как вы видите.
Форма выбора товаров на ASOS пренебрегает подписями у раскрывающихся списков
Вместо подписей здесь используется первое значение из раскрывающегося списка. Пока значение не выбрано это допустимо для хорошо видящих пользователей, но создаёт трудности для пользователей с нарушением зрения или моторных функций. Если значение выбрано, как в примере выше с выбором цвета, сложности возникают уже у всех типов пользователей.
House of Fraser показывает подпись к раскрывающемуся списку выбора количества вещей, улучшая удобство использования всем пользователям.
House of Fraser имеет подпись у поля с выбором количества вещей
Простая форма поиска не нуждается в подписях, не так ли?
Нуждается, но, к сожалению, формы поиска часто разрабатываются без подписей. В качестве примера можно посмотреть на Selfridges.
Форма поиска Selfridges пренебрегает подписью к полю
Чтобы объяснить назначение формы, вместо подписи здесь используется подсказка для поля и кнопка отправки (иконка лупы). Но это чересчур сложно для использования людьми с ограниченными возможностями — и, конечно — подсказки полей не должны использоваться как замена подписям.
Smashing Magazine показывает, как использование подписей может быть красивым и функциональным одновременно.
Форма поиска Smashing Magazine использует подпись у поля
Использование подписей к полям может нести дополнительные сложности в дизайне, но уход от этих проблем — это не решение. Принимайте этот вызов, и не стоит чересчур упрощать. И конечно, всегда используйте тег label.
label
The labeled statement can be used with break or continue statements. It is prefixing a statement with an identifier which you can refer to.
Syntax
Any JavaScript identifier that is not a reserved word.
A JavaScript statement. break can be used with any labeled statement, and continue can be used with looping labeled statements.
Description
You can use a label to identify a loop, and then use the break or continue statements to indicate whether a program should interrupt the loop or continue its execution.
In strict mode code, you can’t use » let » as a label name. It will throw a SyntaxError (let is a reserved identifier).
Examples
Using a labeled continue with for loops
Using a labeled continue statement
Given an array of items and an array of tests, this example counts the number of items that passes all the tests.
Using a labeled break with for loops
Using a labeled break statement
Given an array of items and an array of tests, this example determines whether all items pass all tests.
Using a labeled block with break
You can use labels within simple blocks, but only break statements can make use of non-loop labels.
Labeled function declarations
Starting with ECMAScript 2015, labeled function declarations are now standardized for non-strict code in the web compatibility annex of the specification.
In strict mode code, however, this will throw a SyntaxError :
Generator functions can neither be labeled in strict code, nor in non-strict code:
Html формы для сайта — теги Form, Input и Select, Option, Textarea, Label и другие для создания элементов вебформ
Приветствую вас, уважаемые читатели блога KtoNaNovenkogo.ru. Сегодня я хочу поговорить о такой неотъемлемой составляющей верстки любого сайта, как HTML формы. Какой бы не был движок вашего сайта (cms), на нем обязательно будут в том или ином виде использоваться формы, созданные с помощью тегов Form и Input, а так же атрибутов и параметров Button, Checked, Value, Checkbox, Radio, Checkbox, Submit.
Ну, и еще можно добавить к этому элементы для создания выпадающих списков и текстовых полей — Select, Option, Textarea, Label, Fieldset, Legend.
Зачем нужны и как работают формы на современных сайтах
Та же строка поиска по сайту (здесь описан поиск от яндекса) создается с использованием этих тэгов, а поиск то на вашем проекте будет обязательно. Поэтому понимание того, как они устроены и работают, вам совсем не помешает для успешной работы над дизайном, да и при самостоятельной раскрутке и продвижении будет не лишним.
Так, с обоснованием необходимости изучения этих элементов, думаю, вопросов больше не должно возникнуть, поэтому самое время переходить непосредственно к изучению их возможных вариантов.
Да, хочу еще напомнить, что мы уже успели рассмотреть много материалов на тему языка гипертекстовой разметки, например, узнали принципы формирования цветов в Html, трех видов списков на тегах ul, ol, li, dl) и принципы создания таблиц на тегах Tr, Th, Td, Table.
По своей сути формы состоят из элементов, для создания которых внутри основного контейнера из тегов Form вставляют различные тэги — Checked, Value, Checkbox, Radio, Checkbox, Submit и др. Нам лишь нужно будет расположить ее код в любом удобном для этого месте шаблона сайта, указав с помощью тегов и их атрибутов, как она должна будет выглядеть.
Это может быть текстовое поле с кнопкой отправки введенного запроса, варианты выбора с радиокнопками (когда можно оставить нажатой только одну из предоставляемых кнопок), несколько текстовых полей с кнопкой для отправки (обратная связь описанная тут) и многое другое.
Например, в случае «поиска», с помощью атрибута Value можно задать, что именно будет написано на кнопке расположенной рядом с полем для ввода запроса. Данные вводимые в формах должны быть в дальнейшем каким-то образом обработаны.
Например, в случае обратной связи пользователь, после того как заполнит поле со своим именем, введет свой E-mail и текст сообщения, а затем нажмет на кнопку отправки, будет вправе надеяться на отправку данных из формы на E-mail автора сайта. Но реализовать такое с помощью только одного языка гипертекстовой разметки (здесь читайте что такое Html, теги и валидатор W3C), к сожалению, не возможно.
Для этих целей потребуется специальная программа обработчик, которая после нажатия пользователем на кнопку отправки возьмет все данные из полей обратной связи и отправит их на E-mail владельцу ресурса. Какая именно программа будет это делать, вы должны указать сами с помощью атрибута Action.
Обычно программа обработки представляет из себя скрипт, написанный на языке PHP. Поэтому в атрибуте Action тэга Form вы должны будете прописать путь к файлу этого скрипта, лежащего на сервере вашего хостинга. Приведу в качестве примера подписку на RSS ленту моего блога посредством E-mail:
Немного непонятно, наверное, кажется по началу, но, думаю, что все прояснится по мере дальнейшего рассказа.
Теги Form и Input для создания кнопок, чекбоксов и радиокнопок
Любая форма должна быть заключена в открывающий и закрывающий тэги Form. Это своеобразный контейнер для их создания. У этого тега имеется ряд обязательных и необязательных атрибутов:
Рассмотрим остальные тэги, позволяющие создавать разнообразные вебформы. Самый универсальный – это Input. Внутри него обязательно прописывают атрибут Type, который определяет, что именно будет из себя представлять HTML форма, созданная с помощью этого тэга.
C помощью Input и Type можно создавать следующие элементы:
Input не имеет закрывающего тега. Что именно будет представлять из себя вебформа, созданная с помощью него, целиком и полностью зависит от параметра указанного в атрибуте Type. Если Type не указан, то по умолчанию будет создано текстовое поле.
Примеры форм, созданных на Input с различными значениями для Type
| TEXT | Обычное текстовое поле для ввода символов с клавиатуры | |
| PASSWORD | Текстовое поле, в котором вводимые символы закрываются звездочками | |
| BUTTON | Просто кнопка | |
| SUBMIT | Создается кнопка, с помощью которой можно отправить данные в программу обработчика | |
| IMAGE | Поле с изображением, при нажатии на которое, данные будут отправлены в обработчик | |
| RADIO | Радиопереключатели — следует использовать, если требуется выбрать только один вариант из предложенных | Joomla WordPress SMF |
| CHECKBOX | CHECKBOX — чекбоксы (можно активировать несколько чекбоксов одновременно) | Joomla WordPress SMF |
| FILE | Создается кнопка для загрузки файла на сервер | |
| HIDDEN | Скрытое поле, которое не отображается, но в файл обработчика данные передаются. | |
| RESET | Кнопка для возвращение данных в первоначальное значение (сброса). |
Другие атрибуты тэга Input и примеры их использования
Рассмотрим, для чего нужны остальные атрибуты:
Теперь давайте рассмотрим все примеры формы с Input. Внешний вид текстового поля похож на вид поля для ввода пароля, поэтому рассмотрим только вариант создания Text, например, для ввода адреса электронной почты:
Теперь давайте рассмотрим создание вебформы с радиокнопками (Radio):
Обратите внимание, что в этой форме два раза используется тег Input – по разу для создания каждой из двух радиокнопок. Причем, в каждом из них прописан атрибут Name с одинаковым значением (rezultat), а значение Value разное (YES и NO).
Это означает, что при ее обработке, в случае выбора любого из переключателей, будет отправлена переменная, название которой прописано в Name, но значение этой переменной будет зависеть от того, какой именно переключатель был выбран.
Рассмотрим пример создание вебформы с чекбоксами (Checkbox):
Чекбоксы отличаются от радиокнопок возможностью выбрать сразу несколько вариантов. Name служит для определения в файле обработчика, в каком именно чекбоксе проставлены флажки,а Value — задает то значение, которое будет отослано в обработчик (если Value задан не будет, то в обработчик будет отправлен текст, расположенный рядом с данным чекбоксом).
Select, Option, Textarea, Label, Fieldset, Legend — выпадающие списки, текстовые области и другие элементы вебформ
Для начала хочу немного напомнить, что такое, собственно, вебформы и для чего они нужны на страницах сайта. Они в первую очередь призваны в удобном для пользователя виде повторять имеющиеся в любой операционной системе элементы: кнопки, поля для ввода текста, выпадающие списки, флажки, переключатели и тому подобные вещи.
Все пользователи без каких-либо дополнительный объяснений понимают назначение этих элементов и если они видят кнопку Html формы, то понимают, что на нее нужно нажать.
Причем, все составляющие ее элементы (вроде Select, Option, Textarea, Label, Fieldset, Legend) представляют собой уже законченные заготовки (контейнеры), для вставки которых достаточно будет лишь использовать нужный тег с нужными атрибутами и параметрами.
Браузеры сами знают, как отображать тот или иной элемент вебформы. Правда, варианты отображения одного и того же ее элемента в разных браузерах могут немного отличаться друг от друга, но, как правило, не существенно.
Т.о. получается, что вебформы в Html являются попыткой перенести ключевые элементы, используемые в любой операционной системе, на страницы вебсайта. Но для чего они могут понадобиться на страницах сайта?
В принципе, для того же, для чего аналогичные элементы используются в операционных системах — передача данных от пользователя. В случае форм данные от пользователя передаются на сервер, где обрабатываются специальной программой (язык гипертекстовой разметки, к сожалению, не позволяет вести обработку данных).
Хотя, данные можно отправить не только на сервер, но и, например, по электронной почте на адрес, заданный в атрибуте Action тэга Form. При отправке из Html данных на E-mail у пользователя, заполняющего поля, после нажатия им на кнопку отправки данных, запустится почтовая программа используемая на его компьютере по умолчанию.
Открывающий тег Form в таком случае должен выглядеть примерно так:
Вместе с Textarea можно использовать следующие атрибуты:
Label — для чего нужен этот Html тэг в форме
Html тег Label позволяет реализовать одну очень интересную возможность в формах, которая имеется в операционных системах. Там, если вы помните, для того чтобы активировать какой-либо элемент, не обязательно щелкать именно по нему, можно щелкнуть и по названию этого элемента — все равно произойдет его активация.
В вебформах по умолчанию этого не происходит — нужно щелкать именно по самому элементу Html формы для его активации. Например, нужно щелкать по флажку, для того чтобы поставить в нем галочку. Щелчок же по тексту рядом с флажком результата не принесет. Попробуйте сами:
Как вы можете убедиться, по тексту щелкать для активации этого элемента бесполезно — нужно щелкать именно по нему самому. Вот именно такое положение вещей и призван исправить тэг Label. Он позволить сделать текст рядом с элементом веб формы кликабельным, что несомненно улучшит юзабилити.
Но как связать элемент Html формы и текст? Для этого нужно дописать в атрибут ID с уникальным параметром, а текст нужно окружить открывающим и закрывающим тэгами Label. И это еще не все. В открывающем теге Label нужно прописать атрибут For, параметр которого должен быть точно таким же, как и у атрибута ID в Html теге элемента формы. Получается примерно так:
Как вы можете видеть, теперь, благодаря использованию Label, элементы вебформы можно активировать не только щелчком по нему самому, но и щелчком по тексту, расположенному рядом.
Fieldset и Legend — разбиваем форму на части
Вы, наверное, часто видели, что большие формы в Html бывают разбиты на группы (Fieldset), которые обведены в рамочку и у каждой такой группы имеется свой заголовок (Legend). Реализуется это с помощью всего двух тэгов: Fieldset и Legend. Они парные, т.е. у них должны быть в обязательном порядке открывающий и закрывающий.
Так вот, для создания группы из составных частей вам нужно заключить все эти части в открывающий и закрывающий тэги Fieldset. А для того, чтобы задать для данной группы заголовок (Legend), вам нужно сразу же после открывающего Fieldset прописать конструкцию из открывающего и закрывающего Legend, между которыми необходимо вставить текст заголовка группы.
Вот пример создания групп с помощью Fieldset и Legend:
Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru
Комментарии и отзывы (22)
Спасибо за статью! Это как раз то, что я искала — уроки Html! Все доступно, понятно!
О спасибо большое) то что нужно, щас буду писать лабу по информатике и Html. Спасибо автору за статью.
Ирина Пакидова, SaT: пожалуйста, рад, что вам пригодилось.
Спосибо! реально помогло!
Люди подскажите как создать файл обработки с помощью которого можно будет создавать новый аккаунт
вот вроде всё правильно но почемуто кнопка отправить всё равно не создаётся я не понимаю что делать помогите кто знает!
Немного почувствовала себя дурой. решила скопировать код со старого сайта,чтоб просто заново только одну страницу можно сделать было. ну не понимаю я как сделать кнопку «отправить сообщение»
Благодарю автора за статью. Как раз искала форму для своего сайта. Материал оказался очень полезен!
Дмитрий спасибо. Очень помогли. У вас нашел, как устанавливать форму с кодом ссылки на сайт. И все получилось. Блага, счастья и здоровья!
Хочу сделать меню для PDA, просто ссылки на страницы сайта с помощью Тега как сделать?
Добрый день. Такая кнопка
Объясните пожалуйста, Что такое и onclick=»DiscountFind ()
это, просто если сказать, где то в стилях есть настройка как отображать)) где то так: #findbtn
Интересует такая вещь:
1. Люди заходят на сайт (типа интернет магазин)
2. Пишут в каком-то окошке «Текст»
3. Выбирают шрифт, цвет, размер
4. Ниже в окошке видят пример «Текста» + изменяемая цена
Есть ли такая форма или как это вообще сделать?
Добрый день. Полезная статья. Спасибо огромное!
Не могли бы вы подсказать, как можно стилизовать такие формы?
Определенный бэкграунд, фон-картинку задать и т.д.
Может кто сталкивался, поделитесь, плз, ссылочкой.
Совет — сделайте код не картинками а чтоб его можно было копировать,а не набирать самому
А каким образом сделать форму чтобыпроизводились вычисления?
Очень подробно написано! Но у меня остался вопрос, есть форма и нужно увеличить шрифт, как это возможно сделать?
Очень доходчиво описан тег и его атрибуты!
Полезная статья. Можно ещё добавить другие формы для описания. Такие как ползунок,выставления даты, времени,выбор цвета,для ввода номера телефона.
Не подумайте что я умничаю. Просто я сам новичок и эти формы будут полезны таким как я
label
The labeled statement can be used with break or continue statements. It is prefixing a statement with an identifier which you can refer to.
Syntax
Any JavaScript identifier that is not a reserved word.
A JavaScript statement. break can be used with any labeled statement, and continue can be used with looping labeled statements.
Description
You can use a label to identify a loop, and then use the break or continue statements to indicate whether a program should interrupt the loop or continue its execution.
In strict mode code, you can’t use » let » as a label name. It will throw a SyntaxError (let is a reserved identifier).
Examples
Using a labeled continue with for loops
Using a labeled continue statement
Given an array of items and an array of tests, this example counts the number of items that passes all the tests.
Using a labeled break with for loops
Using a labeled break statement
Given an array of items and an array of tests, this example determines whether all items pass all tests.
Using a labeled block with break
You can use labels within simple blocks, but only break statements can make use of non-loop labels.
Labeled function declarations
Starting with ECMAScript 2015, labeled function declarations are now standardized for non-strict code in the web compatibility annex of the specification.
In strict mode code, however, this will throw a SyntaxError :
Generator functions can neither be labeled in strict code, nor in non-strict code:
Html формы для сайта — теги Form, Input и Select, Option, Textarea, Label и другие для создания элементов вебформ
Приветствую вас, уважаемые читатели блога KtoNaNovenkogo.ru. Сегодня я хочу поговорить о такой неотъемлемой составляющей верстки любого сайта, как HTML формы. Какой бы не был движок вашего сайта (cms), на нем обязательно будут в том или ином виде использоваться формы, созданные с помощью тегов Form и Input, а так же атрибутов и параметров Button, Checked, Value, Checkbox, Radio, Checkbox, Submit.
Ну, и еще можно добавить к этому элементы для создания выпадающих списков и текстовых полей — Select, Option, Textarea, Label, Fieldset, Legend.
Зачем нужны и как работают формы на современных сайтах
Та же строка поиска по сайту (здесь описан поиск от яндекса) создается с использованием этих тэгов, а поиск то на вашем проекте будет обязательно. Поэтому понимание того, как они устроены и работают, вам совсем не помешает для успешной работы над дизайном, да и при самостоятельной раскрутке и продвижении будет не лишним.
Так, с обоснованием необходимости изучения этих элементов, думаю, вопросов больше не должно возникнуть, поэтому самое время переходить непосредственно к изучению их возможных вариантов.
Да, хочу еще напомнить, что мы уже успели рассмотреть много материалов на тему языка гипертекстовой разметки, например, узнали принципы формирования цветов в Html, трех видов списков на тегах ul, ol, li, dl) и принципы создания таблиц на тегах Tr, Th, Td, Table.
По своей сути формы состоят из элементов, для создания которых внутри основного контейнера из тегов Form вставляют различные тэги — Checked, Value, Checkbox, Radio, Checkbox, Submit и др. Нам лишь нужно будет расположить ее код в любом удобном для этого месте шаблона сайта, указав с помощью тегов и их атрибутов, как она должна будет выглядеть.
Это может быть текстовое поле с кнопкой отправки введенного запроса, варианты выбора с радиокнопками (когда можно оставить нажатой только одну из предоставляемых кнопок), несколько текстовых полей с кнопкой для отправки (обратная связь описанная тут) и многое другое.
Например, в случае «поиска», с помощью атрибута Value можно задать, что именно будет написано на кнопке расположенной рядом с полем для ввода запроса. Данные вводимые в формах должны быть в дальнейшем каким-то образом обработаны.
Например, в случае обратной связи пользователь, после того как заполнит поле со своим именем, введет свой E-mail и текст сообщения, а затем нажмет на кнопку отправки, будет вправе надеяться на отправку данных из формы на E-mail автора сайта. Но реализовать такое с помощью только одного языка гипертекстовой разметки (здесь читайте что такое Html, теги и валидатор W3C), к сожалению, не возможно.
Для этих целей потребуется специальная программа обработчик, которая после нажатия пользователем на кнопку отправки возьмет все данные из полей обратной связи и отправит их на E-mail владельцу ресурса. Какая именно программа будет это делать, вы должны указать сами с помощью атрибута Action.
Обычно программа обработки представляет из себя скрипт, написанный на языке PHP. Поэтому в атрибуте Action тэга Form вы должны будете прописать путь к файлу этого скрипта, лежащего на сервере вашего хостинга. Приведу в качестве примера подписку на RSS ленту моего блога посредством E-mail:
Немного непонятно, наверное, кажется по началу, но, думаю, что все прояснится по мере дальнейшего рассказа.
Теги Form и Input для создания кнопок, чекбоксов и радиокнопок
Любая форма должна быть заключена в открывающий и закрывающий тэги Form. Это своеобразный контейнер для их создания. У этого тега имеется ряд обязательных и необязательных атрибутов:
Рассмотрим остальные тэги, позволяющие создавать разнообразные вебформы. Самый универсальный – это Input. Внутри него обязательно прописывают атрибут Type, который определяет, что именно будет из себя представлять HTML форма, созданная с помощью этого тэга.
C помощью Input и Type можно создавать следующие элементы:
Input не имеет закрывающего тега. Что именно будет представлять из себя вебформа, созданная с помощью него, целиком и полностью зависит от параметра указанного в атрибуте Type. Если Type не указан, то по умолчанию будет создано текстовое поле.
Примеры форм, созданных на Input с различными значениями для Type
| TEXT | Обычное текстовое поле для ввода символов с клавиатуры | |
| PASSWORD | Текстовое поле, в котором вводимые символы закрываются звездочками | |
| BUTTON | Просто кнопка | |
| SUBMIT | Создается кнопка, с помощью которой можно отправить данные в программу обработчика | |
| IMAGE | Поле с изображением, при нажатии на которое, данные будут отправлены в обработчик | |
| RADIO | Радиопереключатели — следует использовать, если требуется выбрать только один вариант из предложенных | Joomla WordPress SMF |
| CHECKBOX | CHECKBOX — чекбоксы (можно активировать несколько чекбоксов одновременно) | Joomla WordPress SMF |
| FILE | Создается кнопка для загрузки файла на сервер | |
| HIDDEN | Скрытое поле, которое не отображается, но в файл обработчика данные передаются. | |
| RESET | Кнопка для возвращение данных в первоначальное значение (сброса). |
Другие атрибуты тэга Input и примеры их использования
Рассмотрим, для чего нужны остальные атрибуты:
Теперь давайте рассмотрим все примеры формы с Input. Внешний вид текстового поля похож на вид поля для ввода пароля, поэтому рассмотрим только вариант создания Text, например, для ввода адреса электронной почты:
Теперь давайте рассмотрим создание вебформы с радиокнопками (Radio):
Обратите внимание, что в этой форме два раза используется тег Input – по разу для создания каждой из двух радиокнопок. Причем, в каждом из них прописан атрибут Name с одинаковым значением (rezultat), а значение Value разное (YES и NO).
Это означает, что при ее обработке, в случае выбора любого из переключателей, будет отправлена переменная, название которой прописано в Name, но значение этой переменной будет зависеть от того, какой именно переключатель был выбран.
Рассмотрим пример создание вебформы с чекбоксами (Checkbox):
Чекбоксы отличаются от радиокнопок возможностью выбрать сразу несколько вариантов. Name служит для определения в файле обработчика, в каком именно чекбоксе проставлены флажки,а Value — задает то значение, которое будет отослано в обработчик (если Value задан не будет, то в обработчик будет отправлен текст, расположенный рядом с данным чекбоксом).
Select, Option, Textarea, Label, Fieldset, Legend — выпадающие списки, текстовые области и другие элементы вебформ
Для начала хочу немного напомнить, что такое, собственно, вебформы и для чего они нужны на страницах сайта. Они в первую очередь призваны в удобном для пользователя виде повторять имеющиеся в любой операционной системе элементы: кнопки, поля для ввода текста, выпадающие списки, флажки, переключатели и тому подобные вещи.
Все пользователи без каких-либо дополнительный объяснений понимают назначение этих элементов и если они видят кнопку Html формы, то понимают, что на нее нужно нажать.
Причем, все составляющие ее элементы (вроде Select, Option, Textarea, Label, Fieldset, Legend) представляют собой уже законченные заготовки (контейнеры), для вставки которых достаточно будет лишь использовать нужный тег с нужными атрибутами и параметрами.
Браузеры сами знают, как отображать тот или иной элемент вебформы. Правда, варианты отображения одного и того же ее элемента в разных браузерах могут немного отличаться друг от друга, но, как правило, не существенно.
Т.о. получается, что вебформы в Html являются попыткой перенести ключевые элементы, используемые в любой операционной системе, на страницы вебсайта. Но для чего они могут понадобиться на страницах сайта?
В принципе, для того же, для чего аналогичные элементы используются в операционных системах — передача данных от пользователя. В случае форм данные от пользователя передаются на сервер, где обрабатываются специальной программой (язык гипертекстовой разметки, к сожалению, не позволяет вести обработку данных).
Хотя, данные можно отправить не только на сервер, но и, например, по электронной почте на адрес, заданный в атрибуте Action тэга Form. При отправке из Html данных на E-mail у пользователя, заполняющего поля, после нажатия им на кнопку отправки данных, запустится почтовая программа используемая на его компьютере по умолчанию.
Открывающий тег Form в таком случае должен выглядеть примерно так:
Вместе с Textarea можно использовать следующие атрибуты:
Label — для чего нужен этот Html тэг в форме
Html тег Label позволяет реализовать одну очень интересную возможность в формах, которая имеется в операционных системах. Там, если вы помните, для того чтобы активировать какой-либо элемент, не обязательно щелкать именно по нему, можно щелкнуть и по названию этого элемента — все равно произойдет его активация.
В вебформах по умолчанию этого не происходит — нужно щелкать именно по самому элементу Html формы для его активации. Например, нужно щелкать по флажку, для того чтобы поставить в нем галочку. Щелчок же по тексту рядом с флажком результата не принесет. Попробуйте сами:
Как вы можете убедиться, по тексту щелкать для активации этого элемента бесполезно — нужно щелкать именно по нему самому. Вот именно такое положение вещей и призван исправить тэг Label. Он позволить сделать текст рядом с элементом веб формы кликабельным, что несомненно улучшит юзабилити.
Но как связать элемент Html формы и текст? Для этого нужно дописать в атрибут ID с уникальным параметром, а текст нужно окружить открывающим и закрывающим тэгами Label. И это еще не все. В открывающем теге Label нужно прописать атрибут For, параметр которого должен быть точно таким же, как и у атрибута ID в Html теге элемента формы. Получается примерно так:
Как вы можете видеть, теперь, благодаря использованию Label, элементы вебформы можно активировать не только щелчком по нему самому, но и щелчком по тексту, расположенному рядом.
Fieldset и Legend — разбиваем форму на части
Вы, наверное, часто видели, что большие формы в Html бывают разбиты на группы (Fieldset), которые обведены в рамочку и у каждой такой группы имеется свой заголовок (Legend). Реализуется это с помощью всего двух тэгов: Fieldset и Legend. Они парные, т.е. у них должны быть в обязательном порядке открывающий и закрывающий.
Так вот, для создания группы из составных частей вам нужно заключить все эти части в открывающий и закрывающий тэги Fieldset. А для того, чтобы задать для данной группы заголовок (Legend), вам нужно сразу же после открывающего Fieldset прописать конструкцию из открывающего и закрывающего Legend, между которыми необходимо вставить текст заголовка группы.
Вот пример создания групп с помощью Fieldset и Legend:
Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru
Комментарии и отзывы (22)
Спасибо за статью! Это как раз то, что я искала — уроки Html! Все доступно, понятно!
О спасибо большое) то что нужно, щас буду писать лабу по информатике и Html. Спасибо автору за статью.
Ирина Пакидова, SaT: пожалуйста, рад, что вам пригодилось.
Спосибо! реально помогло!
Люди подскажите как создать файл обработки с помощью которого можно будет создавать новый аккаунт
вот вроде всё правильно но почемуто кнопка отправить всё равно не создаётся я не понимаю что делать помогите кто знает!
Немного почувствовала себя дурой. решила скопировать код со старого сайта,чтоб просто заново только одну страницу можно сделать было. ну не понимаю я как сделать кнопку «отправить сообщение»
Благодарю автора за статью. Как раз искала форму для своего сайта. Материал оказался очень полезен!
Дмитрий спасибо. Очень помогли. У вас нашел, как устанавливать форму с кодом ссылки на сайт. И все получилось. Блага, счастья и здоровья!
Хочу сделать меню для PDA, просто ссылки на страницы сайта с помощью Тега как сделать?
Добрый день. Такая кнопка
Объясните пожалуйста, Что такое и onclick=»DiscountFind ()
это, просто если сказать, где то в стилях есть настройка как отображать)) где то так: #findbtn
Интересует такая вещь:
1. Люди заходят на сайт (типа интернет магазин)
2. Пишут в каком-то окошке «Текст»
3. Выбирают шрифт, цвет, размер
4. Ниже в окошке видят пример «Текста» + изменяемая цена
Есть ли такая форма или как это вообще сделать?
Добрый день. Полезная статья. Спасибо огромное!
Не могли бы вы подсказать, как можно стилизовать такие формы?
Определенный бэкграунд, фон-картинку задать и т.д.
Может кто сталкивался, поделитесь, плз, ссылочкой.
Совет — сделайте код не картинками а чтоб его можно было копировать,а не набирать самому
А каким образом сделать форму чтобыпроизводились вычисления?
Очень подробно написано! Но у меня остался вопрос, есть форма и нужно увеличить шрифт, как это возможно сделать?
Очень доходчиво описан тег и его атрибуты!
Полезная статья. Можно ещё добавить другие формы для описания. Такие как ползунок,выставления даты, времени,выбор цвета,для ввода номера телефона.
Не подумайте что я умничаю. Просто я сам новичок и эти формы будут полезны таким как я