Книга: Выразительный JavaScript

Поля

Поля

Веб-форма состоит из любого числа полей ввода, окружённых тегом <form>. HTML предлагает много разных полей, от простых галочек со значениями вкл/выкл до выпадающих списков и полей для ввода текста. В этой книге не будут подробно обсуждаться все виды полей, но мы сделаем небольшой их обзор.

Много типов полей ввода используют тег <input>. Его атрибут type используется для выбора стиля поля. Вот несколько распространённых типов:

text текстовое поле на одну строку

password то же, что текст, но прячет ввод

checkbox переключатель вкл./выкл.

radio часть поля с возможностью выбора из нескольких вариантов

file позволяет пользователю выбрать файл на его компьютере

Поля форм не обязательно должны появляться внутри тега <form>. Их можно разместить в любом месте страницы. Информацию из таких полей нельзя передавать на сервер (это возможно только для всей формы целиком), но когда мы делаем поля, которые обрабатывает JavaScript, нам обычно и не нужно передавать информацию из полей через submit.

<p><input type="text" value="abc"> (text)</p>
<p><input type="password" value="abc"> (password)</p>
<p><input type="checkbox" checked> (checkbox)</p>
<p><input type="radio" value="A" name="choice">
   <input type="radio" value="B" name="choice" checked>
   <input type="radio" value="C" name="choice"> (radio)</p>
<p><input type="file" checked> (file)</p>

Интерфейс JavaScript для таких элементов разнится в зависимости от типа. Мы рассмотрим каждый из них чуть позже.

У текстовых полей на несколько строк есть свой тег <textarea>. У тега должен быть закрывающий тег </textarea>, и он использует текст внутри этих тегов вместо использования атрибута value.

<textarea>
один
два
три
</textarea>

А тег <select> используется для создания поля, которое позволяет пользователю выбрать один из заданных вариантов.

<select>
  <option>Блины</option>
  <option>Запеканка</option>
  <option>Мороженка </option>
</select>

Когда значение поля изменяется, запускается событие “change”.

Оглавление книги