- HTML Checkboxes, Radio Buttons and Select Form Fields
- Checkboxes
- HTML checkbox example:
- Radio buttons
- Radio button example:
- HTML select fields
- HTML select example 1: Drop-down menu
- HTML select example 2: 3-line list box
- Enhancing select menus with option groups
- Other types of HTML form fields
- Список выбора html
- HTML-флажок
- Кнопка HTML-радио
- Выпадающий список HTML select
HTML Checkboxes, Radio Buttons and Select Form Fields
This tutorial takes a look at three HTML form fields that allow your visitors to choose from a list of options: checkboxes, radio buttons, and select menus.
Find out how to create HTML forms in our HTML forms tutorial.
Checkboxes
HTML checkboxes are simple fields that can be toggled on or off with a mouse click. A checkbox can have only one value — for example, «yes» or «true» .
These fields are great for allowing the user to specify a single item of data — for example, whether they want to receive your newsletter or not, or to indicate that they have read your terms and conditions.
The checkbox field takes the format:
The name attribute is the name of the field (for example, «newsletter» ). You can specify multiple checkboxes all with the same name, in which case they will belong to the same group. When the form is submitted, the values of all the checkboxes will be sent using the same field name.
The value attribute specifies the value that will be submitted if the user checks the box. If the user clears the box (so that it has no check mark in), then a null (empty) value will be submitted.
The checked attribute, if present, will display the checkbox already selected. If checked is not present in the tag, the checkbox will be displayed empty.
HTML checkbox example:
Would you like to be added to our mailing list? Yes Radio buttons
Radio buttons are similar to checkboxes, except that only one radio button in a group can be selected at any one time. (As with checkboxes, a radio button group is a collection of radio buttons with the same name attribute.)
Radio buttons are useful for getting a user to pick from a choice of options. (If you have a lot of options, consider using a menu instead.) The radio button tag has the same attributes as the checkbox element:
The name attribute is the name of the field (for example, «favourite_colour» ). You can specify multiple radio boxes all with the same name, in which case they will belong to the same group . Only one radio button in the group can be selected at any one time.
The value attribute specifies the value that will be submitted if the user selects this radio button.
The checked attribute, if present, will display the radio button already selected. If checked is not present in the tag, the radio button will be displayed empty.
Radio button example:
What is your favourite colour? Red Orange Pink HTML select fields
select fields, or “menu” fields, are created with the HTML select element. They allow the user to select one or more items from a list of available options. A select menu takes the format:
The HTML tags define the menu. The name attribute is the name of the menu (for example, «favourite_sport» ).
The size attribute specifies how many menu items will be displayed at once. If this attribute is not present or is set to 1 , then a drop-down box will be displayed.
The optional multiple attribute, if present, will allow the user to select more than one option in the list by holding down the Shift or Control keys.
Inside the tags, you place one or more HTML elements. Each element represents an item in the menu. The value attribute is the value that will be submitted if the user selects this option. The optional selected attribute will pre-select this option when the form is first displayed.
In between each element, you can place the text label that you would like to be displayed for that option. Note that the text label does not have to be the same as the option’s value attribute. The text label is not submitted with the form; it’s just to guide the user.
HTML select example 1: Drop-down menu
What is your favourite sport? HTML select example 2: 3-line list box
What is your favourite sport? Enhancing select menus with option groups
Option groups are great when you have a select menu with a lot of options. Just as fieldsets help to group form fields into logical sections, option groups let you classify options within a menu.
Let’s say we have an online store that sells 3 types of toys — rattles, teddy bears and balls — and each toy comes in different options. We could have all these variants in the one menu as follows:
It works, but it’s a bit hard to read. Let’s use option groups to classify the options by the type of toy:
That’s better! Now we can visually differentiate between the different product types. Much easier to use.
Other types of HTML form fields
Now that you’ve learnt about HTML checkboxes, radio buttons and select menus, find out about:
Список выбора html
В этом уроке HTML мы рассмотрим некоторые базовые компоненты для создания пользовательских интерфейсов, в частности, мы увидим те элементы, которые позволяют пользователям выбирать между предустановленными значениями.
HTML-флажок
С помощью флажков мы можем позволить пользователю сделать несколько вариантов. Например:
Вы также можете выбрать одно или несколько значений, которые отмечены по умолчанию, благодаря флажку:
Кроме того, благодаря отключенной функции мы можем сделать чекбокс недоступным:
Кнопка HTML-радио
radio button ( «радио — кнопка» ) эта кнопка чтобы позволить вам сделать эксклюзивный выбор. Следовательно, в этом случае один выбор исключает другой. Чтобы получить этот эффект, поля должны иметь одинаковое имя и другое значение:
Также в этом случае можно назначить значение по умолчанию или отключить кнопку.
Выпадающий список HTML select
Благодаря тегу вы можете создавать меню опций. В этом случае каждая запись должна быть включена в тег (закрытие тега необязательно), а значение должно быть указано с помощью атрибута «value» . С атрибутом «selected» вы можете указать выбор по умолчанию:
Наконец, с помощью тега выбора также можно установить несколько вариантов. Как вы можете видеть, при использовании атрибута «multiple» внешний вид тега select значительно меняется:
Используя клавишу CTRL, пользователь может сделать несколько вариантов.
Используя атрибут «size», вы можете указать количество элементов, которые должны отображаться в меню, и, следовательно, отрегулировать высоту меню, добавив или удалив вертикальную полосу прокрутки.