Html input type checkbox: — HTML: HyperText Markup Language

ввод (тип = флажок) элемент

Если вы не знаете, что такое элемент или как вы должны его использовать, я рекомендую вам прочитать учебник « Теги и атрибуты HTML », который вы можете найти в разделе руководств HTML .

Содержание

• 01Описание
• 02Примеры
• 03Атрибуты
  • Специальные атрибуты
  • Глобальные атрибуты
• 04События
  • Глобальные события

Описание

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

Состояние элемента управления флажком определяется наличием логического атрибута checked (если он присутствует, флажок установлен). Но когда форма отправляется, агенту обработки отправляется не проверенное состояние, а пара имя/значение. При отправке состояние флажка определяет, следует ли отправлять значение элемента управления вместе с формой. Другими словами, элемент управления отправляется только в том случае, если он проверен.

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

Примеры

В нашем первом примере показан список основных интересов, в котором пользователь может отметить любые варианты, которыми ему нравится заниматься в свободное время. Здесь мы будем использовать атрибут value , что очень редко встречается в реальных случаях, благодаря тому факту, что флажок отправляется только тогда, когда он установлен.

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

 

  <р>
    Интересы:

     Автомобили

     Спорт

     Видеоигры
  

  


 

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

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

 
  <р>
    Интересы:

     Автомобили

     Спорт

     Видеоигры
  

  


 

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

 
  <р>
    Интересы:

     HTML5

     CSS3

     Javascript
  

  <р>
    
    
  


 

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

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

 
  <р>
    Чтобы принять участие в программе, вы должны принять наши условия обслуживания

     Я принимаю условия использования

  

  


 

Атрибуты

Специальные атрибуты

автофокус

Логическое значение, указывающее браузеру установить фокус на этот элемент управления после завершения загрузки документа или при отображении диалогового окна , в котором находится элемент управления. Если атрибут имеет значение «автофокус» или пустую строку («»), или если он просто присутствует, элемент управления должен получить фокус как можно скорее, после страницы или

диалог загружен.

Пример

проверено

Логическое значение, указывающее, следует ли проверять элемент управления по умолчанию, то есть при загрузке страницы или при сбросе формы. Если атрибут принимает значение «checked» или пустую строку («»), или если он просто присутствует, элемент управления будет проверен по умолчанию.

Пример

 
  <р>
    Интересы:

     Математика

     Искусство
  

  <р>
    
    
  


 

отключен

Логическое значение, указывающее, отключен элемент управления или нет.

Если атрибут принимает значение «отключено» или пустую строку («»), или если он просто присутствует, элемент управления будет отключен.

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

Пример

 
  <р>
     Мне не нравится этот сайт
    
  


 

форма

Значение атрибута id формы, с которой связан данный элемент управления.

Этот атрибут является новым в

HTML 5 и помогает определить релевантность элементов управления во вложенных или удаленных формах.

Пример

 
 Мне нравится!
 ./../form-result.php" method="post" target="_blank">
  


 

Мне нравится!

имя

Имя элемента управления. Это имя будет отправлено браузером агенту обработки вместе с содержимым атрибута value . Оба атрибута вместе будут соответствовать паре имя-значение, которая будет использоваться для обработки данных формы.

В настоящее время значение isindex , ранее использовавшееся особым образом некоторыми браузерами и включенное в стандарт

HTML , не разрешено в этом атрибуте.

Пример

 
  <р>
     Я уверен...
    
  


 

Я уверен…

требуется

Логическое значение, указывающее, можно ли не проверять этот элемент управления. Если этот атрибут имеет значение «обязательный» или пустую строку («»), или если он просто присутствует, пользователь должен будет проверить элемент управления, чтобы иметь возможность отправить форма .

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

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

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

Пример

 
  <р>
     Я принимаю ваши условия
    
  


 

я принимаю ваши условия

тип

Значение, указывающее тип поля, которое представляет этот элемент. Возможны двадцать два значения (без учета регистра):

