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

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

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

Рис. 20.1. Первый, базовый пример формы

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

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

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

· <form></form>: Эти два тега являются существенными для начала и окончания формы - без них форма Web не существует. Каждая форма должна начинаться и заканчиваться тегами <form> и </form>.

Тег <form> может иметь несколько атрибутов, которые будут объяснены на втором шаге, но помните о том, что формы нельзя вкладывать друг в друга.

· <input> (должен быть <input />, если используется тип документа XHTML): Этот тег определяет область, где читатель/пользователь может ввести информацию. В рассмотренном выше случае, тег input определяет текстовые поля, где читатель может ввести свое имя и адрес e-mail.

Каждый тег input должен иметь атрибут type, чтобы определить, что он будет получать: возможными значениями атрибута являются text, button, checkbox, file, hidden, image, password, radio, reset или submit.

Каждый тег <input> должен также иметь имя, которое может определить кодировщик. Атрибут name информирует получателя данных, куда форма будет отправлена (будет ли это база данных, или сообщение e-mail, присланное администратору сайта через серверный сценарий), как называется информация в поле ввода. Когда форма посылается, большинство сценариев используют атрибутname для размещения данных формы в базе данных, или в сообщении e-mail, которое может прочитать человек.

Поэтому, если элемент <input> предназначен для ввода читателем / пользователем своего имени, то атрибут name будет иметь форму name="имя" или name="фамилия", и т.д. Если тег <input> предназначен для ввода адреса e-mail, то атрибут name будет иметь форму name="email". Чтобы облегчить жизнь себе и тем, кто будет использовать форму, рекомендуется называть элемент<input> семантическим образом.

Под семантическим я понимаю наименование в соответствии с его функцией, как описано выше. Если input предназначен для получения адреса e-mail, назовите его name="email". Если это должен быть реальный адрес читателя/пользователя, назовите егоname="реальный адрес".

Чем более точное использование слов, тем легче будет не только кодировать, а затем выполнять задачи обслуживания в будущем, но также для человека или базы данных, получающих форму. Старайтесь быть кратким и точным при определении смысла.

· Каждый тег <input> должен иметь также атрибут value. Значение может быть задано пустым - value="" - что говорит обрабатывающему сценарию вставить просто то, что читатель/пользователь вводит в поле. В случае checkbox, radio button,hidden, submit, или атрибута другого типа можно задать значение таким, которое должен показывать окончательный ввод. Примеры: value="yes" для yes, value="submit" для кнопки отправки, value="reset" для кнопки сброса (reset),value="http://www.opera.com" для скрытого перенаправления, и т.д.

Примеры использования атрибута value:

Для пустого значения атрибута value ввод пользователя определяет значение этого атрибута:

o Код содержит: <input type="text" name="first-name" id="first-name" value="" />

o Пользователь вводит: Jenifer

o Значение first-name посылается как "Jenifer", когда форма отправляется.

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

o Код содержит: <input type="checkbox" name="mailing-list" id="mailing-list" value="yes" />

o Пользователь ставит флажок, когда хочет присоединиться к списку почтовой рассылки Web-сайта.

o Значение mailing-list посылается как "yes", когда форма отправляется.

· После двух элементов <input> можно видеть что-то немного другое - элемент textarea.

В область textarea можно вводить произвольный текст. Не только одну обычную строку текста, как в элементе <input>, но в элементе textarea можно ввести несколько строк ввода, и можно даже определить сколько доступно строк для ввода текста. Обратите внимание на атрибуты cols и rows — они требуются для каждого элемента textarea, и определяют, сколько столбцов и строк составляют текстовую область. Значения измеряются в символах.

· Последнее, но не менее важное, имеется специальный элемент <input> с атрибутом value="submit". Вместо представления одной строки текстового поля для ввода, ввод submit представляет кнопку submit, которая, после нажатия, отправляет форму в то место, в которое форма должна посылать свои данные (в данный момент это вообще не определено, поэтому отправка формы ничего не делает).

Что вызывает тренды на фондовых и товарных рынках Объяснение теории грузового поезда Первые 17 лет моих рыночных исследований сводились к попыткам вычис­лить, когда этот...

Система охраняемых территорий в США Изучение особо охраняемых природных территорий(ООПТ) США представляет особый интерес по многим причинам...

Живите по правилу: МАЛО ЛИ ЧТО НА СВЕТЕ СУЩЕСТВУЕТ? Я неслучайно подчеркиваю, что место в голове ограничено, а информации вокруг много, и что ваше право...

Что делать, если нет взаимности? А теперь спустимся с небес на землю. Приземлились? Продолжаем разговор...

Не нашли то, что искали? Воспользуйтесь поиском гугл на сайте: