css(8) html(19) JavaScript(23) MODx(17) Perl(21) php(20) RegExp(13) SEO(7) гаджеты(1) задачка(9) интернет(35) лытдыбр(10) полезности(35) разное(10) разработка(37) софт(11) тесты(4) юмор(5)

Продолжение статьи о формах. Тег input.

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

Вот возможные значения этого атрибута:

Значение атрибута type	Вид реализуемого элемента управления
Text	Текстовое поле
Password	Поле для ввода пароля
Hidden	Скрытое поле
Button	Кнопка
Submit	Кнопка отправки данных формы
Reset	Кнопка сброса данных формы
Checkbox	Флажок
Radio	Переключатель
File	Выбор файла для загрузки
Image	Кнопка submit в виде изображения

Давайте рассматривать все это многообразие по отдельности.

Type = 'text'

Такое значение атрибута type обеспечивает отображение на странице строки для ввода текста. Вот пример кода такой строки:

<input type='text' name='myline' size='20' maxlength='30' value='привет' />

Данная строка ввода будет шириной примерно в 20 символов (зависит от браузера). Это определяется параметром size. Причем, в этой строке ввода, при загрузке страницы, будет написано слово «привет». Это определил атрибут value.

Атрибут maxlength задает максимальное количество символов, которое можно ввести в эту строку. Это нужно, чтобы предотвратить ввод слишком длинного текста в строку ввода. Если не добавлять этот атрибут, то в строку ввода можно ввести любое количество символов (ну не любое, но достаточно большое).

Атрибут name в данном случае действует так же, как и для всех элементов формы: задает имя параметра, при передаче данных серверному скрипту. Скажем, если ввести в такое поле строку «123», а потом отправить эту форму на сервер, то скрипт получит строку, в которой будет сочетание символов «myline=123». Это позволяет выделить данные этой конкретной строки ввода, среди данных многих строк ввода. Кроме того, элемент name определяет элемент строки ввода в документе. Это может быть использовано в сценариях JavaScript.

Type = 'password'

В пустом виде, поле password не отличается от поля text. Единственная разница между этими полями заключается в том, что при вводе в поле типа password, вместо печатаемых символов в ней отображаются буллиты или звездочки, маскирующие ввод.

Все атрибуты поля text применимы и к полю password. Данные этого поля передаются в незашифрованном виде, точно так же, как и данные поля text. Сокрытие вводимых символов является лишь защитой от того, что вводимый пароль будет прочитан «из-за плеча». Не более.

Type = 'hidden'

Это поле может показаться очень странным. Зачем делать в форме поля, которые невидимы для пользователя и в них ничего нельзя вводить? Все просто. Это поле может быть использовано программистом или верстальщиком, для хранения своих данных.

Например, одна и та же форма может использоваться для добавления данных на сайт, и для редактирования уже существующих данных. Однако, серверная программа должна как-то определять, что же ей делать с пришедшими данными, тем более, что они приходят с одной и той же формы. Можно сделать поле hidden, которое при добавлении материала будет пустым, а при изменении, будет содержать метку, наличие которой будет говорить программе, что нужно не добавлять информацию, а изменять ее.

Type = 'button'

Тег input с таким атрибутом уже будет совсем не похож на строку ввода. Более того, он не позволит напрямую что-то вводить, потому что на экране вы увидите кнопку. Типичная кнопка:

<input type='button' value='Я кнопка' />

Значение атрибута value будет написано на появившейся кнопке. Как правило, такие кнопки применяются в связке с клиентскими сценариями, написанными, например, на JavaScript. Просто кнопка сама по себе, ничего не делает. Вы можете нажать на нее, но ничего не произойдет.

Если снабдить кнопку атрибутом name, то на сервер будет отправлена, помимо всего прочего, еще и пара name=value этой кнопки.

Type = 'submit'

Кнопка, которая появится после задания такого атрибута type – не простая. Она обладает удивительным свойством отправлять данные формы по адресу, указанному в атрибуте action родительского тега form. Пример:

<form action='test.cgi'>
<input type='text' name='test' />
<br/>
<input type='submit' value='Отправить данные'/>
</form>

При нажатии на кнопку данной формы, сценарию test.cgi будет передана пара значений test= «значение поля test».

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

Type = 'reset'

Это – еще одна разновидность отряда кнопочных. Эта кнопка просто очищает все поля формы, в которой находится. Больше и сказать-то про нее нечего.

Type = 'checkbox'

