НОУ ИНТУИТ | Введение в современные веб-технологии. Лекция 12: HTML-формы

Учитесь и получайте официальные документы БЕСПЛАТНО. Вы можете поддержать наш проект.

Регистрация Вход

Твой путь к знаниям!

Опубликован: 01.09.2010 | Уровень: для всех | Доступ: платный | ВУЗ: Сибирский федеральный университет

|

Вам нравится? Нравится 74 студентам

| Поделиться |

Поддержать программу

Ключевые слова: Интернет, электронная коммерция, веб-сервер, пользователь, элементы управления, агент

Современный интернет немыслим без взаимодействия с пользователем. Форумы, веб-страницы электронной почты, электронная коммерция, все это требует отправки тех или иных данных от пользователя на веб-сервер. Этой цели служат HTML-формы.

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

Форма добавляется в документ посредством тэга form, который может располагаться внутри элемента body и вложенных в него элементов. В документе может быть несколько элементов form, но вложение одной формы в другую не допускается.

<form action="myform.aspx" method="post">
  ...
  </form>

Помимо общих для большинства элементов атрибутов, таких как id, class, style, элемент form имеет ряд специфических атрибутов.

Атрибут action задает URL (адрес), на который будут отправлены данные для обработки. В приведенном примере данные будут отправлены на страницу myform.aspx, находящуюся на том же сервере и в той же папке, что и документ, содержащий форму. Если атрибут action опущен, то данные будут отправлены на документ, содержащий форму.
Атрибут method задает способ передачи данных на сервер. Возможны два значения:
- get – данные будут добавлены к URL, заданному в атрибуте action.
- post – данные будут отправлены через стандартный канал.
Атрибут enctype задает MIME (Multipurpose Internet Mail Extensions) тип отправляемого содержимого. Значение по умолчанию этого атрибута application/x-www-form-urlencoded. Это значение подходит для большинства случаев, но если требуется загрузить файл на сервер, enctype="multipart/form-data" (и method="post").

Элементы управления

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

Элемент управления должен находиться внутри элемента form.
Элемент управления должен иметь атрибут name.

Данные из элементов управления, не соответствующих любому из этих требований, отправлены на сервер не будут.

<body>
  <form action="http://server.ru/myform.aspx" method="get">
  Ваше имя:
  <input type="text" name="username">
  <!-- Эти данные будут отправлены, т.к. требования выполнены -->
  Ваш любимый напиток:
  <select id="drink">
    <option>чай</option>
    <option>кофе</option>
    <option>квас</option>
  </select>
  <!-- Эти данные не будут отправлены, т.к. отсутствует name -->
  <input type="submit" value="отправить">
  </form>
  Ваше сообщение:
  <textarea name="message"></textarea>
  <!-- Эти данные не будут отправлены, т.к. находятся за пределами form -->
</body>

Всего три HTML-тэга, input, select, textarea и button, формируют все разнообразие элементов управления. Элемент input имеет 10 различных форм, select 2.

input type="text"

Этот элемент создает в браузере однострочное поле текстового ввода. Ряд атрибутов контролируют поведение этого элемента

Атрибут size задает число видимых символов в поле ввода (при условии моноширинного шрифта) и, соответственно, ширину самого объекта.
Атрибут maxlength ограничивает число вводимых символов.
Атрибут readonly устанавливает, может ли пользователь изменять содержимое элемента. Атрибут не требует значения. Если атрибут присутствует, то пользователь не может вводить текст или менять содержимое другим способом, но может получать фокус ввода.
Атрибут disabled делает элемент недоступным. Атрибут не требует значения. Если атрибут присутствует, то элемент отображается с серым фоном и не может получать фокус ввода.
Атрибут value содержит текст, который будет отображаться в поле ввода, может изменяться пользователем и будет отправлен на сервер.

<input type="text" name="testInput" size="15" value="">

Элемент не требует закрывающего тэга.

input type="password"

Этот элемент аналогичен input type="text", но вводимые пользователем символы отображаются звездочками или точками, в зависимости от браузера.

<input type="password" name="pwd" size="8" maxlength="10">

input type="hidden"

Как следует из типа, этот элемент не отображается в браузере, но хранит информацию, введенную в атрибут value на сервере или посредством Javascript на клиенте.

input type="checkbox"

Элемент отображается в виде маленького (12х12px) окошка, при щелчке по которому появляется или исчезает галочка. Данные этого элемента управления отправляются на сервер, только если стоит галочка. Атрибуты элемента:

Атрибут value – это значение, которое будет отправлено на сервер, если стоит галочка. Если значение не задано, то по умолчанию "on".
Атрибут checked задает, стоит ли галочка изначально. Атрибут не требует значения (для корректности XHTML значение должно быть checked).

<input type="checkbox" name="chkAgree" checked>

input type="radio"

Как правило, этот элемент используется в составе группы переключателей, в которой может быть выбран только один.

Ваш возраст:
<input type="radio" name="age" value="1">10 – 15 лет
<input type="radio" name="age" value="2" checked>16 – 25 лет
<input type="radio" name="age" value="3">26 – 40 лет
<input type="radio" name="age" value="4">Старше 40 лет

Обратите внимание, что вся группа имеет одинаковое значение атрибута name. Атрибут checked задает начальный выбор. На сервер будет отправлено только значение выбранного элемента из группы.

input type="file"

Этот элемент отображается как текстовое поле с расположенной рядом кнопкой "Обзор" (или имеющей аналогичный смысл, в зависимости от браузера), при нажатии на которую открывается окно выбора файла для отгрузки на сервер. Для того, чтобы отгрузка файла произошла, должны быть выполнены следующие условия:

Элемент input type="file" должен находиться внутри элемента form.
Элемент должен иметь атрибут name.
Элемент form должен иметь атрибут method="post"
Элемент form должен иметь атрибут enctype="multipart/form-data"

<form action="upload.aspx" method="post" enctype="multipart/form-data">
  Отгрузите Вашу картинку:
  <input type="file" name="picture">
  <input type="submit" value="Отгрузить">
</form>

Отгружаемый файл должен быть принят и обработан на сервере.

input type="submit"

Этот элемент отображается в виде кнопки, при нажатии на которую данные формы отправляются на сервер. Значение атрибута value используется как текст на кнопке. Если value не задано, текст на кнопке зависит от браузера ("Отправить", "Отправить запрос" и т.д.). Если в форме присутствует единственный элемент input type="submit", то нет необходимости задавать его атрибут name (и, соответственно, отправлять значение на сервер). Если элементов input type="submit" несколько, атрибут name позволит различить на сервере, какая кнопка была нажата.

Если фокус пользовательского ввода находится в форме и пользователь нажимает клавишу Enter, это эквивалентно нажатию кнопки submit. Если таких кнопок несколько, срабатывает первая в форме, если только фокус ввода не находился на любой другой кнопке submit.

input type="image"

Этот элемент позволяет заменить кнопку submit изображением, при нажатии на которое данные отправляются на сервер. Файл изображения задается в атрибуте src, альтернативный текст в атрибуте alt.

<input type="image" name="imgSubmit" src="images/submit.gif" alt="Отправить">

При отправке на сервер значение атрибута value игнорируется, вместо этого отправляются x и y координаты щелчка мыши внутри изображения ( imgSubmit.x=10 imgSubmit.y=15 ).

input type="reset"

Этот элемент отображается в виде кнопки, при нажатии на которую данные формы возвращаются к заданным изначально без отправки на сервер. Значение атрибута value используется как текст на кнопке. Если value не задано, текст на кнопке зависит от браузера ("Очистить", "Reset" и т.д.).

input type="button"

Этот элемент отображается в виде кнопки, нажатие на которую не производит никаких действий, если они не запрограммированы разработчиком формы (не обработано событие onclick элемента). Значение атрибута value используется как текст на кнопке.

<input type="button" value="При пожаре нажмите кнопку"
    onclick="window.alert("Пожааааар!!!!);">

Дальше >>

Web-дизайн

Введение в современные веб-технологии

HTML-формы

Элементы управления

input type="text"

input type="password"

input type="hidden"

input type="checkbox"

input type="radio"

input type="file"

input type="submit"

input type="image"

input type="reset"

input type="button"

Вопросы и ответы

Авторизоваться

Web-дизайн

Введение в современные веб-технологии

HTML-формы

Элементы управления

input type="text"

input type="password"

input type="hidden"

input type="checkbox"

input type="radio"

input type="file"

input type="submit"

input type="image"

input type="reset"

input type="button"

Вопросы и ответы