Через список выбора вы можете предложить посетителям список элементов, из которого они могут выбрать один элемент.
<select name="sprachen"> <option>HTML</option> <option>JavaScript</option> <option>CSS</option> <option>XML</option> <option>Java</option> </select>
Списки выбора определяются с помощью элемента select. Снова же: каждый список выбора должен быть однозначно идентифицируем в документе с помощью идентификатора (name). Каждый элемент списка определяется с помощью элемента option. Между открывающим и закрывающим тегом <option> находится текст элемента списка.
По умолчанию при отправке формы передается текст выбранного элемента списка. В качестве альтернативы, вы также можете изменить способ отправки. Это делается с помощью атрибута value.
<select name="sprachen"> <option value="s1">HTML</option> <option value="s2">JavaScript</option> <option value="s3">CSS</option> <option value="s4">XML</option> <option value="s5">Java</option> </select>
Просто назначьте этому value желаемое значение отправки.
Обычно в списке выбора отображается только один элемент. Если хотите, вы также можете отобразить сразу несколько элементов.
Для этого присвойте элементу select атрибут size. Этот атрибут size определяет размер отображения списка выбора.
<select name="sprachen" size="3"> <option>HTML</option> <option>JavaScript</option> <option>CSS</option> <option>XML</option> <option>Java</option> </select>
Если список содержит больше элементов, чем их может быть отображено, список можно прокрутить.
По умолчанию из списка выбора можно выбрать только один элемент. В случае необходимости можно также настроить множественный выбор.
<select name="sprachen" size="3" multiple> <option>HTML</option> <option>JavaScript</option> <option>CSS</option> <option>XML</option> <option>Java</option> </select>
Возможность множественного выбора предоставляется с помощью атрибута multiple в элементе select.
В списках выбора изначально не выбран ни один элемент. Однако это также можно изменить с помощью соответствующего атрибута.
<select name="sprachen" size="3" multiple> <option>HTML</option> <option>JavaScript</option> <option selected>CSS</option> <option>XML</option> <option>Java</option> </select>
Чтобы предварительно выбрать элемент, присвойте соответствующему элементу option атрибут selected.
Кстати, вы также можете предварительно выбрать несколько элементов. Для этого просто несколько раз используйте атрибут selected.
Переключатели
Через так называемые переключатели (Radio-Buttons) вы можете определять группы кнопок.
Из такой группы пользователи могут выбрать один из предлагаемых вариантов.
Переключатели определяются с помощью элементов ввода input, которым присваивается комбинация атрибута значения type="radio".
<form action="form.php" method="post">
<p>Вы хотите подписаться на рассылку?:</p>
<p>
<input type="radio" name="newsletter" value="ja" /> Да<br />
<input type="radio" name="newsletter" value="nein" /> Нет
</p>
</form>
Снова используйте атрибут name, чтобы присвоить переключателям имя. Все кнопки с одинаковым именем принадлежат одной группе. Затем можно отметить только одну из этих кнопок.
С помощью атрибута value можно определить значение отправки для каждой кнопки.
Для предварительного выбора кнопки присвойте ей атрибут checked.
<form action="form.php" method="post">
<p>Вы хотите подписаться на рассылку?:</p>
<p>
<input type="radio" name="newsletter" value="ja" /> Да<br />
<input type="radio" name="newsletter" value="nein" checked /> Нет
</p>
</form>
Обратите внимание, что предварительный выбор может быть сделан только для одной кнопки группы.
Флажки
Вы также знакомы с флажками из бесчисленных форм.
Это группа квадратных галочек, из которых пользователи могут выбрать одну, ни одну или несколько.
<p>Какие темы вас еще интересуют?:</p>
<p>
<input type="checkbox" name="thema" value="html" /> HTML<br />
<input type="checkbox" name="thema" value="css" /> CSS<br />
<input type="checkbox" name="thema" value="javascript" /> JavaScript
</p>
Флажки определяются с помощью элементов input, которым присваивается атрибут-значение-комбинация type="checkbox". Для каждого флажка указывается уникальный идентификатор с помощью атрибута name. Все флажки с одинаковым именем относятся к одной группе. С помощью атрибута value определяется значение каждого флажка.
Скрытые поля ввода
Вы можете определить поля в форме, которые невидимы для посетителей. При отправке формы значения, содержащиеся в скрытых полях, также передаются. Это полезно, например, когда нужно передать значения, вычисленные с помощью PHP, так, чтобы пользователи об этом ничего не знали.
Скрытые поля ввода определяются с помощью элементов input, атрибуту type присваивается значение hidden.
<input type="hidden" name="id" value="">
Через атрибут name вы устанавливаете уникальный идентификатор для элемента. Значение поля задается через value. Это может быть статическое значение. Кроме того, это можно сделать, например, динамически с помощью PHP или JavaScript.
Поля для загрузки файлов
Если вы хотите разрешить посетителям загружать файлы, вы также можете предложить соответствующее поле. Вот пример того, как это может выглядеть:
<form action="form.php" method="post" enctype="multipart/form-data"> <p>Выберите файл:<br> <input name="Datei" type="file" /></p> </form>
В браузере это выглядит следующим образом:
Поля для загрузки файлов определяются с помощью элементов input с атрибутом-значением type="file". При использовании этого типа поля в открывающем <form> указывается method="post". Кроме того, там должно быть указано обязательное сочетание атрибутов enctype="multipart/form-data". Только в этом случае файлы действительно передаются. Если не указывать это, будет передано только имя файла.
Кнопки для отправки и отмены
Для отправки данных формы вам, конечно, понадобится соответствующая кнопка.
Для отправки форм используется следующий синтаксис:
<input type="submit" value="Отправить" />
Значение атрибута value определяет текст на кнопке.
Аналогично для кнопок отмены есть отображения.
Если вы нажмете на такую кнопку, все содержимое формы будет стерто. Синтаксис для этих кнопок выглядит следующим образом:
<input type="reset" value="Отменить" />
Здесь также справедливо: надпись задается через атрибут value.
Кстати, вы также можете определить кнопки с помощью элемента button.
Преимущество этого варианта: вы очень гибки в этом. На самом деле вы можете сами определить внешний вид и функциональность этих кнопок.
<button name="klick" type="button" value="Сюрприз" onclick="alert('Ты уверен?');">Кликни меня</button>
В данном примере с помощью обработчика событий onclick достигается открытие окна JavaScript при нажатии кнопки. Внешний вид кнопки определяется содержимым между открывающим и закрывающим <button>-тегом. Кстати, это может быть любое содержимое. Таким образом, не только текст допускается. Также можно указать элемент img, чтобы сгенерировать графическую кнопку.
