Html — Не работает тег select


Содержание

Почему ‘innerhtml’ не работает должным образом для тега ‘select’

Я пытаюсь установить тег innerhtml тега html select , но я не могу установить эту функцию, поэтому мне нужно использовать функцию outerhtml . Этот способ не только мой код HARDCODE , но и это нелепо. Я уже прочитал «InnerHTML IE 8 работает неправильно? Сброс формы ‘, это не помогло, хотя.

Я был бы очень признателен, если бы вы рассказали мне, как установить innerhtml функцию тега html select . Мой код С#:

Этот код работает, но мне нужно что-то эффективное и чистое. Функция ReturnControlType возвращает type тега html.

Это официальная ошибка Internet Explorer:

Обходное решение

Вы можете попробовать добавить один из следующих тегов meta в голову документа:

Вы также должны правильно отформатировать атрибут option tag value (заключить LstString в ‘ ):

Html — Не работает тег select

Атрибут size (значение по умолчанию: 0 ) определяет количество одновременно показанных строк.

Атрибут multiple позволяет выбирать несколько пунктов списка.

  1. Вначале указывается первый пункт, затем с зажатой клавишей клавиатуры Ctrl второй и более.
  2. Вначале указывается первый пункт, затем с зажатой клавишей клавиатуры Shift последний. Пункты, находящиеся между ними также будут выделены.

Тут не имеет смысла устанавливать атрибут size меньше 4 , так как выбирать несколько пунктов становится не удобно.

Значение атрибута name при этом пишется с квадратными скобками, что говорит о передачи данных на сервер в виде массива.

Чтобы отправить форму на сервер, у

Атрибут disabled блокирует доступ к

Тег и его атрибуты

Заголовок группы из задаётся атрибутом label у тега . Блокировать доступ к группе пунктов можно с помощью атрибута disabled .

Закрывающийся тег у и не обязателен.

Тег и его атрибуты

Атрибут selected устанавливает сразу (изначально) выбранный вариант ответа.

Можно сказать, что имеет два значения:

  1. то, что видит человек (значение атрибута label или если оно пусто содержимое тега ),
  2. то, что отправляется на сервер (значение атрибута value или если оно пусто содержимое тега ).

Человек видит тот же текст, что оправляется на сервер.

Человек видит содержимое тега , а на сервер отправляется значение value .


Атрибут disabled блокирует доступ к пункту.

3 комментария:

Космо Мизраил Горыныч option value=»» hidden Выбрать /option

Круто! Не знал про такое.
В мозилке можно без shift выбрать несколько пунктов, просто протягивая зажатую кнопку мыши по опшнам.
А вообще, multiple лучше заменять на выпадающий набор checkbox-ов =.=» NMitra Ага, на placeholder похоже получается. Методом проб и ошибок :)

Согласна, только те, кто давно с компьютером на «ты» знают про Shift и Ctrl. Космо Мизраил Горыныч Селекты с multiple могут заменять списки с чекбоксами на телефонах. У меня на виндофоне показывается такой селект на странице примерно так же, как и на компе (но с большими отбивками и ярко-жёлтым фоном выделенного), а при нажатии показывается стандартный, полноэкранный, крупный и удобный. список чекбоксов :D с работающими disabled и optgroup.

Html — Не работает тег select

Элемент используется для создания раскрывающегося списка.

Теги внутри элемента определяют доступные параметры в списке.

Поддержка браузера

Элемент
Да Да Да Да Да

Советы и примечания

Совет: Элемент является элементом управления Form и может использоваться в форме для сбора пользовательских данных.

HTML тег

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

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

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

Для объединения нескольких вариантов в одну группу используется тег . Содержимое тега выглядит как заголовок жирного начертания.

Внешний вид списка зависит от использования атрибута size , который устанавливает высоту списка. Ширина списка зависит от длины текста в теге . Ширину можно также задать с помощью CSS стилей.

Если необходимо отправлять данные на сервер, либо обращаться к списку через скрипты, то тег необходимо поместить внутрь формы (тег

Пример

В этом примере мы использовали тег для сбора опций в группе.

Блеск и нищета стандартных селектов

Примечание переводчика: Мы продолжаем публиковать материалы, которые будут полезны веб-разработчикам, дизайнерам и верстальщикам. В прошлых топиках мы рассмотрели принципы создания анимаций в вебе и использование формата SVG. Сегодня речь пойдёт об элементе select или просто о «селекте».

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


Понять дизайнеров

В чём разница

Предположим, вы создаёте раскрывающийся список с помощью HTML. Без применения стилей он будет выглядеть так:

Не самая красивая вещь в мире, но своё дело она делает. Давайте взглянем на этот элемент повнимательнее и рассмотрим то, как он выглядит в разных браузерах на операционных системах OS X Yosemite и Windows 8:

OS Browser Closed Open
Windows 8 IE10
Windows 8 Chrome
Windows 8 Opera
Windows 8 Firefox
OSX Yosemite Safari
OSX Yosemite Firefox
OSX Yosemite Chrome
OSX Yosemite Opera

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

Пример: посмотрите как браузеры на OS X Yosemite «рендерят» раскрывающиеся списки. Если пользователь выберет в качестве темы оформления Blue, то у селектов блок со стрелочками справа будет голубым. А если будет выбрана тема Graphite, блок со стрелочками будет серым:

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

Различия селектов в двух рассмотренных выше ОС на первый взгляд не особенно велики, но с точки зрения UX — весьма заметны. Ключевой момент — на Windows в окне выбора стрелка всегда смотрит вниз, а на OS X представлены две стрелки вверх и вниз. Подход Apple в этом случае предпочтительнее — если пользователь выбрал какой-то элемент в середине списка, а затем решил выбрать другой, то при клике на селект в OS X ему покажут выбранный элемент посередине, а соседние варианты выше и ниже него. В Windows же селекты всегда выглядит как «выпадающий» список. Но его главная задача — не «выпадать», а «раскрываться» и позволять удобно выбирать варианты.

Почему нативные селекты превосходны

Элемент — это «трудный ребёнок» HTML. Причина этого — в отношении к нему браузера. Когда пользователь кликает на селект, браузер начинает вести себя не как обычно, чтобы отобразить варианты для выбора. Если на сайте есть селект, который расположен в самом низу, у нижнего края браузера, то при щелчке на такой селект браузер присваивает ему z-index , который может накладываться на все другие z-index , и даже может отрисовать список вариантов за границами окна. Посмотрите на скриншот ниже:

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

Ещё одна интересная тема — как селекты ведут себя в тач-устройствах и ОС. Взглянем на пару скриншотов:

Кастомизация должна быть гибридной

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

  • Никогда не соглашайтесь на полную кастомизацию. Браузеры особым, трепетным, образом обрабатывают элементы — старайтесь всегда сохранять это поведение. Поэтому для создания нестандартного поля выбора нужно использовать тег . Нужно донести до дизайнера все минусы полной кастомизации, под которой подразумевается отказ от и создание чего-то типа этого.
  • Когда вы убедили дизайнера использовать , следует перейти к объяснению того факта, что контролировать внешний вид выпадающего списка вариантов вы не можете. Это дело браузера. Точка. Контролировать можно только вид кнопки для открытия списка.
  • На следующем шаге нужно решить, используете ли вы стандартный селект или всё-таки кастомизируете кнопку для открытия списка. И если кастомизируете кнопку, то в каком стиле — с одной стрелкой, как в Windows, или с двумя в стиле Apple? Применение второго варианта приведёт к путанице для пользователей Windows, которые привыкли к «однострелочному» варианту. Детектирование браузера — отдельная тема. С точки зрения UX куда более мудрым решением будет использование стандартной «нестилизованной» версии селекта — она будет адаптироваться к любым ОС и браузерам, а у пользователей не возникнет никаких трудностей.

Гибридная техника

Гибридная техника заключается в использовании контейнера-обёртки для элемента . Назовём этот контейнер .selectContainer . Он должен иметь overflow-x: hidden; , а у элемента внутри контейнера должна быть ширина около 160%, чтобы скрыть «дефолтные» стрелки браузера или ОС. Контейнер используется, чтобы создать для пользователя иллюзию взаимодействия с обычным . В примере ниже в псевдоэлементе ::after контейнера .selectContainer стоит просто текст «icon», но его можно было бы заменить фоновым изображением (по клику на картинку откроется редактирование в «песочнице» на Codepen):

Заключение

Главная мысль статьи — обязательно обсуждайте с дизайнером нестандартные селекты, и лучше это делать до того, как дизайн уйдёт «в продакшн». Важно понимать плюсы и минусы «нативных» и кастомизированных селектов, а также то, как с каждым из них взаимодействует браузер.

Чтобы решить, использовать ли стандартные или кастомные селекты, нужно задать себе (или дизайнеру) вопрос:

«Будет ли включать большое количество опций? Что может пойти не так? Будут ли все варианты видны в открытом списке вариантов?» Если ответ «нет», то следует использовать стандартную нестилизованную или элегантную гибридную версию. Если ответ положительный, то стоит назвать ваш элемент «блоком с выпадающими вариантами» и оформить его так, чтобы не было даже намёка на сходство со стандартными селектами и их поведением.


Если при создании раскрывающихся списков не использовать элемент , то страдает семантика и уровень доступности интерфейса для пользователей. Изменение внешнего вида элементов форм нежелательно для людей со слабым зрением. Отказ от также усложняет чтение с экрана. Этот элемент похож на дорожный знак — если автолюбитель на машине пересечёт границу, и в новой стране знак «уступи дорогу» будет выглядеть совсем по-другому — это его явно смутит и может привести к ошибкам в вождении. Не нужно помогать людям ошибаться. Пользователям нужен консистентный внешний вид всех приложений, с которыми они работают. Для них попасть на новый сайт — это как поехать в чужую страну.

Поэтому, прежде чем начать разрабатывать кастомизированные селекты, следует подумать дважды.

Почему тег select не работает с тегом datalist?

В HTML5 был введен тег ( Spec ), который будет использоваться с элементами . Он содержит набор элементов , как и .

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

Поэтому я подумал: почему бы не создать элемент и дать ему список данных вместо того, чтобы определять каждый отдельно. У меня есть проект, в котором у меня есть несколько элементов select на одной странице, которые имеют один и тот же набор параметров, поэтому я подумал, что это будет хорошая оптимизация. Тем не менее, это не работает. Это можно попробовать здесь .

Теперь это не вопрос о том, как можно это сделать, так как я думаю, что совершенно ясно, что это просто невозможно в данный момент. Я не мог найти библиотек, которые могли бы предложить подобную функцию. Мне просто любопытно, почему это невозможно. Это просто упущение, которое может быть исправлено позже? Есть ли существенная проблема с этой идеей, о которой я просто не думал?

Html — Не работает тег select

Элемент используется для создания выпадающего списка.

Теги внутри элемента определяют доступные варианты для выбора из списка.

Поддержка браузерами

Элемент Chrome IE Firefox Safari Opera
Да Да Да Да Да

Советы и примечания

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

Отличия между HTML 4.01 и HTML5

В HTML5 было добавлено несколько новых атрибутов.

Атрибуты

Атрибут Значение Описание
autofocus * autofocus Определяет то, что выпадающий список автоматически попадает в фокус ввода при загрузке страницы.
Disabled disabled Определяет то, что выпадающий список должен быть отключен.
form * form_id Идентифицирует одну или несколько форм, которым принадлежит выпадающий список.
Multiple multiple Задает возможность выбора сразу нескольких вариантов из списка.
Name name название HTML раскрывающегося списка .
required * required Устанавливает обязательный выбор одного из пунктов списка перед отправкой данных формы.
Size number Устанавливает число видимых пунктов в выпадающем списке.

Глобальные атрибуты

Тег также поддерживает глобальные атрибуты в HTML .

Атрибуты событий

Тег также поддерживает атрибуты событий.

Настройки CSS по умолчанию

Данная публикация представляет собой перевод статьи « HTML select Tag » , подготовленной дружной командой проекта Интернет-технологии.ру


Html — Не работает тег select

19 просмотра

2 ответа

1 Репутация автора

При попытке добавить [(ngModel)] тег select выбранный параметр больше не отображается при загрузке страницы. До того, как я поместил это в сам тег выбора, опция по умолчанию State выглядела очень хорошо, когда я впервые загрузил страницу. Вот код, который у меня есть в настоящее время.

Как я уже сказал, прежде чем я положил [(ngModel)] на , поле выпадающего правильно отображать , State когда страница первым оказывается, и теперь это не так . Я даже попытался инициализировать newJob.state в «State», но это тоже не сработало. Что я делаю неправильно?

Ответы (2)

плюса

2290 Репутация автора

Попробуйте следующий метод, установив стиль опции по умолчанию: « display: none Это работает для меня». Он действует как заполнитель, когда пользователь видит раскрывающийся список, по умолчанию он увидит State , что при открытии он не будет State отображаться. Это взломать. Он действует как заполнитель.

Выпадающие меню HTML Select не работают в веб-обозревателе Andro >

Версия useragent для браузера:

Это похоже на работу с UIWebView (iPhone) и родными браузерами. Только андроид webView имеет проблему. Любая помощь будет оценена. Веб-просмотр – это деятельность cordova

Ответа на этот вопрос @mattstow

Выделение браузера Android Browser s является ошибкой и удалит нормальный стиль, если применяется фон или рамка.

Поскольку s не выглядит так, как s – довольно большая проблема юзабилити, лучше всего не создавать стиль для этого браузера.

К сожалению, нет чистого CSS-способа выбора / исключения Android-браузера, поэтому я рекомендую использовать Layout Engine ( https://github.com/stowball/Layout-Engine ), который добавит класс .browser-android к Тег .

Затем вы могли бы стилизовать все s, кроме Android Browser, например:

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. Это своеобразный контейнер для их создания. У этого тега имеется ряд обязательных и необязательных атрибутов:

  1. Name – уникальное имя, которое нужно указывать, если в Html файле, где вы что-то делаете, будет использоваться несколько вебформ
  2. Action – обязательный атрибут указывающий путь к скрипту, которому будут переданы данные из нее для дальнейшей обработки
  3. Method – с помощью него вы можете изменить метод передачи данных из этой вебформы скрипту файла обработчика. Если вы его не укажете, то по умолчанию будет использоваться метод Get, который, собственно говоря, предназначен в основном для переменных и коротких сообщений, и к тому же открытым способом передавая данные через адресную строку браузера. Для передачи данных форм скрипту обработчика все же лучше использовать метод POST, предназначенный специально для передачи текстовых сообщений закрытым способом

Рассмотрим остальные тэги, позволяющие создавать разнообразные вебформы. Самый универсальный – это Input. Внутри него обязательно прописывают атрибут Type, который определяет, что именно будет из себя представлять HTML форма, созданная с помощью этого тэга.

C помощью Input и Type можно создавать следующие элементы:

  1. однострочные текстовые поля (Type=»Text»)
  2. поля для ввода пароля (Type=»Password»)
  3. чекбоксы (Type=»Checkbox»)
  4. радиокнопки (Type=»Radio»)
  5. скрытые поля (Type=»H >Input не имеет закрывающего тега. Что именно будет представлять из себя вебформа, созданная с помощью него, целиком и полностью зависит от параметра указанного в атрибуте Type. Если Type не указан, то по умолчанию будет создано текстовое поле.

Примеры форм, созданных на Input с различными значениями для Type

TEXT Обычное текстовое поле для ввода символов с клавиатуры
PASSWORD Текстовое поле, в котором вводимые символы закрываются звездочками
BUTTON Просто кнопка
SUBMIT Создается кнопка, с помощью которой можно отправить данные в программу обработчика
IMAGE Поле с изображением, при нажатии на которое, данные будут отправлены в обработчик
RADIO Радиопереключатели — следует использовать, если требуется выбрать только один вариант из предложенных Joomla
WordPress
SMF
CHECKBOX CHECKBOX — чекбоксы (можно активировать несколько чекбоксов одновременно) Joomla
WordPress
SMF
FILE Создается кнопка для загрузки файла на сервер
HIDDEN Скрытое поле, которое не отображается, но в файл обработчика данные передаются.
RESET Кнопка для возвращение данных в первоначальное значение (сброса).

Другие атрибуты тэга Input и примеры их использования

Рассмотрим, для чего нужны остальные атрибуты:

  1. Name – в случае, если данные должны быть отправлены в скрипт программы обработчика, то вы должны обязательно указать параметр для атрибута Name. Под этим именем данные, отправленные из формы, будут фигурировать в программе обработчика информации.
  2. Size — с помощью него задается размер поля создаваемой вебформы. Значение указывается в количестве символов, которое сможет поместиться в данном поле. Если Size не указан, то ширина будет принята по умолчанию равной 24 символам
  3. Maxlength — по умолчанию количество символов, которое можно будет ввести в Html форму, не ограничено, но с помощью Maxlength можно задать это ограничение. Больше символов, чем в нем будет указано, вам ввести в поле не удастся
  4. Value — с помощью него можно задать, что именно будет написано по умолчанию в поле или же на кнопке отправки данных
  5. Checked — это атрибут-флаг, который можно вставить в Input для радиокнопок (radio) или же для чекбоксов (checkbox). В этом случае данная радиокнопка или чекбокс будут активными при загрузке страницы с вебформой (в них уже будет стоять галочка)

Теперь давайте рассмотрим все примеры формы с 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 можно использовать следующие атрибуты:

  1. Name — вы задаете имя для этого элемента вебформы. Оно будет передано на сервер в программу обработчика данных
  2. Cols — вы можете задать с помощью него ширину создаваемого многострочного поля в символах.
  3. Rows — задаем высоту создаваемого многострочного поля (в строках). Если строк у текста, вводимого пользователем, окажется больше, чем высота многострочного поля для текста, то справа от поля в вебформе появится полоса прокрутки.
  4. Readonly — запрет пользователям на изменение или добавление своего текста в это поле (только для чтения).
  5. Disabled — пользователь, так же как в случае с атрибутом Readonly, не сможет изменить содержимое текстового поля в вебформе, но оно изменит свой цвет на серый, обозначающий его неактивность.

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:

Цукерберг рекомендует:  #си# - Нет элемента Mouse в контексте
Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих