Input выбор из списка. Элементы HTML форм — выпадающий список (теги select, option, optgroup), текстовое поле (textarea), а также применение label, fieldset и legend
Поле со списком, называемое еще ниспадающее меню, один из гибких и удобных элементов формы. В зависимости от настроек, в списке можно выбирать одно или несколько значений. Преимущество списка в его компактности и универсальности, список может занимать одну или несколько строк, в нём можно выбирать одно или несколько значений. Поле со списком создается следующим образом.
Тег
Атрибуты тега
Рассмотрим атрибуты тега
, с помощью которых можно изменять представление списка.
multiple
Наличие multiple
сообщает браузеру отображать содержимое элемента
как список множественного выбора. Конечный вид списка зависит от используемого атрибута size
. Если он отсутствует, то высота списка равна количеству пунктов, если значение size
меньше числа пунктов, то появляется вертикальная полоса прокрутки.
Для выбора нескольких значений списка применяются клавиши Ctrl
и Shift
совместно с курсором мыши.
В примере 1 показано создание списка множественного выбора.
Пример 1. Список множественного выбора
HTML5
IE
Cr
Op
Sa
Fx
Список
name
Определяет уникальное имя элемента
. Как правило, это имя используется для доступа к данным через скрипты или для получения выбранного значения серверным обработчиком.
size
Устанавливает высоту списка. Если значение size
равно единице, то список превращается в раскрывающийся. Значение по умолчанию зависит от атрибута multiple
. Если он присутствует, то размер списка равен числу элементов. Когда multiple
нет, то значение атрибута size
равно 1.
Атрибуты тега
Тег
selected
Делает текущий пункт списка выделенным. Если у тега
добавлен атрибут multiple
, то можно выделять более одного пункта.
value
Определяет значение пункта списка, которое будет отправлено на сервер. На сервер отправляется пара «имя/значение», где имя задаётся атрибутом name
тега
, а значение - атрибутом value
выделенных пунктов списка. Значение может как совпадать с текстом пункта, так быть и самостоятельным.
label
Предназначен для указания метки пункта списка, сокращённой по сравнению с текстом внутри
Создание списка показано в примере 2.
Пример 2. Использование списка
HTML5
IE
Cr
Op
Sa
Fx
Список
Группирование элементов списка
При достаточно обширном списке имеет смысл сгруппировать его элементы по блокам, чтобы обеспечить наглядность списка и удобство работы с ним. Для этой цели применяется тег
Пример 3. Группирование элементов списка
HTML5
IE
Cr
Op
Sa
Fx
Список
Результат примера показан на рис. 1.
Рис. 1. Группированный список
Как раз внутри элемента form должны располагаться элементы управления, которых может быть сколь угодно много.
Атрибуты формы:
В атрибуте action указывается серверный файл со скриптом, ответственным за основную обработку данных, пересылаемых из формы. Обычно код этого файла пишется на серверном языке программирования, например, на языке php
или perl
.
Атрибут enctype указывает на тип передаваемой на сервер информации, если это просто текстовые данные — text/plain , если с формой отсылаются файлы, то следует указать multipart/form-data .
Атрибут method указывает и определяет форму передачи данных. Подробно мы на этом останавливаться не будем, однако следует сказать, что для более надежной передачи следует указать метод post .
Элементы формы html
<input
type
=
"text"
name
=
"login"
size
=
"20"
value
=
"Логин"
maxlength
=
"25"
>
Результат:
Значение атрибута type — text — указывает на то, что это именно текстовое поле
size — размер текстового поля в символах
maxlength — максимальное кол-во вмещающихся в поле символов
value — первоначальный текст в текстовом поле
name — имя элемента, необходимо для обработки данных в файле-обработчике
Результат:
Вместо текста в поле отображается маска — звездочки или кружочки
<input
type
=
"submit"
value
=
"Отправить данные"
>
Результат:
Кнопка submit собирает все данные с формы, введенные пользователем и отправляет их по адресу, указанному в атрибуте action формы.
<input
type
=
"reset"
value
=
"Очистить форму"
>
Результат:
Кнопка возвращает состояние всех элементов управления к первоначальному (очищает форму)
<input
type
=
"checkbox"
name
=
"asp"
value
=
"yes"
>
ASP<br
>
<input
type
=
"checkbox"
name
=
"js"
value
=
"yes"
checked
=
"checked"
>
javascript<br
>
<input
type
=
"checkbox"
name
=
"php"
value
=
"yes"
>
PHP<br
>
<input
type
=
"checkbox"
name
=
"html"
value
=
"yes"
checked
=
"checked"
>
HTML<br
>
ASP
javascript
PHP
HTML
Результат:
ASP javascript PHP HTML
В html флажок служит для организации множественного выбора, т.е. когда необходимо и возможно выбрать несколько вариантов ответа
<input
type
=
"radio"
name
=
"book"
value
=
"asp"
>
ASP<br
>
<input
type
=
"radio"
name
=
"book"
value
=
"js"
>
Javascript<br
>
<input
type
=
"radio"
name
=
"book"
value
=
"php"
>
PHP<br
>
<input
type
=
"radio"
name
=
"book"
value
=
"html"
checked
=
"checked"
>
HTML<br
>
ASP
Javascript
PHP
HTML
Результат:
ASP Javascript PHP HTML
radio кнопка html служит для единственного выбора из нескольких вариантов
Атрибут checked устанавливает сразу элемент отмеченным
Важно:
Для элементов radio
необходимо, чтобы значение атрибута name
у всех элементов в группе было одинаковым: в таком случае элементы будут работать взаимосвязано, при включении одного элемента, другие буду отключаться
Выпадающий список HTML
Рассмотрим пример добавления выпадающего списка:
1
2
3
4
5
6
<select
name
=
"book"
size
=
"1"
>
<option
value
=
"asp"
>
ASP</
option
>
<option
value
=
"js"
>
JavaScript</
option
>
<option
value
=
"php"
>
PHP</
option
>
<option
value
=
"html"
selected
=
"selected"
>
HTML</
option
>
</
select
>
Результат:
Выпадающий список состоит из главного тега — select — который имеет закрывающую пару, а каждый пункт списка — это тег option , внутри которого отображается текст пункта
Атрибут size со значением «1»
указывает на то, что список в свернутом виде отображает один пункт, остальные открываются при щелчке на стрелочке меню
Атрибут selected у пункта (option) указывает на то, что именно этот пункт будет изначально виден, а остальные пункты «свернуты»
Для больших и сложных списков есть возможность добавить подзаголовки
— тег optgroup с атрибутом label (надпись):
1
2
3
4
5
6
7
8
9
10
11
12
<select
name
=
"book"
size
=
"1"
>
<optgroup
label
=
"Английские"
>
<option
value
=
"asp"
>
ASP</
option
>
<option
value
=
"js"
>
JavaScript</
option
>
<option
value
=
"php"
>
PHP</
option
>
<option
value
=
"html"
selected
=
"selected"
>
HTML</
option
>
</
optgroup
>
<optgroup
label
=
"Русские"
>
<option
value
=
"asp_rus"
>
ASP по-русски</
option
>
<option
value
=
"js_rus"
>
JavaScript по-русски</
option
>
</
optgroup
>
</
select
>
Для предоставления возможности выбора нескольких пунктов одновременно
необходимо добавить атрибут multiple . Но в таком случае и атрибут size следует установить в значение, большее, чем 1:
Результат:
Ширина элемента зависит от атрибута cols , который указывает сколько символов помещается по горизонтали
Атрибут rows определяет количество строк в элементе
Другие элементы
Дополнительные элементы и атрибуты
Для элементов управления radio
и checkbox
удобно использовать дополнительные элементы, которые, во-первых, делают привязку текста к самому элементу radio или checkbox, во-вторых, добавляют обводку при клике:
<input
type
=
"checkbox"
id
=
"book1"
>
<label
for
=
"book1"
>
ASP</
label
>
В примере создана надпись (тег label) для элемента checkbox . Привязка осуществляется через атрибут id , значение которого указано в атрибуте for надписи.
Результат:
Атрибут disabled позволяет блокировать элемент, делая его недоступным для изменения пользователем:
<input
type
=
"text"
name
=
"login"
size
=
"20"
value
=
"Логин"
maxlength
=
"25"
disabled
=
"disabled"
>
<input
type
=
"checkbox"
name
=
"asp"
value
=
"yes"
>
ASP<br
>
<input
type
=
"checkbox"
name
=
"js"
value
=
"yes"
checked
=
"checked"
disabled
=
"disabled"
>
javascript<br
>
ASP
javascript
window.onresize = … ;
Событие onresize объекта window ответственно за изменение размеров окна браузера. Поэтому событие и принадлежит объекту окно — window .
Поскольку среди элементов html нету тега, отождествленного с окном браузера, то обработать в javascript событие onresize можно при помощи присваивания функции свойству объекта window.
Рассмотрим на примере:
Пример:
Написать скрипт, который при изменении размера окна вызывает сообщение «Размер окна изменен!»
Скрипт:
window.onresize = function message() {alert("Размер окна изменен!");}
HTML-код:
пожалуйста, измените размер этого окна.
Объект javascript выпадающий список — select
Объект select — выпадающий список — предоставляет список значений для выбора. Выбор может быть как одного пункта, так и нескольких пунктов сразу. Это сложный объект, обращение к которому в скрипте происходит и как к объекту select , и как к его пункту option .
Свойства объекта select:
length — количество пунктов списка
name — атрибут name
options — массив пунктов
selectedIndex — индекс выбранного пункта option
defaultSelected — выбранный пункт option по умолчанию
selected — выбранный пункт
Получить значение выпадающего списка (select) в javascript можно через свойство value . Но есть и другие способы.
Рассмотрим пример:
Пример:
Разместить выпадающий список из трех пунктов — гороов: Москва
, Санкт-Петербург
, другой
. По щелчку на кнопке получить значение свойства value выбранного option (пункта) списка и вывести его на экран
HTML-код:
<form
name
=
"f1"
>
Город:<br
>
<select
name
=
"town"
id
=
"s1"
>
<option
value
=
"msk"
>
Москва</
option
>
<option
value
=
"spb"
>
Санкт-Петербург</
option
>
<option
value
=
"other"
>
другой</
option
>
</
select
>
<input
type
=
"button"
onclick
=
"f()"
value
=
"ok"
>
</
form
>
Идентификация значения списка:
function
f()
{
var
a=
document.getElementById
("s1"
)
.value
;
alert(a)
;
}
function f(){
var a=document.getElementById("s1").value;
alert(a);
}
Задание js13_1.
При изменении пункта списка добавлять в текстовое поле текст из выбранного пункта меню (option).
Подробно:
Добавьте текстовое поле и список select с четырьмя пунктами option с текстом.
В открывающий тег select добавьте обработчик события onchange .
Отождествите обработчик события onchange с функцией, изменяющей текст в текстовом поле (в текстовое поле поместите значение выбранного пункта меню).
Дополните код:
Скрипт:
function
check()
{
document.getElementById
("t1"
)
.value
=
...;
}
function check()
{
document.getElementById("t1").value= ...;
}
<input
type
=
"text"
id
=
"t1"
>
<br
>
<select
id
=
"menu1"
onchange
=
"..."
>
<option
value
=
"1"
>
1</
option
>
<option
value
=
"2"
>
2</
option
>
<option
value
=
"3"
>
3</
option
>
</
select
>
Задание js13_2.
Создать страницу проверки знаний учащегося с вопросом: «В каких единицах измерения измеряется работа?»
и двумя ответами: «Моль»
(неправильный) и «Джоуль»
(правильный), выполненными в виде элемента меню со списком (select). Функцию проверки запускать
Рассмотрим пример использования свойства объекта select — selectedIndex — выбранный пункт option:
Пример:
Выводить в текстовое окно индекс выбранной альтернативы:
В данном примере при изменении пункта меню генерируется событие onChange . В качестве значения атрибута onChange выполняется скрипт: происходит обращение к текстовому полю через массив элементов формы (текстовое поле — это первый элемент массива, т.к. 0-й элемент — это выпадающий список select). В качестве значения текстового поля указывается номер выбранного пункта списка (selectedIndex).
Объект javascript option — пункт меню
Пункт меню select в javascript — option — рассматривается как отдельный объект со своими свойствами:
Доступ к конкретному пункту меню происходит через коллекцию (массив) options
:
<form
name
=
"f1"
>
<select
name
=
"s1"
>
<option
value
=
"1"
>
1</
option
>
<option
value
=
"2"
>
2</
option
>
<option
value
=
"3"
>
3</
option
>
</
select
>
Рассмотрим пример использования свойства text объекта option:
Пример:
При изменении выбора пункта списка в текстовое поле выводить текст из выбранной альтернативы списка
<form
>
<select
id
=
"s1"
onChange
=
"document.getElementById("t1").value= document.getElementById("s1").options.text;"
>
<option
>
ГАЗ
<option
>
ВАЗ
</
select
>
<input
type
=
"text"
id
=
"t1"
>
</
form
>
Рассмотрим еще одно решение с использованием списка множественного выбора:
Пример:
При изменении списка множественного выбора в текстовое окно выводить индексы выбранных альтернатив
(установить для списка атрибут multiple)
Пример:
По щелчку на абзац (тег p) изменять содержимый текст данного тега и выполнять центрирование текста в нем
<p
onclick
=
"this.outerHTML="
измененный текст</
p
>
"">изменяемое содержимое</
p
>
измененный текст
"">изменяемое содержимое
Благодаря тегу появилась возможность создания раскрывающего списка и списка с множественным выбором. Если вы собираетесь отправлять данные на сервер, то тег должен быть помещен в форму (тег
Какие есть атрибуты у тега select?
Тег имеет три полезных атрибута (остальные рассматривать не будем, про них уже я говорил). Первый атрибут multiple , благодаря нему можно сделать возможность выбора нескольких элементов списка. Чтобы выбирать несколько элементов, нужно зажать shift или ctr и наживать мышкой на нужные элементы. Далее пример применения атрибута multiple:
Второй атрибут required , с помощью его можно «сказать» браузеру, что список должен быть выбран перед отправкой формы, иначе браузер запретит отправлять форму, и выведет вам соответствующее сообщение. Вид этого сообщения зависит полностью от браузера и пользователь не может его изменять. Далее пример применения атрибута required:
Третий атрибут size , с помощью его можно указать количество отображаемых элементов списка. Атрибут size может содержать только целое число. Атрибут size трансформирует список, например, если он равен 1, то тег отображается как «выпадающий список», а если атрибут size больше 1, то раскрывающийся список отображается как «список с прокруткой». Далее два примера применения атрибута size: