Как сделать html форму?

Чтобы организовать взаимодействие сайта с посетителем в его страницах надо предусмотреть возможности для ввода информации и отправки ее на сервер. Для этого в языке описания веб-страниц HTML (HyperText Markup Language - «язык разметки гипертекста») предусмотрен специальный набор тегов. Что это за теги и как, пользуясь ними создать в странице веб-форму для заполнения посетителем?

Вам понадобится

• Базовое знание языка HTML

Инструкция

HTML-теги, которые сообщают браузеру, что в этом месте страницы необходимо отобразить форму и ее элементы, размещаются в коде между открывающим тегом и закрывающим . Открывающий тег должен содержать обязательную информацию - атрибуты, сообщающие куда именно надо отправить информацию из формы и каким методом нужно это сделать. Кроме того, если страница содержит больше одной формы, то каждая должна иметь собственное имя. С учетом всего этого открывающий тег может выглядеть так:Здесь атрибут "name" - имя формы, атрибут "method" задает способ отправки данных (возможны методы POST либо GET), а атрибут "action" должен указывать URL скрипта на сервере, которому надо отправить данные из формы. Если адрес не указывать, то данные будут переданы на URL этой же самой страницы. Как правило, такие интерактивные страницы формируются универсальными скриптами, которые обеспечивают и получение / обработку данных из этой же самой страницы.

После открывающего тега формы нам следует разместить элементы формы, которые больше подходят для ввода пользователем нужного типа данных. Такими элементами могут быть:Текстовое поле ввода:Здесь, как и во всех остальных тегах "input", атрибут "type" задает тип элемента, "name" - имя переменной, которое будет отправлено вместе с введенными в это поле данными, а "value" - это значение по умолчанию, которым будет заполнено тестовое поле ввода. --Поле ввода пароля:--Поле для «метки с галочкой»:Здесь наличие атрибута "checked" означает, что по умолчанию галочка там будет стоять.--Группа переключателей, из которых нужно выбрать только один:

Обратите внимание - у всех элементов группы должно быть одинаковое имя (name), но разные значения (value). На сервер будет передано только одно значение - то, которое отметит посетитель или то, что было выбрано по умолчанию (атрибутом checked).--Выпадающий список:

Поле первое

Поле второе

Поле третье

Здесь каждый тег "option" - строка в выпадающем списке. Как и для группы переключателей на сервер будет передано только одно значение из поля, выбранного посетителем, либо выбранного по умолчанию (здесь - атрибутом selected).--Многострочное текстовое поле:Здесь многострочный текстАтрибуты "cols" и "rows" задают ширину (в знаках) и высоту (в строках) поля для ввода текста.--Скрытое поле:Это поле не будет видно заполняющему форму, но тоже будет отправлено вместе с остальными данными.--Поле выбора файла для отправки:Отправка файла требует, чтобы в открывающем форму теге были дополнительные атрибуты. Как минимум, следует добавить тег "enctype". Например, так:--Кроме этого в форму можно поместить кнопки - для очистки введенных в форму данных:и для отправки заполненной формы на сервер:Значение, указанное в атрибуте "value" для кнопок - это надпись на самой кнопке.

В самом простом варианте html-код веб-формы в сборе может быть таким:

Введите текст сообщения

Выглядеть в браузере он будет так:

Оцените статью!