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

В процессе навигации по сайтам пользователь не только перемещается по веб-страницам, но и заполняет различные поля для регистрации на сайте, осуществления поиска, приобретения и оплаты товара и т.п.

Чтобы пользователь мог осуществлять ввод данных, HTML предлагает интерактивные элементы управления, такие как:

• текстовые поля (для одной или нескольких строк);
• переключатели;
• флажки;
• выпадающие списки;
• виджеты для загрузки;
• кнопки отправки.

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

У тега <form> есть несколько атрибутов:

• name - имя формы. Необходимо, если на странице несколько форм;
• action - определяет URL-адрес, по которому будет отправлена информация введеная пользователем;
• method - определяет способ отправки информации;
• target - указывает имя окна, в котором будут отображаться результаты обработки отправленной формы.

Назначение и обработка результатов формы пока выходит за рамки текущей лекции и более подробно будет рассмотрена в разделе "Основы программирования JS". На данном этапе необходимо уметь правильно создавать формы и размещать в них элементы управления.

Почти всем формам требуется текстовый ввод от пользователей, чтобы ввести своё имя, адрес электронной почты, пароль, адрес и др. Текстовые поля формы приходят в разных вариантах.

Атрибуты у тега <input>:

• name - имя элемента,
• type - тип элемента (см. таблицу выше),
• size - размер текстового поля в символах, которые одновременно будут видны, при вводе большего количества символов, они будут прокручиваться,
• maxlength - максимальное количество символов, которое можно ввести в поле, если опустить этот параметр, то число символов будет неограниченным;
• value - текст, который будет отображаться (его можно стереть), при отсутствии этого параметра поле будет пустым;
• placeholder - подсказывающий текст, этот текст сам исчезнет (его не надо стирать в отличии от текста, заданного атрибутом value), как только будет введён некоторый текст.
• disabled - блокирует поле от любых изменений;
• readonly - делает поле доступным только для чтения.

<form name="forma1">
    <input type="text" name="text1" size="20"  maxlength="50" value="неактивное поле" disabled>
    <input type="text" name="text1" size="20"  maxlength="50" value="только для чтения" readonly>         
</form>

Результат в окне браузера:

Для ввода многострочного текста, например для написания отзыва или почтового сообщения, используется парный тег <textarea></textarea>, который имеет следующие атрибуты:

• name - имя поля,
• cols - ширина поля в символах,
• rows - количество строк текста, видимых на экране,
• wrap - способ переноса слов:
• off - переноса не происходит,
• virtual - перенос отображается, но на сервер поступает неделимая строка,
• physical - перенос и на экране и при поступлении на сервер.
• disabled - неактивное поле,
• readonly - разрешено только чтение.

Пример:

<form name="forma1">
  <textarea cols="20" rows="3" wrap="off"></textarea><br>
  <textarea cols="35" rows="5">
    Заполняем поле некоторым произвольным текстом, 
    который будет отображаться в этом поле
  </textarea><br>
</form>

Результат в окне браузера:

Флажки и переключатели

Флажки — это элементы формы, которые имеют только два состояния: включено или выключено. Задаются тегом <input> с атрибутом type="checkbox".

<input type="checkbox"> 

Поскольку может оказаться сложно щёлкнуть по небольшому флажку, рекомендуется поместить флажок и его описание внутрь тега <label>, который сделает всю строку активной для щелчка мыши.

<label>
  <input type="checkbox"> Я согласен с условиями
</label>

Вы можете щёлкнуть по тексту «Я согласен с условиями» чтобы переключить флажок.

По умолчанию флажок выключен. Вы можете пометить его включенным, просто используя атрибут checked.

<label>
  <input type="checkbox" checked> Я согласен с условиями
</label>

Результат в браузере:

В отличии от флажков, переключатели предоставляют возможность выбрать только один пункт из нескольких предложенных, но выбор его обязателен. Реализуется это выставлением атрибута type="radio" и атрибута name, значения которого должны быть одинаковыми для всех тегов <input>, участвующих в реализации переключателя.

Пример:

<form name="forma1">
  Укажите ваш пол:<br>
  <input type="radio" name="sex" value="man" checked>мужской
  <input type="radio" name="sex" value="woman">женский
</form>

Аналогично, чтоб легко было выбрать нужный пункт, имеет смысл использовать тег <label>:

Пример:

<form name="forma1">
  Укажите ваш пол:<br>
  <label><input type="radio" name="sex" value="man" checked>мужской</label>
  <label><input type="radio" name="sex" value="woman">женский</label>
</form>

Выпадающие списки значений

Парный тег <select> позволяет создать элемент интерфейса в виде раскрывающегося списка, а также список с одним или множественным выбором, как показано далее. Конечный вид зависит от использования атрибута size тега <select>, который устанавливает высоту списка. Ширина списка определяется самым широким текстом, указанным в парном теге <option>. Каждый пункт создается с помощью тега <option>, который должен быть вложен в контейнер <select>.

<select>
  <option>Январь</option>
  <option>Февраль</option>
  <option>Март</option>
  <option>Апрель</option>
  <option>Май</option>
  <option>Июнь</option>
  <option>Июль</option>
  <option>Август</option>
  <option>Сентябрь</option>
  <option>Октябрь</option>
  <option>Ноябрь</option>
  <option>Декабрь</option>
</select>

Результат в браузере:

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

<label>Какими браузерами вы пользуетесь?</label><br>
 
<select multiple>
  <option>Google Chrome</option>
  <option>Internet Explorer</option>
  <option>Mozilla Firefox</option>
  <option>Opera</option>
  <option>Safari</option>
</select>

Выберите несколько вариантов посредством удержания Ctrl и щелчка мыши. Это может быть хорошей альтернативой применению несколько флажков в строке.

Результат в браузере:

Кнопки

Кнопки являются одним из самых понятных и интуитивных элементов интерфейса. По их виду сразу становится понятно, что единственное действие, которое с ними можно производить — это нажимать на них. За счёт этой особенности кнопки часто применяются в формах, особенно при отправке данных для последующей их обработки или очистке данных из полей формы.

Кнопка создается тегом <input>. В зависимости от атрибута type существует четыре вида кнопок:

1. type="submit" - кнопка отправки содержимого формы web-серверу.

name - имя кнопки,
value - надпись на кнопке.

2. type="image" - графическая кнопка отправки содержимого формы web-серверу. Для ее использования необходимо подготовить картинку кнопки, а потом использовать ее в виде кнопки.

name - имя кнопки,
src - адрес картинки для кнопки.

3. type="reset" - кнопка, позволяющая восстановить все значения по умолчанию в форме.

name - имя кнопки,
value - надпись на кнопке.

4. type="button" - произвольная кнопка, ее действия назначаются вами, т.е. сама она делать ничего не умеет.

name - имя кнопки,
value - надпись на кнопке.
onclick - указывает какой программный код на JavaScript выполнить. Вообще, у этого типа кнопок есть и другие события (например, двойной щелчок), но здесь мы не будем их рассматривать.

Пример:

<form name="forma1">
  <input type="submit" name="submit" value="Отправить">
  <input type="image" name="but_img" src="but.gif">
  <input type="reset" name="reset" value="Очистить">
  <input type="button" name="button" value="Отправить">
</form>

Результат в браузере: