Формы HTML - основы

Введение

Все видели формы. Все заполняли формы. Но кодировали ли вы форму?

Форма в сети является любой областью на странице Web, где можно ввести информацию, например, ввод текста или чисел в текстовом поле, постановка флажка, установка радио-кнопки, или выбор варианта из списка. Форма затем, после нажатия на кнопку отправки, посылается на Web-сайт.

Использование форм в Web встречается повсеместно, для ввода имен пользователей и паролей на экране регистрации, комментарии в блоге, заполнение профиля на сайте социальной сети, или сообщение информации для счета на сайте магазина.

Создать форму легко, но как насчет соответствия формы стандартам Web?

К данному моменту, если вы проработали учебный курс по стандартам Web, будем надеяться, что вы уже убедились, что стандарты Web являются способом движения вперед. Код, который необходимо создать для доступной формы в соответствии со стандартами, требует не больше работы для реализации, чем неряшливая форма.

Поэтому, давайте начнем с самой основной и простой формы, которую кто-то, возможно, захочет использовать, и после этого понемногу будем ее усложнять — в этой лекции будут рассмотрены все основные элементы, которые необходимо знать для создания элегантной, доступной формы с помощью HTML. Лекция имеет следующую структуру:

Первый шаг: основной код

Давайте начнем с действительно базовой формы комментария, разновидности формы, которая будет использоваться на Web-сайте для предоставления людям возможности высказать свое мнение о чем-то, например, о написанной статье, или позволяющая кому-то вступить с вами в контакт, не зная вашего адреса e-mail. Код выглядит следующим образом:

<form>
Name: <input type="text" name="name" id="name" value="" />
Email: <input type="text" name="email" id="email" value="" />
Comments: <textarea name="comments" id="comments" cols="25" rows="3"></textarea>
<input type="submit" value="submit" />
</form>

Если ввести этот код в документ HTML, а затем открыть документ в браузере, код будет представлен, как показано на рисунке 20.1.

Попробуйте использовать ее самостоятельно — введите приведенный выше код в собственный пример документа HTML и загрузите его в браузер. Попробуйте поэкспериментировать с различными элементами управления формы, чтобы увидеть, что с ними можно делать.

Если посмотреть код, то можно увидеть открывающий тег <form>, закрывающий тег </form>, и дополнительный код между ними. Этот элемент содержит два текстовых поля ввода, в которые читатель страницы может ввести свое имя и адрес e-mail, и текстовую область, в которую можно ввести комментарий, чтобы отправить на сайт владельца.

Что мы здесь имеем?

Предопределенное значение:

Второй шаг: добавление структуры и поведения

Итак, вы заполнили показанную выше форму, и щелкнули на кнопке отправки Submit - почему же ничего не произошло, и почему она выглядит так неинтересно и размещена в одной строке? Ответ состоит в том, что мы еще ее не структурировали, или не определили место, где будут собираться данные отправленной формы.

Давайте изменим немного форму:

<form id="contact-form" action="script.php" method="post">
    <input type="hidden" name="redirect" value="http://www.opera.com" />
    <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>
            <input type="submit" value="submit" />
            <input type="reset" value="reset" />
        </li>
    </ul>
</form>

Эта форма при представлении в браузере будет выглядеть, как показано на рисунке 20.2:

Здесь сделаны небольшие добавления к базовой, простой форме. Давайте рассмотрим эти изменения:

Третий шаг: добавление семантики, стиля и еще немного структуры

Теперь мы закончим то, что было начато в начале лекции, используя следующую финальную версию примера формы:

<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;}

Что он делает? Первая строка оформляет границу элемента ).

Заключение

В этой лекции рассмотрены три основных шага создания формы в соответствии со стандартами Web. Большая часть мира форм пока не была рассмотрена, и оставлена для самостоятельного исследования. Существуют ключи доступа, флажки и радио кнопки, специальные кнопки отправки /сброса, и поля выбора.

В предыдущей форме третьего шага был добавлен флажок, чтобы показать, как можно использовать дополнительные атрибуты в элементе input для сбора информации, которая находится за рамками ввода одной строки текста или области ввода нескольких строк текста.

Значения атрибутов checkbox и radio button можно использовать для добавления возможности задавать короткие вопросы и предоставлять читателю список вариантов для выбора (флажки позволяют выбрать несколько вариантов, радио-кнопки только один). Радио-кнопки могут быть очень полезны в форме опроса.

Элемент select, также не рассмотренный в этой лекции, можно использовать для раскрывающихся меню выбора (например, списка стран, или штатов/провинций).

Дополнительное чтение

Контрольные вопросы

Пришло время написать свою собственную контактную форму.

Дополнительное задание: Чем больше вы будете экспериментировать с элементами формы и различным кодом CSS, тем больше вы узнаете, что можно сделать с простой контактной формой.

Экстра-дополнительное задание: Если вы хотите посетить неизвестные земли, найдите сценарий или используйте сценарий, который предоставляет Web-хост, чтобы послать форму себе самому.

Об авторе