HTML-формы — окончание

Веб-формыДавайте разберём оставшиеся элементы по данной теме.
Элемент SELECT
Работает с обязательным закрывающимся тегом. Слово SELECT означает выбор, поэтому необходимы опции этого выбора, за разновидности которых отвечает атрибут OPTION. Атрибут OPTION имеет следующие значения:

  • Value — служит для определения обработчиком данных выбранных опций.
  • Selected — определяет элемент выбора, открывающийся по умолчанию.

Рассмотрим пример:

<form name="pr7" method="post" action="obrabotchik.php">
<p>Отметьте тип товара:</p>
<p>
<select name="tovar" size="1">
<option value="DVD" > DVD — диск  </option>
<option value="CD" selected> CD -диск </option>
<option value="E-book"> Эл-книга </option>
</select>
</p>
</form>

А вот и результат:

элемент select

Как видно: на рисунке видна лишь одна опция, отмеченная значением «selected». За количество открываемых значений отвечает атрибут «size» элемента «select», в данном случае стоит число один. Если Вы желаете, чтобы можно было выбрать сразу несколько видов одновременно, то может быть использовано значение MULTIPLE. Рассмотрим на предыдущем примере, увеличив параметр «size» до числа опций — в нашем случае — 3, и добавив значение MULTIPLE:

<form name="pr8" method="post" action="obrabotchik.php">
<p>Отметьте тип товара:</p>
<p>
<select name="tovar" size="3" multiple>
<option value="DVD" > DVD — диск  </option>
<option value="CD" selected> CD -диск </option>
<option value="E-book"> Эл-книга </option>
</select>
</p>
</form>

результат на скриншоте:

параметры size и multiple

Рассмотрим элементы отвечающие за создание кнопок.

В форме созданием кнопок руководит элемент input и его атрибуты: «submit», «reset» и  «value»:

  • submit — отвечает за кнопку, отправляющую данные обрабатывающей программе.
  • reset — задаёт кнопку, сбрасывающую заполненные данные формы.
  • value — определяет надписи на кнопках.

Рассмотрим всё на примере:

<form name="pr9" method="post" action="obrabotchik.php">
<input type="submit" value="Заказать диск">
<br><br>
<input type="reset" value="Сброс">

</form>

Результат на рисунке:


параметры submit и reset

Параметры кнопок и их расположение задаётся с помощью каскадных таблиц стилей CSS.

И последнее — при необходимости создания больших текстовых полей применяется элемент TEXTAREA, что переводится с английского как — текстовая площадка.  Наличие закрывающего тега у данного элемента обязательно.  Элемент TEXTAREA имеет следующие аргументы:

  • Name — задаёт имя заполняемого поля.
  • Cols — задаёт ширину поля в символах.
  • Rows — определяет высоту поля.

Рассмотрим применение элемента TEXTAREA на примере:

<form name="pr10" method="post" action="obrabotchik.php">
Введите подробное описание:<br>
<textarea name="text" cols="40" rows="7"></textarea>
</form>

Результат:
текстовое поле

Думаю, понятно, что Rows задаёт количество рядов. На этом с формами всё.

Поделиться в соц. сетях

Опубликовать в Google Buzz
Опубликовать в Google Plus
Опубликовать в LiveJournal
Опубликовать в Мой Мир
Опубликовать в Одноклассники

Реклама

Оставить комментарий

Перед отправкой формы:
Human test by Not Captcha