Для того, чтобы автор страницы мог получить ответы на свои вопросы от читателей его сайта, существует технология создания форм. К сожалению, она изначально ориентирована на работу с Web-сервером. Из-за этого и дополнения мер безопасности, получение данных формы зачастую весьма затруднено. И мы здесь обсудим только локальное использование форм.
Вместе с тем, у разработчика остается возможность получить введенную информацию посредством отправки через электронную почту.
Для создания формы используется контейнер <FORM></FORM>, имеющий два основных атрибута: ACTION И METHOD. В связи с тем, что они не могут использоваться рядовым пользователем, мы их не обсуждаем.
Гораздо более важным является атрибут 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" name="tq" value="значение по умолчанию" size="25">
Атрибут value задает то, что уже будет введено в поле: не забывайте его задавать, если заботитесь о пользователях. Хотя не всегда можно предсказать стандартный ввод. Тогда атрибут отбрасывается и поле будет пустым.
Парный текст, формирующий область ввода многострочного текста. Может содержать абзацы.
В теге можно указать ширину в символах и число строк, а также вставить между тегами текст по умолчанию:
<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">
Эти элементы имеют два состояния: выбран (стоит галочка) и сброшен (галочки нет). Отсюда вытекает их большое значение для работы с согическими величинами.
Реализуется флажок тегом <INPUT>.
<input type="checkbox" name="chq1" title="Нажми на меня!"> Первый <input type="checkbox" name="chq2" checked=true> Второй <input type="checkbox" name="chq3"> ТретийПервый Второй Третий
В примере применено новое свойство – title. Это значит, что при наведении мышки на первый флажок появится соответствующая надпись.
Второй флажок выводится на экран уже помеченным.
Английскоге название элемента происходит от способа переключения диапазонов на старых приемниках: кнопками.
Как видно из примера, включение атрибута 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. Второй удачно «замаскировался»: в нем нет выбранных элементов и он стоит в той же колонке без отделения.
Вывод: надо быть аккуратным при составлении формы, чтобы не ввести пользователя в заблуждение.
Для вывода на экран списка используется контейнер (парный тег) <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.