Option tag in html

Примеры использования тега option

Тег option используется внутри тега select для создания выпадающего списка. Это позволяет выбрать одну опцию из множества доступных вариантов. Ниже приведены несколько примеров использования тега option:

Пример 1: Простой список

Для создания списка, который будет состоять из нескольких опций, необходимо добавить тег select и все опции, которые будут содержаться в списке, должны быть помещены в теги option. В данном примере мы создадим список, который будет состоять из трех пунктов: «Грейпфрут», «Апельсин» и «Яблоко».

Грейпфрут

Апельсин

Яблоко

Пример 2: Список с выбором на странице

С помощью тега option можно создавать список с выбором на странице. Ниже приведен пример списка, где будет доступен выбор языка:

Выберите язык:

Русский

Английский

Французский

Немецкий

Пример 3: Список с выбором и значением

Значение каждого пункта в списке можно определить через атрибут value. В примере ниже пункт «Грейпфрут» имеет значение «1», а пункт «Апельсин» имеет значение «2»:

Грейпфрут

Апельсин

Яблоко

Пример 4: Множественный выбор

Тег option также позволяет создавать список для множественного выбора. Для этого необходимо добавить атрибут multiple к тегу select. В примере ниже пользователь сможет выбрать несколько опций из списка:

Грейпфрут

Апельсин

Яблоко

HTML Теги

<!—Комментарий—><!DOCTYPE><a><abbr><acronym><address><applet><area><article><aside><audio><b><base><basefont><bdi><bdo><big><blockquote><body><br><button><canvas><caption><center><cite><code><col><colgroup><data><datalist><dd><del><details><dfn><dialog><dir><div><dl><dt><em><embed><fieldset><figcaption><figure><font><footer><form><frame><frameset><h1> — <h6><head><header><hr><html><i><iframe><img><input><ins><kbd><label><legend><li><link><main><map><mark><meta><meter><nav><noframes><noscript><object><ol><optgroup><option><output><p><param><picture><pre><progress><q><rp><rt><ruby><s><samp><script><section><select><small><source><span><strike><strong><style><sub><summary><sup><svg><table><tbody><td><template><textarea><tfoot><th><thead><time><title><tr><track><tt><u><ul><var><video>

Отправка файла

Для того чтобы можно было отправить на сервер файл, используется специальное поле, которое задается параметром type=fiie тега INPUT. Такой элемент формы отображается как текстовое поле, рядом с которым располагается кнопка Обзор (Browse). При нажатии на эту кнопку открывается окно для выбора файла, в котором пользователь может указать нужный файл. Код для создания поля для отправки файла показан ниже:

<form enctype="multipart/form-data" method=post>
Выбрать файл:
<input type=file size=30>
</form>

Параметр формы enctype=»multipart/form-data» нужен для корректной передачи файла. Если его не указать, то будет передан лишь путь к файлу. Дополнительные параметры те же, что и для текстового поля. Поскольку графические файлы занимают относительно большой объем данных, их следует отправлять на сервер с помощью method=post, как показано в данном примере.

Форма обратной связи

Ниже приведён пример реально работающей формы обратной связи с PHP обработчиком, применённой на моём сайте:

HTML — код формы:

<form method="post" action="mail.php">
Имя:
<input type="text" class="style" name="name" size="30"/>
Е-mail:
<input name="email" type="text" class="style" size="30"/>
Сообщение:
<textarea name="mess" class="style" rows="8" cols="45"></textarea>
<input type="submit" value="Отправить сообщение"/> </form>

Подключаем PHP обработчик:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Форма обратной связи</title>
</head>
<body>
<?php
if (isset($_POST)) {$name = $_POST;}
if (isset($_POST)) {$email = $_POST;}
if (isset($_POST)) {$mess = $_POST;}
if (empty($name))
{
echo "Не указано имя!";
echo "<a href=URL страницы на которой находится форма>Вернуться к заполнению формы</a>";
exit;
}
if (empty($email))
{
echo "Не указан e-mail!";
echo "<a href=URL страницы на которой находится форма>Вернуться к заполнению формы</a>";
exit;
}
if (empty($mess))
{
echo "Сообщение не написано!";
echo "<a href=URL страницы на которой находится форма>Вернуться к заполнению формы</a>";
exit;
}
$to = "Адрес электронной почты, на который отправляются сообщения</a>";
$headers = "Content-type: text/plain; charset = windows-1251";
$subject = "Сообщение с вашего сайта";
$message = "Имя пославшего: $name \nЭлектронный адрес: $email \nСообщение: $mess";
$send = mail ($to, $subject, $message, $headers);
if ($send == 'true')
{
echo "Спасибо за отправку вашего сообщения!";
echo "<a href=index.html>Нажмите, чтобы вернуться на главную страницу";
}
else
{
echo "
Ошибка. Сообщение не отправлено!";
}
?>
</body>
</html>

Те данные, которые выделены красным, необходимо заменить на свои. Сохраняем файл как mail.php в корне сайта.

Добавляем CSS стили:

.style {
font:normal 12pt verdana;
border:solid 1px #808080;
color:#8A2BE2;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}

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

HTML Tags

<!—><!DOCTYPE><a><abbr><acronym><address><applet><area><article><aside><audio><b><base><basefont><bdi><bdo><big><blockquote><body><br><button><canvas><caption><center><cite><code><col><colgroup><data><datalist><dd><del><details><dfn><dialog><dir><div><dl><dt><em><embed><fieldset><figcaption><figure><font><footer><form><frame><frameset><h1> — <h6><head><header><hr><html><i><iframe><img><input><ins><kbd><label><legend><li><link><main><map><mark><meta><meter><nav><noframes><noscript><object><ol><optgroup><option><output><p><param><picture><pre><progress><q><rp><rt><ruby><s><samp><script><section><select><small><source><span><strike><strong><style><sub><summary><sup><svg><table><tbody><td><template><textarea><tfoot><th><thead><time><title><tr><track><tt><u><ul><var><video>

HTML Справочник

HTML по алфавитуHTML по категориямHTML Поддержка браузераHTML АтрибутыHTML Глобальные атрибутыHTML СобытияHTML ЦветаHTML CanvasHTML Аудио/видеоHTML Наборы символовHTML Типы документовHTML URL КодировкаHTML Коды языкаHTML Коды странHTTP СообщенияHTTP МетодыКонвертер PX в EMКомбинации клавиш

HTML Теги

<!—Комментарий—>
<!DOCTYPE>
<a>
<abbr>
<acronym>
<address>
<applet>
<area>
<article>
<aside>
<audio>
<b>
<base>
<basefont>
<bdi>
<bdo>
<big>
<blockquote>
<body>
<br>
<button>
<canvas>
<caption>
<center>
<cite>
<code>
<col>
<colgroup>
<data>
<datalist>
<dd>
<del>
<details>
<dfn>
<dialog>
<dir>
<div>
<dl>
<dt>
<em>
<embed>
<fieldset>
<figcaption>
<figure>
<font>
<footer>
<form>
<frame>
<frameset>
<h1> — <h6>
<head>
<header>
<hr>
<html>
<i>
<iframe>
<img>
<input>
<ins>
<kbd>
<label>
<legend>
<li>
<link>
<main>
<map>
<mark>
<meta>
<meter>
<nav>
<noframes>
<noscript>
<object>
<ol>
<optgroup>
<option>
<output>
<p>
<param>
<picture>
<pre>
<progress>
<q>
<rp>
<rt>
<ruby>
<s>
<samp>
<script>
<section>
<select>
<small>
<source>
<span>
<strike>
<strong>
<style>
<sub>
<summary>
<sup>
<svg>
<table>
<tbody>
<td>
<template>
<textarea>
<tfoot>
<th>
<thead>
<time>
<title>
<tr>
<track>
<tt>
<u>
<ul>
<var>
<video>
<wbr>

Тег option: основные сведения

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

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

Например, следующий код создаст список выбора из трех вариантов:

Первый вариант
Второй вариант
Третий вариант

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

<option>Первый вариант</option>

<option>Второй вариант</option>

<option>Третий вариант</option>

</select>

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

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

More Examples

Example

Use of <option> in a <datalist> element:

<label for=»browser»>Choose your browser from the list:</label>
<input list=»browsers» name=»browser» id=»browser»><datalist id=»browsers»>
<option value=»Edge»>
<option value=»Firefox»>
<option value=»Chrome»>
<option value=»Opera»>
<option value=»Safari»>
</datalist>

Example

Use of <option> in <optgroup>
elements:

<label for=»cars»>Choose a car:</label><select id=»cars»>

<optgroup label=»Swedish Cars»>

<option value=»volvo»>Volvo</option>

<option value=»saab»>Saab</option>

</optgroup>

<optgroup label=»German Cars»>

<option value=»mercedes»>Mercedes</option>

<option value=»audi»>Audi</option>

</optgroup>
</select>

HTML References

HTML by AlphabetHTML by CategoryHTML Browser SupportHTML AttributesHTML Global AttributesHTML EventsHTML ColorsHTML CanvasHTML Audio/VideoHTML Character SetsHTML DoctypesHTML URL EncodeHTML Language CodesHTML Country CodesHTTP MessagesHTTP MethodsPX to EM ConverterKeyboard Shortcuts

Тег FORM — создаём форму

Для указания браузеру, где начинается и заканчивается html форма, используется тег FORM. Между открывающим и закрывающим тегами < FORM> и < /FORM> можно помещать любые необходимые теги HTML. Это позволяет добавить элементы формы в ячейки таблицы для их форматирования, а также использовать изображения. В документе допускается наличие любого количества форм, но одновременно на сервер может быть отправлена только одна форма. По этой причине формы не должны быть вложены одна в другую.

<form action=mail.php>
  В какой версии HTML появился элемент canvas?
<input type=radio name=answer value=а1>XHTML Basic 1.1
<input type=radio name=answer value=a2>HTML 4.01 Transitional
<input type=radio name=answer value=аЗ>HTML 5
<input type=submit value="Проверить">
</form>

Атрибуты тега FORM приведены ниже:

action — указывает обработчика, к которому обращаются данные формы при их отправке на сервер, в качестве обработчика может выступать CGI-программа или HTML-документ, а так же можно указать адрес электронной почты, начиная его с ключевого слова maiito.
enctype — устанавливает тип для данных, отправляемых вместе с формой.
method — этот параметр сообщает серверу о цели запроса, используют два основных метода: GET и POST:
- get — этот метод является одним из самых распространенных и предназначен для получения требуемой информации и передачи данных в адресной строке.
- post — посылает на сервер данные в запросе браузера, что позволяет отправлять большее количество данных, чем доступно методу GET, поскольку у него установлено ограничение в 4 Кб.
target — после обработки формы данные возвращаются в виде html-документа, а с помощью этого атрибута можно определить окно, в которое будет загружаться итоговая веб-страница. Имя окна задаётся параметром NAME.
- _blank — загружается в новом окне браузера;
- _self — загружает страницу, возвращаемую обработчиком формы в текущее окно;
- _parent — загружает страницу во фрейм-родитель, если фреймов нет, то этот параметр работает как _self;
- _top — отменяет все фреймы, если они имеются, и загружает страницу в полном окне браузера, в противном случае этот параметр работает как _self.

Attributes

Attributes can be added to an HTML element to provide more information about how the element should appear or behave.

The element accepts the following attributes.

Attribute	Description
	Disables the input control. The button won’t accept changes from the user. It also cannot receive focus and will be skipped when tabbing. This is a boolean attribute. If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute’s canonical name, with no leading or trailing whitespace (i.e. either or ). Possible values:
	Specifies a label to be used as an alternative to the option item’s contents. Useful if you’d prefer a shorter, more concise label.
	Specifies that this option will be pre-selected when the user first loads the page. This is a boolean attribute. If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute’s canonical name, with no leading or trailing whitespace (i.e. either or ). Possible values:
value	Specifies the initial value of the option item.

Global Attributes

The following attributes are standard across all HTML elements. Therefore, you can use these attributes with the tag , as well as with all other HTML tags.

For a full explanation of these attributes, see HTML 5 global attributes.

Event Handlers

Event handler content attributes enable you to invoke a script from within your HTML. The script is invoked when a certain «event» occurs. Each event handler content attribute deals with a different event.

Most event handler content attributes can be used on all HTML elements, but some event handlers have specific rules around when they can be used and which elements they are applicable to.

For more detail, see HTML event handler content attributes.

Еще примеры

Пример

Использование элемента <option> в <datalist>:

<label for=»browser»>Выберите свой браузер из списка:</label>
<input list=»browsers» name=»browser» id=»browser»>
<datalist id=»browsers»>
<option value=»Edge»>
<option value=»Firefox»>
<option value=»Chrome»>
<option value=»Opera»>
<option value=»Safari»>
</datalist>

Пример

Использование элемента <option> в <optgroup>:

<label for=»cars»>Выберите автомобиль:</label><select id=»cars»>

<optgroup label=»Шведские Автомобили»>

<option value=»volvo»>Вольво</option>

<option value=»saab»>Сааб</option>

</optgroup>

<optgroup label=»Немецкие Автомобили»>

<option value=»mercedes»>Мерседес</option>

<option value=»audi»>Ауди</option>

</optgroup>
</select>

Пример использования

Элемент <option> может быть использован без каких-либо атрибутов, но обычно содержит атрибут со значением, которое отправляется и обрабатывается на стороне сервера.

В данном примере рассмотрено применение атрибута selected HTML тега <option>, который определяет какой параметр будет предварительно выбран внутри списка:

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования HTML тега <option> в раскрывающемся списке</title>
	</head>
	<body>
		<select name = "blacklist">
			<option value = "2PAC">Tupac Amaru Shakur</option>
			<option value = "50cent">Curtis Jackson</option>
			<option value = "Snoop Dogg"selected>Calvin Cordozar Broadus, Jr.</option> <!--параметр, который будет предварительно выбран -->
		</select>
	</body>
</html>

В этом примере мы тегом <select> создали раскрывающийся список, внутри него мы поместили три элемента <option>, которые определяют его пункты. Атрибутом selected указали, что третий пункт предопределен (будет выбран по умолчанию вместо первого).

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

В браузере это выглядит следующим образом:

Пример использования HTML тега <option> в раскрывающемся списке

Давайте рассмотрим пример в котором используются раскрывающийся список (<select>) и список предопределенных вариантов для ввода (<datalist>).
Список предопределенных вариантов мы подключим атрибутом list внутри однострочного текстового поля (тег <input>).

Элементом списков выступает тег <option>.
Если в списках используется атрибут label, то текст надписи, которая указывает значение параметра берется из него.
Если значение атрибута label не указано, то этим значением выступает содержимое элемента <option>, при этом необходимо использовать закрывающий элемент </option>.

Обращаю Ваше внимание, что если в списке предопределённых вариантов () используется атрибут value, то поиск осуществляется по нему, если атрибут отсутствует, то по содержимому элемента, при этом необходимо использовать закрывающий элемент

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования атрибута label HTML тега <option></title>
	</head>
	<body>
		<form action = "#"> <!-- адрес передачи данных при отправке формы (относительный, либо абсолютный URL)-->
			<fieldset> <!--группируем элементы формы-->
				<legend>Составление маршрута</legend> <!--заголовок для элемента <fieldset> -->
				Город отправления:
				<select> <!--раскрывающийся список-->
					<option  label = "Владивосток">
					<option  label = "Анапа">
					<option  label = "Москва">
					<option  label = "Смоленск">
					<option  label = "Якутск">
				</select>
					<p>Аэропорт назначения:
						<input type = "text" list = "airports"> <!-- ссылаемся на список предопределенных вариантов --> 
					</p>
				<datalist id = "airports"> <!--Список предопределенных вариантов для ввода-->
					 <option value = "VVO" label = "Владивосток">
					 <option value = "MEM" label = "Анапа">
					 <option value = "VKO" label = "Москва Внуково">
					 <option value = "LNX" label = "Смоленск">
					 <option value = "YKS" label = "Якутск">
				</datalist>	
				<input type = "submit" value = "подтвердить"> <!--кнопка отправки формы -->
			</fieldset>
		</form>
	</body>
</html>

В браузере это выглядит следующим образом:

Пример использования атрибута label HTML тега <option> (текст надписи, которая указывает значение параметра).

Примеры использования тега option

Пример 1: Простой список

Пример 2: Список с выбором на странице

Пример 3: Список с выбором и значением

Пример 4: Множественный выбор

HTML Теги

Отправка файла

Форма обратной связи

HTML Tags

HTML Справочник

HTML Теги

Тег option: основные сведения

More Examples

Example

Example

HTML References

HTML Tags

Тег FORM — создаём форму

Attributes

Global Attributes

Event Handlers

Еще примеры

Пример

Пример

Пример использования

Похожие записи:

Похожие записи: