Основы HTML: Формы Web-страниц

Содержание

Введение
Элементы форм
Кнопки
Текстовые поля, ввод
   <INPUT>
   <TEXTAREA>
   Указание имени файла
   Ввод пароля
Флажки
Переключатели
Списки
Взаимодействие элементов формы

Введение

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

Вместе с тем, у разработчика остается возможность получить введенную информацию посредством отправки через электронную почту.

Для создания формы используется контейнер <FORM></FORM>, имеющий два основных атрибута: ACTION И METHOD. В связи с тем, что они не могут использоваться рядовым пользователем, мы их не обсуждаем.

Полноценное функционирование форм возможно только с использованием языка программирования JavaScript.

Гораздо более важным является атрибут NAME, определяющий имя формы и её элементов. Имя должно быть уникальным для каждой формы! В дальнейшем к ним можно обращаться по этому имени: 

<form name="test">
	Здесь будет описание формы
</form>

При создании форм важно следить, чтобы не поместить (не вложить) одну форму в другую! Это запрещено и приве­дет к неработоспособности.

Элементы форм

В качестве элементов ввода могут использоваться все те же основные варианты, что и при создании стандартных диалогов: текстовые поля, переключатели (радиокнопки), флажки, списки, кнопки. Все эти варианты реализуются при помощи следующих тегов:

Доступ к этим материалам предоставляется только зарегистри­рован­ным пользователям!

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

Кнопки

Начнем обсуждение именно с кнопки, ибо любая форма окажется мертвой без действия, производимого с ней. Кроме того, кнопку можно создать и вне тега <FORM>.

Первый способ, которым можно воспользоваться — тег <input> с указанием типа — button: 

  <input type="button" value="Кнопочка i"> →

В данном исполнении она примечательна только тем, что содержит атрибут value (это будет надпись) и на неё можно бессмысленно нажать. Поэтому задействуем метод onclick с функцией JavaScript alert(), выводящей диалог: 

  <input type="button" value="Кнопочка i1" onclick="alert('Чего пристаешь?');">
  →

Обратите внимание на форму использования кавычек для вывода диалога. Именно так и придется делать, если вы хотите вывести больше одного слова!

Второй способ — тег <button>: 

  <button>Кнопочка b</button> →

А здесь произойдет смена надписи на кнопке после нажатия: 

  <button onclick="this.value='На меня нажали!';">Кнопочка b</button>
  →

Ключевое слово this означает, что призвоение значения будет происходить ЭТОМУ (создаваемому) элементу, а не другому. (Можно догадаться, как изменить надпись на соседней кнопке.)

Преимуществом способа <button> для нас будет только возможность использование дополнительной картинки: 

  <button><img src="../../img/pp.png" style="vertical-align: middle"> + картинка</button>
  →

Текстовые поля (поля ввода)

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

Его можно реализовать двумя тегами: <INPUT> и <TEXTAREA>.

<INPUT type="text">

Основной вариант для ввода текстовой информации пользователем.

Поэтому сразу опишем его со всеми важными атрибутами: 

  <input type="text" name="tq" value="значение по умолчанию" size="25">

Атрибут value задает то, что уже будет введено в поле: не забывайте его задавать, если заботитесь о пользователях. Хотя не всегда можно предсказать стандартный ввод. Тогда атрибут отбрасывается и поле будет пустым.

<TEXTAREA>

Парный тег, формирующий область ввода многострочного текста. Текст может содержать абзацы.

В теге можно указать ширину в символах и число строк, а также вставить между тегами текст по умолчанию: 

  <TEXTAREA name="tar" cols=60 rows=3>Заготовленный
  текст</TEXTAREA>

Если нужно разбить текст на абзацы, то это делается нажатием на Enter прямо в исходном HTML-файле (как в примере).

Указание имени файла

Всё тот же тег <INPUT>, но с другим типом.

Для выбора имени файла к полю добавится кнопка Обзор (Browse): 

<form name="test">
  <input type="file" name="fq" size="40">
</form>

Ввод пароля

Особый вариант заполнения, когда вместо вводимых символов на экране отображаются звездочки:

Его можно использовать для любого скрытого ввода: 

  <input type="password" name="tpw" value="слово" size="25">

Флажки (checkbox)

Эти элементы имеют два состояния: выбран (стоит галочка) и сброшен (галочки нет). Отсюда вытекает их большое значение для работы с согическими величинами.

