vvz.nw.ru Примеры к занятиям по JavaScript

<< HTML. Элементы форм

Многочисленные элементы форм можно условно разбить на несколько групп. Все элементы, естественно, имеют различную функциональность и разный внешний вид. Очевидно, что у каждого из обсуждаемых элементов есть определенное количество атрибутов (которые как раз и обеспечивают функциональность и, в меньшей степени, параметры внешнего отображения). Но в этом разделе мы отметим лишь абсолютно необходимые атрибуты, чтобы хотя бы увидеть, как выглядят те или иные элементы форм.

Сразу отметим синтаксический момент:

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

Элементы input

Элементы input, в зависимости от значения атрибута  type, не только выглядят, но и функционируют принципиально по-разному. Большинство из них могут быть равным образом использованы как в клиентских, так и в серверных сценариях. Представим их в виде следующих групп:

Кнопки

<input type="submit">     Отправляет данные из формы на сервер (предполагается, что серверная программа их сможет принять и правильно обработать)
<input type="reset">     Очищает форму, восстанавливая значения по умолчанию
<input type="button">     Выглядит как системная кнопка, но нажатие на нее всего лишь запускает клиентский сценарий JavaScript (этого же эффекта можно и достичь использованием обработчика onClick для любого элемента HTML-документа)
<input type="image">     Как и кнопка типа "submit", отправляет данные на сервер, но выглядит нестандартным образом - например, просто как картинка

 

Текстовые поля

<input type="text">     однострочное поле ввода текста
<input type="password">     поле ввода пароля


 
Переключатели

<input type="checkbox">   1   2   3     флажок (независимый переключатель)
<input type="radio">   да      нет   радиокнопка (переключатель с зависимой фиксацией)

 

Поле выбора файла

<input type="file">


   

Скрытое текстовое поле

<input type="hidden">  
 

Многострочное текстовое поле

<textarea>...
   текст по умолчанию ...
</textarea>
    многострочное текстовое поле

 

Выпадающий список select и его элементы option

<select>
  <option> раз </option>
  <option> два </option>
  <option> три </option>
</select>
<select>  
<select size="2">  
<select size="2" multiple>  


vvz.nw.ru  > JavaScript