Веб-компас сайтостроителей
Формы в HTML
Очень часто нужно получить какие-либо данные от пользователя, например, логин, пароль и E-mail при регистрации посетителя на сайте. Для этого используются формы HTML, с помощью которых можно передавать текстовые данные и файлы. Формы создаются с помощью тега <form> и обязательного закрывающего тега </form>. В теге <form> желательно указывать следующие атрибуты
action - этот атрибут определяет URL-адрес скрипта, который получит данные с этой формы. Например, action="avtoriz.php". Если указать "пустой" адресат (то есть action=""), то браузер отправит данные формы этому же файлу, в котором и создана форма.
method - атрибут задает способ отправки данных на сервер. При значении "get" данные будут добавлены к URL-адресу скрипта, к которому и отправляются данные. В этом случае они будут видны в адресной строке браузера, что не очень хорошо, так как их сможет увидеть пользователь. Но еще есть ограничения на длину передаваемых данных, обусловленные допустимым количеством символов в адресной строке браузера. При значении "post" данные будут отправлены виде блока данных, которые не будут видны пользователю. Также объем данных в этом случае практически ни чем не ограничен. Поэтому очень часто используют именно метод "post".
Приведу пример формы
В данном случае данные будут отправлены скрипту avtoriz.php находящемся в том же каталоге, что и файл с данной формой, методом POST.
Так же в теге <form> может быть указан атрибут enctype, который задает тип содержимого, используемый для отправки данных формы на сервер. По умолчанию для этого атрибута используется значение "application/x-www-form-urlencoded". Если в форме передается файл (в форме есть элемент INPUT с атрибутом type="file", об этом будет написано далее) должно использоваться значение "multipart/form-data".
Тег <form> в принципе задает лишь "границы" и настройки формы, а элементы для ввода данных создаются другими тегами. И все теги создающие элементы для ввода данных должны быть расположены в коде HTML внутри формы описанной тегом <form>. Существует несколько типов элементов для ввода данных, начнем с элементов, которые можно создать тегом INPUT.
С помощью тега INPUT можно также создавать несколько типов элементов для ввода данных, задавая соответствующее значение атрибута type.
Поле для ввода текста
Для создания однострочного текстового поля нужно использовать значение атрибута type="text". Ширину поля можно задать как атрибутом size, так и с помощью каскадных таблиц стилей, используя свойство width (также можно применять и другие свойства CSS, например, height). Атрибут name задает имя поля, по которому скрипт на сервере определит данные введенные в это поле. Атрибут value задает начальное значение, которое будет записано в это текстовое поле. Ограничить количество символов вводимых пользователем в это поле можно атрибутом maxlength. Приведу пример
Поле для ввода пароля
Поле для ввода пароля аналогично полю для ввода текста, только все вводимые символы представляется на экране монитора различными спецсимволами (например, звездочками - "*"), для маскировки введенного текста от случайных наблюдателей. Создается такое поле атрибутом type="password" тега INPUT.
Переключатели
Создать группу элементов переключатели можно используя значение атрибута type="radio" в теге INPUT. Причем поля одной группы должны иметь одинаковое значение атрибута name. В одной группе переключателей пользователь сможет выбрать только одну кнопку, то есть переключатели используются, когда надо выбрать одно из нескольких значений. И на сервер отправится значение value выбранной кнопки, а найти ее на сервере можно будет по значению атрибута name. Приведу пример одной группы переключателей
Выбрать одно поле по умолчанию, можно используя атрибут CHECKED.
Для "привязки" текста пояснения к полю нужно использовать тег <label>, причем в атрибуте for следует указать идентификатор (id) соответствующего поля. Например
При просмотре этого примера, Вы увидите, что поле с меткой "Сидеть в интернете" будет уже выбрано.
Флажки
С помощью флажков можно организовать список, в котором каждый пункт можно либо выбрать, либо отменить выбор. При этом можно выбрать либо несколько пунктов, либо все пункты списка, либо ни одного. Создаются флажки атрибутом type="checkbox" элемента INPUT. Также должны быть атрибуты name и value. При отправке формы к данным будут добавлены поля выбранных флажков в виде значения атрибутов name и value. Например
Для указания выбранного элемента можно использовать атрибут checked. Точно также как и при использовании переключателей можно использовать для "привязки" поясняющего текста тег <label>.
Поле выбора файла
Вместе с данными формы можно передавать также и содержимое файлов. Для выбора файла можно создать поле выбора файла с помощью атрибута type="file" тега INPUT. В этом случае будет отображено текстовое поле, для ввода имени файла и кнопка, при нажатии на которую появится окно выбора файла. После выбора файла в этом окне, его имя будет автоматически введено в текстовое поле. Приведу пример
Кнопка отправки данных формы
Создать кнопку для отправки данных формы можно с помощью атрибута type="submit" тега INPUT. Надпись на кнопке можно задать атрибутом value. Также данный элемент может иметь атрибут name. Например
При нажатии на кнопку сброса все поля формы принимают исходные значения (значения по умолчанию). Создается кнопка сброса атрибутом type="reset" тега INPUT. Надпись на кнопке можно задать атрибутом value. Например
Кнопка произвольного назначения
Подобные кнопки по умолчанию не производят ни каких действий. Таким кнопкам нужно прописывать обработчики событий на клиентских языках программирования, обычно для этого используют JavaScript. Такие кнопки создаются при помощи атрибута type="button" тега INPUT. Надпись на кнопке задается атрибутом value. Также такие кнопки могут содержать атрибут name. Например
Скрытые поля формы
Скрытые поля формы не отображаются на экране монитора, но значения таких полей передаются вместе с остальными данными формы серверу. Поля такого типа используются для передачи данных между клиентом и сервером, которые ненужно видеть пользователю. Создаются скрытые поля формы с помощью атрибута type="hidden" тега INPUT. Например
С помощью тега <textarea> и его обязательного закрывающего тега </textarea> можно создать многострочное поле для ввода текста. Атрибутом rows можно задать число строк текстового поля. Атрибутом cols можно задать ширину текстового поля, выраженную шириной среднего символа.
Например
Текст, находящийся между открывающим тегом <textarea> и закрывающим тегом </textarea>, будет трактоваться как содержимое текстового поля по умолчанию.
С помощью тега SELECT создаются раскрывающиеся списки.
Для создания раскрывающегося списка используется тег <select> с обязательным закрывающим тегом </select>. Каждый пункт списка создается тегом <option> и закрывающим тегом </option>. Значение атрибута value выбранного пункта списка будет передано на сервер при отправке данных формы. Приведу пример
Значение атрибута size в теге SELECT определяет количество одновременно отображающихся строк в списке. Если значение атрибута size будет больше 1, то браузер вместо раскрывающегося списка отобразит прокручиваемый список, с элементами управления (при необходимости). Атрибут multiple в теге SELECT допускает одновременно выбрать несколько пунктов из списка.
action - этот атрибут определяет URL-адрес скрипта, который получит данные с этой формы. Например, action="avtoriz.php". Если указать "пустой" адресат (то есть action=""), то браузер отправит данные формы этому же файлу, в котором и создана форма.
method - атрибут задает способ отправки данных на сервер. При значении "get" данные будут добавлены к URL-адресу скрипта, к которому и отправляются данные. В этом случае они будут видны в адресной строке браузера, что не очень хорошо, так как их сможет увидеть пользователь. Но еще есть ограничения на длину передаваемых данных, обусловленные допустимым количеством символов в адресной строке браузера. При значении "post" данные будут отправлены виде блока данных, которые не будут видны пользователю. Также объем данных в этом случае практически ни чем не ограничен. Поэтому очень часто используют именно метод "post".
Приведу пример формы
Код
<form action="avtoriz.php" method="post">
...
</form>
В данном случае данные будут отправлены скрипту avtoriz.php находящемся в том же каталоге, что и файл с данной формой, методом POST.
Так же в теге <form> может быть указан атрибут enctype, который задает тип содержимого, используемый для отправки данных формы на сервер. По умолчанию для этого атрибута используется значение "application/x-www-form-urlencoded". Если в форме передается файл (в форме есть элемент INPUT с атрибутом type="file", об этом будет написано далее) должно использоваться значение "multipart/form-data".
Тег <form> в принципе задает лишь "границы" и настройки формы, а элементы для ввода данных создаются другими тегами. И все теги создающие элементы для ввода данных должны быть расположены в коде HTML внутри формы описанной тегом <form>. Существует несколько типов элементов для ввода данных, начнем с элементов, которые можно создать тегом INPUT.
С помощью тега INPUT можно также создавать несколько типов элементов для ввода данных, задавая соответствующее значение атрибута type.
Поле для ввода текста
Для создания однострочного текстового поля нужно использовать значение атрибута type="text". Ширину поля можно задать как атрибутом size, так и с помощью каскадных таблиц стилей, используя свойство width (также можно применять и другие свойства CSS, например, height). Атрибут name задает имя поля, по которому скрипт на сервере определит данные введенные в это поле. Атрибут value задает начальное значение, которое будет записано в это текстовое поле. Ограничить количество символов вводимых пользователем в это поле можно атрибутом maxlength. Приведу пример
Код
Ваше имя: <input type="text" size="10" value="Аноним" maxlength="20" name="name_user">
Поле для ввода пароля
Поле для ввода пароля аналогично полю для ввода текста, только все вводимые символы представляется на экране монитора различными спецсимволами (например, звездочками - "*"), для маскировки введенного текста от случайных наблюдателей. Создается такое поле атрибутом type="password" тега INPUT.
Код
Логин <input type="text" size="10" value="Аноним" maxlength="20" name="name_user"><br>
Пароль <input type="password" size="10" value="" maxlength="20" name="name_passw">
Переключатели
Создать группу элементов переключатели можно используя значение атрибута type="radio" в теге INPUT. Причем поля одной группы должны иметь одинаковое значение атрибута name. В одной группе переключателей пользователь сможет выбрать только одну кнопку, то есть переключатели используются, когда надо выбрать одно из нескольких значений. И на сервер отправится значение value выбранной кнопки, а найти ее на сервере можно будет по значению атрибута name. Приведу пример одной группы переключателей
Код
Ваш пол<br>
<input type="radio" name="pol" value="M">Мужской<br>
<input type="radio" name="pol" value="J">Женский
Выбрать одно поле по умолчанию, можно используя атрибут CHECKED.
Для "привязки" текста пояснения к полю нужно использовать тег <label>, причем в атрибуте for следует указать идентификатор (id) соответствующего поля. Например
Код
<form>
Вам больше всего нравится<br>
<input type="radio" name="test" value="tv" id="test_tv"><label for="test_tv">Смотреть телевизор</label><br>
<input type="radio" name="test" value="int" id="test_int" checked="checked"><label for="test_int">"Сидеть" в интернете</label><br>
<input type="radio" name="test" value="rad" id="test_rad"><label for="test_rad">Слушать радио</label>
</form>
При просмотре этого примера, Вы увидите, что поле с меткой "Сидеть в интернете" будет уже выбрано.
Флажки
С помощью флажков можно организовать список, в котором каждый пункт можно либо выбрать, либо отменить выбор. При этом можно выбрать либо несколько пунктов, либо все пункты списка, либо ни одного. Создаются флажки атрибутом type="checkbox" элемента INPUT. Также должны быть атрибуты name и value. При отправке формы к данным будут добавлены поля выбранных флажков в виде значения атрибутов name и value. Например
Код
Вы хотели бы больше получать информации о<br>
<input type="checkbox" name="info_html" value="v1">HTML<br>
<input type="checkbox" name="info_js" value="v2" checked="checked">JavaScript<br>
<input type="checkbox" name="info_php" value="v3">PHP
Для указания выбранного элемента можно использовать атрибут checked. Точно также как и при использовании переключателей можно использовать для "привязки" поясняющего текста тег <label>.
Поле выбора файла
Вместе с данными формы можно передавать также и содержимое файлов. Для выбора файла можно создать поле выбора файла с помощью атрибута type="file" тега INPUT. В этом случае будет отображено текстовое поле, для ввода имени файла и кнопка, при нажатии на которую появится окно выбора файла. После выбора файла в этом окне, его имя будет автоматически введено в текстовое поле. Приведу пример
Код
Вы можете загрузить рисунок <input type="file" name="img_file">
Кнопка отправки данных формы
Создать кнопку для отправки данных формы можно с помощью атрибута type="submit" тега INPUT. Надпись на кнопке можно задать атрибутом value. Также данный элемент может иметь атрибут name. Например
Код
<form>
...
<input type="submit" value="Поехали" name="submit_form">
</form>
Кнопка сброса
При нажатии на кнопку сброса все поля формы принимают исходные значения (значения по умолчанию). Создается кнопка сброса атрибутом type="reset" тега INPUT. Надпись на кнопке можно задать атрибутом value. Например
Код
<form>
...
<input type="reset" value="Сброс">
<br>
<input type="submit" value="Поехали" name="submit_form">
</form>
Кнопка произвольного назначения
Подобные кнопки по умолчанию не производят ни каких действий. Таким кнопкам нужно прописывать обработчики событий на клиентских языках программирования, обычно для этого используют JavaScript. Такие кнопки создаются при помощи атрибута type="button" тега INPUT. Надпись на кнопке задается атрибутом value. Также такие кнопки могут содержать атрибут name. Например
Код
<input type="button" value="Проверить" name="control">
Скрытые поля формы
Скрытые поля формы не отображаются на экране монитора, но значения таких полей передаются вместе с остальными данными формы серверу. Поля такого типа используются для передачи данных между клиентом и сервером, которые ненужно видеть пользователю. Создаются скрытые поля формы с помощью атрибута type="hidden" тега INPUT. Например
Код
<input type="hidden" name="set_form" value="new">
Следующим тегом для создания элементов ввода данных, который мы рассмотрим, будет тег TEXTAREA.
С помощью тега <textarea> и его обязательного закрывающего тега </textarea> можно создать многострочное поле для ввода текста. Атрибутом rows можно задать число строк текстового поля. Атрибутом cols можно задать ширину текстового поля, выраженную шириной среднего символа.
Например
Код
<textarea cols="30" rows="10" name="massiv_text">Тут можно ввести какой-либо другой текст</textarea>
Текст, находящийся между открывающим тегом <textarea> и закрывающим тегом </textarea>, будет трактоваться как содержимое текстового поля по умолчанию.
С помощью тега SELECT создаются раскрывающиеся списки.
Для создания раскрывающегося списка используется тег <select> с обязательным закрывающим тегом </select>. Каждый пункт списка создается тегом <option> и закрывающим тегом </option>. Значение атрибута value выбранного пункта списка будет передано на сервер при отправке данных формы. Приведу пример
Код
<form>
Выберите тему, которая Вам наиболее интересна<br>
<select name="tema" size="1">
<option value="tema_wd">Веб-дизайн</option>
<option value="tema_wp">web-программирование</option>
<option value="tema_rs">продвижение сайтов</option>
</select>
</form>
Значение атрибута size в теге SELECT определяет количество одновременно отображающихся строк в списке. Если значение атрибута size будет больше 1, то браузер вместо раскрывающегося списка отобразит прокручиваемый список, с элементами управления (при необходимости). Атрибут multiple в теге SELECT допускает одновременно выбрать несколько пунктов из списка.
- Статью добавил пользователь
- Категория
- Дата размещения 18.09.2008, просмотров 9258
Еще статьи из данной категории
Предыдущие статьи
Комментарии к публикации
Комментариев к публикации нет...
Добавить комментарий
Новости сайта
-
05.05.2022Уважаемые пользователи, наш сайт переехал на новый домен, но все материалы останутся без изменений.
-
06.04.2020Уважаемые пользователи, сегодня был обновлен наш сайт www.linedmk.com – сделан новый адаптивный дизайн, улучшена навигация по сайту и улучшен поиск по статьям.
-
12.10.2012С сегодняшнего дня официально прекращена поддержка продуктов реализованных на CMS linedmk.com.
Последние публикации в каталоге статей
Партнеры сайта
Современный бесплатный скрипт интернет-магазина на CMS boxcode.ru.