Главная » Языки программирования

Html form select one option

Содержание
  1. Html form select one option
  2. Кратко
  3. Пример
  4. Подробно
  5. Атрибуты
  6. disabled
  7. label
  8. selected
  9. value
  10. На практике
  11. Денис Ежков советует
  12. HTML Form Elements
  13. The HTML Elements
  14. The Element
  15. Example
  16. The Element
  17. The Element
  18. Example
  19. Example
  20. Visible Values:
  21. Example
  22. Allow Multiple Selections:
  23. Example
  24. The Element
  25. Example
  26. Example
  27. The Element
  28. Example
  29. The and Elements
  30. Example
  31. The Element
  32. Example
  33. The Element
  34. Example
  35. HTML Exercises
  36. HTML Form Elements
  37. Html form select one option
  38. Синтаксис¶
  39. Атрибуты¶
  40. autofocus¶
  41. disabled¶
  42. form¶
  43. multiple¶
  44. name¶
  45. required¶
  46. size¶
  47. Значения ARIA role¶
  48. Спецификации¶
  49. Описание и примеры¶

Html form select one option

Один пункт в раскрывающемся списке .

Время чтения: меньше 5 мин

Кратко

Скопировать ссылку «Кратко» Скопировано

Тег используется в интерактивных элементах управления для вёрстки одиночного пункта списка.

Пример

Скопировать ссылку «Пример» Скопировано

              form> label for="city-select">Ваш городlabel> select name="city" id="city-select"> option value="">-- Выберите город --option> option value="petersburg">Санкт-Петербургoption> option value="moscow">Москваoption> option value="kazan">Казаньoption> option value="samara">Самараoption> option value="perm">Пермьoption> option value="novosibirsk">Новосибирскoption> select> form>

Подробно

Скопировать ссылку «Подробно» Скопировано

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

Атрибуты

Скопировать ссылку «Атрибуты» Скопировано

disabled

Скопировать ссылку «disabled» Скопировано

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

           select name="city1"> option value="">-- Выберите город --option> option value="petersburg">Санкт-Петербургoption> option value="moscow">Москваoption> option value="kazan">Казаньoption> option value="samara" disabled>Самараoption> option value="perm">Пермьoption> option value="novosibirsk">Новосибирскoption> select>

label

Скопировать ссылку «label» Скопировано

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

        select name="city2"> option value="petersburg" selected label="Ленинград">Санкт-Петербургoption> option value="samara" label="Куйбышев">Самараoption> option value="volgograd" label="Сталинград">Волгоградoption> option value="ekaterinburg" label="Свердловск">Екатеринбургoption> select>

Несмотря на то, что задано текстовое содержимое тега , в выпадающем списке отображаются значения из атрибутов label :

selected

Скопировать ссылку «selected» Скопировано

           select name="city3"> option value="">-- Выберите город --option> option value="petersburg">Санкт-Петербургoption> option value="moscow">Москваoption> option value="kazan" selected>Казаньoption> option value="samara">Самараoption> option value="perm">Пермьoption> option value="novosibirsk">Новосибирскoption> select>      
          select name="city4" multiple size="6"> option value="petersburg">Санкт-Петербургoption> option value="moscow" selected>Москваoption> option value="kazan" >Казаньoption> option value="samara" selected>Самараoption> option value="perm">Пермьoption> option value="novosibirsk">Новосибирскoption> select>

value

Скопировать ссылку «value» Скопировано

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

На практике

Скопировать ссылку «На практике» Скопировано

Денис Ежков советует

Скопировать ссылку «Денис Ежков советует» Скопировано

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

          select name="city" id="city-select" multiple> option value="petersburg">Санкт-Петербургoption> option value="moscow">Москваoption> option value="kazan">Казаньoption> option value="samara">Самараoption> option value="perm">Пермьoption> option value="novosibirsk">Новосибирскoption> select>      
 select  counter-reset: cnt;> option:nth-child(2n)  background-color: #282a2e;> option  counter-increment: cnt;> option::before  content: counter(cnt) ". ";> select  counter-reset: cnt; > option:nth-child(2n)  background-color: #282a2e; > option  counter-increment: cnt; > option::before  content: counter(cnt) ". "; >

Теперь практически все браузеры умеют стилизовать даже без атрибута multiple .

В Safari стилизация для доступна не полностью, даже если тег имеет атрибут multiple .

Источник

HTML Form Elements

This chapter describes all the different HTML form elements.

The HTML Elements

The HTML element can contain one or more of the following form elements:

The Element

One of the most used form element is the element.

The element can be displayed in several ways, depending on the type attribute.

Example

All the different values of the type attribute are covered in the next chapter: HTML Input Types.

The Element

The element defines a label for several form elements.

The element is useful for screen-reader users, because the screen-reader will read out loud the label when the user focus on the input element.

The element also help users who have difficulty clicking on very small regions (such as radio buttons or checkboxes) — because when the user clicks the text within the element, it toggles the radio button/checkbox.

The for attribute of the tag should be equal to the id attribute of the element to bind them together.

The Element

The element defines a drop-down list:

Example

The elements defines an option that can be selected.

By default, the first item in the drop-down list is selected.

To define a pre-selected option, add the selected attribute to the option:

Example

Visible Values:

Use the size attribute to specify the number of visible values:

Example

Allow Multiple Selections:

Use the multiple attribute to allow the user to select more than one value:

Example

The Element

The element defines a multi-line input field (a text area):

Example

The rows attribute specifies the visible number of lines in a text area.

The cols attribute specifies the visible width of a text area.

This is how the HTML code above will be displayed in a browser:

You can also define the size of the text area by using CSS:

Example

The Element

The element defines a clickable button:

Example

This is how the HTML code above will be displayed in a browser:

Note: Always specify the type attribute for the button element. Different browsers may use different default types for the button element.

The and Elements

The element is used to group related data in a form.

The element defines a caption for the element.

Example

This is how the HTML code above will be displayed in a browser:

The Element

The element specifies a list of pre-defined options for an element.

Users will see a drop-down list of the pre-defined options as they input data.

The list attribute of the element, must refer to the id attribute of the element.

Example

The Element

The element represents the result of a calculation (like one performed by a script).

Example

Perform a calculation and show the result in an element:

HTML Exercises

HTML Form Elements

Tag Description
Defines an HTML form for user input
Defines an input control
Defines a multiline input control (text area)
Defines a label for an element
Groups related elements in a form
Defines a caption for a element
Defines a drop-down list
Defines a group of related options in a drop-down list
Defines an option in a drop-down list
Defines a clickable button
Specifies a list of pre-defined options for input controls
Defines the result of a calculation

For a complete list of all available HTML tags, visit our HTML Tag Reference.

Источник

Html form select one option

Тег (от англ. select — выбрать) позволяет создать элемент интерфейса в виде раскрывающегося списка, а также список с одним или множественным выбором.

Синтаксис¶

select> option>Пункт 1option> option>Пункт 2option> select>

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

Атрибуты¶

autofocus Устанавливает, что список получает фокус после загрузки страницы. disabled Блокирует доступ и изменение элемента. form Связывает список с формой. multiple Позволяет одновременно выбирать сразу несколько элементов списка. name Имя элемента для отправки на сервер или обращения через скрипты. required Список обязателен для выбора перед отправкой формы. size Количество отображаемых строк списка.

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

autofocus¶

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

Значение по умолчанию

По умолчанию этот атрибут выключен.

disabled¶

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

Значение по умолчанию

По умолчанию этот атрибут выключен.

form¶

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

Идентификатор формы (значение атрибута id элемента ).

Значение по умолчанию

multiple¶

Наличие атрибута multiple сообщает браузеру отображать содержимое элемента как список множественного выбора. Конечный вид списка зависит от используемого атрибута size и браузера.

Для выбора нескольких значений списка применяются клавиши Ctrl и Shift совместно с курсором мыши.

Чтобы на сервер отправлялся массив данных, значение атрибута name следует писать с квадратными скобками — hero[] , к примеру.

Значение по умолчанию

По умолчанию этот атрибут выключен.

name¶

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

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

Значение по умолчанию

required¶

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

Значение по умолчанию

По умолчанию атрибут required выключен.

size¶

Устанавливает высоту списка. Если значение атрибута size равно 1, то список превращается в раскрывающийся. При добавлении атрибута multiple к элементу при size=»1″ список отображается как «крутилка». Во всех остальных случаях получается список с одним или множественным выбором.

Любое целое положительное число.

Значение по умолчанию

Зависит от атрибута multiple . Если он присутствует, то размер списка равен количеству элементов. Когда атрибута multiple нет, то по умолчанию значение атрибута size равно 1.

Значения ARIA role¶

  • (без атрибута multiple и без атрибута size со значением больше 1 ) — role=combobox
  • (с атрибутом multiple или с атрибутом size со значением больше 1 ) — role=listbox

Спецификации¶

Описание и примеры¶

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
 html> head> meta charset="utf-8" /> title>SELECTtitle> head> body> form action="select1.php" method="post"> p> select size="3" multiple name="hero[]"> option disabled>Выберите герояoption> option value="Чебурашка">Чебурашкаoption> option selected value="Крокодил Гена"> Крокодил Гена option> option value="Шапокляк">Шапоклякoption> option value="Крыса Лариса">Крыса Ларисаoption> select> p> p>input type="submit" value="Отправить" />p> form> body> html>

Источник

Читайте также:  Java bufferedreader line by line
Оцените статью
© 2024 Программирование