Реализуется флажок тегом <INPUT>. 

  <input type="checkbox" name="chq1" title="Нажми на меня!"> Первый
  <input type="checkbox" name="chq2" checked=true> Второй
  <input type="checkbox" name="chq3"> Третий
Первый Второй Третий

В примере применено новое свойство — title. Это значит, что при наведении мышки на первый флажок появится соответствующая надпись.

Второй флажок выводится на экран уже помеченным.

Переключатели (radio buttons)

Английскоге название элемента происходит от способа переключения диапазонов на старых приемниках: кнопками.

Как видно из примера, включение атрибута checked=1 приводит к автоматическому выбору соответствующего пункта. Если атрибут не ставить никуда, ни один элемент не будет помечен. 

  <input type="radio" name="rb" value="r1"> Первый<br>
  <input type="radio" name="rb" value="r2" checked=1> Второй<br>
  <input type="radio" name="rb" value="r3"> Третий
  <input type="radio" name="rb1" value="r4"> Четвертый<br>
  <input type="radio" name="rb1" value="r5"> Пятый
Первый
Второй
Третий
Четвертый
Пятый

Теперь внимательно посмотрим на исходный текст и найдем здесь ДВА набора: rb и rb1. Второй удачно «замаскировался»: в нем нет выбранных элементов и он стоит в той же колонке без отделения.

Вывод: надо быть аккуратным при составлении формы, чтобы не ввести пользователя в заблуждение.

Списки (list box)

Для вывода на экран списка используется контейнер (парный тег) <SELECT>. В нём, с помощью тегов <option> описывается каждый пункт списка. 

<select name="q">
  <option disabled>Выберите город</option>
  <option value="o1">Астрахань</option>
  <option value="o2" selected>Москва</option>
  <option value="o3">Якутск</option>
</select>

Первому пункту присвоено свойство disabled, что означает, что его нельзя выбрать. Но он показывается серым шрифтом, что помогает пользователю понять, что надо делать (заголовок-подсказка).

Атрибут selected позволяет указать в списке предпочтительный вариант для выбора.

Если вы хотите, чтобы никакое значение не было зарание указано, включите в качестве первого пункта <option> без текста для вывода.

Замечание. Без включения в тег <FORM>, из списка невозможно извлечь выбранное значение.

В предыдущем примере мы получили раскрывающийся список. Иногда удобнее предложить пользователю список прокручивающийся, особенно когда в нем немного пунктов. Для его вывода на экран достаточно указать размер (size) в строках. В примере он нарочно сделан меньше, чем строк в списке. 

<select size=3 name="q">
  <option disabled>Выберите город</option>
  <option value="o1">Астрахань</option>
  <option value="o2" selected>Москва</option>
  <option value="o3">Якутск</option>
</select>

В предыдущих примерах можно было выбрать только один пункт. Это и нужно чаще всего, но иногда желателен выбор нескольких пунктов. Добавление ключевого слова multiple полностью развернет список и позволит осуществлять выбор со стандартным (для тех, кто не спал на занятиях) использованием клавиш Ctrl и Shift. 

<select name="q" multiple>
  <option disabled>Выберите город</option>
  <option value="o1">Астрахань</option>
  <option value="o2" selected>Москва</option>
  <option value="o3">Якутск</option>
</select>

Следующий вариант может быть востребован, когда нужно помочь пользователю быстрее найти данные за счет их объединения в группы внутри списка. (А не для смешивания несовместимого, как полагает большинство авторов в Интернете.) 

<select name="ww">
 <optgroup label="Одежда">
    <option value="c1">Головные уборы</option>
    <option value="c2">Рубашки</option>
    <option value="c3">Плащи</option>
   </optgroup>
   <optgroup label="Обувь">
    <option value="s1">Домашняя</option>
    <option value="s2">Зимняя</option>
    <option value="s3">Спортивная</option>
   </optgroup>
</select>

Приведенный пример можно использовать для сужения запроса к сложным данным.

Взаимодействие элементов формы

Вопрос использования формы, как единого целого обсужен в контексте применения JavaScript.

Copyright © 1993–2024 Мацкявичюс Д.А. Все права защищены.
Никакая часть сайта не может быть воспроизведена никаким способом без письменного разрешения правообладателя и явной ссылки на данный ресурс.