|
Архитектура Аудит Военная наука Иностранные языки Медицина Металлургия Метрология Образование Политология Производство Психология Стандартизация Технологии |
|
|
Архитектура Аудит Военная наука Иностранные языки Медицина Металлургия Метрология Образование Политология Производство Психология Стандартизация Технологии |
Различные типы упорядоченных списков
Пример выполнения данного HTML-кода Различные типы неупорядоченных списков < html> < body> < h4> Список со значком кругом: < /h4> < ul type=" disc" > < li> intuit.ru< /li> < li> osp.ru< /li> < li> file.ru< /li> < /ul> < h4> Список со значком окружностью: < /h4> < ul type=" circle" > < li> intuit.ru< /li> < li> osp.ru< /li> < li> file.ru< /li> < /ul> < h4> Список со значком квадратом: < /h4> < ul type=" square" > < li> intuit.ru< /li> < li> osp.ru< /li> < li> file.ru< /li> < /ul> < /body> < /html>Пример выполнения данного HTML-кода Вложенный список < html> < body> < h4> Вложенный список: < /h4> < ul> < li> элемент 1< /li> < li> элемент 2< /li> < ul> < li> элемент 2.1< /li> < li> элемент 2.2< /li> < /ul> < li> элемент 3< /li> < /ul> < /body> < /html> < html> < body> < h4> Вложенный список: < /h4> < ul> < li> элемент 1< /li> < li> элемент 2< /li> < ul> < li> элемент 2.1< /li> < li> элемент 2.2< /li> < ul> < li> элемент 2.2.1< /li> < li> элемент 2.2.2< /li> < /ul> < /li> < /ul> < /li> < li> элемент 3< /li> < /ul> < /body> < /html>Пример выполнения данного HTML-кода Список определений < html> < body> < h4> Список определений: < /h4> < dl> < dt> элемент 1< /dt> < dd> описание элемента 1< /dd> < dt> элемент 2< /dt> < dd> описание элемента 2< /dd> < /dl> < /body> < /html>Пример выполнения данного HTML-кода Теги списков
| ||||||||||||||||||||
|
| ||||||||||||||||||||
|
| ||||||||||||||||||||
| Формы HTML предназначены для организации взаимодействия с пользователем. Они позволяют вводить текст, осуществлять выбор из предложенных значений при помощи списков или кнопок. С помощью форм можно организовать интерактивный обмен информацией между Web-страницей и сервером. Можно определить формы как электронные бланки для заполнения различных данных таких как, например, имя, возраст, выбор страны проживания и других. Как правило, форма работает совместно с установленным на сервере сценарным приложением, обрабатывающим введенную информацию. Примеры форм Форма поиска Одна из наиболее распространенных форм. Пользователь получает возможность ввести искомый запрос, определить область поиска и отправить запрос на сервер для обработки. < html> < body> < form name=" input" action=" html_form_action.asp" method=" get" > < table border=1 bgcolor=" #ddffdd" > < tr> < td align=" center" > < input type=" text" name=" search" size=" 50" value=" Строка для поиска" > < input type=" submit" value=" Поиск" > < br> < input type=" checkbox" name=" news" > Искать в новостях < input type=" checkbox" name=" arhive" > Искать в архивах < /td> < /tr> < /table> < /form> < /body> < /html>Пример выполнения данного HTML-кода Отправка e-mail из формы Вторая форма представляет собой форму заказа электронной рассылки ИНТУИТА, заполненная форма отправляется по электронной почте для последующей обработки. < html> < body> < form action=" mailto: [email protected]" method=" post" enctype=" text/plain" > < h3> Подписка на новостную рассылку ИНТУИТ< /h3> Имя: < br> < input type=" text" name=" name" value=" ваше имя" size=" 20" > < br> Mail: < br> < input type=" text" name=" mail" value=" ваш е-mail" size=" 20" > < br> Я хочу получать: < br> < input type=" checkbox" name=" news" > Новости о жизни ИНТУИТА < br> < input type=" checkbox" name=" courses" > Информацию о новых курсах < br> < input type=" checkbox" name=" books" > Информацию о новых изданиях < br> Комментарий: < br> < textarea rows=" 5" cols=" 30" > < /textarea> < hr> < input type=" submit" value=" Послать" > < input type=" reset" value=" Сброс" > < /form> < /body> < /html>Пример выполнения данного HTML-кода Формы Форма является областью, которая может содержать элементы, позволяющие пользователю вводить информацию (такие как текстовые поля, поля многострочного текста, раскрывающиеся меню, переключатели, флажки, и т.д.). Форма определяется с помощью тегов < form> < /form>, между которыми располагаются поля ввода, кнопки, а также все необходимые элементы оформления формы. Тег < form> имеет ряд атрибутов, из которых необходимо выделить атрибуты action и method. Без этих атрибутов форма не сможет передать информацию от пользователя на сервер. < form action=" html_form_action.asp" method=get>Атрибут Action указывает URL-адрес объекта, который должен получить данные формы. Атрибут method может иметь два значения: get и post. Значение атрибута method=get заставляет Web-браузер передать все данные формуляра по URL-адресу, заданному в action. При этом введенные при заполнении формы данные просто добавляются в адресную строку с использованием разделителя – знака вопроса. Этот метод удобен для небольших форм. Значение атрибута method=post заставляет Web-браузер, прежде всего, связаться с сервером, обрабатывающим форму, и только после установки связи приступить к передаче данных, для обработки которых будут использоваться специальные сценарии. Поля ввода Большинство элементов ввода и управления в форме можно описать при помощи тега < input>, обязательными для которого являются атрибуты name (приписывает данному элементу ввода уникальное имя, использующееся для дальнейшей обработки формы) и type (определяет тип элемента управления или ввода). Текстовые поля Текстовое поле ( type=text ) определяет однострочное поле ввода и используется, когда необходимо, чтобы пользователь ввел в форму данные в произвольной форме, но ограниченные по объему (слова, словосочетания, числа и т.д.).Следующий пример демонстрирует простейшую форму для ввода имени и фамилии. < html> < body> < form> Имя: < input type=" text" name=" firstname" > < br> Фамилия: < input type=" text" name=" lastname" > < /form> < /body> < /html>Пример выполнения данного HTML-кода В большинстве браузеров по умолчанию ширина текстового поля равна 20 символам. Для изменения этого значения используется атрибут size. В следующем примере поле для ввода имени ограничено 10 символами. < html> < body> < form> Имя: < input type=" text" name=" firstname" size=" 10" > < br> Фамилия: < input type=" text" name=" lastname" > < /form> < /body> < /html>Пример выполнения данного HTML-кода Здесь необходимо отметить, что атрибут size ограничивает только видимую область ввода данных, а не длину вводимой строки. Для этой цели используется атрибут maxlength. В следующем примере максимальное количество символов для ввода имени ограничено тремя. < html> < body> < form> Имя: < input type=" text" name=" firstname" maxlength=" 3" > < br> Фамилия: < input type=" text" name=" lastname" > < /form> < /body> < /html>Пример выполнения данного HTML-кода При вводе в поле имени слова " Елена" форма воспримет только первые три символа имени: Кроме того, при использовании текстовых полей возможно задать значения по умолчанию. Для этого используется атрибут value. Применение этого атрибута показано на следующем примере: < html> < body> < form> Имя: < input type=" text" name=" firstname" value=" Билл" > < br> Фамилия: < input type=" text" name=" lastname" value=" Гейтс" > < /form> < /body> < /html>Пример выполнения данного HTML-кода Необходимо отметить, что применение атрибутов для различных типов полей вывода и управления может отличаться. Так, например, атрибут size для текстовых полей ввода ( type=" text" или type=" password" ) указывает максимальное количество символов, отображаемых в поле, а для прочих элементов – занимаемый по горизонтали размер в пикселях. Поле пароля Поле пароля ( type=password ) создает защищенное поле ввода, которое дает возможность пользователю, заполняющему форму ввести текст, но в отличие от обычного текстового поля, вводимые данные при отображении на мониторе заменяются звездочками или точками. Следующий пример демонстрирует простейшую форму для ввода имени пользователя и пароля. < html> < body> < form> Имя пользователя: < input type=" text" name=" user" value=" Елена" > < br> Пароль: < input type=" password" name=" password" value=" tktyf" > < /form> < /body> < /html>Пример выполнения данного HTML-кода Необходимо обратить внимание, что хотя значение пароля и задано по умолчанию, при отображении браузер выводит вместо символов звездочки. Переключатели Переключатели или радиокнопки ( type=radio ) определяют поля выбора одного значения из нескольких доступных. Поля этого типа часто используются в диалоговых окнах. Для каждой позиции переключателя создается свой тег < input type=radio>. Группируются переключатели при помощи одинакового имени, задаваемого атрибутом name. < html> < body> < form> Укажите Ваш пол: < br> < input type=" radio" name=" sex" value=" male" > мужчина < br> < input type=" radio" name=" sex" value=" female" > женщина< /form> < /body> < /html>Пример выполнения данного HTML-кода Необходимо отметить, что в отличие от текстового поля и поля пароля атрибут value задает значение, которое будет передано серверу для дальнейшей обработки в случае выбора данного переключателя. Для выбора по умолчанию одного из возможных значений группы переключателей используется атрибут checked. < html> < body> < form> Укажите Ваш пол: < br> < input type=" radio" name=" sex" value=" male" checked=" checked" > мужчина < br> < input type=" radio" name=" sex" value=" female" > женщина< /form> < /body> < /html>Пример выполнения данного HTML-кода В данном примере по умолчанию выбран мужской пол. Флажки Флажки ( type=checkbox ) используются, когда необходимо, чтобы пользователь выбрал один или несколько вариантов из ограниченного числа вариантов выбора. Флажки в форме не зависят друг от друга, их можно установить или сбросить в любой комбинации. Для каждого флажка необходимо задать свое уникальное имя при помощи атрибута name. Создание двух флажков с одним именем не вызовет ошибки при отображении формы, но не позволит сценарию обработки на сервере корректно обработать передаваемые с формы данные. < html> < body> < form> В этом году я собираюсь приобрести: < br> < input type=" checkbox" name=" computer" > Компьютер < br> < input type=" checkbox" name=" notebook" > Ноутбук < br> < input type=" checkbox" name=" printer" > Принтер < br> < input type=" checkbox" name=" scanner" > Сканер< /form> < /body> < /html>Пример выполнения данного HTML-кода При помощи атрибута checked можно установить, какие из флажков будут выбраны по умолчанию при загрузке страницы. Отличие от переключателей заключается только в том, что для флажков можно отметить сразу несколько вариантов. < html> < body> < form> В этом году я собираюсь приобрести: < br> < input type=" checkbox" name=" computer" checked=" checked" > Компьютер < br> < input type=" checkbox" name=" notebook" > Ноутбук < br> < input type=" checkbox" name=" printer" > Принтер < br> < input type=" checkbox" name=" scanner" checked=" checked" > Сканер< /form> < /body> < /html>Пример выполнения данного HTML-кода В данном примере по умолчанию выбраны флажки " Компьютер" и " Сканер": При отправке данных формы с флажками на сервер выбранным флажкам присваивается значение по умолчанию " on". Как правило, этого достаточно для корректной обработки данных, но в некоторых случаях удобнее задать каждому флажку свое значение при помощи атрибута value. < input type=" checkbox" name=" printer" value=" Принтер" >Командные кнопки Командная кнопка отправки ( type=submit ) используется для выполнения пересылки данных формы на сервер. Метод отправки и адрес файла, обрабатывающего полученную информацию, задаются в теге < form> при помощи атрибутов method и action. Командная кнопка сброса ( type=reset ) возвращает форму к исходному состоянию (очищает форму). При этом данные не передаются. В следующем примере показана форма поиска с двумя кнопками: отправки и сброса. < html> < body> < form name=" input" action=" html_form_action.asp" method=" get" > Найти: < input type=" text" name=" search" size=25> < br> < input type=" submit" > < input type=" reset" > < /form> < /body> < /html>Пример выполнения данного HTML-кода Если ввести в текстовое поле какие-то символы и нажать кнопку " Подача запроса", то введенная информация будет послана на страницу с именем " html_form_action.asp". При нажатии на кнопку " Сброс" текстовое поле очистится. Надписи на кнопках " Подача запроса" и " Сброс" установлены по умолчанию. Для их изменения необходимо использовать атрибут value. Кроме кнопок отправки и сброса существует также возможность добавлять пользовательские кнопки ( type=button ), которые могут использоваться для выполнения процедур (скриптов) непосредственно на Web-странице. Поле выбора файла Поле выбора файла ( type=file ) создает поле для выбора файла, который будет загружен на сервер вместе с информацией формы. Рядом с полем ввода отображается командная кнопка " Обзор…", открывающая стандартное диалоговое окно выбора файла. < html> < body> < form> Прикрепить файл: < br> < input type=" file" size=" 50" > < /form> < /body> < /html>Пример выполнения данного HTML-кода Для поля выбора файла по аналогии с текстовым полем можно использовать атрибуты size, maxlength, value. Списки выбора Списки выбора бывают двух типов: раскрывающиеся списки (выпадающие меню) и списки с множественным выбором. Независимо от типов списков описываются они одинаково с помощью пары тегов < select> < /select>. Отдельные элементы списка задаются с использованием тега < option>. Тип списка определяется при помощи атрибутов тега < select>. Атрибут name задает имя поля для отправки выбранных пунктов списка на сервер. Атрибут multiple разрешает множественный выбор. Атрибут size определяет, какое количество пунктов списка будет одновременно отображено на экране. При этом, если атрибут multiple не задан и size=1, то на экране отображается раскрывающийся список, если же задан атрибут Multiple или значение size больше 1, то список отображается развернутым. |
||||||||||||||||||||
Последнее изменение этой страницы: 2019-06-08; Просмотров: 64; Нарушение авторского права страницы
