Как установить значение по умолчанию для элемента HTML ?
Тег выбора в HTML используется для создания выпадающего списка опций, которые можно выбрать . Тег option содержит значение, которое будет использоваться при выборе.
Значение по умолчанию для элемента select можно установить с помощью атрибута selected в требуемой опции. Это логический атрибут.
Опция с атрибутом selected будет отображаться по умолчанию в раскрывающемся списке.
Синтаксис:
<option value="value" selected>Option Name</option>
Пример-1: Использование выбранного атрибута.
option >
|
Выход:
Прежде чем нажать на список:
После нажатия на список:
Пример 2: Это также может быть использовано для добавления в список сообщений типа «Выберите опцию» . Эта опция будет иметь скрытый и отключенный атрибут в дополнение к выбранному.
>Professional</ option >
|
Выход:
Прежде чем нажать на список:
После нажатия на список:
Рекомендуемые посты:
Как установить значение по умолчанию для элемента HTML <select>?
0.00 (0%) 0 votes
Свойство user-select | CSS справочник
CSS свойстваОпределение и применение
CSS свойство user-select определяет может ли пользователь выделить текст элемента.
Поддержка браузерами
Синтаксис:
CSS синтаксис:
user-select: all | auto | contain | text | none;
JavaScript синтаксис:
object.style.userSelect="none"
Значения свойства
Значение | Описание |
---|---|
all | Выделение текста производится одним щелчком мыши вместо двойного щелчка. Если клик произошел во вложенном элементе, будет выбрано все содержимое коренного предка. |
auto | Выбранное значение определяется следующим образом:
|
contain | Позволяет начать выделение внутри элемента, но при этом выделение будет доступно в пределах только границ этого элемента. |
text | Текст может быть выбран пользователем. |
none | Текст элемента и его вложенных элементов не выбирается. |
Версия CSS
CSS Basic User Interface Module Level 4.Наследуется
Нет.Анимируемое
Нет.Пример использования
<!DOCTYPE html> <html> <head> <title>Использование свойства user-select</title> <style> .none { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; /* текст элемента и его вложенных элементов не выбирается */ } .all { -moz-user-select: all; -webkit-user-select: all; -ms-user-select: all; user-select: all; /* выделение текста производится одним щелчком мыши вместо двойного щелчка */ } </style> </head> <body> <p class = "none">Текст, который не выделить.</p> <p class = "all">Кликни один раз, чтобы выбрать весь текст.</p> </body> </html>
В этом примере мы разместили два элемента <p> . С помощью свойства user-select мы указали для первого элемента значение none, которое определяет, что текст элемента и его вложенных элементов не выбирается, а для второго значение all, которое определяет, что выделение текста производится одним щелчком мыши вместо двойного щелчка.
Результат примера:
Пример использования свойства user-select.CSS свойстваАтрибут required | htmlbook.ru
Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
8.0+ | 10.0+ | 4.0+ | 2.3+ | 3.0+ |
Спецификация
HTML: | 3.2 | 4.01 | 5.0 | XHTML: | 1.0 | 1.1 |
Описание
Устанавливает список обязательным для выбора перед отправкой формы на сервер. Если пункт списка не выбран, браузер выведет сообщение, а форма отправлена не будет. Вид и содержание сообщения зависит от браузера и меняться пользователем не может.
Синтаксис
<select required>
...
</select>
Значения
Нет.
Значение по умолчанию
По умолчанию атрибут required выключен.
Пример
HTML5IECrOpSaFx
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Тег select, атрибут required</title> </head> <body> <form> <p>Какое растение в списке вечнозелёное?</p> <p><select name="pregunta" required> <option></option> <option value="1">Ольха</option> <option value="2">Берёза</option> <option value="3">Бузина</option> <option value="4">Тис</option> </select></p> <p><input type="submit" value="Отправить"></p> </form> </body> </html>
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
user-select | CSS | WebReference
Управляет поведением выделения текста и других элементов на странице, в частности, позволяет запретить выделение текста. Обычно применяется для интерактивных элементов, на которые можно щёлкать, например, вкладки, и для которых выделение текста нежелательно.
Краткая информация
Значение по умолчанию | auto |
---|---|
Наследуется | Да |
Применяется | Ко всем элементам |
Процентная запись | Неприменима |
Анимируется | Нет |
Синтаксис
user-select: auto | none | text | all | contain
Обозначения
Описание | Пример | |
---|---|---|
<тип> | Указывает тип значения. | <размер> |
A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
[ ] | Группирует значения. | [ crop || cross ] |
* | Повторять ноль или больше раз. | [,<время>]* |
+ | Повторять один или больше раз. | <число>+ |
? | Указанный тип, слово или группа не является обязательным. | inset? |
{A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
# | Повторять один или больше раз через запятую. | <время># |
Значения
- auto
- Для редактируемых элементов значение принимается contain. Если у родителя значение user-select установлено как all, то для элемента оно тоже будет all. Если у родителя значение user-select установлено как none, то для элемента оно тоже будет none. Во всех остальных случаях принимается значение text.
- none
- Пользователю запрещено выделять элемент.
- text
- Пользователь может выделить текст в элементе.
- all
- Позволяет выделить текст внутри элемента, включая дочерние элементы.
- contain
- Позволяет выделять текст, но только внутри границ элемента.
Пример
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>user-select</title> <style> body { user-select: none; } .enable { user-select: all; } </style> </head> <body> <p>Этот текст нельзя выделить</p> <p><input type=»text» value=»Этот текст можно выделить»></p> <p>Этот <b>текст</b> тоже можно выделить</p> </body> </html>
Примечание
Internet Explorer и Edge поддерживают свойство -ms-user-select.
Chrome до версии 54, Opera до версии 41, Safari и Android поддерживают свойство -webkit-user-select.
Firefox поддерживает свойство -moz-user-select.
Значение contain поддерживается только в IE.
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
В таблице браузеров применяются следующие обозначения.
- — свойство полностью поддерживается браузером со всеми допустимыми значениями;
- — свойство браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 29.08.2017
Редакторы: Влад Мержевич