» Главная
eXcode.ru » Статьи » Web
» Новости
» Опросы
» Файлы
» Журнал



Пользователей: 0
Гостей: 15





Тэг <input> — различные поля ввода




Автор: Котеров Д.В.

Существует много разновидностей этого тэга, отличающихся параметром type. Перечислю наиболее употребительные из них. В квадратных скобках я буду указывать необязательные параметры, а также параметры, отсутствие которых иногда имеет смысл (будем считать, что параметр nameявляется обязательным, хотя это и не так в силу вышеизложенных рассуждений). Ни в коем случае не набирайте эти квадратные скобки!

Для удобства я расположу каждый параметр тэга на отдельной строке. И хотя стандарт HTML это не запрещает, настоятельно рекомендую вам стараться в своих формах избегать такого синтаксиса. Не разбивайте тэги форм на несколько строк, это значительно снижает читабельность кода страницы.

Текстовое поле (text)

<input type=text
name=имя[value=значение]
[size=размер]
[maxlen=число]
>

Создает поле ввода текста размером примерно в sizeзнакомест и максимально допустимой длиной maxlenсимволов (то есть пользователь сможет ввести в нем не больше этого количества символов).

Внимание

Не советую, тем не менее, в программе на Си полагаться, что придет не больше maxlenсимволов и выделять для их получения буфер фиксированного размера. Дело в том, что злоумышленник вполне может запустить ваш сценарий в обход стандартной формы (содержащей "правильный" тэг <input>) и задать большой объем данных, чтобы этот буфер переполнить — известный прием взлома недобросовестно написанных программ.

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

Поле ввода пароля (password)

<input type=password
name=имя[value=значение]
[size=размер]
[maxlen=число]
>

Полностью аналогичен тэгу <input type=text>, за исключением того, что символы, набираемые пользователем, не будут отображаться на экране. Это удобно, если нужно запросить какой-то пароль. Кстати, если в качестве маски задается значение параметра value, все будет в порядке, однако, посмотрев исходный HTML-текст страницы в браузере, можно увидеть, что он (браузер) это значение не показывает (непосредственно на странице). Сделано это, видимо, из соображений безопасности, хотя, конечно же, злоумышленник легко преодолеет такую защиту, если вы попытаетесь скрыть с ее помощью что-то важное.

Скрытое текстовое поле (hidden)

<input type=hidden
name=имя
value=значение
>

Создает неотображаемое (скрытое) поле. Такой объект нужен исключительно для того, чтобы передать сценарию какую-то служебную информацию, до которой пользователю нет дела, — например, параметры настройки.

Пусть, например, у нас имеется многоцелевой CGI-сценарий, который умеет принимать данные пользователя и отправлять их как почтовое сообщение. Поскольку мы бы не хотели фиксировать E-mail получателя жестко, но в то же время и не стремимся, чтобы пользователь мог его менять перед отправкой формы, оформим соответствующий тэг в виде скрытого поля:


<form action=/cgi/sendmail.cgi method=post>
<input type=hidden name=email value="admin.microsoft.com.">
<h2>Пошлите сообщение администратору:</h2>
<input type=text name="text">
<input type=submit name=doSend value="Отослать">
</form>


Я подразумеваю, что сценарий анализирует свои входные параметры и посылает текст из параметра textпо адресу email. А вот еще один пример использования этого сценария, но уже без скрытого поля. Сравните:


<form action=/cgi/sendmail.cgi method=post>
<h2>Пошлите сообщение другу:</h2>
Его E-mail: <input type=text name=email>

Текст: <input type=text name="text">

<input type=submit name=doSend value="Отослать">
</form>


Итак, мы задействовали один и тот же сценарий для нескольких разных целей. Еще раз напоминаю, что для сценария безразлично, получает он данные из обычного текстового или же из скрытого поля — в любом случае данные выглядят одинаково.

Часто скрытое поле используют для индикации того, что сценарий запущен в результате нажатия кнопки в форме, а не простым набором его URL в строке адреса браузера. Тем не менее, это, как уже говорилось, довольно плохой способ — лучше применять именованные кнопки submit.

Замечание

В некоторых случаях именованные кнопки submitне помогают, и приходится пользоваться скрытым полем для индикации запуска сценария из формы. Происходит это в случае, если форма очень проста и состоит, например, всего из двух элементов — поля ввода текста и кнопки submit(пусть даже и именованной). Практически все браузеры в такой ситуации позволяют пользователю просто нажать <Enter> для отправки формы, а не возиться с нажатием на submit-кнопку. При этом разумеется, данные кнопки не посылаются на сервер. Вот тогда-то нас и выручит hidden-поле, например, с именем submit: если его значение установлено, то сценарий понимает, что пользователь ввел какие-то данные, в противном случае сценарий был запущен впервые путем набора его URL или перехода по гиперссылке.

Независимый переключатель (checkbox)

<input type=checkbox
name=имя
value=значение[checked]
>

Этот тэг генерирует независимый переключатель (или флажок), который может быть либо установлен, либо сброшен (квадратик с галочкой внутри или пустой соответственно). Если пользователь установил этот элемент, прежде чем нажать кнопку доставки, сценарию поступит строка имя=значение, в противном случае не придет ничего, будто нашего поля и не существует вовсе. Если задан атрибут checked, то переключатель будет изначально установленным, иначе — изначально сброшенным.

Зависимый переключатель (radio)

<input type=radio
name=имя
value=значение
[checked]
>

Включение в форму этого тэга вызывает появление на ней зависимого переключателя (или радиокнопки). Зависимый переключатель — это элемент управления, который, подобно независимому переключателю, может находиться в одном из двух состояний. С тем отличием, что если флажки не связаны друг с другом, то только одна радиокнопка из группы может быть выбрана в текущий момент. Конечно, чаще всего определяются несколько групп радиокнопок, независимых друг от друга. Наша кнопка будет действовать сообща с другими, имеющими то же значение атрибута name — иными словами, то же имя. Отсюда вытекает, что, в отличие от всех других элементов формы, две радиокнопки довольно часто имеют одинаковые имена. Если пользователь установит какую-то кнопку, сценарию будет передана строка имя=значение, причем значение будет тем, которое указано в атрибуте value выбранной кнопки (а все остальные переключатели проигнорируются, как будто неустановленные флажки). Если указан параметр checked, кнопка будет изначально выбрана, в противном случае — нет.

Примечание

Чувствую, вас уже мучает вопрос: почему эта штука называется радиокнопкой. При чем тут радио, спрашиваете. Все очень просто. Дело в том, что на старых радиоприемниках (как и на магнитофонах) была группа клавиш, одна из которых могла "залипать", освобождая при этом другую клавишу из группы. Например, если радио могло ловить 3 станции, то у него было 3 клавиши, и в конкретный момент времени только одна из них могла быть нажата (попробуйте слушать сразу несколько станций!). Согласен, что терминология очень спорна), но история есть история…

Кнопка отправки формы (submit)

<input type=submit
[name=имя]
value=текст_кнопки>

Создает кнопку подтверждения с именем name(если этот атрибут указан) и названием (текстом, выводимым поверх кнопки), присвоенным атрибуту value. Как уже говорилось, если задан параметр name, после нажатия кнопки отправки сценарию вместе с другими парами будет передана и пара имя=текст_кнопки(если нажата не эта кнопка, а другая, будет передана строка другой, нажатой, кнопки). Это особенно удобно, когда в форме должно быть несколько кнопок submit, определяющих различные действия (например, кнопки Сохранить и Удалить в сценарии работы с записью какой-то базы данных) — в таком случае чрезвычайно легко установить, какая же кнопка была нажата, и предпринять нужные действия.

Кнопка сброса формы (reset)

<input type=reset
value=текст_кнопки
>

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

Рисунок для отправки формы (image)

<input type=image
[name=имя]
src=изображение
>

Создает рисунок, при щелчке на котором кнопкой мыши будет происходить то же, что и при нажатии на кнопку submit, за тем исключением, что сценарию также будут пересланы координаты в пикселах того места, где произведен щелчок (отсчитываемые от левого верхнего угла рисунка). Придут они в форме: имя.x=X&имя.y=Y, где (X, Y) — координаты точки. Если же атрибут nameне задан, то координаты поступят в формате: x=X&y=Y.

Тэг <textarea> — многострочное поле ввода текста

Теперь посмотрим, что же из себя представляет тэг <textarea>. Смысл у него тот же, что и у <input type=text>, разве что может быть отправлена не одна строка текста, а сразу несколько. Формат тэга следующий:

<textarea
name=имя
[width=ширина]
[height=высота]
[wrap=тип]
>Текст, которыйбудетизначальноотображенвтекстовомполе</textarea>

Как легко видеть, этот тэг имеет закрывающий парный. Параметр widthзадает ширину поля ввода в символах, а height— его высоту. Параметр wrapопределяет, как будет выглядеть текст в поле ввода. Он может иметь одно из трех значений (по умолчанию подразумевается none).

Virtual— наиболее удобный тип вывода. Справа от текстового поля выводится полоса прокрутки, и текст, который набирает пользователь, внешне выглядит разбитым на строки в соответствии с шириной поля ввода, причем перенос осуществляется по словам. Однако символ новой строки вставляется в текст только при нажатии <Enter>.

Physical— зависит от реализации браузера, обычно очень похож на none.

None— текст отображается в том виде, в котором заносится. Если он не умещается в текстовое поле, активизируются линейки прокрутки (в том числе, и горизонтальная).

После отправки формы текст, который ввел пользователь, будет, как обычно, представлен парой имя=текст, аналогично тэгу однострочного поля ввода <input type=text>.

Тэг <select> — список

У нас остался последний тэг — <select>. Он представляет собой выпадающий (или раскрытый) список. Одновременно могут быть выбрана одна или несколько строк. Формат этого тэга следующий:


<select name=имя[size=размер] [multiple]>
<option [value1=значение1][selected]>Строка1</option>
<option [value2=значение2][selected]>Строка2</option>
. . .
<option [valueN=значениеN][selected]>СтрокаN</option>
</select>


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

Параметр sizeзадает, сколько строк будет занимать список. Если size равен 1, то список будет выпадающим, в противном случае — занимает sizeстрок и имеет полосы прокрутки. Если указан атрибут multiple, то будет разрешено выбирать сразу несколько элементов из списка, а иначе — только один. Кроме того, атрибут multipleне имеет смысла для выпадающего списка.

Каждая строка списка определяется своим тэгом <option>. Если в нем задан атрибут value, как это часто бывает, то соответствующая строка списка будет идентифицироваться его значением, а если не задан, то самим текстом этой строки (считается, что valueравно самой строке). Кроме того, если указан параметр selected, то данная строка будет изначально выбранной. Кстати, чуть не забыл: закрывающие тэги </option>можно опускать, если упрощение не создает конфликтов с синтаксисом HTML (в действительности это можно делать почти всегда).

Давайте теперь посмотрим, в какой форме пересылаются данные списка сценарию. Ну, со списком одиночного выбора вроде бы ясно — просто передается пара имя=значение, где имя— имя тэга <select>, а значение— идентификатор выбранного элемента (то есть, либо атрибут value, либо сама строка элемента списка).

Списки множественного выбора (multiple)

В какой форме приходят данные сценарию, если был создан multiple-список. Очень просто: все произойдет так, будто есть не один, а несколько не-multiple-списков, все с одинаковым именем, и в каждом из которых выбрано по одному элементу. Иными словами, строка параметров, порожденная этим тэгом, будет выглядеть примерно так:

имя=значение1&имя=значение2&...&имя=значениеN

Кстати говоря, совершенно не уникальный случай — то, что с одним именем связано сразу несколько значений. Действительно, нам никто не мешает создавать и другие тэги с идентичными именами. Это часто делается, например, для переключателей-флажков:

<input type=checkbox name=имяvalue="Один">Один

<input type=checkbox name=имяvalue="Два">Два

<input type=checkbox name=имяvalue="Три">Три


Если теперь пользователь установит сразу все флажки, то сценарию поступит строка (конечно, в URL-кодированном виде):

имя=Один&имя=Два&имя=Три

Из всего сказанного следует не очень утешительный вывод: при разборе строки параметров в сценарии мы не можем полагаться на то, что каждой переменной соответствует только одно значение. Нам придется учитывать, что их может быть не "один", а "много". А это очень неприятно с точки зрения программирования — особенно на Си.

Попутно мы обнаружили, что любой multiple-список может быть представлен набором флажков (независимых переключателей), а любой не-miltiple — в виде нескольких радиокнопок. Так что, вообще говоря, тэг <select>— некоторое функциональное излишество, и с точки зрения сценария вполне может заменяться флажками и радиокнопками.
К началу статьи





Добавил: LedWormДата публикации: 2006-01-18 20:45:30
Рейтинг статьи:3.82 [Голосов 17]Кол-во просмотров: 10089

Комментарии читателей

Всего комментариев: 56

2018-01-13 11:11:44
Vlrsafk
Платим за лайки! - Оплата по требованию!

Наш сервис предоставляет настоящие лайки на фотографии заказчиков, которые готовы платить за качество.

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

Чтобы стать нашим удалённым сотрудником и начать ставить лайки, зарабатывая при этом 45 рублей за 1 поставленный лайк,

достаточно просто зарегистрироваться на нашем сервисе. > www.click-likes.tk <

Вывод заработанных средств ежедневно в течении нескольких минут.

2018-01-01 23:02:07
Ttzdajg
Самый полный курс Bitcoin Миллионер - Научись успешно зарабатывать

Скоро состоится запуск новой криптовалюты с потенциалом роста в 4000%.

А это означает что вложив в нее всего 500 рублей можно увеличить капитал до 2 000 000 р.

за короткий срок. Такое уже было не один раз! Тема огонь!

Посмотрите Видео-презентацию на сайте >> www.bitcoin.exrabota.ru <<

Вы узнаете все о заработке на биткоин и получите купон на обучение для первых 50 человек.

2017-12-24 13:36:31
Nlflgdh
Платим за лайки! - Оплата сдельная!

Наш сервис предоставляет настоящие лайки на фото заказчиков, которые готовы платить за качество.

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

Чтобы стать нашим удалённым сотрудником и начать ставить лайки, зарабатывая при этом 45 рублей за 1 поставленный лайк,

Вам достаточно просто зарегистрироваться на нашем сервисе. > www.click-likes.tk <

Вывод заработанных средств ежедневно в течении нескольких минут.

2017-12-22 20:24:50
Cioccay
Мы платим за лайки! - Оплата ежедневно!

Наш сервис предоставляет настоящие лайки на фото заказчиков, которые готовы платить за качество.

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

Чтобы стать нашим удалённым сотрудником и начать ставить лайки, зарабатывая при этом 45 рублей за 1 поставленный лайк,

Вам достаточно просто зарегистрироваться на нашем сервисе. > click-likes.tk <

Вывод заработанных средств ежедневно в течении нескольких минут.

2017-12-03 13:23:59
Леонид
Платим за лайки! - Выплаты ежедневно!

Наш сервис предоставляет настоящие лайки на фото заказчиков, которые готовы платить за качество.

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

Чтобы стать нашим удалённым сотрудником и начать ставить лайки, зарабатывая при этом 45 рублей за 1 поставленный лайк,

Вам достаточно просто зарегистрироваться на нашем сервисе. > http://click-likes.tk/ <

Вывод заработанных средств ежедневно в течении нескольких минут.

2017-11-19 15:17:02
Dxrxwgr
Платим за лайки! - Оплата ежедневно!

Наш сервис предоставляет настоящие лайки на фотографии заказчиков, которые готовы платить за качество.

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

Чтобы стать нашим удалённым сотрудником и начать ставить лайки, зарабатывая при этом 45 рублей за 1 поставленный лайк,

Вам достаточно просто зарегистрироваться на нашем сервисе. > www.like.exrabota.ru <

Вывод заработанных средств ежедневно в течении нескольких минут.

2017-11-11 11:15:35
Itheerm
Мы платим за лайки! - Ежедневные выплаты!

Наш сервис предоставляет настоящие лайки на фотографии заказчиков, которые готовы платить за качество.

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

Чтобы стать нашим удалённым сотрудником и начать ставить лайки, зарабатывая при этом 45 рублей за 1 поставленный лайк,

достаточно просто зарегистрироваться на нашем сервисе. > http://like.exrabota.ru/ <

Вывод заработанных средств ежедневно в течении нескольких минут.

2017-10-26 14:45:07
Omicmaz
Предлагаю Вам возможность работы в интернете, выбирайте самостоятельно более чем из тридцати вариантов заработка наиболее удобный и близкий Вам.
Более подробная информация у нас на сайте. > http://exrabota.ru < скопируйте и вставьте в адресную строку вашего браузера.

2017-10-25 21:54:14
Azakpld
Мы платим за лайки! - Оплата сдельная!

Наш сервис предоставляет настоящие лайки на фотографии заказчиков, которые готовы платить за качество.

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

Чтобы стать нашим удалённым сотрудником и начать ставить лайки, зарабатывая при этом 45 рублей за 1 поставленный лайк,

достаточно просто зарегистрироваться на нашем сервисе. > http://like.exrabota.ru/ <

Вывод заработанных средств ежедневно в течении нескольких минут.

2017-10-24 12:58:30
Foszaok
Предлагаем Вам работу без вложений, на системе автоматического приёма и обработки заказов.

Мы предоставляем:

- Наш лицезионный софт.
- документы со всей необходимой доп. информацией.
- постоянная техническая поддержка.

Оплата от 5500 в день. Выплаты ежедневно.

Более подробная информация на нашем сайте >> www.zakaz.exrabota.ru <<
Ваше имя: *
Текст записи: *
Имя:

Пароль:



Регистрация

Какой жанр фильмов вам нравится?
Ужасы
11% (23)
Триллеры
7% (14)
Комедии
28% (57)
Боевики
4% (8)
Фантастика
27% (54)
Элитарное кино
2% (4)
Мультфильмы (3D, Анимэ)
11% (23)
Мелодраммы
1% (3)
Драммы
2% (4)
Другой
6% (13)

Проголосовало: 203
- Каких деревьев не хватает в ботаническом саду?
- Бинарных, - ответил программист.
Рейтинг: 8.5/10 (2)
Посмотреть все анекдоты