.

• скрытый: скрытый элемент управления, используемый для отправки информации на сервер, обычно управляемый сценариями.
• текст: элемент управления, используемый для ввода однострочного фрагмента текста.
9Поиск 0011: то же, что и текст, но для целей поиска.
• тел: элемент управления, используемый для предоставления номера телефона.
URL-адрес
• : текстовое поле, используемое для ввода единственного и абсолютного URL-адреса .
Электронная почта
• : элемент управления, предназначенный для редактирования одного или нескольких адресов электронной почты.
• пароль: текстовое поле для редактирования паролей, где символы представлены точками.
• дата: элемент управления для ввода конкретной даты.
• месяц: элемент управления для ввода определенного месяца.
• неделя: элемент управления для ввода конкретной недели.
• время: элемент управления для ввода определенного времени.
• datetime-local: элемент управления для ввода конкретной локальной даты и времени.
• число: элемент управления для ввода числа.
Диапазон
• : элемент управления для ввода одного или двух чисел внутри диапазона.
• цвет: элемент управления для ввода цвета.
• флажок: элемент управления для ввода логического значения (истина/ложь).
Радио
• : элемент управления, используемый для выбора одного варианта из многих.
Файл
• : элемент управления, используемый для загрузки файлов на сервер.
• submit: кнопка, используемая для отправки формы.
Изображение
• : то же самое, что и отправить, но с возможностью отображения в виде изображения вместо использования внешнего вида кнопки по умолчанию.
• сброс: кнопка, используемая для сброса элементов управления формы к их значениям по умолчанию.
Кнопка
• : кнопка, не связанная с действием по умолчанию.

Если этот атрибут отсутствует, элемент ведет себя так, как если бы он имел значение «текст».

Пример

значение

Значение для элемента управления, которое будет отправлено агенту обработки в паре со значением атрибута имени , только если флажок установлен.

В отличие от других элементов управления, в флажках этот атрибут можно не указывать. В таком случае браузер заполнит атрибут значением по умолчанию (обычно «включено»). Поскольку флажок отправляется только тогда, когда он отмечен, агенты обработки могут вычитать состояние флажка из его наличия или отсутствия в отправленных данных.

Пример

  ./../form-result.php" method="post" target="_blank">
  <р>
     Сделать мой профиль общедоступным
    
  


 

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

Для получения информации о глобальных атрибутах см. этот список глобальных атрибутов в HTML 5.

События

Глобальные события

Для получения информации о глобальных событиях см. этот список глобальных событий в HTML 5.

тип ввода = флажок — флажок — HTML5

ⓘ тип ввода=флажок – флажок # T

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

Допустимое содержимое #

пустой (пустой элемент)

Разрешенные атрибуты #

глобальные атрибуты & имя & неполноценный & форма & тип★ & проверено & ценить и автофокус и требуется

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

Любые атрибуты, разрешенные глобально.

ⓘ имя = строка #

Часть имени пары имя/значение, связанная с этим элемент для отправки формы.

ⓘ отключен = «неполноценный» или «» (пустая строка) или пустая #

Указывает, что элемент представляет отключенный контроль.

ⓘ форма = Идентификационная ссылка НОВЫЙ #

Значение идентификатор атрибут на форма с которым связать элемент.

ⓘ тип = «флажок» #

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

ⓘ проверено = «проверено» или «» (пустая строка) или пусто #

Указывает, что элемент представляет выбранный контроль.

ⓘ значение = строка #

Задает значение для вход элемент.

ⓘ автофокус = «автофокус» или «» (пустая строка) или пустая НОВЫЙ #

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

ⓘ требуется = «необходимый» или «» (пустая строка) или пустая НОВЫЙ #

Указывает, что элемент является обязательной частью формы подчинение.

Дополнительные ограничения и предупреждения #

• Ввод интерактивного элемента не должен появляются как потомки элемента a.
• Ввод интерактивного элемента не должен отображаться как потомок элемента кнопки.