Select html значение по умолчанию: html — Элемент по умолчанию в select’е – Как установить значение по умолчанию для элемента HTML ?

Как установить значение по умолчанию для элемента HTML ?

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

Значение по умолчанию для элемента select можно установить с помощью атрибута selected в требуемой опции. Это логический атрибут.
Опция с атрибутом selected будет отображаться по умолчанию в раскрывающемся списке.

Синтаксис:

<option value="value" selected>Option Name</option>

Пример-1: Использование выбранного атрибута.

<!DOCTYPE html>

<html>

  

<head>

    <title>

        set the default value for <select> element

    </title

>

</head>

  

<body>

    <h2 style="color: green">GeeksforGeeks</h2>

    <b>

      How to set the default 

      value for an HTML <select> element?

  </b>

    <p>The Starter option will be selected by default</p>

    <p>Choose your plan below:</p>

    

    <select name="plan" id="plan">

        <option

value="free">Free</option>

        <option value="starter" selected>Starter </option>

        <option value="professional">Professional</option>

        <option value="corporate">Corporate</option>

    </select>

</body>

  

</html>

Выход:
Прежде чем нажать на список:

После нажатия на список:

Пример 2: Это также может быть использовано для добавления в список сообщений типа «Выберите опцию»

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

<!DOCTYPE html>

<html>

  

<head>

    <title>

      Set the default value for <select> element

  </title>

</head>

  

<body>

    <h2 style="color: green">GeeksforGeeks</h2>

    <b>How to set the default value for an 

       HTML <select> element?</b>

    

<p>The Select an Option would be shown by default.</p>

    <p>Choose your plan below:</p>

    

    <select name="plan" id="plan">

        <option value="none" selected disabled hidden>

          Select an Option

      </option>

        <option value="free">Free</option>

        <option value="starter">Starter </option>

        <option

value="professional">Professional</option>

        <option value="corporate">Corporate</option>

    </select>

</body>

  

</html>

Выход:
Прежде чем нажать на список:

После нажатия на список:

Рекомендуемые посты:

Как установить значение по умолчанию для элемента 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Выбранное значение определяется следующим образом:
  • Для псевдоэлементов ::before и ::after выбранное значение равно none.
  • Если элемент является редактируемым элементом, то выбранное значение соответствует contain.
  • Если выбранное значение параметра user-select на родительском элементе равно all, выбранное значение равно all.
  • Если значение параметра user-select для родительского элемента равно none, выбранное значение равно none.
  • В другом случае выбранное значение соответствует text.
Является значением по умолчанию.
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

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *