Пособие по 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>Мы уже рассмотрели несколько элементов ввода данных. Прежде чем изучить более сложные элементы, посмотрите в действии форму, которую мы разработали.