03.04.2021 Новости
HTML тег используется для создания раскрывающегося (выпадающего) списка, который появляется при щелчке мышью по элементу формы и позволяет посетителю сайта выбрать один из предопределенных вариантов.
Элемент может содержать два и более тегов , определяющих доступные варианты выбора в раскрывающемся списке. Текст первого дочернего элемента будет изначально отображаться в выпадающем списке, то есть будет являться значением по умолчанию для списка. Изменить или задать значение по умолчанию для можно прописав атрибут selected к нужному варианту:
Volvo Saab VW Audi
Ширина раскрывающегося списка будет определяться самым длинным текстом, указанным в теге .
Примечание: атрибут autofocus не поддерживается в IE9 и более ранних версиях, и в Firefox.
Disabled: Указывает, что элемент неактивен, то есть пользователь не сможет взаимодействовать с элементом. Возможные значения логического атрибута disabled: Пример » form: Определяет форму с которой связан элемент. В качестве значения атрибута выступает идентификатор элемента . Этот атрибут позволяет размещать элемент в произвольном месте документа, а не только в качестве потомка элемента .
Примечание: атрибут form не поддерживается в Firefox.
Multiple: Указывает, что за один раз можно выбрать несколько вариантов. Выбор нескольких вариантов различается в зависимости от операционной системы:
Примечание: из-за различных способов выбора нескольких элементов и дополнительного уведомления пользователей о доступности выбора нескольких вариантов, рекомендуется вместо раскрывающегося списка использовать флажки.
Name: Определяет имя для раскрывающегося списка. Оно может быть использовано для доступа к данным формы после ее отправки или для ссылки на элемент в JavaScript. size: Указывает количество видимых вариантов в раскрывающимся списке. Если значение атрибута size больше 1, но меньше общего количества вариантов списка, то браузер автоматически добавит полосу прокрутки, чтобы указать, что есть еще варианты для просмотра.
Выпадающий список в HTML можно сделать при помощи тега select . Помимо выпадающего (или "раскрывающегося") списка, тег select позволяет создавать элемент-список с множественным выбором. Синтаксис использования тега select HTML выглядит следующим образом:
Электроник Сыроежкин Чижиков Кукушкина
Здесь с помощью тега option задаются элементы списка.
Результат применения:
Рассмотрим атрибуты тега select :
Пожалуй, это все основные атрибуты тега select , которые чаще всего используются. Посмотрим теперь, как сделать выпадающий список в HTML с использованием указанных атрибутов:
Тег option , как уже отмечалось, позволяет определить дочерние элементы выпадающего списка select , который, в свою очередь, играет роль контейнера. Тег option имеет собственные атрибуты:
Посмотрим на расширенный вариант использования тега option :
Господин Электроник Сыроежкин Чижиков Кукушкина
Выглядеть результат приведенного примера будет следующим образом:
В конструкторе сайтов "Нубекс" есть возможность создавать произвольные формы с помощью модуля конструктора форм. Работа выпадающих списков в "Нубекс" описана в статье:
Зачастую на Web – сайтах можно встретить страницы с размещенными на них HTML - формами. Веб-формы – удобный способ получения информации от посетителей вашего сайта. Пример тому – , – которая обеспечивает обратную связь с посетителями и разработчиками сайта. Формы так же удобны и для разработчиков сайта при разработке CMS, которая позволяет поддерживать главное свойство сайта - актуальность. Данная статья посвящена основам создания HTML-форм, их обработке и способам передачи данных из экранных форм в PHP-сценарии.
Теги и задают начало и конец формы. Начинающий форму тег содержит два атрибута: action и method . Атрибут action содержит адрес URL сценария, который должен быть вызван для обработки сценария. Атрибут method указывает браузеру, какой вид HTTP запроса необходимо использовать для отправки формы; возможны значения POST и GET .
Главное отличие методов POST и GET заключается в способе передачи информации. В методе GET параметры передаются через адресную строку, т.е. по сути в HTTP-заголовке запроса, в то время как в методе POST параметры передаются через тело HTTP-запроса и никак не отражаются на виде адресной строки.
$text = nl2br ($_POST [ "mytext" ]); ?>
Задача: Пусть необходимо создать выпадающий список с годами с 2000 по 2050.Решение: Необходимо создать HTML форму c элементом SELECT и PHP – сценарий для обработки формы.
Обсуждение:
Для начала создадим два файла: form.html и action.php . В файле form.html будет содержаться html-форма с выпадающим списком. Причем значения в списке можно указать двумя способами:
2000 2001 2002 …………………………………………… 2050
$year = 2000 ; for ($i = 0 ; $i <= 50 ; $i ++) // Цикл от 0 до 50 { $new_years = $year + $i ; // Формируем новое значение echo "" . $new_years . "" ; //Формируем новую строчку } ?>
Как видно, второй пример с циклом, более компактный. Думаю, не стоит приводить скрипт обработчика данной формы, потому что он обрабатывается точно так же как текстовое поле, т.е. значения списка можно извлечь из суперглобального массива $_POST .
Описание:
Создадим HTML-форму для отправки файла на сервер.
В данной html-форме присутствует элемент browse , который открывает диалоговое окно для выбора файла для загрузки на сервер. При нажатии на кнопку "Передать файл" , файл передается сценарию-обработчику.
Затем необходимо написать сценарий обработчик action.php . Перед написание обработчика необходимо определиться в какой каталог мы будет копировать файл:
if(isset($_FILES [ "myfile" ])) // Если файл существует { $catalog = "../image/" ; // Наш каталог if (is_dir ($catalog )) // Если такой каталог есть { $myfile = $_FILES [ "myfile" ][ "tmp_name" ]; // Времменый файл $myfile_name = $_FILES [ "myfile" ][ "name" ]; // Имя файла if(! copy ($myfile , $catalog )) echo "Ошибка при копировании файла " . $myfile_name // Если неудалось скопировать файл } else mkdir ("../image/" ); // Если такого каталога нет, то мы его создадим } ?>
Если вы доверяете пользователям закачивать на ваш сервер любые файлы, нужно быть предельно осторожным. Злоумышленники могут внедрить «нехороший» код в картинку или файл и отправить на сервер. В таких случаях нужно жестоко контролировать загрузку файлов.
Данный пример демонстрирует создание каталога и копирование файла в этот каталог на сервер.
Также хотел бы продемонстрировать пример с элементом checkbox . Этот элемент немного отличается от других элементов тем, что если не один из элементов checkbox ’a не выбран, то суперглобальная переменная $_POST вернет пустое значение:
if (!empty($_POST [ "mycolor" ])) echo $_POST [ "mycolor" ]; // Если выбран хоть 1 элемент else echo "Выберите значение" ; ?>
window.onresize = … ;
Событие onresize объекта window ответственно за изменение размеров окна браузера. Поэтому событие и принадлежит объекту окно — window .
Поскольку среди элементов html нету тега, отождествленного с окном браузера, то обработать в javascript событие onresize можно при помощи присваивания функции свойству объекта window.
Рассмотрим на примере:
Пример: Написать скрипт, который при изменении размера окна вызывает сообщение «Размер окна изменен!»
window.onresize = function message() {alert("Размер окна изменен!");}
HTML-код:
Объект select — выпадающий список — предоставляет список значений для выбора. Выбор может быть как одного пункта, так и нескольких пунктов сразу. Это сложный объект, обращение к которому в скрипте происходит и как к объекту select , и как к его пункту option .
Свойства объекта select: length — количество пунктов списка name — атрибут name options — массив пунктов selectedIndex — индекс выбранного пункта option defaultSelected — выбранный пункт option по умолчанию selected — выбранный пункт
Свойства объекта select:
Получить значение выпадающего списка (select) в javascript можно через свойство value . Но есть и другие способы.
Рассмотрим пример:
Пример: Разместить выпадающий список из трех пунктов — гороов: Москва , Санкт-Петербург , другой . По щелчку на кнопке получить значение свойства value выбранного option (пункта) списка и вывести его на экран
Идентификация значения списка:
function f(){ var a=document.getElementById("s1").value; alert(a); }
Задание js13_1. При изменении пункта списка добавлять в текстовое поле текст из выбранного пункта меню (option).
Подробно:
Дополните код:
Скрипт:
function check() { document.getElementById("t1").value= ...; }
1 2 3
Задание js13_2. Создать страницу проверки знаний учащегося с вопросом: «В каких единицах измерения измеряется работа?» и двумя ответами: «Моль» (неправильный) и «Джоуль» (правильный), выполненными в виде элемента меню со списком (select). Функцию проверки запускать
Рассмотрим пример использования свойства объекта select — selectedIndex — выбранный пункт option:
Пример: Выводить в текстовое окно индекс выбранной альтернативы:
В данном примере при изменении пункта меню генерируется событие onChange . В качестве значения атрибута onChange выполняется скрипт: происходит обращение к текстовому полю через массив элементов формы (текстовое поле — это первый элемент массива, т.к. 0-й элемент — это выпадающий список select). В качестве значения текстового поля указывается номер выбранного пункта списка (selectedIndex).
Пункт меню select в javascript — option — рассматривается как отдельный объект со своими свойствами:
Доступ к конкретному пункту меню происходит через коллекцию (массив) options :
Скрипт доступа к первому пункту выпадающего меню (нулевой элемент массива options):
function myFunc(){ document.f1.s1.options....=...; ...; }
Рассмотрим пример использования свойства text объекта option:
Пример: При изменении выбора пункта списка в текстовое поле выводить текст из выбранной альтернативы списка
Рассмотрим еще одно решение с использованием списка множественного выбора:
Пример: При изменении списка множественного выбора в текстовое окно выводить индексы выбранных альтернатив (установить для списка атрибут multiple)
Пример:
Пример: По щелчку на абзац (тег p) изменять содержимый текст данного тега и выполнять центрирование текста в нем
измененный текст
В процессе создания сайта или блога и дальнейшего его наполнения содержанием, по разным причинам, порой возникает необходимость скрыть какую-то часть текста, разместить более объёмную информацию в спрятанный до поры до времени блок, но при этом всё же указать пользователю на то, что имеется ещё кое что, и предоставить ему возможность просмотреть скрытое содержание без перехода на следующую строку или страницу. Раньше для реализации такого решения использовалась груда javascript, теперь же всё это можно очень легко исполнить с помощью удивительных свойств .
Сегодня мы рассмотрим простейший способ создания на страницах сайта и в отдельных сообщениях, скрытых блоков с содержанием, раскрывающихся при нажатии на определенный элемент текста, используя исключительно свойства CSS3. Переключателем может служить и отдельное слово, и выделенное словосочетание, а так же целое предложение, или информативная иконка. Такие блоки часто используются на страницах с большим количеством содержания, для того чтобы сделать его более структурированным и компактным, все содержание при этом делится на так называемые группы, в которых на обозрение пользователю представлены только заголовки, весь текст по умолчанию скрыт и увидеть его можно нажав на определенный элемент(см. выше).
Давайте, постараемся обойтись без лишней воды, посмотрите весь этот простейший механизм в действии, на наглядном примере, так же можете и подредактировать что-нибудь при желании:
В роли переключателей раскрывающихся блоков с дополнительной информацией используется никак не выделенный и не обозначенный текст, с недвусмысленным предложением нажать на него, что вы без страха и сомнений обязательно сделайте, чтобы увидеть )))
Как видите всё более-чем прекрасно работает, скрытое содержание, как появляется без проблем, так и исчезает от легкого нажатия мышкой, и при этом мы задействовали самый минимум исполняемого кода, и в html-каркасе, и в формировании стилей css. Без подключения дополнительных javascript библиотек, с извечной тревогой, а не отключены ли они на стороне пользователя. Реализовать всё это действо, стало возможным благодаря CSS3 псевдоклассу :checked , применяемым к элементам интерфейса, таким как переключатели (). Что мы собственно и сделали, в теге атрибуту type мы присвоили значение checkbox , а так же идентификатор id="hd-1" соответствующий уникальному идентификатору for="hd-1" переключателя текущего блока. Чекбоксы спрячем основательно и навсегда, прописав в классе.hide свойство display: none; Собственно здесь, объяснять-то особо и нечего, весь механизм включения и выключения скрытых блоков состоит из трех элементов:
Надеюсь, из моего сумбурного пояснения, все же стало понятно в чём вся фишка. CSS применяет новые стили (с помощью псевдокласса checked ), чтобы показать блок контента, который до этого был скрыт, только тогда, когда пользователь нажимает на элемент, который связан с флажком(checkbox) по уникальному идентификатору.
Из всего этого следует важное замечание :
когда вы используете несколько скрытых блоков на одной странице, каждый переключатель должен иметь уникальный идентификатор, который будет отличаться от идентификаторов в других блоках.
Так, на словах мы разобрали, что куда и зачем, теперь, давайте посмотрим на html-каркас всей коннструкции:
Нажмите здесь, чтобы открыть!
Далее переходим непосредственно к формированию стилей CSS, без которых вся эта конструкция работать не будет. Самый минимум кода, без какого-нибудь оформления, только чуточку выделил фон для раскрывающегося блока, чтобы определить для вас и показать рамки скрытого текста. Вы же можете оформлять блоки как вам вздумается, навесить бордюры, скруглить углы, выделить текст, или же .
/* скрываем чекбоксы и блоки с содержанием */ .hide, .hide + label ~ div { display: none; } /* вид текста label */ .hide + label, .hide:checked + label { padding: 0; color: green; cursor: pointer; border-bottom: 1px dotted green; } /* вид текста label при активном переключателе */ .hide:checked + label { color: red; border-bottom: 0; } /* когда чекбокс активен показываем блоки с содержанием */ .hide:checked + label + div { display: block; background: #efefef; -moz-box-shadow: inset 3px 3px 10px #7d8e8f; -webkit-box-shadow: inset 3px 3px 10px #7d8e8f; box-shadow: inset 3px 3px 10px #7d8e8f; padding: 10px; }
Это всё, для аскетичного примера, вполне достаточный минимум. Но ведь, мы будем совсем не мы, если не навесим хоть каких-нибудь плюшек, да и пользователю лучше подсказать визуально, куда следует нажимать. Во втором примере добавил простенький символ в виде плюса, который явно указывает на то, что здесь скрывается ещё что-то, при нажатии он моментально превращается в минус, а скрытым блокам с содержанием, прикрутил чуточку анимации при появлении, и всё это исключительно с помощью магии CSS3.
/* скрываем чекбоксы и блоки с содержанием */ .hide, .hide + label ~ div { display: none; } /* вид текста label */ .hide + label { margin: 0; padding: 0; color: green; cursor: pointer; display: inline-block; } /* вид текста label при активном переключателе */ .hide:checked + label { color: red; border-bottom: 0; } /* когда чекбокс активен показываем блоки с содержанием */ .hide:checked + label + div { display: block; background: #efefef; -moz-box-shadow: inset 3px 3px 10px #7d8e8f; -webkit-box-shadow: inset 3px 3px 10px #7d8e8f; box-shadow: inset 3px 3px 10px #7d8e8f; margin-left: 20px; padding: 10px; /* чуточку анимации при появлении */ -webkit-animation:fade ease-in 0.5s; -moz-animation:fade ease-in 0.5s; animation:fade ease-in 0.5s; } /* анимация при появлении скрытых блоков */ @-moz-keyframes fade { from { opacity: 0; } to { opacity: 1 } } @-webkit-keyframes fade { from { opacity: 0; } to { opacity: 1 } } @keyframes fade { from { opacity: 0; } to { opacity: 1 } } .hide + label:before { background-color: #1e90ff; color: #fff; content: "\002B"; display: block; float: left; font-size: 14px; font-weight: bold; height: 16px; line-height: 16px; margin: 3px 5px; text-align: center; width: 16px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .hide:checked + label:before { content: "\2212"; }
По всем раскладам, способ несомненно хорош, но как всегда, даже не удивительно нисколько, проблемы возникают с вечным тормозом прогресса, браузером IE, псевдо-класс checked поддерживают только 9-я и более современные версии этого браузера. Для старых версий IE-шки, остаётся всё по-старому, вам придётся использовать javascript.
Используя скрытые чекбоксы, вы можете легко реализовать , блоки в стиле , слайдеры, галереи и многое другое.
С Уважением, Андрей
Присоединяйтесь!
Уже подписаны более 6 000 человек. Получайте самые свежие статьи.
