• Как заработать на сайте
  • Как заработать в интернете
  • Инвестиции в интернете
  • Партнерские программы
  • Рейтинг парт. программ
  • SEO продвижение
  • Вопросы и ответы
  • Термины оптимизатора
  • HTML-уроки
  • Интернет
  • Мои услуги
  • Реклама на сайте
  • Обратная связь
‘тоимость баннера за месяц: 30$ (подробности)
Главная → HTML уроки и советы → HTML <form> — формы в html

HTML <form> — формы в html

Формы встречаются в интернете почти на каждом сайте. Например, когда Вы вводите логин и пароль на сайте, то данные заполняются через формы и отправляются на сервер. Также примером формы являются различные опросы.


Синтаксис тега <form>

<form action="URL" method="POST/GET"> <input type="name1"> <input type="name2"> ... </form>

Тег <form> имеет очень важный атрибут action, которому присваивается адрес (URL) скрипта, которому передается полученная информация с формы для обработки. Мы не будем углубляться в подробности того, что происходит после отправки данных, поскольку эти вопросы уже решает не html, а методы GET и POST в PHP.


Пример 1. Форма html с кнопками

<html> <body> <form action="" method="POST"> Это будут кнопки: <br/><input type="radio" name="answer" value="a1">Кнопка один <br/><input type="radio" name="answer" value="a2">Кнопка два <br/><input type="radio" name="answer" value="a3">Кнопка три <br/>А это будет текстовое поле. Например сюда можно вводить логин <br/><input type="text" name="login" style="width:400px;" value="Значение по умолчанию"> <br/>А это будет большое текстовое поле. Например сюда можно ввести информацию о себе <br/><input style="width:400px; height:150px" type="textarea" name="osebe" value=""> <br/>После всего перечисленного будет кнопка ОК <br/><input type="submit" value="OK"> </form> <br/>После нажатия кнопки ОК, страница просто обновится, т.к. мы не прописали параметр action </body> </html>


Преобразуется на странице в следующее:

Это будут кнопки:
Кнопка один
Кнопка два
Кнопка три
А это будет текстовое поле. Например сюда можно вводить логин

А это будет большое текстовое поле. Например сюда можно ввести информацию о себе

После всего перечисленного будет кнопка ОК

После нажатия кнопки ОК, страница просто обновится, т.к. мы не прописали параметр action

Пояснения к примеру

  • action="" — говорит о том, что обработка данных будет происходить на этой же странице.
  • <input type="radio" name="answer" value=""> — атрибут type="radio" говорит о том, что нужно отобразить текст после этого кода, как кнопку выбора. Атрибут name и value в данном теге для нас сейчас играют маленькую роль, т.к. мы не изучаем сейчас php (см. уроки php).
  • <input type="text" name="poletext" value=""> — атрибут type="text" говорит о том, что это будет текстовое поле. Здесь так же есть два важных атрибута: name (для php) и value (значение по умолчанию).
  • <input type="textarea" name="opisanie" value=""> — атрибут type="textarea" говорит о том, что это будет большое текстовое поле. Разница от предыдущего случая лишь в том, что он позволяет записывать большой объем текста.
  • <input type="submit" value=""> — атрибут type="submit" говорит о том, что это кнопка. В атрибуте value пишется то, что будет написано на кнопке.

Более подробно про все эти элементы можно прочитать в 15 уроке: элементы тега <form>, где рассмотрены радиокнопки, списки, флажки, текстовые поля, кнопки.

Теперь рассмотрим подробно все атрибуты тега <form>.


Атрибуты и свойства тега <form>

1. Атрибут accept-charset="Кодировка" — определяет кодировку, в которой сервер может принимать и обрабатывать данные формы. Может принимать различные значения, например, CP1251, UTF-8 и т.п.


2. Атрибут action="URL" — адрес скрипта, который обрабатывает передаваемые данные от формы. Если оставить это значение пустым, то данные будут обрабатываться в этом же документе, где расположена форма.


3. Атрибут autocomplete="on/off" — задает или отключает автозаполнение формы. Может принимать два значения:

  • on — включить автозаполнение;
  • off — выключить автозаполнение;

4. Атрибут enctype="параметр" — задает способ кодирования данных. Может принимать следующие значения:

  • application/x-www-form-urlencoded — вместо пробелов ставится +, символы вроде русских букв кодируются их шестнадцатеричными значениями
  • multipart/form-data — данные не кодируются
  • text/plain — пробелы заменяются знаком +, буквы и другие символы не кодируются.


5. Атрибут method="POST/GET" — задает метод отправки. Может принимать два значения:

  • GET — передача данных в адресной строке (есть ограничение по объёму отправки данных)
  • POST — посылает на сервер данные в запросе браузера (может отправить большое количество данных, т.к. нету ограничения объёма)

Более подробное описание методов передачи через GET и POST читайте в уроках по PHP: использование методов GET и POST.


6. Атрибут name="имя" — задает имя формы. Чаще всего используется в случае наличия множества форм для того, чтобы можно было обратиться к конкретной форме через скрипт.


7. Атрибут novalidate — отменяет встроенную проверку данных формы на корректность ввода.


8. Атрибут target="параметр" — имя окна или фрейма, куда обработчик будет загружать возвращаемый результат. Может принимать следующие значения:

  • _blank — загружает страницу в новое окно браузера
  • _self — загружает страницу в текущее окно
  • _parent — загружает страницу во фрейм-родитель
  • _top — отменяет все фреймы и загружает страницу в полном окне браузера


Уважаемый читатель, теперь Вы узнали гораздо больше о html теге form. Теперь советую перейти к следующему уроку.

Ссылка на следующий урок: Урок 9. HTML тег div - подробное описание с примерами



Читайте также:
• Пример создание простой html страницы
• Самые основные html теги
• HTML тег <style> - подробное описание с примерами
• HTML тег <a> - подробное описание с примерами
• Коды символов для HTML
• Коды и названия html цветов для сайта
• HTML тег <table> - подробное описание с примерами
• HTML тег <img> - подробное описание с примерами

← Перейти в каталог html уроков и советов

Основные разделы
  • Главная
  • Партнерские программы
  • Рейтинг партнерских программ
  • Статьи про SEO
  • Термины SEO
  • Описание бирж
  • HTML-уроки и советы
  • CSS-уроки
  • Биткоины
  • PHP-уроки
  • Бинарные опционы
  • Социальные сети
  • Обзоры систем
  • Все про CMS
  • Реклама в интернете
Важно
  • Продвижение сайта
  • Аудит внутренней оптимизации
  • Куплю Ваш сайт
  • Куплю Вашу подпись на форуме
  • Подписаться на рассылку
  • Реклама на сайте
  • Карта сайта
  • Обратная связь
© 2010-2025 - Zarabotat-Na-Sajte.ru