Формы и поля в html. все о html формах

Использование фреймворка Bootstrap и плагинов для создания красивых выпадающих списков

Если вы используете фреймворк Bootstrap, то у вас есть возможность применять плагины для создания крутых option HTML.

Один из таких плагинов — Bootstrap-Select. Он добавляет для выпадающего списка полезные функции. Например, можно выполнить поиск значения, вводя текст в поле. Это особенно полезно, если в выпадающем списке много вариантов.

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

В приведенной демо-версии пользователь может выбрать два варианта из списка:

Посмотреть онлайн демо-версию и код

Списки определений (описаний)

Списки определений очень удобны для создания, например, вашего личного словаря терминов. У каждого пункта списка определений есть две части: термин и его определение.
Вы помещаете весь список в элемент <dl> (от англ. Definition List – список определений). Он включает в себя теги <dt> (от англ. Definition Term – определяемое слово, термин) и <dd> (от англ. Definition Description – описание определяемого термина).
Списки определений часто используют в научно-технических и учебных изданиях, оформляя с их помощью глоссарии, словари, справочники и т.д.

Общая структура списка описаний имеет следующий вид:

В следующем примере показано одно из возможных использований списка определений:

Пример: Список определений

Результат
HTML-код
Попробуй сам »

Всемирная паутина: — от англ. World Wide Web (WWW) — распределённая система, предоставляющая доступ к связанным между собой документам, расположенным на различных компьютерах, подключенных к Интернету.
Интернет: — совокупность сетей, применяющих единый протокол обмена для передачи информации.
Сайт: — набор отдельных веб-страниц, которые связаны между собой ссылками и единым оформлением.

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

	Элемент <dl> содержит только элементы <dt> и <dd>. Вы не мо жете поместить блочные элементы (например, абзацы) внутрь термина <dt>, но определения <dd> могут содержать любой элемент потокового контента.

Нумерованные списки

В нумерованный список браузер автоматически вставляет номера элементов по порядку, начиная с некоторого значения (обычно 1). Это позволяет вставлять и удалять пункты списка, не нарушая нумерации, так как остальные номера автоматически будут пересчитаны.
Нумерованные списки создаются с помощью блочного элемента <ol> (от англ. Ordered List – нумерованный список). Далее в контейнер <ol> для каждого пункта списка помещается элемент <li> (от англ. List Item – пункт списка). По умолчанию применяется нумерованный список с арабскими числами.
Тег <ol> имеет следующий синтаксис:

Элементы нумерованного списка должны содержать несколько элементов списка, как показано в следующем примере:

Пример: Нумерованный список

Результат
HTML-код
Попробуй сам »

Пошаговая инструкция

Достать ключ
Вставить ключ в замок
Повернуть ключ на два оборота
Достать ключ из замка
Открыть дверь

Иногда при просмотре существующих кодов HTML вы будете встречать аргумент type в элементе <ol>, который используется для указания типа нумерации (буквы, римские и арабские цифры и т.п.). Синтаксис:

Здесь: type – символы списка:

A — прописные латинские буквы (A, B, C . . .);
a — строчные латинские буквы (a, b, c . . .);
I — большие римские цифры (I, II, III . . .);
i — маленькие римские цифры (i, ii, iii . . .);
1 — арабские цифры (1, 2, 3 . . .) (применяется по умолчанию).

Если вы хотите, чтобы список начинался с номера, отличного от 1, следует указать это при помощи атрибута start тега <ol>.
В следующем примере показан нумерованный список с большими римскими цифрами и начальным значением XLIX:

Пример: Применение атрибутов type и start.

Результат
HTML-код
Попробуй сам »

Перепела
Фазаны
Куропатки
Павлины

Нумерацию можно начинать и с помощью атрибута value, который добавляется к элементу <li> следующим образом:

В этом случае последовательная нумерация списка прервётся и с этого пункта нумерация начнётся заново, в данном случае с семи.

Пример использования атрибута value тега <li>, который позволяет изменить номер данного элемента списка:

Пример: Применение атрибута value

Результат
HTML-код
Попробуй сам »

Первый пункт списка
Второй пункт списка
Третий пункт списка

В этом примере «Первый пункт списка» будет иметь номер 1, «Второй пункт списка» – номер 7, а «Третий пункт списка» – номер 8.

Примеры

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

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

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

<form action="../../form-result.php" method="post" target="_blank">
 <p>Username: <input type="text" name="user"></p>
 <p>Password: <input type="password" name="pass"></p>
 <p><input type="submit" value="Send data"></p>
</form>

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

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

<form action="../../form-result.php" method="post" target="_blank">
  <p><label>Full name: <input type="text" name="fullname"></label></p>
  <p>Gender:
    <label><input type="radio" name="gender" value="male"> Male</label>
    <label><input type="radio" name="gender" value="female"> Female</label>
  </p>
  <p><label>Address: <input type="text" name="address"></label></p>
  <p>Interests:
    <label><input type="checkbox" name="books"> Books</label>
    <label><input type="checkbox" name="movies"> Movies</label>
    <label><input type="checkbox" name="videogames"> Videogames</label>
  </p>
  <p><input type="submit" value="Send data"> <input type="reset" value="Reset form"></p>
</form>

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

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

Обратите внимание, что мы используем для атрибута method значение «GET» просто для разнообразия. Это позволит при открытии нового окна с результатами обработки данных формы увидеть в адресной строке браузера пару имя / значение

Что-то наподобие этого: «?fullname=john&birthdate=15/10/2002&…».

<form action="../../form-result.php" method="get" target="_blank">
  <fieldset>
    <legend>Basic information</legend>
    <p><label>Full name: <input type="text" name="fullname"></label></p>
    <p><label>Birth date: <input type="date" name="birthdate"></label></p>
    <p>Gender:
      <label><input type="radio" name="gender" value="male"> Male</label>
      <label><input type="radio" name="gender" value="female"> Female</label>
    </p>
    <p><label>Address: <input type="text" name="address"></label></p>
    <p><label>Phone number: <input type="tel" name="phone"></label></p>
  </fieldset>
  <fieldset>
    <legend>Extra information</legend>
    <p>Interests:
      <label><input type="checkbox" name="books"> Books</label>
      <label><input type="checkbox" name="movies"> Movies</label>
      <label><input type="checkbox" name="videogames"> Videogames</label>
    </p>
    <p><label>Favorite color: <input type="color" name="favoritecolor"></label></p>
  </fieldset>
  <p>
    <input type="submit" value="Send data">
    <input type="reset" value="Reset form">
  </p>
</form>

И, наконец, мы создадим тег form с возможностью загрузки файла

В этом примере нам нужно обратить внимание на пару атрибутов: method, который может принимать только значение «POST«, так как это единственный метод, который может передавать двоичные данные. И enctype, который должен иметь значение «multipart/form-data«

Если данная настройка не соблюдается, загрузка файлов будет невозможна.

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

<form action="../../form-result.php" method="post" enctype="multipart/form-data" target="_blank">
  <p><label>File: <input type="file" name="ufile"></label> <input type="submit" value="Send data"></p>
</form>

Графические маркеры.

В HTML есть возможность создать список с графическими маркерами. Одно дело, когда маркерами списка являются стандартные кружочки или квадратики, и совсем другое – когда разработчик сам подбирает маркер в соответствии с дизайном страницы. Для того, чтобы сделать элементы списка красивыми, часто используют маленькие картинки.
Чтобы заменить обычный маркер на графический, заменим свойство list-style-type на свойство list-style-image и укажем URL–адрес картинки:

Пример: Графические маркеры

Результат
HTML-код
Попробуй сам »

Знаки зодиака

Овен
Телец
Близнeцы

Обратите внимание на размер картинки — он не должен быть слишком большим, обычно 10-25 пикселей.

Использование атрибута value

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

В следующем примере мы создадим выпадающий список с атрибутом value:

Посмотреть онлайн демо-версию и код

Для тега <select> используется следующий код:

<select id="selecttheme">

<option value="Mar">Maroon</option>

<option value="Gre">Green</option>

<option value="Yel">Yellow</option>

<option value="Blu">Blue</option>

<option value="Red">Red</option>

</select>

Абсолютные и относительные ссылки

