Checkbox html form: — HTML: HyperText Markup Language — Вебджем.рф | Создание и продвижение сайтов

Содержание

Checkbox

Оглавление | Назад | Вперёд | Индекс

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

Клиентский объект

Реализован в

JavaScript 1.0

JavaScript 1.1: добавлено свойство type; добавлены обработчики событий onBlur и onFocus; добавлены методы blur и focus.

JavaScript 1.2: добавлен метод handleEvent.

Создание

HTML-тэг INPUT с "checkbox" в качестве значения атрибута TYPE. Для данной формы машина выполнения JavaScript создаёт соответствующие объекты Checkbox

и размещает их в массиве elements соответствующего объекта Form.

Вы получаете доступ к объекту Checkbox по индексу в этом массиве. Можно индексировать массив по номеру или (если имеются) по значениям атрибута NAME.

Обработчики событий

onBlur
onClick
onFocus

Описание

Объект Checkbox на форме выглядит так:

Объект Checkbox это элемент формы и он обязан быть определён (теперь вроде уже нет — прим перев.) внутри тэга FORM.

Используйте свойство checked для специфицирования статуса переключателя (включён он или нет). Свойство defaultChecked используется для специфицирования статуса переключателя при загрузке или очистке формы.

Свойства. Резюме.

Свойство	Описание
`checked`	Булево свойство, отражающее текущее состояние переключателя (есть ли «птичка»).
`defaultChecked`	Булево свойство, отражающее атрибут `CHECKED`.
`form`	Специфицирует форму, содержащую объект `Checkbox`.
`name`	Отражает атрибут `NAME`.
`type`	Отражает атрибут `TYPE`.
`value`	Отражает атрибут `TYPE`.

Метод. Резюме.

Метод	Описание
`blur`	Убирает фокус.
`click`	Симулирует щелчок мыши.
`focus`	Передаёт фокус ввода.
`handleEvent`	Вызывает обработчик специфицированного события.

Кроме того, этот объект наследует методы watch и unwatch объекта Object.

Примеры

Пример 1.

Выводится группа из 4 переключателей, которые все по умолчанию отмечены:

<B>Specify your music preferences (check all that apply):</B>
<BR><INPUT TYPE="checkbox" NAME="musicpref_rnb" CHECKED> R&B
<BR><INPUT TYPE="checkbox" NAME="musicpref_jazz" CHECKED> Jazz
<BR><INPUT TYPE="checkbox" NAME="musicpref_blues" CHECKED> Blues
<BR><INPUT TYPE="checkbox" NAME="musicpref_newage" CHECKED> New Age

Пример 2.

Форма из 3 текстовых полей и одного переключателя. Можно использовать checkbox для конвертирования текста текстовых полей в верхний регистр. Каждое текстовое поле имеет обработчик onChange, который конвертирует значение поля в верхний регистр, если checkbox помечен. Переключатель имеет обработчик onClick, который конвертирует все поля в верхний регистр, если пользователь отметит переключатель.

<HTML>
<HEAD>
<TITLE>Checkbox object example</TITLE>
</HEAD>
<SCRIPT>
function convertField(field) {
   if
(document.form1.convertUpper.checked) {
      field.value =
field.value.toUpperCase()}
}
function convertAllFields() {
   document.form1.lastName.value = document.form1.lastName.value.toUpperCase()
    document.form1.firstName.value = document.form1.firstName.value.toUpperCase()
   document.form1.cityName.value = document.form1.cityName.value.toUpperCase()
}
</SCRIPT>

<BODY>
<FORM NAME="form1">
<B>Last name:</B>
<INPUT TYPE="text" NAME="lastName"
SIZE=20 onChange="convertField(this)">
<BR><B>First name:</B>
<INPUT TYPE="text" NAME="firstName" SIZE=20 onChange="convertField(this)">
<BR><B>City:</B>
<INPUT TYPE="text" NAME="cityName" SIZE=20
onChange="convertField(this)">
<P><INPUT TYPE="checkBox" NAME="convertUpper"
   onClick="if (this. checked) {convertAllFields()}"
   > Convert fields to upper case
</FORM>
</BODY>
</HTML>

См. также

Form

, Radio

blur

Убирает фокус.

Метод из	`Checkbox`
Реализован в	JavaScript 1.0

Синтаксис

blur()

Параметры

Отсутствуют.

См. также

Checkbox.focus

checked

Булево значение, специфицирующее статус бокса.

Свойство из	`Checkbox`
Реализовано в	JavaScript 1.0

Безопасность

JavaScript 1.1. По умолчанию это свойство разрушено/запорчено. О разрушении данных см. книгу Клиентский JavaScript. Руководство.

Описание

Если переключатель выбран (отмечен «птичкой»), значение его свойства

checked будет true; иначе — false.

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

См. также

Checkbox.defaultChecked

click

