Формы в HTML - это самая сложная, но с другой стороны, пожалуй самая интересная тема в HTML.
Веб-формы позволяют посетителям сайта внести в специальные поля ту или иную информацию, а разработчику ее получить в удобном для него виде.
Примером формы может служить гостевая книга, анкета, онлайн тест. Формы заполняют при регистрации на сайте, при оформлении заказов в интернет магазине и т.п.
Пользуясь HTML, Вы можете создать каркас формы: текстовые поля, меню, списки, кнопки, флажки и переключатели. То есть те элементы, при помощи которых в форму вносится определенная информация.
Затем данные, внесенные в форму, отправляются на сервер для обработки. Но HTML здесь бессилен - над обработкой формы уже работает программа или скрипт, который к ней привязывается. Такие программы обычно пишут на языке php или javascript.
Атрибуты формы - тег
.
Атрибут action
является обязательным для любой формы - он указывает адрес к файлу, который обслуживает форму (обрабатывает внесенные в нее данные
).
Атрибут method
определяет способ отправки содержимого формы. Существует два метода - GET
и POST
. Сейчас не имеет смысла вникать в эти параметры, так как тема отправки информации методами GET
и POST
относится к языкам обработки данных (например, PHP
). Достаточно знать, что именно метод передачи данных POST
в большинстве случаях используется в формах.
Атрибут name
тега
Сторона света - одно из четырех основных направлений:
7 Чудес света!
Сторона света - одно из четырех основных направлений:
Север
Юг
Запад
Восток
7 Чудес света!
Пирамида Хеопса
Висячие сады Семирамиды
Статуя Зевса в Олимпии
Храм Артемиды в Эфесе
Мавзолей в Галикарнасе
Колосс Родосский
Александрийский маяк
Многострочное текстовое поле - тег
Тег
Атрибут name
тега
Атрибут disabled
блокирует поле - содержимое поля нельзя изменить и оно недоступно. Атрибут readonly
говорит о том, что поле предназначено только для чтения - пользователь не имеет возможность редактировать содержимое, но оно доступно - его можно выделить и, например, скопировать.
Можно задать ширину текстового поля в символах и высоту поля в строках при помощи атрибутов cols
и rows
соответственно.
Если содержимое поля превысит его размеры - появится бегунок.
Пример использования формы
Теперь давайте посмотрим: как работает форма.
Форма заказа обучающего видеоматериала:
Ваше имя: *
Ваш заказ:
Выберите носитель:
CD
DVD
USB Flash
Ваш E-mail: *
Ваш адрес: *
В прошлом видео уроке мы узнали как сделать выпадающий список в HTML . Изучили несколько тегов и посмотрели, как все это работает на живых примерах.
Сегодня изучим еще пару тегов и их атрибуты. Узнаем, как в форму добавить поле для ввода многострочного текста. И поговорим об еще одном способе добавления кнопок в HTML-форму.
HTML-тег textarea: Многострочный текст.
Тег
Также стоит отметить, что HTML-тег
имеет два обязательных HTML-атрибута , которые мы должны использовать всегда. Это атрибуты, которые отвечают за размеры поля.
Атрибут cols отвечает за ширину поля измеряемую количеством символов, которые можно написать в одну строку. А после того как количество символов достигнет максимума, который указан в атрибуте cols , будет начата новая строка. Кроме того при указании ширины само поле сразу обретет размер указанный в символах.
Атрибут rows отвечает за высоту поля измеряемую количеством строк. Но здесь стоит отметить, что если количество текста превысит указанное количество строк, это не означает, что мы не сможем дальше писать, просто появится полоса прокрутки, а видимая область текста будет иметь высоту, указанную в значении атрибута rows .
Пример HTML-кода поля ввода многострочного текста. Не забываем, что этот код должен находиться между тегами
.
HTML-тег button: Кнопки.
HTML-тег
Но существует и второй способ указания кнопок с помощью тега
А в чем разница между этими способами. Все очень просто. HTML-тег
Пример HTML-кода добавления кнопки с использованием тега и значения button атрибута type . Добавляется между тегами
.
Обычная кнопка
Видео урок: Textarea в HTML и тег button. Поле для ввода многострочного текста и кнопки.
HTML-справочник и другие материалы можно и нужно скачать !
В следующем видео продолжим изучение HTML-форм.
Многострочное поле ввода текста позволяет отправлять не одну строку, а сразу несколько. По умолчанию тег создает пустое поле шириной в 20 символов и состоящее из двух строк.
Текст
Многострочное поле ввода текста начинается с парных тегов
. Тэг name задает имя многострочного поля. Также можно указать ширину поля(cols
) и число строк(rows
). При необходимости можно указать атрибут readonly, который запрещает редактировать, удалять и изменять текст, т.е. текст будет предназначен только для чтения. Если необходимо чтобы текст был изначально отображен в многострочном поле ввода, то его необходимо поместить между тэгами
.
Текст, который изначально будет отображен в многострочном поле ввода и который нельзя изменять, т.к. указан атрибут readonly
Скрытое текстовое поле
Позволяет передавать сценарию какую то служебную информацию, не отображая её на странице.
Скрытое поле начинается с тега , атрибуты которого являются name
, type
и value
. Атрибут name задает имя поля, type
определяет тип поля, а атрибут value
задает значение поля.
Кнопка отправки формы (submit)
Служит для отправки формы сценарию.
При создании кнопки для отправки формы необходимо указать 2 атрибута: type=“submit”
и value=”Текст кнопки”
. Атрибут name необходим если кнопка не одна, а несколько и все они созданы для разных операций, например кнопки "Сохранить", "Удалить", "Редактировать" и т.д. После нажатия на кнопку сценарию передается строка имя=текст кнопки
.
Кнопка для загрузки файлов (browse)
Служит для реализации загрузки файлов на сервер. Объект browse начитается с парных тегов
. Начинающий тэг
содержит необходимый атрибут encrypt. Атрибут encrypt
принимает значение multipart/form-data
, который извещает сервер о том, что вместе с обычной информацией посылается и файл. При создании текстового поля также необходимо указать тип файла – “file
”.
Загрузить файл:
Рамка (fieldset)
Объект fieldset
позволяет вам нарисовать рамку вокруг объектов. Имеет закрывающий тэг . Заголовок указывается в тэгах . Основное назначение объекта – задавание различных стилей оформления.
Обработка форм
Все данные, которые вы хотите получить из HTML-формы в PHP сценарий обрабатываются с помощью суперглобальных массивов $_POST
или $_GET
, в зависимости от указанного в атрибуте method
метода передачи данных.
Задача:
Вам необходимо получить данные из текстового поля и многострочного поля ввода и передать их сценарию. Решение:
Необходимо создать HTML форму и PHP – сценарий для обработки формы.
Обсуждение:
Создадим два файла: form.html
и action.php
. В файле form.html
будет содержаться html-форма с текстовым полем mytext
и текстовой областью msg
:
В этой html-форме нас интересует 3 атрибута: action
который указывает путь к обработчику формы, имя текстового поля (mytext
) и имя многострочного поля вода (msg
). Также в форме присутствует кнопка, при нажатии на которую происходит передача данных.
После того как html-форма готова нам необходимо создать обработчик формы action.php
:
После того как мы введем любые значение в текстовые поля и нажмем на кнопку "Отправить данные
" html-форма отправить значения сценарию action.php
. После этого в переменных $text
и $msg
будут содержаться значения текстового поля и многострочного поля ввода соответственно, значения которых взяты из суперглобальных переменных $_POST
.
Если вы хотите, чтобы в многострочном текстовом поле соблюдалось html-форматирование, то используйте функцию nl2br():
$text = nl2br($_POST["mytext"]); ?>
Задача:
Пусть необходимо создать выпадающий список с годами с 2000 по 2050. Решение:
Необходимо создать HTML форму c элементом SELECT и PHP – сценарий для обработки формы.
Обсуждение:
Для начала создадим два файла: form.html
и action.php
. В файле form.html
будет содержаться html-форма с выпадающим списком. Причем значения в списке можно указать двумя способами:
I. Ввод данных вручную:
II. Ввод данных через цикл:
Как видно, второй пример с циклом, более компактный. Думаю, не стоит приводить скрипт обработчика данной формы, потому что он обрабатывается точно так же как текстовое поле, т.е. значения списка можно извлечь из суперглобального массива $_POST
.
Описание:
Создадим HTML-форму для отправки файла на сервер.
В данной html-форме присутствует элемент browse
, который открывает диалоговое окно для выбора файла для загрузки на сервер. При нажатии на кнопку "Передать файл"
, файл передается сценарию-обработчику.
Затем необходимо написать сценарий обработчик action.php
. Перед написание обработчика необходимо определиться в какой каталог мы будет копировать файл:
if(isset($_FILES["myfile"])) // Если файл существует { $catalog = "../image/"; // Наш каталог if (is_dir($catalog)) // Если такой каталог есть { $myfile = $_FILES["myfile"]["tmp_name"]; // Времменый файл $myfile_name = $_FILES["myfile"]["name"]; // Имя файла if(!copy($myfile, $catalog)) echo "Ошибка при копировании файла ".$myfile_name // Если неудалось скопировать файл } else mkdir("../image/"); // Если такого каталога нет, то мы его создадим } ?>
Замечание
Если вы доверяете пользователям закачивать на ваш сервер любые файлы, нужно быть предельно осторожным. Злоумышленники могут внедрить «нехороший» код в картинку или файл и отправить на сервер. В таких случаях нужно жестоко контролировать загрузку файлов.
Данный пример демонстрирует создание каталога и копирование файла в этот каталог на сервер.
Также хотел бы продемонстрировать пример с элементом checkbox
. Этот элемент немного отличается от других элементов тем, что если не один из элементов checkbox
’a не выбран, то суперглобальная переменная $_POST
вернет пустое значение:
Синий Черный Белый
if (!empty($_POST["mycolor"])) echo $_POST["mycolor"]; // Если выбран хоть 1 элемент else echo "Выберите значение"; ?>
Этот элемент формы предназначен для создания области, в которой можно вводить несколько строк текста. В таком текстовом поле допустимо делать переносы строк, они сохраняются при отправке данных на сервер.
Поле для многострочного текста незаменимо для добавления комментариев к статьям, написания сообщений форума, вставки и редактирования постов в блоге и во многих других случаях, когда одной строки текста явно недостаточно.
Синтаксис создания поля следующий.
Текст
Между тегами
и
можно поместить любой текст, который будет отображаться внутри поля. Если текста нет, то поле будет изначально пустым.
Допустимые атрибуты перечислены в табл. 1.
Создание поля многострочного текста показано в примере 6.1.
Ни один из этих атрибутов не является обязательным, поэтому простая форма для отправки текста выглядит так (пример 1).
Пример 1. Текстовое поле
HTML5
IE
Cr
Op
Sa
Fx
Текстовое поле
Введите ваш отзыв:
Результат примера в браузере Chrome показан на рис. 1.
Рис. 1. Вид текстового поля по умолчанию
Дополнительно поле может находиться в двух состояниях - блокированном и только для чтения. Спецификация HTML5 не определяет вид поля и текста в подобных состояниях, поэтому браузеры по-разному его отображают (рис. 2).
Opera
Текст внутри блокированного поля нельзя выделить и добавить, также содержимое такого поля не отправляется формой на сервер. Текст внутри поля для чтения доступен для копирования, но его нельзя отредактировать. В примере 2 показан способ создания поля для чтения.
Пример 2. Поле для чтения
HTML5
IE
Cr
Op
Sa
Fx
Поле для чтения
Скопируйте приведённый текст и вставьте его в
поле запроса пароля.
Мухаха
Учтите, что поле для чтения по своему виду не отличается от обычного текстового поля, но пользователь не сможет в него ничего добавить. Так что используйте его осмотрительно, чтобы не вводить людей в заблуждение.
Данный элемент формы предназначен для создания области, в которой можно вводить несколько строк текста. В таком текстовом поле допустимо делать переносы строк, они сохраняются при отправке данных на сервер.
Поле для многострочного текста незаменимо для добавления комментариев к статьям, написания сообщений форума, вставки и редактирования постов в блоге и во многих других случаях, когда одной строки текста явно недостаточно.
Синтаксис создания поля следующий.
Между тегов
и
можно поместить любой текст, который будет отображаться внутри поля. Если текста нет, то поле будет изначально пустым.
Допустимые атрибуты перечислены в табл. 1.
Табл. 1. Атрибуты
Атрибут
Описание
name
Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.
disabled
Блокирует поле и не отправляет данные на сервер.
form
Идентификатор формы для связывания поля с элементом
.
maxlength
Устанавливает максимальное число символов, которое может быть введено пользователем в поле. Когда это количество достигается при наборе, дальнейший ввод становится невозможным.
readonly
Блокирует поле для ввода текста.
autofocus
Поле получает фокус после загрузки документа.
required
Указывает, что поле является обязательным для заполнения.
placeholder
Добавляет подсказку, которая исчезает при вводе текста.
dirname
Имя переменной, которая отправляется на сервер и автоматически получает значение ltr
(для текста слева направо) или rtl
(для текста справа налево).
rows
Высота поля в строках текста.
wrap
Значение soft
передаёт на сервер текст одной строкой, а hard
учитывает значение cols
и автоматически добавляет переносы.
cols
Ширина поля в символах.
Создание поля для многострочного текста показано в примере 1.
Пример 1. Текстовое поле
Текстовое поле
Введите ваш отзыв:
Результат примера показан на рис. 1.
Рис. 1. Вид текстового поля по умолчанию
Для
действуют те же ограничения, что и для
, а именно:
допустимо вставить произвольный текст и он отобразится внутри текстового поля для редактирования. При этом учитываются все пробелы, в отличие от обычного HTML (пример 2).
Пример 2. Текстовое поле с текстом
Текстовое поле
Отредактируйте ваш отзыв:
КГ/АМ
выпий йаду.
Результат данного примера показан на рис. 2. Обратите внимание, что учитываются все пробелы и переносы строк внутри
.
Рис. 2. Поле с текстом
Как правило, размеры
задаются с помощью стилей, но если одновременно заданы атрибуты rows
и cols
с шириной и высотой через CSS, то стили имеют преимущество и значение атрибутов игнорируется.