Этот элемент формы – уже нечто совсем иное, нежели строка ввода или кнопка. Внешне, он выглядит как квадратик. Если на квадратик нажать, в нем появится галочка или крестик, обозначающие, что он «включен». В народе такие элементы управления принято называть «флажки» или «галочки». Они служат для двоичного выбора. Например, подписаться на рассылку об ответах в данной теме форума или не подписываться. Запомнить меня при входе, или не запоминать. Альтернативы, состоящие из двух вариантов, лучше всего представлять флажками.

Флажок обычно снабжается подписью. Пользователь интуитивно кликает на подпись к флажку, чтобы выбрать его. Но простой текст рядом с флажком не связан с этим флажком, поэтому флажок оказывается нетронутым и срабатывает только при клике непосредственно на нем. Однако, есть замечательный html-элемент <label></label>, который позволяет связывать сопроводительный текст флажка с самим флажком. Вот пример:

<input type='checkbox' checked='checked' name='mail_me' id='myid' />
<label for='myid'>Присылать почту</label>

В данном случае, мы увидим флажок, а рядом надпись «Присылать почту». Причем, при щелчке на надписи, флажок активизируется. Если удалить теги label, то флажок будет активизироваться только при нажатии непосредственно на него.

Атрибут checked указывает на состояние флажка на момент загрузки страницы. Если атрибут присутствует, то флажок включен. Если отсутствует – выключен.

При пересылке формы, содержащей данный флажок, на сервер придет пара mail_me=1, при включенном флажке, и mail_me=0, при выключенном.

Type = 'radio'

Этот элемент управления чем-то напоминает флажок. Только внешне он не квадратный, а круглый. В народе этот элемент называют «Переключатель», «радиокнопка» или «точка». Почему «радио» - пишут все авторы, кому не лень. Я на этом останавливаться не буду, а сосредоточусь на главном – на отличии этого элемента управления от флажков.

Отличие заключается в том, что для этого элемента управления можно указывать неуникальное имя. Это даст, что из всех радиокнопок с одинаковым именем может быть «включена» только одна. Это нужно для представления взаимоисключающих альтернатив выбора. Напрмер:

Ваш пол:<br/>
<input type='radio' checked' name='sex' id='sex1' value='men'/>
<label for='sex1'>Мужской</label>
<br/>
<input type='radio' name='sex' id='sex2' value='women' />
<label for='sex2'>Женский</label>
<br/>
<input type='radio' name='sex' id='sex3' value='unknown'/>
<label for='sex3'>Не скажу;)</label>
<br/>

Если выполнить этот html-код в браузере, мы увидим формочку, которая состоит зи трех радиокнопок и подписей. Формочка предлагает вам указать ваш пол. Вы можете сказать, что вы мужчина, ЛИБО женщина, ЛИБО не указывать пол. При этом, вы не можете быть одновременно мужчиной и женщиной, или мужчиной и «не определившимся». Эта группа радиокнопок описывает взаимоисключающие альтернативы.

При отправке формы, на сервер придет только пара name=value включенной, на момент отправки, радиокнопки.

Type = 'file'

Этот элемент управления представляет собой строку ввода и кнопку «Обзор...». Он используется для указания файла, который должен быть передан на сервер. Вы можете вручную вводить путь к файлу на локальном компьютере, либо воспользоваться стандартным диалогом операционной системы, для выбора этого файла с комфортом:) После выбора файла, путь к нему отобразится в строке ввода.

Для передачи файла, нужно обязательно использовать метод передачи POST и кодирование enctype='multipart/form-data'. Метод GET не может передавать большие объемы информации, а стандартный метод кодирования не позволяет выделить принятый файл из потока входящей информации.

Type = 'image'

Иногда хочется навести красоты. Html позволяет сделать кнопку submit в виде изображения. Для этого нужно задать значение равное image атрибуту type. Пример:

<input type='image' src='./images/submit.jpg' />

Эта кнопка будет отображаться в виде изображения, находящегося по адресу, заданному в атрибуте src. После нажатия на эту кнопку, на сервер так же, передадутся координаты, относительно кнопки, в которых был произведен клик. Это может быть использовано в целях обеспечения определенной степени безопасности.

Закончим о теге <input/>

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

• С чего начать изучение html?
• Основы html. Общие правила. Блочные и строчные элементы.
• Основы html 2. Абзацы, списки, заголовки.
• Основы html 3. Таблицы.
• Основы html 4. Ссылки.
• Основы html 5. Формы.
• Основы html 6. Формы (продолжение).
• Основы html 7. textarea.

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