(Здесь обсуждается использование! Создание форм тут.)
Весь процесс создания формы направлен на удобство пользователя.
Для программиста же наиважнейшим является процесс извлечения и использования того, что пользователь ввел. То есть встает вопрос: как считать (определить) значения элементов форм.
Для этого нужно обратиться к нему следующим образом, разделяя смысловые фрагменты точками:
document.ИмяФормы.ИмяЭлемента.Свойство
Но это обращение, абсолютно правильное с точки зрения синтаксиса, представляет собой фамилию + имя + отчество. Также, как и в реальной жизни, его иногда можно сократить до имени:
ИмяЭлемента.Свойство
Это сработает только при выводе полей без создания формы (без соответствующих тегов). Важно только соблюсти уникальность имен, что очень непросто.
При правильном создании, отбросить можно только слово document.
ИмяФормы.ИмяЭлемента.Свойство
Для учебных целей такой подход допустим, хотя лучше пользоваться полным именем, что и будет описываться в последующих примерах.
Если с именем формы (оно обязано быть уникальным!) и именем элемента (уникально в пределах формы) всё должно быть ясно, то запрашиваемые свойства необходимо обсудить.
Свойств у элементов много, они различны, но здесь мы ограничимся обсуждением общих моментов и наиболее часто используемого.
Для начала создадим комплексную форму, содержащую все виды элементов
<form name="test"> </form>
Смысл данного свойства из перевода с английского (значение) не совсем однозначен, хотя иногда нам поможет команда создания элемента, в явном виде содержащая это слово.
a
a
a
a
a
a
Кнопка для нас крайне важна, так как очень удобна для запуска действия (программы). В приведенном далее коде происходит создание кнопки (без создания формы) с именем but1 и реакцией на нажатие в виде диалога, содержащего значение надписи.
<input type="button" name="but1" value="Кнопка but1" onclick="alert(this.value);"> →
Пускай следующая кнопка (сделанная другим тегом и также вне формы), уже безымянная, выполняет две команды, разделенные точкой с запятой:
первая – изменит надпись предыдущей кнопки, обратившись к ней по имени (but1),
вторая – выведет значение надписи на нажатой кнопке (this). Жмите!
<button onclick="but1.value='Меня изменили программно!';alert(this.value);">Кнопка</button> →
Теперь нажмите кнопку but1 и она сообщит содержание своей новой надписи. Обновление экрана клавишей F5 возвратит всё к исходному состоянию.
А здесь произойдет смена надписи на кнопке после нажатия (this, а не but1):
<button onclick="this.value='На меня нажали!';">Кнопочка</button> →
Далее будет приводится только описание метода onclick!
Кнопки кнопками, но обрабатывать придется введенную информацию.
Его можно реализовать двумя тегами: <INPUT> и <TEXTAREA>.
Основной вариант для ввода текстовой информации пользователем.
Поэтому сразу опишем его со всеми важными атрибутами:
<input type="text" name="tq" value="значение по умолчанию" size="25">
Атрибут value задает то, что уже будет введено в поле: не забывайте его задавать, если заботитесь о пользователях. Хотя не всегда можно предсказать стандартный ввод. Тогда атрибут отбрасывается и поле будет пустым.
Парный текст, формирующий область ввода многострочного текста. Может содержать абзацы.
В теге можно указать ширину в символах и число строк, а также вставить между тегами текст по умолчанию:
<TEXTAREA name="tar" cols=60 rows=3>Заготовленный текст</TEXTAREA>
Эти элементы имеют два состояния: выбран (стоит галочка) и сброшен (галочки нет). Отсюда вытекает их большое значение для работы с согическими величинами.
Реализуется флажок тегом <INPUT>.
<input type="checkbox" name="chq1" title="Нажми на меня!"> Первый <input type="checkbox" name="chq2" checked=true> Второй <input type="checkbox" name="chq3"> ТретийПервый Второй Третий
В примере применено новое свойство – title. Это значит, что при наведении мышки на первый флажок появится соответствующая надпись.
Второй флажок выводится на экран уже помеченным.
Английскоге название элемента происходит от способа переключения диапазонов на старых приемниках: кнопками.
Как видно из примера, включение атрибута checked=1 приводит к автоматическому выбору соответствующего пункта. Если атрибут не ставить никуда, ни один элемент не будет помечен.
<form name='ss'> <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"> Пятый </form>
Здесь ДВА набора: rb и rb1, которые вставлены для удобства в таблицу (в дополнение к приведенному коду).
Возле списков вставлены кнопки, которые позволяют считать значение и состояние каждого перключателя. Ниже приведен код для вывода первой и второй кнопок:
<input type="button" value="rb – первый" onclick="alert(ss.rb[0].value+' – '+ss.rb[0].checked);"> <input type="button" value="rb - второй " onclick="alert(ss.rb[1].value+' – '+ss.rb[1].checked);">
<select 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>