Симулирует щелчок мыши, но не переключает на обработчик onClick. Метод выделяет бокс и переключает его значение.

Метод из	`Checkbox`
Реализован в	JavaScript 1.0

Синтаксис

click()

Параметры

Отсутствуют.

Примеры

Изменяется статус переключателя newAge формы musicForm:

document.musicForm. newAge.click()

defaultChecked

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

Свойство из	`Checkbox`
Реализовано в	JavaScript 1.0

Безопасность

Описание

Если переключатель отмечен по умолчанию, значение свойства defaultChecked — true; иначе — false.
defaultChecked первоначально отражает использование атрибута CHECKED в тэге INPUT; однако установка defaultChecked переопределяет значение атрибута CHECKED.

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

checked.

См. также

Checkbox.checked

focus

Передаёт переключателю фокус.

Метод из	`Checkbox`
Реализован в	JavaScript 1.0

Синтаксис

focus()

Параметры

Отсутствуют.

Описание

Метод focus используется для перехода к переключателю и передаче ему фокуса. Тогда пользователь сможет изменять статус переключателя.

См. также

Checkbox.blur

form

Ссылка на объект, специфицирующая форму, содержащую переключатель.

Свойство из

Checkbox

Только для чтения

Реализовано в

JavaScript 1.0

Описание

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

См. также

Form

handleEvent

Вызывает обработчик для специфицированного события.

Метод из	`Checkbox`
Реализован в	JavaScript 1.2

Синтаксис

handleEvent(event)

Параметры

event

Имя события, для которого специфицированный объект имеет обработчик события.

name

Строка — имя переключателя.

Свойство из	`Checkbox`
Реализовано в	JavaScript 1. 0

Безопасность

Описание

Если несколько объектов формы имеют одно значение атрибута NAME, автоматически создаётся массив с данным именем. Каждый элемент этого массива представляет отдельный Form -объект. Элементы индексируются в порядке их появления в коде, начиная с 0. Например, если два элемента Text и элемент Button в одной форме имеют атрибут NAME со значением "myField", создаётся массив из элементов myField[0], myField[1] и myField[2]. Вы должны учитывать такую ситуацию при создании кода и знать, ссылается myField на единственный элемент или на массив элементов.

Примеры

Функция valueGetter использует цикл for для итерации по массиву элементов формы valueTest. Окно msgWindow отображает имена всех элементов формы:

newWindow=window.open("http://home.netscape.com")

function valueGetter() {
   var msgWindow=window.open("")
   for (var i = 0; i < newWindow.document.valueTest.elements.length; i++) {
      msgWindow.document.write(newWindow.document.valueTest.elements[i].name
+ "<BR>")
   }
}

type

Для всех объектов Checkbox значением свойства type будет "checkbox". Это свойство специфицирует тип элемента формы.

Свойство из	`Checkbox`
Только для чтения
Реализовано в	JavaScript 1.1

Примеры

Значение свойства type записывается для каждого элемента формы.

for (var i = 0; i < document. form1.elements.length; i++) {
   document.writeln("<BR>type is " + document.form1.elements[i].type)
}

value

Строка, отражающая значение атрибута VALUE переключателя.

Свойство из	`Checkbox`
Реализовано в	JavaScript 1.0

Безопасность

См. также

Checkbox.checked, Checkbox.defaultChecked

Оглавление | Назад | Вперёд | Индекс

Дата последнего обновления: 28 мая 1999 года.
Copyright (c) 1999 Netscape Communications Corporation

Forms : Флажок — Учебник по HTML

HTML-формы :

CHECK BOX

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

НАСТРОЙКИ:

Ниже приведен список допустимых настроек для флажков:

0 Имя поля0.
Значение, которое отправляется, если отмечено.
Выравнивание поля.
Порядок табуляции поля.
По умолчанию отметьте это поле.

HTML	ОБЪЯСНЕНИЕ	ПРИМЕР
флажок имя= значение= выравнивание= tabindex= проверено

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

Параметр значения определяет, что будет отправлено при проверке.

Параметр выравнивания определяет способ выравнивания поля.
Допустимые значения: TOP, MIDDLE, BOTTOM, RIGHT, LEFT, TEXTTOP, BASELINE, ABSMIDDLE, ABSBOTTOM.
Выравнивание объясняется в разделе изображений. Вы можете узнать о различных выравниваниях здесь.

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

ПРИМЕР:

Посмотрите на этот пример HTML:

Моя страница

И результирующий вывод из него:

Молоко
Butter
Cheese

<< PREVIOUS

form-element—checkbox.

html.twig · GitHub..

	{#
	/**
	* @файл
	* Переопределение темы для элемента формы.
	*
	* Доступные переменные:
	* — атрибуты: атрибуты HTML для содержащего элемента.
	* — ошибки: (необязательно) Любые ошибки для этого элемента формы не могут быть установлены.
	* — префикс: (необязательно) Префикс элемента формы, можно не задавать.
	* — суффикс: (необязательный) Суффикс элемента формы можно не задавать.
	* — требуется: требуемый маркер или пустой, если связанный элемент формы равен
	* не требуется.
	* — type: Тип элемента.
	* — имя: Имя элемента.
	* — метка: отображаемый элемент метки.
	* — label_display: Настройка отображения метки. Он может иметь следующие значения:
	* — до: Метка выводится перед элементом. Это значение по умолчанию.
	* Метка включает #название и требуемый маркер, если #требуется.
	* — после: Метка выводится после элемента. Например, это используется
	* для элементов radio и checkbox #type. Если #title пусто, но
	* поле #required, метка будет содержать только нужный маркер.
	* — невидимый: метки имеют решающее значение для программ чтения с экрана, чтобы они могли
	* правильно перемещаться по формам, но может отвлекать внимание. это
	* свойство скрывает метку для всех, кроме программ чтения с экрана.
	* — атрибут: Установите атрибут заголовка для элемента, чтобы создать всплывающую подсказку, но
	* вывод без элемента метки. Это поддерживается только для флажков и радио
	* в \Drupal\Core\Render\Element\CompositeFormElementTrait::preRenderCompositeFormElement().
	* Используется там, где визуальная маркировка не нужна, например, таблица
	* флажки, где строка и столбец предоставляют контекст. Подсказка будет
	* укажите заголовок и необходимый маркер.
	* — описание: (необязательно) Список свойств описания, содержащий:
	* — содержание: Описание элемента формы, можно не задавать.
	* — атрибуты: (необязательно) список атрибутов HTML для применения к
	* оболочка содержимого описания. Будет установлено только тогда, когда установлено описание.
	* — description_display: Настройка отображения описания. Он может иметь следующие значения:
	* — до: Описание выводится перед элементом.
	* — после: Описание выводится после элемента. Это значение по умолчанию
	* значение.
	* — невидимый: Описание выводится после элемента, визуально скрытого
	*, но доступно для чтения с экрана.
	* — disabled: True, если элемент отключен.
	* — title_display: Настройка отображения заголовка.
	*
	* @см. template_preprocess_form_element()
	*/
	#}
	{%
	набора классов = [
	‘элемент формы’,
	‘js-form-type-‘ ~ тип\|чистый_класс,
	‘форма-тип-‘ ~ тип\|чистый_класс,
	‘форма-элемент-‘ ~ имя\|чистый_класс,
	title_display не в [‘после’, ‘до’] ? ‘форма без этикетки’,
	отключено == ‘отключено’? ‘форма отключена’,
	ошибки? ‘форма-элемент—ошибка’,
	]
	%}
	{%
	установить description_classes = [
	‘описание’,
	description_display == ‘невидимый’ ? ‘визуально-скрытый’,
	]
	%}
	addClass(классы) }}>
	<метка>
	{% if label_display в [‘before’, ‘invisible’] %}
	{{метка}}
	{% endif%}
	{%, если префикс не пустой %}
	{{ префикс }}
	{% endif%}
	{%, если description_display == ‘до’ и description.content %}

	{{описание.содержимое}}

	{% endif%}
	{{ дети }}
	{%, если суффикс не пустой %}
	{{ суффикс}}
	{% endif%}
	{% если label_display == ‘после’ %}
	{{метка}}
	{% endif%}
	{% если ошибки %}
	<дел>
	{{ ошибок }}

	{% endif%}
	{% if description_display в [‘after’, ‘invisible’] и description. Навигация по записям Bootstrap адаптивная верстка: Верстка адаптивного макета на Bootstrap Прямой эфир массовка: как принять участие? — Телепропуск Добавить комментарий Отменить ответ Ваш адрес email не будет опубликован. Обязательные поля помечены * Комментарий * Имя * Email * Сайт Рубрики Css Html Js Адаптивный сайт Верстка Идеи С чего начать Советы Шаблоны Разное © Компания Вебджем.рф 2009 - 2025 \| Все права защищены.

Checkbox html form: — HTML: HyperText Markup Language

Checkbox

Оглавление | Назад | Вперёд | Индекс

Создание

Обработчики событий

Описание

Свойства. Резюме.

Метод. Резюме.

Примеры

Пример 1.

Пример 2.

См. также

blur

Синтаксис

Параметры

См. также

checked

Безопасность

Описание

См. также

click

Синтаксис

Параметры

Примеры

defaultChecked

Безопасность

Описание

См. также

focus

Синтаксис

Параметры

Описание

См. также

form

Описание

См. также

handleEvent

Синтаксис

Параметры

name

Безопасность

Описание

Примеры

type

Примеры

value

Безопасность

См. также

Оглавление | Назад | Вперёд | Индекс

Forms : Флажок — Учебник по HTML

form-element—checkbox.

Добавить комментарий Отменить ответ

Рубрики