Top-office11.ru

IT и мир ПК
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Label html атрибуты

HTML :: Универсальный тег , назначение тега

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

Как говорилось выше, элемент ‘form’ является контейнером, в котором расположены остальные элементы формы. Самым универсальным из них можно смело назвать пустой элемент ‘input’ , поскольку он применяется как для создания текстовых полей, так и различных кнопок, переключателей, скрытых полей и т.д. Формируется данный элемент соответствующим одиночным тегом (от англ. input – ввод), а его назначение определяется его атрибутом type , который может принимать целый ряд значений:

  • «button» – создает кнопку;
  • «checkbox» – создает флажок, позволяя тем самым выбрать из предложенных вариантов сразу несколько подходящих;
  • «file» – создает поле для ввода имени файла, пересылаемого на сервер, например, фотографию пользователя при регистрации;
  • «hidden» – создает скрытое поле, которое предназначено для служебной информации и не отображается на веб-странице;
  • «image» – создает графическую кнопку для отправки данных формы на сервер;
  • «password» – создает поле для ввода пароля, в котором все символы, вводимые с клавиатуры, скрываются звездочками, чтобы их нельзя было подсмотреть;
  • «radio» – создает радиокнопку, которая представляет собой переключатель, позволяющий выбрать только один вариант из нескольких предложенных;
  • «reset» – создает кнопку ‘Сброс’ для возврата всех данных формы в исходное состояние;
  • «submit» – создает обычную текстовую кнопку для отправки данных формы на сервер;
  • «text» – создает текстовое поле для ввода символов с клавиатуры.

Использование некоторых из перечисленных разновидностей элемента ‘input’ показано в примере 6.3.

Пример 6.3. Использование элемента ‘input’

Как видим, элемент ‘input’ действительно универсальный. И это без учета того, что в HTML 5 был добавлен еще целый ряд значений для атрибута type , которые можно посмотреть в нашем справочнике здесь.

Читать еще:  Рекурсия си шарп

Кроме атрибута type у элемента ‘input’ присутствует весьма внушительное количество дополнительных атрибутов. Перечислим их.

  • accept – используется для поля отправки файлов на сервер ( type=»file» ) и устанавливает для него фильтр на типы отправляемых файлов. В качестве значений принимает через запятую список MIME -типов разрешенных для отправки файлов. Если файл не соответствует фильтру, то пользователь не увидит его в окне выбора файлов. Если атрибут не применяется, то в окне выбора файлов будут показываться все файлы, доступные для просмотра.
  • autocomplete – его действие аналогично действию одноименного атрибута элемента ‘form’ и переопределяет его в случае необходимости.
  • autofocus – автоматически устанавливает фокус в данное поле формы при загрузке страницы. Если атрибут задан сразу для нескольких полей, то фокус будет передан первому из них. Атрибут по умолчанию выключен и значений не принимает, т.е. является логическим.
  • checked – применяется для переключателей и предварительно активирует их. Для радиокнопок ( type=»radio» ) атрибут можно использовать только для одного элемента группы, для переключателей в виде флажков ( type=»checkbox» ) атрибут можно использовать хоть для всех элементов сразу. Атрибут по умолчанию выключен и значений не принимает.
  • disabled – блокирует доступ к полю формы. Это может потребоваться, например, когда нужно, чтобы поле стало доступным только после заполнения предварительных полей. Пользователь не сможет взять его в фокус и изменить содержимое. При этом само поле имеет серый фон, а его значение на сервер не передается. Атрибут по умолчанию выключен и значений не принимает.
  • form – связывает данное поле с формой по ее идентификатору. В качестве значения принимает соответствующее значение атрибута >formnovalidate – его действие аналогично действию одноименного атрибута элемента ‘form’.
  • formaction – его действие аналогично действию одноименного атрибута элемента ‘form’ . Атрибут используется для кнопок с атрибутом type=»submit» и type=»image» .
  • formenctype – его действие аналогично действию одноименного атрибута элемента ‘form’ . Атрибут используется для кнопок с атрибутом type=»submit» и type=»image» .
  • formmethod – его действие аналогично действию одноименного атрибута элемента ‘form’ . Атрибут используется для кнопок с атрибутом type=»submit» и type=»image» .
  • formtarget – его действие аналогично действию одноименного атрибута элемента ‘form’. Атрибут используется для кнопок с атрибутом type=»submit» и type=»image» .
  • src – в качестве значения принимает абсолютный или относительный путь к файлу изображения. Используется для графической кнопки ( type=»image» ).
  • height – задает высоту графической кнопки ( type=»image» ).
  • width – задает ширину графической кнопки ( type=»image» ).
  • alt – устанавливает альтернативный текст для графической кнопки ( type=»image» ).
  • list – связывает данное поле с элементом ‘datalist’ по ее идентификатору, позволяя подключить к полю варианты автодополнения. В качестве значения принимает соответствующее значение атрибута >’datalist’ , с которым необходимо связать данное поле.
  • maxlength – устанавливает максимально допустимое число символов, которые можно ввести в поле. В качестве значения принимает натуральные числа. При равенстве количества введенных символов установленному значению, дальнейший ввод символов становится невозможным.
  • minlength – устанавливает минимальное число символов, которые нужно ввести в поле. В качестве значения принимает натуральные числа. Если количество введенных символов будет меньше установленного значения, но больше нуля, то при попытке отправки формы на сервер будет выведено соответствующее предупреждение, а форма на сервер отправлена не будет.
  • multiple – позволяет выбрать для отправки на сервер сразу несколько значений, например, файлов для поля с type=»file» . Атрибут по умолчанию выключен и значений не принимает.
  • name – задает уникальное имя элементу формы, которое позволяет обращаться к нему через скрипты. Кроме того, имя элемента отправляется на сервер вместе с его значением. Для радиокнопок одной группы данный атрибут должен иметь одинаковое значение (см. пример 6.4).
  • placeholder – выводит текст-подсказку внутри поля формы, который исчезает при получении фокуса или ввода текста (зависит от браузера). Отображается шрифтом серого цвета.
  • readonly – указывает, что данный элемент формы доступен только для чтения. В отличие от атрибута disabled допускает получение фокуса. Атрибут по умолчанию выключен и значений не принимает.
  • required – устанавливает поле обязательным для заполнения. Если поле заполнено не будет, то при попытке отправки формы на сервер будет выведено соответствующее предупреждение, а форма на сервер отправлена не будет.
  • size – устанавливает ширину текстового поля, которая определяется числом символов моноширинного шрифта. По умолчанию имеет значение «20» . Следует отметить, что если размер шрифта изменяется с помощью стилей, то и ширина поля также изменяется.
  • value – присваивает элементу формы начальное значение. Данный атрибут является обязательным для переключателей ( type=»radio» и type=»checkbox» ), а для кнопок устанавливает текстовую надпись.
Читать еще:  Sizeof си массив

И даже сейчас некоторые атрибуты элемента ‘input’ не были перечислены. Полный список атрибутов можно посмотреть в нашем справочнике здесь.

Если для элемента ‘form’ указаны атрибуты novalidate , action , enctype , method , target и др., то соответствующие атрибуты элементов формы в случае применения переопределяют их.

Использование некоторых из перечисленных атрибутов элемента ‘input’ показано в примере 6.4. А попрактиковаться с ними можно в нашем задачнике.

Ссылка на основную публикацию
Adblock
detector