Создание формы в HTML. Создание и работа с формами в html Отключение списка и мультивыбор
Очень часто при регистрациях или анкетирования на сайтах, вас просят сделать некий выбор из выпадающего списка . Например выбрать вашу страну из множества других стран. Все это разные элементы формы, они могут быть и по разному оформлены: от простого HTML5 до сложного CSS3 .
Сегодня мы разберем один из таких примеров оформления поля выбора, применяя HTML/CSS и иконку Font Awesome . Но начнем мы как обычно с разметки документа.
HTML-код
Внутри тега select находятся пункты выпадающего списка option . В свою очередь теги select и form вложены в общий контейнер div . Тег form должен присутствовать обязательно, если данные впоследствии будут отправляться на сервер.
Позиционируем контейнер с классом box в центре окна.
Box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Заранее подключаем иконочный шрифт до закрывающего тега head .
Стилизация селектора select
Задаем размеры для поля выбора - 250x50 пикселей и делаем поля для пунктов по 10 пикселей со всех сторон.
Box select{
width: 250px;
height: 50px;
padding: 10px;
}
Убираем рамку и обводку:
Border: none;
outline: none;
Прописываем фиолетовый цвет фона, название, цвет и размер шрифта для списков.
Background: #ab05af;
font-family: "Russo One", sans-serif;
color: #fff;
font-size: 20px;
Создаем вокруг поля тень.
Box-shadow: 0 5px 20px rgba(0,0,0,.3);
В целом select box готов и работает, но смотрится он скучно, да и треугольник, в который нужно будет попасть мышкой очень маленький. А если я так подумал, значит и дизайнер так же подумает, надо заранее подготовиться к разным вариантам.
Вероятнее всего дизайнер поставит на место крошечного треугольника - иконку из шрифта Font Awesome .
Так намного красивее смотрится, а писать код все равно надо верстальщику. Какое здесь может быть решение? Мы не будем трогать HTML-код , а задействуем псевдо-элемент before .
Псевдо-элемент before для.box
Первое, что надо сделать - это прописать код иконки и название шрифта "Font Awesome 5 Free" . Выбираем на сайте fontawesome.com нужную иконку, обозначающую "выбор" и копируем её код.
.box::before {
content: "\f150";
font-family: "Font Awesome 5 Free";
position: absolute;
top: 0;
right: 0;
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
color: #fff;
font-size: 28px;
background: #da00e0;
pointer-events: none;
}
Далее позиционируем абсолютно, указываем размеры 50x50, белый цвет у иконки, фон светло-фиолетовый. Задаём очень важное свойство pointer-events: none . Это значит, что псевдо-элемент before не является объектом события мыши, а значение none предлагает событию "выбора мышью" проходить на нижний слой и обращаться к элементу, находящемуся под ним - к тому маленькому треугольнику. Треугольник никуда не исчез, просто он находится под псевдо-элементом before , служащий лишь украшательством. Кликая по красивой иконке, на самом деле срабатывает "некрасивый" треугольник и мы делаем свой выбор.
Приветствую всех читателей моего блога. Сегодня я вам расскажу, как делать в html выпадающий список, какие теги и атрибуты нужно использовать, а также для каких целей это вам может понадобиться.
Тег select и создание выпадающего списка
Итак, выпадающий список в html создается с помощью парного тега select , в который помещаются парные теги option . Именно в них записываются все варианты, которые будут предложены при клике на список. Пример:
Выберите животное
При этом то, что выводится между открывающей и закрывающей частью option , вы увидите на экране, а значение, которое содержится в атрибуте value , будет отправлено на сервер или обработано с помощью скрипта.
Список в html может быть обычным, и с множественным выбором. Чтобы сделать возможность выбирать несколько пунктов, нужно добавить в select пустой атрибут multiple . Чтобы выбрать несколько значений, удерживайте ctrl
и жмите левую кнопку мыши.
Другой полезный атрибут – size . Он позволяет выбирать, сколько строк будет показывать в раскрывающемся списке.
Еще один атрибут – disabled . Он делает список недоступным для нажатия и просмотра пунктов, но при этом его видно на странице.
Required – html5-атрибут. Если он задан, форма не будет отправлена без выбора значения из раскрывающегося списка. В общем, он становится обязательным для выбора. Пока атрибут работает далеко не во всех браузерах.
Атрибуты тега option
Собственно, select служит лишь контейнером для пунктов списка, сами они задаются с помощью тега option . У него есть параметр value , как мы уже выяснили, но кроме этого еще есть и другие. Например:
Disabled – делает пункт списка недоступным для выбора. Отображается он будет, но кликнуть на него нельзя.
Selected – элемент будет выбранным по умолчанию. В обычном списке этот атрибут без значения можно задать только одному пункту, во множественном – нескольким.
Важное уточнение для правильной работы
Если результат выбора нужно будет отправить на сервер или обработать через скрипты, то помещайте select в форму, чтобы не возникало никаких ошибок. Дело в том, что раскрывающийся список изначально создавался именно как один из элементов формы.
Для чего нужен select
Обычно он может пригодиться вам, если вы делаете на своем сайте регистрация, либо хотите провести опрос. Элемент имеет недостаток – он не очень хорошо меняет внешний вид через css.
По умолчанию при нажатию на список появляется синяя рамка, таким же цветом выделяются те пункты списка, на которые наведен курсор. Чтобы при нажатии рамка не появлялась, либо выделялась другим цветом, можно написать такой селектор:
Select:focus{
outline: 1px solid orange;
}
Теперь рамка будет оранжевой.
Option тоже можно стилизовать, но вот при наведении на пункт его фон становится синим и через стили это почему-то не меняется.
Option{
color: brown;
background: aqua;
}
Кстати, может кто-то из вас знает, как изменить фоновый цвет при наведении на пункт через css?
Вот, собственно, пока и все по тегу select и его применению. Никаких дополнительных возможностей в html для него не предусмотрено. Все остальные операции с ним можно производить с помощью javascript и php. Например, если вам нужно создать список для выбора года рождения и там может быть 80-100 разных вариантов, не будете же вы вручную их писать?
Как раз для этого и нужно использовать программирование, а именно цикл. Ну да ладно, это уже тема для другого разговора, а на сегодня это вся информация, которую я хотел вам сообщить. С другими основными тегами в html вы можете познакомиться .
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)
| <form > Набор канцелярских товаров: <select onChange = "form.elements.value=""; for(i=0;i<6;i++) if(form.elements.options[i].selected==true) form.elements.value = form.elements.value+i;" multiple> <option > Карандаши <option > Авторучки <option > Линейки <option > Тетради <option > Стерки <option > Кнопки </ select > Выбраны позиции: <input name = "s1" size = "7" maxlength = "7" > </ form > |
Пример:
Пример: По щелчку на абзац (тег p) изменять содержимый текст данного тега и выполнять центрирование текста в нем
| <p
onclick
=
"this.outerHTML=" измененный текст</ p > "">изменяемое содержимое</ p > |
измененный текст
"">изменяемое содержимоеОписание
HTML тег
Элемент
Ширина раскрывающегося списка будет определяться самым длинным текстом, указанным в теге