Пособие по HTML-формам: Другие элементы ввода

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

Чек-бокс


Если нужно реализовать функцию выбора из нескольких значений, используйте элемент ввода чек-бокс:

<input type="checkbox" name="Agree" value="yes" />

name=”Agree”

Имя, которое используется для идентификации элемента ввода на стороне сервера.

value=”yes”

Это значение возвращается на сервер, если пользователь устанавливает флажок в чек-боксе. Необязательный атрибут.

Например, если вы создадите чек-бокс следующим образом:

<input type="checkbox" name="sendmail" />

и если пользователь устанавливает флажок, скрипт на стороне сервера получит следующее: sendmail=’on’

Если чек-бокс выглядит следующим образом:

<input type="checkbox" name="sendmail" value="send" />

и если пользователь устанавливает в нем флажок, скрипт-обработчик получит: sendmail=’send’

checked=’checked’

При наличии атрибута checked по умолчанию флажок в чек-боксе будет установлен.

Пример:

<input type="checkbox" name="sendmail" value="send" checked="checked" />

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


Переключатель (или радио-кнопка) предназначен для выбора одного элемента из нескольких вариантов в HTML форме. Используйте переключатели, когда выбор доступных вариантов не слишком велик (менее 10).

Переключатель создается с помощью значения ‘radio’ атрибута type.

Пример:

<iput type="radio" name="gender" value="male" />

Переключатели из одной группы должны иметь одинаковые имена.

Пример:

Как вы оцениваете контент этого сайта?

<p>
<input type="radio" name="rating" value="excellent">Прекрасно !!! <br/>
<input type="radio" name="rating" value="good">Хорошо  <br/>
<input type="radio" name="rating" value="bad">Плохо  <br/>
</p>

Если пользователь выбирает «Прекрасно!!!«, скрипт на стороне сервера получит: rating=’excellent’.

Можно добавить атрибут checked, чтобы какой-либо вариант был выбранным по умолчанию.

Выпадающий список


Если вы хотите реализовать для пользователя группу элементов, из которых он может выбирать, создайте выпадающий список. В отличие от других элементов ввода, которые мы рассматривали до этого, список имеет два HTML-тега: <select> и <option>.

Список создается с помощью тега , а элементы в списке задаются тегом .

Из приведенного ниже примера все станет понятно:

Способ доставки:
<select name="shipping">
 <option value="1"> стандартный</option>
 <option value="2"> 2 дня</option>
 <option value="3"> на следующий день</option>
</select>

Если пользователь выбирает «2 дня«, скрипт на стороне сервера получит: shipping=2.

Если вы хотите при создании формы в HTML задать выбранный по умолчанию элемент, то можете добавить в тег <option> атрибут selected.

Код:

<option value="1" selected='selected'>Стандартная</option>

сделает стандартный метод доставки выбранным по умолчанию.

Список с множественным выбором


Можно разрешить множественный выбор из списка. Для этого в теге <select> используется атрибут ‘multiple’.

Чтобы указать количество видимых (без прокрутки) элементов в списке используйте атрибут size.

Пример:

Выберите сферу своих интересов:

(нажмите, удерживая клавишу ctrl, чтобы выбрать несколько)<br />

<select multiple name="interests" size="4">
 <option value="arts">Искусство</option>
 <option value="pol" >Политика</option>
 <option value="sci" >Наука</option>
 <option value="comp">Компьютеры и интернет</option>
</select>

Если в форму включен приведенный выше код, пользователь может выбрать любую комбинацию вариантов. Предположим, что пользователь выбирает «Искусство» и «Наука«. Скрипт на стороне сервера получит: «interests=arts» «interests=sci«.

Многострочный текст


Для ввода большого по объему текста следует использовать текстовую область. Она создается с помощью тега <textarea>

Атрибуты:

name=”descr”

name используется для идентификации области в скрипте на стороне сервера.

cols=”columns”

Определяет ширину текстовой области — количество символов в строке, которое может поместиться без прокрутки.

rows=”rows”

Устанавливает количество строк текстовой области, которое может поместиться без прокрутки.

Пример:

Введите свои пожелания:

<textarea name="suggestions" rows="5" cols="25"></textarea>

Если нужно вывести в текстовой области какое-нибудь значение по умолчанию, вы можете сделать это следующим образом:

<textarea name="suggestions" rows="5" cols="25">мои пожелания:</textarea>

Дополняем форму из примера

Давайте добавим в нашу форму регистрации HTML чек-бокс, переключатель, выпадающий список и текстовую область из нескольких строк:

<form id='sampleform' method='post' action='' >
   <p>
   Имя: <input type='text' name='Name' />
   </p>
   <p>
   E-mail: <input type='text' name='Email' />
   </p>
    <p>
   <input type="checkbox" name="subscribe" checked />Подписаться на новостную рассылку
   </p>
   <p>
    Форма E-mail:
       <p>
       <input type="radio" name="format" value="html" checked='checked' />HTML
       </p>
       <p>
       <input type="radio" name="format" value="text" />Простой текст
       </p>
   </p>
  <p>
    Выберите, на что вы хотите подписаться:
    <p>
    <select name="type">
      <option value="standard">Стартный план - бесплатно</option>
      <option value="prof">Профессиональный план - платно</option>
    </select>
    </p>
  </p>
  <p>
  Комментарии для редактора:<br/>
   <textarea name="comments" rows="7" cols="30"></textarea>
  </p>
   <p>
   <input type='submit' name='Submit' value='Submit' />
   </p>
</form>

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

Данная публикация представляет собой перевод статьи «HTML Form Tutorial Part II: More Input Elements» , подготовленной дружной командой проекта Интернет-технологии.ру

Меню