|
|
Третий шаг: добавление семантики, стиля и еще немного структурыТеперь мы закончим то, что было начато в начале лекции, используя следующую финальную версию примера формы: <form id="contact-form" action="script.php" method="post"> <fieldset> <legend>Contact Us:</legend> <ul> <li> <label for="name">Name:</label> <input type="text" name="name" id="name" value="" /> </li> <li> <label for="email">Email:</label> <input type="text" name="email" id="email" value="" /> </li> <li> <label for="comments">Comments:</label> <textarea name="comments" id="comments" cols="25" rows="3"></textarea> </li> <li> <label for="mailing-list">Would you like to sign up for our mailing list?</label> <input type="checkbox" checked="checked" id="mailing-list" value="Yes, sign me up!" /> </li> <li> <input type="submit" value="submit" /> <input type="reset" value="reset" /> </li> </ul> </fieldset></form>Во время представления в браузере эта форма выглядит как показано на рисунке 20.3.
Еще двумя важными элементами, которые были добавлены в эту форму, являются fieldset и legend. Оба эти элемента не являются обязательными, но очень полезны для более сложных форм и для представления. Элемент fieldset позволяет организовать форму в семантические модули. В более сложной форме можно было бы, например, использовать различные fieldset для информации адреса, информации счета, информации предпочтений заказчика, и т.д. Элементlegend позволяет назвать каждый раздел fieldset. В эту форму также добавлено немного CSS, чтобы оформить структурную разметку. Это используется в третьем примере формы с помощью внешней таблицы стилей. Двумя наиболее важными задачами, которые выполняет базовый CSS, является добавление полей для выравнивания меток и полей ввода, и избавление от точечных маркеров неупорядоченного списка. Вот код CSS, который находится во внешней таблице стилей: #contact-form fieldset {width:40%;}#contact-form li {margin:10px; list-style: none;}#contact-form input {margin-left:45px; text-align: left;}#contact-form textarea {margin-left:10px; text-align: left;}Что он делает? Первая строка оформляет границу элемента fieldset, чтобы он не занимал целую страницу; можно также задать отсутствие границы, используя { border: none; }, если она не требуется. Вторая строка определяет поле в 10 пикселей на элементахli, чтобы создать небольшое визуальное пространство между элементами списка. Третья и четвертая строки задают левое поле на элементах input и textarea, так чтобы они не стесняли метки и правильно выравнивались. Если вы хотите получить дополнительную информацию о стилевом оформлении формы, прочтите статью по стилевому оформлению форм в данном руководстве (будет опубликована позже) или статью Ника Ригби, "Более доступные формы" (http://alistapart.com/articles/prettyaccessibleforms). Заключение В этой лекции рассмотрены три основных шага создания формы в соответствии со стандартами Web. Большая часть мира форм пока не была рассмотрена, и оставлена для самостоятельного исследования. Существуют ключи доступа, флажки и радио кнопки, специальные кнопки отправки /сброса, и поля выбора. В предыдущей форме третьего шага был добавлен флажок, чтобы показать, как можно использовать дополнительные атрибуты в элементеinput для сбора информации, которая находится за рамками ввода одной строки текста или области ввода нескольких строк текста. Значения атрибутов checkbox и radio button можно использовать для добавления возможности задавать короткие вопросы и предоставлять читателю список вариантов для выбора (флажки позволяют выбрать несколько вариантов, радио-кнопки только один). Радио-кнопки могут быть очень полезны в форме опроса. Элемент select, также не рассмотренный в этой лекции, можно использовать для раскрывающихся меню выбора (например, списка стран, или штатов/провинций). Дополнительное чтение · Камерон Адамс, "Доступная, стилистически оформленная компоновка формы":http://www.themaninblue.com/writing/perspective/2004/03/24/. · Брайан Крешимано, "Чувствительные формы: Контрольный список юзабилити форм": http://www.alistapart.com/articles/sensibleforms/. · Аарон Густафсон, "Учимся любить формы": http://www.easy-reader.net/archives/2007/05/04/webvisions-wrapped/. · Саймон Виллисон, "Простая валидация форм с помощью PHP", http://simonwillison.net/2003/Jun/17/theHolyGrail/. · Спецификация W3C - http://www.w3.org/TR/html401/interact/forms.html. · Статья на сайте W3.org о различиях методов "GET" и "POST", и когда их использовать:http://www.w3.org/2001/tag/doc/whenToUseGet.html. · Ник Ригби, "Более доступные формы": http://alistapart.com/articles/prettyaccessibleforms. Контрольные вопросы Пришло время написать свою собственную контактную форму. 1. Создайте простую контактную форму, которая просит пользователя ввести имя, адрес e-mail, и комментарий. 2. Добавьте флажок, который спрашивает пользователя, не хочет ли он присоединиться к списку почтовой рассылки. 3. Используйте код CSS для стилистического оформления формы: задайте ширину формы, выровняйте метки слева, задайте цвет фона на странице, и т.д. Дополнительное задание: Чем больше вы будете экспериментировать с элементами формы и различным кодом CSS, тем больше вы узнаете, что можно сделать с простой контактной формой. Экстра-дополнительное задание: Если вы хотите посетить неизвестные земли, найдите сценарий или используйте сценарий, который предоставляет Web -хост, чтобы послать форму себе самому. Лекция 21:   Что способствует осуществлению желаний? Стопроцентная, непоколебимая уверенность в своем...  Что делает отдел по эксплуатации и сопровождению ИС? Отвечает за сохранность данных (расписания копирования, копирование и пр.)...  Система охраняемых территорий в США Изучение особо охраняемых природных территорий(ООПТ) США представляет особый интерес по многим причинам...  Что вызывает тренды на фондовых и товарных рынках Объяснение теории грузового поезда Первые 17 лет моих рыночных исследований сводились к попыткам вычислить, когда этот... Не нашли то, что искали? Воспользуйтесь поиском гугл на сайте:
|