Адрес ссылки может быть как абсолютным, так и относительным. Абсолютные адреса должны начинаться с указания протокола (http:// или https://) и содержать имя домена. Относительные ссылки ведут отсчёт от корня сайта или текущего документа.

Протокол для сайта можно не указывать, в таком случае ссылка будет начинаться сразу с // без протокола. Браузер сам подставит нужный протокол, на котором работает сайт. В примере 2 показано создание подобной ссылки.

Пример 2. Использование ссылки

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Абсолютный адрес</title>
</head>
<body>
<p><a href=»//facebook.com»>Facebook</a></p>
</body>
</html>

В данном примере ссылка вида <a href=»//facebook.com»>Facebook</a> является абсолютной и ведёт на главную страницу Facebook. Учтите, что при открытии такой страницы в локальном документе произойдёт ошибка, поскольку такие ссылки работают только на веб-сервере.

Когда в адресе указывается только домен (//webref.ru) или после домена идёт имя папки (//webref.ru/css/), то веб-сервер автоматически загружает документ, обычно с именем index.html или index.php. Таким образом, полный путь к сайту будет https://webref.ru/index.php, а сокращённый — //webref.ru.

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

Ссылки относительно текущего документа

При создании относительных ссылок надо понимать, какое значение для атрибута href следует указывать, поскольку оно зависит от исходного расположения файлов. Рассмотрим несколько типичных вариантов.

1. Файлы располагаются в одной папке (рис. 3).

Рис. 3

Необходимо сделать ссылку из исходного документа source.html на target.html. В таком случае код будет следующий.

2. Файлы размещаются в разных папках (рис. 4).

Рис. 4

Когда исходный документ хранится в какой-либо папке, а ссылаемый в корне сайта, то перед именем документа в адресе ссылки следует поставить две точки и косую черту (/), как показано ниже.

Две точки в данном случае означают выйти из текущей папки на уровень выше.

3. Файлы размещаются в разных папках (рис. 5).

Рис. 5

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

Аналогично обстоит дело с любым числом вложенных папок.

4. Файлы размещаются в разных папках (рис. 6).

Рис. 6

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

Заметьте, что никаких дополнительных точек перед именем папки нет. Если файл находится внутри не одной, а двух папок, то путь к нему записывается так.

5. Файлы размещаются в разных папках (рис. 7).

Рис. 7

Каждый файл располагается в своей папке и чтобы перейти из одной папки в другую ссылка будет следующей.

Ссылки относительно корня сайта

Иногда можно встретить путь к файлу относительно корня сайта, он выглядит как «/folder/target.html». Так, запись <a href=»/course/»>Курсы</a> означает, что ссылка ведёт в папку с именем course, которая располагается в корне сайта, а в ней необходимо загрузить файл index.html.

Опять же, такая форма записи не работает на локальном компьютере, а только под управлением веб-сервера.

Кнопка Button

Кроме стандартных кнопок «Отправить» и «Очистить», можно добавить в форму неограниченное колличество кнопок и с помощью JavaScrypt назначить им какие-либо обработчики (заставить их выполнять какие-либо функции)

Атрибуты элементов формы

accept- Устанавливает фильтр на типы файлов, которые вы можете отправить через поле загрузки файлов.

autocomplete — Включает или отключает автозаполнение.

autofocus — Устанавливает фокус в поле формы.

checked — Предварительно активированный переключатель или флажок.

disabled — Блокирует доступ и изменение элемента.

action — Определяет адрес обработчика формы.

enctype — Устанавливает способ кодирования данных формы при их отправке на сервер.

method — cообщает браузеру каким методом следует передавать данные формы на сервер.

novalidate- Отменяет встроенную проверку данных на корректность.

target — Определяет окно или фрейм в которое будет загружаться результат, возвращаемый обработчиком формы.

list — Указывает на список вариантов, которые можно выбирать при вводе текста.

max — верхнее значение для ввода числа или даты.

maxlength — Максимальное количество символов разрешенных в тексте.

min — Нижнее значение для ввода числа или даты.

multiple — Позволяет загрузить несколько файлов одновременно.

name — Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.

pattern — Устанавливает шаблон ввода.

placeholder — Выводит подсказывающий текст.

readonly — Устанавливает, что поле не может изменяться пользователем.

required- Обязательное для заполнения поле. requeied

size — Ширина текстового поля.

step — Шаг приращения для числовых полей.

tab-index — Определяет порядок перехода между элементами с помощью клавиши Tab.

type — Сообщает браузеру, к какому типу относится элемент формы.

value — Значение элемента.

Тег form в html — описание

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

Из всех атрибутов элемента два являются особенно важными, они используются во всех формах: action и method. Атрибут action указывает на расположение скрипта, который обрабатывает информацию, передаваемую браузером при отправке данных формы. Скрипт может быть написан на любом языке, исполняемом на стороне сервера.

Атрибут method указывает метод отправки данных формы. Рекомендуется использовать метод POST, потому что он скрывает отправляемую информацию и позволяет передавать двоичные данные. Тем не менее, в некоторых частных случаях необходимо использовать метод GET.

Кроме этого HTML тег form представляет собой контейнер для других элементов управления. Ниже приведен их перечень:

button: кнопка, при нажатии которой могут выполняться различные действия в зависимости от значения атрибута type. А именно:

submit: отправляет данные формы на сервер;
reset: сбрасывает значения всех элементов управления к состоянию по умолчанию;
button: не выполняет никаких действий;
menu: выводит меню.

fieldset: группирует наборы элементов управления по определенному критерию;
input: в зависимости от значения атрибута type данный элемент управления может использоваться для различных целей:

hidden: скрытый элемент управления, используемый для передачи информации на сервер, как правило, управляется скриптом;
text: элемент управления, используемый для ввода фрагмента текста одной строкой;
search: используется для ввода поисковой строки;
tel: элемент управления тега form, используемый для предоставления номера телефона;
url: текстовое поле, используемое для ввода одного абсолютного URL-адреса;
email: элемент управления, предназначенный для редактирования одного или нескольких адресов электронной почты;
password: текстовое поле для ввода паролей, в котором символы скрыты точками;
datetime: элемент управления для ввода даты и времени;
date: элемент управления для ввода определенной даты;
month: элемент управления для ввода определенного месяца;
week: элемент управления для ввода определенной недели;
time: элемент управления для ввода о времени;
number: элемент управления для ввода определенного числа;
range: для ввода одного или двух чисел в указанном диапазоне;
color: для ввода цвета;
checkbox: для ввода логического значения (истина / ложь);
radio: элемент управления, используемый для выбора одного из нескольких вариантов;
file: элемент управления, используемый для загрузки файлов на сервер;
submit: кнопка для отправки данных HTML тега form;
image: то же самое, что submit, но с возможностью вывести вместо кнопки по умолчанию пользовательское изображение;
reset: кнопка, используемая для сброса значений элементов управления формы;
button: кнопка без назначенного действия по умолчанию.

keygen: элемент управления, используемый для генерации открытой / секретной пары ключа;
label: используется для вывода подписей для элементов управления формы;
object: объект представления и отображения вложенного контента;
output: элемент управления, используемый для просмотра результатов вычислений, выполняемых на странице, или результатов взаимодействия пользователя с различными элементами управления формы;
select: элемент управления для выбора одного или нескольких вариантов из списка;
textarea: элемент управления, используемый для ввода фрагмента текста, состоящего из одной или более строк;
img: используется для вывода изображения.

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

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

Структура URL

Изначально локатор URL был разработан как система для максимально естественного указания на местонахождение определенного ресурса в сети. URL должен был быть легко расширяемым и использовать лишь ограниченный набор символов ASCII (к примеру, пробел никогда не применяется в URL). В связи с этим, возникла следующая традиционная форма записи URL-адреса:

схема — определяет тип интернет-сервиса (наиболее распространенным является HTTP или HTTPS)
логин — имя пользователя, используемое для доступа к ресурсу
пароль — пароль указанного пользователя
хост — полностью прописанное доменное имя хоста в системе DNS или IP-адрес хоста в форме четырёх групп десятичных чисел, разделённых точками (например, wm-school.ru)
порт — определяет номер порта на хосте (по умолчанию для HTTP является 80)
URL-путь — определяет путь на сервере (если пропущен: корневой каталог сайта)
параметры — строка запроса с передаваемыми на сервер (методом GET) параметрами. Начинается с символа , разделитель параметров — знак . Пример:
якорь — идентификатор «якоря» с предшествующим символом диез . Якорем может быть указан заголовок внутри документа или атрибут id элемента. По такой ссылке браузер откроет страницу и переместит окно к указанному элементу. Например, ссылка на этот раздел статьи: .

Стандарт URL использует набор символов ASCII.
Кодирование в URL заменяет небезопасные символы ASCII на символ «%» и следующие две шестнадцатеричные цифры соответствующего значения в наборе символов ISO-8859-1.
C момента своего изобретения и по сей день стандарт URL обладает серьёзным недостатком — в нём можно использовать только ограниченный набор символов: латинские буквы, цифры и лишь некоторые знаки пунктуации. Все другие символы необходимо перекодировать.
Например, перекодироваться должны буквы кириллицы, буквы с диакритическими знаками, лигатуры, иероглифы.
Перекодирующая кодировка называется URL-encoding, URLencoded или percent‐encoding.
URL-адреса не могут содержать пробелы. Кодирование URL-адрес, как правило заменяет каждый пробел знаком плюс (+), или %20. Символы кириллицы URL кодирование заменяет на соответствующие комбинации % и код символа.

Например, строка вида:

кодируется как:

Преобразование происходит в два этапа: сначала каждый символ кириллицы кодируется в UTF-8 в последовательность из двух байтов, а затем каждый байт этой последовательности записывается в шестнадцатеричном представлении с предшествующим знаком процента (%):

К → D0 и 9C → %d0%9a
о → D0 и B8 → %d0%be
д → D0 и BA → %d0%b4
и → D1 и 80 → %d0%b8, и т. д.

URL-коды символов UTF-8 представлены в Таблице URL кодов символов UTF-8
URL-коды специальных управляющих символов таблицы ASCII (диапазон 00-31, плюс 127), символов ISO-Latin (диапазон 128-255), зарезервированных символов (знак доллара, амперсанд, плюс, слэш, двоеточие, точка с запятой, знак равенства, знак вопроса, знак эт (собака)), небезопасных символов (пробел, кавычки, знак меньше, знак больше, знак диез, знак проценты, фигурные скобки, прямой слэш, обратный слэш, тильда, квдратные скобки, гравис) представлены в Таблице символов кодирования URL

Маркированные списки

Маркированные списки по сути похожи на нумерованные только они не содержат последовательной нумерации пунктов.
Маркированные списки создаются с помощью блочного элемента <ul> (от англ. Unordered List – ненумерованный список). Каждый элемент списка, как и в нумерованных списках, начинается с тега <li>. Браузер формирует отступ для каждого пункта списка и автоматически отображает маркеры.
Тег <ul> имеет следующий синтаксис:

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

Пример: Маркированный список

Результат
HTML-код
Попробуй сам »

Windows Movie Maker
Pinnacle VideoSpin
AviSynth
Avidemux

Внутри тега <li> не обязательно размещать только текст, допустимо
поместить любой элемент потокового контента (ссылки, абзацы, изображения и др.)

Открытие ссылок в новом окне

Чтобы создать ссылку, открывающую страницу в новом окне браузера, вы можете воспользоваться атрибутом target открывающего тега элемента <a>. Значение этого атрибута должно быть установлено _blank. Чаще всего ссылки данного вида ставятся, если они перебрасывают посетителя на сторонний сайт. В этом случае создатели сайтов надеются, что посетитель вернется на их сайт по завершении просмотра открывшейся страницы, так как в этом случае ваш сайт остается открытым в исходном окне посетителя и не дает ему забыть о вас. Одни пользователи любят средство отображения в отдельном окне, а у других новые окна могут вызывать скорее чувство раздражения, чем комфорта. Поэтому пользуйтесь этим приемом экономно, лишь к некоторым ссылкам и, при этом, будет не лишним заранее предупредить посетителя, что страница откроется в новом окне.

В следующем примере показано как создать ссылку, открывающую страницу в новом окне браузера:

Если установить значение _blank для всех ссылок на веб-странице, то каждая из этих ссылок будет открываться у посетителя в новом окне, в результате перед пользователем может оказаться великое множество открытых окон. Для избегания подобной ситуации можно присвоить целевому окну индивидуальное имя, которое можно будет указывать в ссылках вместо значения _blank. Следующая ссылка откроется в новом окне с именем _window:

Укажите в каждой ссылке, на своей веб-странице, значение _window вместо _blank и все документы, к которым будет осуществляться переход по ссылкам, будут открываться в том же самом втором окне, а ваш сайт остается открытым в исходном окне.

Атрибут target может принимать следующие значения:

Значение	Описание
_blank	Открыть страницу в новом окне или вкладке.
_self	Открыть страницу в том же окне (это значение задается по умолчанию).
_parent	Используется при работе с фреймами и позволяет открыть страницу в родительском фрейме; если на текущей странице нет фреймов, то это значение работает как _self.
_top	Применяется при работе с фреймами и позволяет открыть страницу в полном окне браузера, заменяя собой все фреймы, которые были на странице; если на текущей странице нет фреймов, то это значение работает как _self.
framename	Открыть страницу в новом окне с именем framename.

Определение стилей выпадающего списка с помощью CSS

Теперь рассмотрим, как определить стили выпадающего списка <select>, используя возможности CSS. В следующей демо-версии я использовал несколько простых свойств CSS и свойства градиента CSS3:

Посмотреть онлайн демо-версию и код

Вместе с linear-gradient здесь использовано свойство box-shadow. Полный код CSS выглядит следующим образом:

.selcls {

padding: 3px;

border: solid 1px #517B97;

outline: 0;

background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #CAD9E3), to(#FFFFFF));

background: -moz-linear-gradient(top, #FFFFFF, #CAD9E3 1px, #FFFFFF 25px);

box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;

-moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;

-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;

width:150px;

}

Пример получения доступа к выбранному варианту в JavaScript

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

Посмотреть онлайн демо-версию и код

Для option value HTML используется следующий код:

<select id="selcolor">

<option value="Maroon">Maroon</option>

<option value="Green">Green</option>

<option value="Yellow">Yellow</option>

<option value="Blue">Blue</option>

<option value="Red">Red</option>

<option value="White">Other</option>

</select>

Следующая строка кода используется в JavaScript, чтобы получить доступ к значению атрибута value варианта <select>:

var seltheme = document.getElementById(“selcolor”).value;

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

Получение доступа к видимому тексту в JQuery

На этот раз я буду использовать JQuery, чтобы получить доступ к значению выбранного варианта: как к тексту, так и к value. В этой демо-версии я буду получать доступ к видимому тексту в теге option в HTML:

Посмотреть онлайн демо-версию и код

В коде для каждого варианта в теге <select> значение отличается от текста. После того, как вы выберете цвет, jQuery отображает видимый текст в предупреждении. Код тега <select> следующий:

<select id="jqueryselect">

<option value="MAR">Maroon</option>

<option value="GRE">Green</option>

<option value="YEL">Yellow</option>

<option value="BLU">Blue</option>

<option value="RED">Red</option>

</select>

Вот как обеспечивается доступ к этому значению в HTML select option selected JavaScript:

var selectedcolor = $('#jqueryselect option:selected').text();

Также можно получить доступ к значению с помощью JQuery-метода $.val():

var selectedcolor = $('#jqueryselect').val();

Замените эту строку в приведенном выше примере, и код будет отображать шорткод / значение цвета в атрибуте value, а не видимый текст.

Правила написания URL

При создании ссылок важно придерживаться следующих правил во избежание распространенных ошибок:

При создании ссылок не используйте обратный слеш (\), такая ошибка делает ваши ссылки нерабочими. В сетевых URL-адресах используется только прямой слеш (/). В операционной системе Windows обратный слэш используется при указании пути к файлам на компьютере (например, D:\Images\elefant.png).
Не начинайте URL-адрес ссылки с названия диска вашего компьютера (C:, D: и т. д.). Ссылки между страницами документа будут работать, пока он находится на локальном сервере, но когда вы поместите свой сайт на удаленный веб-сервер, эти ссылки перестанут работать.
Абсолютный URL-адрес, обязательно должен начинаться с обозначения протокола http:// или https://.
Не используйте в качестве URL-адреса файловые пути. С помощью протокола file можно создать ссылку на файл, расположенный на вашем компьютере (например, file:///D:/Themes/lessons.html). Но такая ссылка не будет работать в веб-сети или на других компьютерах.
Не применяйте в именах файлов и папок пробелы или специальные символы, даже если это допустимые символы. Например, при запросе документа с именем файла «Web Master.html» браузером будет преобразован пробел в специальный символьный код (%) т.е. Web%20Master.html. Используйте в именах файлов только цифры, литеры, дефис (-) и подчеркивание (_).
Любая ссылка — это встроенный элемент, поэтому нельзя размещать внутри элемента <a> блочные элементы, но можно помещать ссылку в блочный элемент-контейнер.