Создать html форму – Создание HTML-форм и присоединение поведений JavaScript к объектам форм

Создание форм. Урок HTML

Содержание:

Основным элементом для создания форм в HTML служит тег Form, а самая простейшая форма имеет два текстовых поля и кнопку. Ничего сложного в создании такой формы нет, а мы будем использовать её в качестве рабочего примера:

Стоит отметить, что более сложные формы могут также иметь текстовые области — расширенные текстовые поля; чекбоксы — переключатели, где галочкой отмечается согласие со значением пункта; радио-кнопки, которые служат для выбора одного из предложенных вариантов. Рассмотрим эти элементы ниже.

Если научиться делать простую форму, то и сложную сделать будет не намного труднее — разница будет заключаться в нескольких добавочных строчках.

Вот так будет выглядеть каркас нашей формы:

                
<form action="http://smartresponder.ru/subscribe.html?ref=regg" method="post" name="Любое" target="_blank">
...
</form>

Его нужно рассмотреть отдельно, потому что тег Form имеет два обязательных атрибута, которые должны присутствовать в любой форме:

1. action — адрес обработчика данных формы. Это может быть локальный скрипт на вашем сайте, а в данном примере — это URL сервиса рассылок.
2. method — определяет метод запроса данных: «post» — закрытая передача данных через запрос браузера, он наиболее распространённый. Метод «get» подразумевает открытую передачу данных через адресную строку браузера и используется реже.
3. name — необязательный атрибут, который задаёт название формы. Актуально при использовании нескольких форм, или, если имя формы необходимо для работы определённого скрипта.
4. target — необязательный атрибут, при значении «_blank» загружает URL обработчика данных в новой вкладке браузера.

Создание элементов формы

Для создания элементов формы используется незакрывающийся тег Input с обязательным атрибутом type, который имеет множество значений (см. Справочник HTML — Input).

Нам же для создания двух текстовых полей понадобятся два тега Input со значением «text» атрибута type. А для создания кнопки — парный тег Button, где у атрибута type — значение «submit», которое будет отправлять данные обработчику:

                
<form action="http://smartresponder.ru/subscribe.html?ref=regg" method="post" target="_blank">
<input type="text" name="field_name_first" placeholder="Ваше Имя">
  <input type="text" name="field_email" placeholder="Ваш E-mail">
  <button type="submit" name="lead_subscribe">Получить бесплатно!</button>
</form>

Вот что означают атрибуты тега Input в нашей форме:

1. type — значение «text» означает текстовое поле. Значение «password» — текстовое поле для ввода пароля с отображением звездочек; «range» — ползунок; «reset» — кнопка сброса и др. (подробнее: Справочник HTML — Input).
2. name — имя полей.
3. placeholder — видимый текст в поле формы, при наведении фокуса — исчезает. Как вариант: атрибут value — значение по умолчанию, при сбросе пользователем введённых данных — восстанавливается первоначальная текстовая надпись.

Вот как будет выглядеть готовая форма, если её поместить в контейнер Div и выравнять по центру:

Читайте инструкцию о том, как сделать красивую форму подписки для JustClick и Smartresponder — с лёгким кодом, используя стили CSS.

Чекбоксы и кнопки

Для создания чекбоксов и радио-кнопок также используется тег Input, разница только в значениях атрибута type:

                
<form action="URL" method="post">
 <input type="checkbox" name="box" value="1">Поставьте галочку, если согласны
<input type="radio" name="radiobutton" value="1">Красный
  <input type="radio" name="radiobutton" value="2">Жёлтый
  <input type="radio" name="radiobutton" value="3">Зелёный
</form>

Имена (значения атрибута name) у тегов произвольные, но для радио-кнопок одной группы они должны совпадать. Визуальный результат:

Атрибуты name и value не являются обязательными, а используются при обработке данных формы с помощью скриптов, к примеру, это может быть JavaScript.

Осталось узнать о двух тегах, которые используются для создания сложных форм: Textarea и Select.

Текстовая область

Чтобы сделать текстовую область, куда допустимо ввести текст из нескольких строк с сохранением переносов, используем тег Textarea:

                
<form action="URL" method="post">
 <textarea rows="5" cols="30">Ваша биография</textarea>
</form>

Атрибуты rows и cols являются обязательными для версий ниже HTML5 и задают число строк и их общую длину. Получаем следующую текстовую область, которая может вмещать 5 строк по 30 символов в каждой:

Ваша биография

Создание выпадающего списка

Для создания выпадающего списка используем тег Select, а для его отдельных элементов тег Option:

                
<form action="URL" method="post">
<select name="forscript">
      <option value="1">Элемент 1</option>
      <option value="2">Элемент 2</option>
      <option value="3">Элемент 3</option>
      <option value="4">Элемент 4</option>
  </select>
</form>

Атрибуты обоих тегов не обязательны. Однако, атрибут value — задает значение для пары «Имя=Значение» отправляемого обработчику (например: JavaScript), а имя — это значение атрибута name тега Select. Таким образом, значение переменной forscript будет forscript=1 или forscript=2 и т.д.

Получаем выпадающий список из 4-х элементов:

Элемент 1Элемент 2Элемент 3Элемент 4

Содержание:

Создание HTML-форм и присоединение поведений JavaScript к объектам форм

а. Чтобы выбрать форму, щелкните контур формы в окне документа.

б. В поле «Имя формы» введите уникальное имя, по которому можно будет идентифицировать форму.

Присвоив форме имя, вы сможете ссылаться на нее или контролировать ее, используя язык сценариев, например JavaScript или VBScript. Если не присвоить форме имя, Dreamweaver автоматически генерирует имя, используя синтаксис formn, увеличивая значение n для каждой добавляемой на страницу формы.

в. В поле «Действие» укажите страницу или сценарий, в котором будут обрабатываться данные формы, указав путь или щелкнув значок папки, чтобы перейти на нужную страницу или в нужный сценарий. Пример: processorder.php.

г. Во всплывающем меню «Метод» укажите метод передачи данных формы на сервер.

Задайте любой из следующих параметров.

По умолчанию — для отправки данных формы на сервер будет использована настройка браузера по умолчанию. Как правило, значение по умолчанию — метод GET.

GET — добавляет значение в URL-адрес, запрашивающий страницу.

POST — вставляет данные формы в HTTP-запрос.

Не используйте метод GET для отправки длинных форм. Длина URL-адреса ограничена 8192 символами. Если объем отправленных данных слишком велик, данные будут обрезаны, что приведет к неожиданным результатам или сбою обработки.

Динамические страницы, созданные параметрами, которые передаются методом GET, можно пометить закладками, потому что все значения, необходимые для повторного создания страницы, содержатся в URL-адресе, отображаемом в поле «Адрес» браузера. А динамические страницы, созданные параметрами, которые передаются методом POST, пометить закладкой невозможно.

При сборе имен пользователей и паролей, номеров кредитных карт или других конфиденциальных сведений метод POST является более безопасным, чем метод GET. Однако данные, передаваемые методом POST, не шифруются и могут быть легко перехвачены хакерами. Для защиты данных используйте безопасное подключение к безопасному серверу.

 

д. Во всплывающем меню «Тип шифрования» укажите MIME-тип кодировки данных, которые отправляются на сервер для обработки (необязательно).

Параметр по умолчанию application/x-www-form-urlencode обычно используется вместе с методом POST. При создании поля для загрузки файла укажите тип MIME multipart/form-data.

 

е. Во всплывающем меню «Назначение» укажите окно, в котором нужно отображать данные, которые возвращаются вызываемой программой (необязательно).

Если названное окно не открыто, открывается новое окно с этим именем. Задайте любое из следующих значений целевого объекта.

_blank — открывает целевой документ в новом неименованном окне.

_parent — открывает целевой документ в родительском окне окна, в котором отображается текущий документ.

_self — открывает целевой документ в том же окне, где была отправлена форма.

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

HTML формы. Основы HTML для начинающих. Урок №18

HTML формы. Основы HTML для начинающих. Урок №18

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

Я думаю сейчас нужно вам показать примеры, как выглядят HTML формы визуально.

○ Форма поиска:

○ Форма отправки комментариев:

○ Форма входа на сайт:

○ Форма обратной связи:

○ Форма для подачи заказа:

Я думаю, вы уловили саму суть создания HTML форм. Итак, в сегодняшнем уроке я расскажу, как создать простую HTML форму и какие теги можно использовать для создания различных полей формы.

Вот с этого момента прошу вашего особого внимания, потому как тема сложна и важная.

HTML форма – это поле, в которое пользователь вводит некую информацию. Но, эта информация должна каким-то образом еще и отправляться. Своего рода, HTML форма – это как мотоцикл без бензина, вроде все есть, но почему-то не едет. Так вот, чтобы форма заработала и отправляла информацию, которую ввел пользователь, нужно создать обработчик форм на языке программирования PHP. Но вы с обработчиком не заморачивайтесь, так как вы сейчас проходите только курс основ HTML для начинающих. Мы еще разберем тему обработчика для форм в разделе «PHP». Так, что-то я отвлекся от основной темы.

Учимся создавать HTML формы

Любая HTML форма будет состоять из основного тега <form> </form>. Внутри тега <form> </form> вставляются остальные элементы формы, которые будут отображаться на веб странице.

<form>
здесь будут различные элементы формы, которые будут отображаться на веб странице.
</form>

Форма должна размещаться между тегами <body></body>.
Для тега  <form> закрывающий тег обязателен.

*атрибуты для тега <form>

NAME – уникальное имя формы. Оно используется тогда, когда на одном сайте несколько форм.
ACTION – этот атрибут указывает путь к обработчику формы. Является обязательным.
METHOD – способ отправки.

• POST —  данные передаются в скрытом виде
• GET (по умолчанию) —  данные передаются в открытом виде через браузерную строку.

Пример, как выглядит тег  <form>  с перечисленными атрибутами:

<form name="forma1" method="post" action="obrabotchik.php">
здесь будут различные элементы формы, которые будут отображаться на веб странице.
</form>

Элементы формы

○ Тег input

Тег input – эта часть элемента поля формы предназначена для ввода небольшого текста, цифр.
Для тега  <input> закрывающий тег не нужен.

*атрибуты для тега <input>

• name — имя элемента
• size — размер поля
• required – поле обязательное для заполнения
• autofocus – указатель мышки при загрузке веб-страницы сразу будет на поле
• maxlength – этим атрибутом можно указать максимальное количество ввода символов в поле. По умолчанию, без атрибута maxlength, в поле можно будет вводить неограниченное количество символов
• placeholder –  подсказка для пользователя, которая будет отображаться прямо внутри формы поля (раньше использовали атрибут value).
• type — тип элемента

Пример заполнений:

<input type="text" name="nameforma" autofocus maxlength="8" size="100" required placeholder="Как вас зовут?">

Тип элемента type

Текстовое поле

○ Текстовое поле «text»:

<input type="text">

Результат:

○ Поле для пароля «password»:

<input type="password"/>

Результат:

○ Поле для email «email»:

<input type="email"/>

Результат:

○ Кнопка для выбора файла с компьютера «file»:

<input type="file"/>

Результат:

○ Поле для ввода телефона «tel»:

<input type="tel">

Результат:

○ Поле поиска «search»:

<input type="search" results="5">

Результат:

○ Поле выбора цвета «color»:

<input type="color"/>

Результат:

○ Поле для ввода и выбора цифр «number»:

<input type="number" min="0" max="10" step="5"/>

• min – минимальное значение
• max – максимальное значение
• step – шаг.

Результат:

○ Поле для выбора даты «date»:

<input type="date">

Результат:

○ Поле для выбора даты и местного времени в формате (05.05.2015  00:00):

<input type="datetime-local"/>

Результат:

○ Выводить выпадающий календарь.
Поле для выбора года и месяца в формате (Июль 2015 г.).:

<input type="month"/>

Результат:

○ Поле для выбора времени «time»:

<input type="time"/>

Результат:

○ Ползунок «range»:

<input type="range"/>

Результат:

○ Флажок (checkbox):

<input type="checkbox" checked><input type="checkbox"/>

checked – этот атрибут указывает, какой флажок должен быть включен по умолчанию

Результат:

○ Радиопереключатель «radio»:

<input type="radio" checked="checked"> <input type="radio">

checked – этот атрибут указывает, какой радиопереключатель должен быть включен по умолчанию

Результат:

Кнопки

○ Кнопка «button»:

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

value — надпись на кнопке

Результат:

○ Кнопка для отправки данных «submit»:

<input type="submit" value="кнопка"/>

value — надпись на кнопке

Результат:

○ Кнопка сброса «reset»:

<input type="reset" value="сброс"/>

value — надпись на кнопке

Результат:

○ Кнопка картинкой:

<input type="image" src="ссылка на картинку">

Результат:

○ Скрытое поле «hidden»

<input type="hidden" value="Любое значение "/>

○ Тег select

Тег select – это часть элемента формы, предназначен для ввода выпадающего списка.
Для тега <SELECT></SELECT> закрывающий тег обязателен.
Тег <SELECT> является каркасом для выпадающего списка.

Чтобы создавать пункты выпадающего списка существует тег <OPTION>.
Для тега  <OPTION></OPTION> закрывающий тег обязателен.

*атрибуты для тега <SELECT> и <OPTION>

• Name – это имя всего списка. Задается только  для тега <SELECT>.
• multiple – для множественного выбора, только при выборе нужно удерживать клавишу «CTRL». Задается только для тега <SELECT>.
• Value – задается для каждого пункта списка для тега <OPTION>.
• disabled — блокирует выбор элемента в выпадающем списке. Задается только для тега <OPTION>.

Пример:

<select name="dostavka">
<option value="ne-srochnaya"> Не срочная </option>
<option value="srochnaya"> Срочная </option>
<option value="kurierom"> Курьером </option>
</select>

Результат:

Не срочнаяСрочнаяКурьером

Или вот так:

<select name="dostavka">
<option> </option>
<option value="ne-srochnaya"> Не срочная </option>
<option value="srochnaya"> Срочная </option>
<option value="kurierom"> Курьером </option>
</select>

Результат:

Не срочнаяСрочнаяКурьером

Теперь заблокируем из списка «Срочная» атрибутом «disabled»:

<select name="dostavka">
<option value="ne-srochnaya"> Не срочная </option>
<option value="srochnaya" disabled > Срочная </option>
<option value="kurierom"> Курьером </option>
</select>

Результат:

Не срочнаяСрочнаяКурьером

○ выпадающий список по группам:

Для создания списка группы используется тег  <optgroup>

<optgroup label="Группа 1"></optgroup>

Пример:

<select>
<optgroup label="Группа 1">
<option value="1">Option</option>
<option value="2">Textarea</option>
</optgroup>
<optgroup label="Группа 2">
<option value="3">Label</option>
<option value="4">Fieldset</option>
<option value="5">Legend</option>
</optgroup>
</select>

Результат:

OptionTextarea
LabelFieldsetLegend

○ для множественного выбора:

<select multiple>
<option>Option</option>
<option>Textarea</option>
<option>Label</option>
<option>Fieldset</option>
<option>Legend</option>
</select>

В теге <select> используется атрибут «multiple».

Результат:

OptionTextareaLabelFieldsetLegend

Многострочное текстовое поле

○ Тег textarea

Тег textarea – это часть элемента поля формы, предназначен для ввода большого текста, цифр.
 закрывающий тег обязателен.

<textarea></textarea>

*атрибуты для тега <textarea>

• name – имя поля
• cols – ширина поля
• rows – высота поля
• placeholder –  подсказка для пользователя, которая будет отображаться прямо внутри формы поля.

Пример:

<textarea name="adres" cols="30" rows="10"></textarea>

Результат:

Или вот так:

<textarea name="adres" cols="30" rows="10">Введите текст</textarea>

Результат:

Введите текст

Или вот так:

<textarea name="adres" cols="30" rows="10"  placeholder="Введите текст"></textarea>

Результат:

Оформление «Рамка» (fieldset)

○ Тег fieldset

Тег fieldset – с помощью этого тега можно нарисовать рамку вокруг объекта.
Закрывающий тег обязателен.

<fieldset></fieldset>

Дополнительные теги <legend>
Тег legend – указывает на заголовок.
 Закрывающий тег обязателен.

<legend></legend>

Пример:

<fieldset>
<legend>Заголовок</legend>
Текст внутри рамки.
</fieldset>

Результат:

Это все, что я хотел рассказать по теме «HTML-формы». Сейчас подведем итог и на практике попробуем создать простую форму, используя уже те знания, которые вы почерпнули из этой статьи.

Вот моя форма:

<form method="post" action=" ">
<fieldset>
<legend>Форма для резюме работника опытного завода ПАО "КМЗ" </legend>
<input type="text" placeholder="Ваше имя"><br><br>
<input type="text" placeholder="Ваша фамилия"><br><br>
Кем вы хотите устроиться?<br>
<select size="1">
<option selected> Директором </option>
<option > Инженером </option>
<option > Сварщиком </option>
</select><br><br>
 Какую зарплату вы хотите получать (в месяц)? <br>
<input type="radio" value="10" checked>
10$
<input type="radio" value="11">
11$<br><br>
<textarea cols="45" rows="5" placeholder="Введите адрес"></textarea><br><br>
<input type="submit" value="Отправить резюме">
<input type="reset" value="Стереть и начать все заново ">
</fieldset>
</form>

Результат:

Предыдущая запись
Нам 1 годик! С Днем Рождения StepkinBlog.ru!!! Следующая запись
Как проверить HTML форму. Основы HTML для начинающих. Урок №19

Создание форм | Учебные курсы

Сейчас практически ни один сайт не обходится без элементов интерфейса вроде полей ввода текста, кнопок, переключателей и флажков. Они необходимы для взаимодействия с пользователем, чтобы он мог искать на сайте, писать комментарии, отвечать на опросы, прикреплять фотографии и делать много других подобных вещей. Именно формы и обеспечивают получение данных от пользователя и передачу их на сервер, где они уже подвергаются анализу и обработке. Так что если вы планируете сделать нечто подобное на сайте, без форм не удастся это реализовать.

Форма создаётся с помощью элемента <form>, внутри которого могут быть любые необходимые элементы, и характеризуется следующими необязательными параметрами:

• адрес программы на веб-сервере, которая будет обрабатывать содержимое данных формы;
• элементы формы, которые представляют собой стандартные поля для ввода информации пользователем;
• кнопка отправки данных на сервер.

Сама форма не отображается на веб-странице, видны только её элементы.

Допускается использовать несколько форм на странице, но они не должны вкладываться одна в другую (пример 1).

Пример 1. Ошибочное использование форм

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Формы</title>
 </head>
 <body>
  <form action="handler.php">
   <p><input name="a"> <input type="submit"></p>
   <form action="handler.php">
    <p><input name="b"> <input type="submit"></p>
   </form>
  </form>
 </body>
</html>

Перед отправкой данных браузер подготавливает информацию в виде пары «имя=значение», где имя определяется атрибутом name элемента <input> или любого другого элемента, допустимого в форме, а значение введено пользователем или установлено в поле формы по умолчанию. После того, как пользователь щёлкнет по кнопке, происходит вызов обработчика формы, который получает введённую в форме информацию, а дальше делает с ней то, что предполагает разработчик. В качестве обработчика формы обычно выступает программа, заданная атрибутом action элемента <form>. Программа может быть написана на любом серверном языке вроде PHP, Python, C# и др.

Часто бывает, что текущая страница, написанная, допустим, на PHP, сама является обработчиком формы, в таком случае атрибут action можно вообще опустить. В простейшем случае <form> не содержит никаких атрибутов и представлен в примере 2.

Пример 2. Простая форма

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Формы</title>
 </head>
 <body>
  <form>
   <p><input name="a"> <input type="submit"></p>
  </form>
 </body>
</html>

В качестве значения атрибута action можно указать также адрес электронной почты, начиная его с ключевого слова mailto:. При отправке формы будет запущена почтовая программа, установленная по умолчанию. В целях безопасности в браузере задано, что отправить незаметно информацию, введённую в форме, по почте невозможно. Для корректной интерпретации данных используйте атрибут enctype со значением text/plain внутри <form> (пример 3).

Пример 3. Отправка формы по почте

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Формы</title>
 </head>
 <body>
  <form action="mailto:[email protected]" enctype="text/plain">
   <p><input name="a"> <input type="submit"></p>
  </form>
 </body>
</html>

Браузеры откроют программу, сопоставленную с почтой, при этом Internet Explorer выведет предупреждение (рис. 1).

Рис. 1. Предупреждение Internet Explorer

Перейти к заданиям

HTML формы

HTML формы можно использовать для отсылки данных через Интернет и часто используются для организации обратной связи с пользователями.

Сами по себе формы совершенно бесполезны. Они должны быть всегда связаны с программами или скриптами, которые будут обрабатывать введенные пользователем данные. Однако этот вопрос лежит за пределами темы данного учебника.

Основные теги, используемые для создания HTML форм, — это тег <form>, тег <input>, тег <textarea>, тег <select> и тег <option>.

Тег <form> создает форму. Он требует наличия одного обязательного атрибута – action. В этом атрибуте указывается адрес, по которому форма будет отсылать свои данные после того, как пользователь отдаст команду «отправить».

Необязательный атрибут method указывает на то, каким образом должны отсылаться данные формы. Он может принимать два значения – get (значение по умолчанию) и post. При последнем значении данные во время отсылки скрываются (при значении get данные формы прикрепляются к URL).

Таким образом, элемент формы будет иметь приблизительно следующий вид:

<form action='processingscript.php' method='post'>
   ...
</form>

Тег <input> – это основа всего мира форм. Он может быть десяти видов:

• <input type=»text» /> — стандартное текстовое поле. Также здесь может присутствовать атрибут value, который определяет текст по умолчанию, заданный в текстовом поле.
• <input type=»password» /> — то же текстовое поле, однако вводимые пользователем символы будут скрыты.
• <input type=»checkbox» /> — создает поле выключателей (checkbox) или флажков, которые пользователь может либо включить, либо отключить. Также здесь можно использовать атрибут checked, который используется в формате <input type=»checkbox» checked=»checked» /> и который задает начальное состояние флажка «включен».
• <input type=»radio» /> — создает поле переключателей, которые очень похожи на флажки, однако в этом случае пользователь может выбрать только один объект в группе переключателей. Здесь также можно использовать атрибут checked, который задается аналогичным образом, как и в случае с флажками.
• <input type=»file» /> — создает поле ввода, которое показывает файлы на вашем компьютере подобно тому, как вы открываете или сохраняете документы в большинстве программ. Оно позволяет пользователям загружать файлы на сервер.
• <input type=»submit» /> — создает кнопку отправки данных формы программе-обработчику. Можно самому задавать текст, который будет отображаться на кнопке отправки (то же самое можно сделать и с типами button и reset – см.ниже). Это делается при помощи атрибута value, например, <input type=»submit» value=»Ого. Надпись на кнопке» />.
• <input type=»image» /> — создает специальную кнопку отправки, в качестве которой будет использоваться активное изображение. При этом серверу кроме данных формы еще отправляются и координаты (x, y) нажатия мыши на изображение. Также необходимо указывать атрибут src, который играет ту же роль, что и в теге <img>.
• <input type=»button» /> — создает кнопку, которая без дополнительного кода ничего не будет делать.
• <input type=»reset» /> — создает кнопку, которая при нажатии на нее возвращает все поля формы к значениям по умолчанию.
• <input type=»hidden» /> — создает поле, которое не отображается в окне браузера. Оно используется для передачи различной вспомогательной информации, например, имени страницы, на которой находится пользователь, или электронный адрес, куда должна пересылаться форма.

Обратите внимание, что тег <input> закрывает сам себя при помощи конструкции «/>».

Тег <textarea> – создает многострочную область ввода текста. Он требует использование атрибутов rows и cols, которые задают размер области ввода:

<textarea rows="5" cols="20">Здесь вводят много текстовой информации</textarea>

Тег <select> и тег <option> используются для создания разворачивающего или выпадающего меню. Они работают следующим образом:

<select>
  <option value="first option">Опция 1</option>
  <option value="second option">Опция 2</option>
  <option value="third option">Опция 3</option>
</select>

При отправке данных формы посылается выбранный элемент списка.

Аналогично атрибуту checked в флажках и переключателях тег <option> может иметь атрибут selected:

<option value="mouse" selected="selected">Грызун</option>

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

<input type="text" name="talkingsponge" />

Форма может иметь, например, следующий вид. (Внимание: форма не будет работать до тех пор, пока не будет реализован скрипт «contactus.php», указанный в атрибуте action тега <form>, и который обрабатывает передаваемые данные.)

<form action='contactus.php' method="post">
   <p>Имя:</p>
   <p><input type="text" name="name" value="Ваше имя" /></p>
   <p>Комментарий: </p>
   <p><textarea name="comments" rows="5" cols="20">Ваш комментарий</textarea></p>
   <p>Вы:</p>
   <p><input type="radio" name="areyou" value="male" /> Мужчина</p>
   <p><input type="radio" name="areyou" value="female" /> Женщина</p>
   <p><input type="radio" name="areyou" value="hermaphrodite" /> Ни то ни другое</p>
   <p><input type="submit" /></p>
   <p><input type="reset" /></p>
</form>

Для начала этой информации будет вполне достаточно. Позднее вы узнаете, как создавать формы с более широкими возможностями.

Тег | htmlbook.ru

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
3.0+	1.0+	4.0+	1.0+	1.0+	1.0+	1.0+

Спецификация

HTML:

3.2

4.01

5.0

XHTML:

1.0

1.1

Описание

Тег <form> устанавливает форму на веб-странице. Форма предназначена для обмена данными между пользователем и сервером. Область применения форм не ограничена отправкой данных на сервер, с помощью клиентских скриптов можно получить доступ к любому элементу формы, изменять его и применять по своему усмотрению.

Документ может содержать любое количество форм, но одновременно на сервер может быть отправлена только одна форма. По этой причине данные форм должны быть независимы друг от друга.

Для отправки формы на сервер используется кнопка Submit, того же можно добиться, если нажать клавишу Enter в пределах формы. Если кнопка Submit отсутствует в форме, клавиша Enter имитирует ее использование.

Когда форма отправляется на сервер, управление данными передается программе, заданной атрибутом action тега <form>. Предварительно браузер подготавливает информацию в виде пары «имя=значение», где имя определяется атрибутом name тега <input>, а значение введено пользователем или установлено в поле формы по умолчанию. Если для отправки данных используется метод GET, то адресная строка может принимать следующий вид.

http://www.htmlbook.ru/cgi-bin/handler.cgi?nick=%C2%E0%ED%FF+%D8%E0%EF%EE%F7%EA%E8%ED&page=5

Параметры перечисляются после вопросительного знака, указанного после адреса CGI-программы и разделяются между собой символом амперсанда (&). Нелатинские символы преобразуются в шестнадцатеричное представление (в форме %HH, где HH — шестнадцатеричный код для значения ASCII-символа), пробел заменяется на плюс (+).

Допускается внутрь контейнера <form> помещать другие теги, при этом сама форма никак не отображается на веб-странице, видны только ее элементы и результаты вложенных тегов.

Синтаксис

<form action="URL">
  ...
</form>

Атрибуты

accept-charset

Устанавливает кодировку, в которой сервер может принимать и обрабатывать данные.

action

Адрес программы или документа, который обрабатывает данные формы.

autocomplete

Включает автозаполнение полей формы.

enctype

Способ кодирования данных формы.

method

Метод протокола HTTP.

name

Имя формы.

novalidate

Отменяет встроенную проверку данных формы на корректность ввода.

target

Имя окна или фрейма, куда обработчик будет загружать возвращаемый результат.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

Обязателен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег FORM</title>
 </head>
 <body>

 <form action="handler.php">
  <p><b>Как по вашему мнению расшифровывается аббревиатура &quot;ОС&quot;?</b></p>
  <p><input type="radio" name="answer" value="a1">Офицерский состав<Br>
  <input type="radio" name="answer" value="a2">Операционная система<Br>
  <input type="radio" name="answer" value="a3">Большой полосатый мух</p>
  <p><input type="submit"></p>
 </form>

 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Вид элементов формы в окне браузера

Теги HTML форм

Всем привет!

В этом уроке речь пойдет о тегах html форм.

Формы HTML — это те поля, куда мы, например, вводим свои данные при регистрации на каком — либо сайте, форуме и т.д.

Предложу начать с примера, потом подробно его разберем и рассмотрим виды форм.

И так, начнем.

<form action=»» method=»get»> <input type=»text» name=»t1″ maxlength=»25″ size=»40″ /> <input type=»text» name=»t2″ maxlength=»25″ size=»40″ /> <input type=»button» name=»but» value=»отправить данные» /> </form>

<form action=»» method=»get»> <input type=»text» name=»t1″ maxlength=»25″ size=»40″ /> <input type=»text» name=»t2″ maxlength=»25″ size=»40″ /> <input type=»button» name=»but» value=»отправить данные» /> </form>

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Все формы начинаются с тега <form> и заканчиваются тегом </form>.

Далее, параметр action в теге указывает на адрес программы (скрипта), которая будет обрабатывать данные из нашей формы.

Параметр method указывает на способ передачи данных.

Есть два способа: GET и POST. GET:при передачи этим способом, данные добавятся в конец адрес сайта (URL), и мы их увидим в адресной строке.

Если будем передавать методом POST, то данные будут переданы скрыто от пользователя.

Тег <input> определяет как раз саму форму. Рассмотрим параметры тега <input>:

CHECKED — означает, что CHECKBOX или RADIOBUTTON будет выбран.

MAXLENGTH — определяет количество символов, которое пользователи могут ввести в поле ввода.

NAME — имя поля ввода. Данное имя используется как уникальный идентификатор поля, по которому, впоследствии, вы сможете получить данные, помещенные пользователем в это поле.

SIZE — определяет визуальный размер поля ввода на экране в символах.

VALUE — присваивает полю значение по умолчанию или значение, которое будет выбрано при использовании типа RADIO (для типа RADIO данный атрибут обязателен)

TYPE — определяет тип поля ввода. По умолчанию это простое поле ввода для одной строки текста. Поскольку параметр type определяет тип формы, то рассмотрим подробно его значения.

СНЕСKBOX — используется для выбора пользователем нескольких значений из предложенных.

Пример использования:

<form action=»» method=»get»> <input type=»checkbox» name=»ch2″ checked=»checked»/>Вариант 1 <input type=»checkbox» name=»ch3″/>Вариант 2 <input type=»checkbox» name=»ch4″/>Вариант 3 <input type=»checkbox» name=»ch5″/>Вариант 4 </form>

<form action=»» method=»get»> <input type=»checkbox» name=»ch2″ checked=»checked»/>Вариант 1 <input type=»checkbox» name=»ch3″/>Вариант 2 <input type=»checkbox» name=»ch4″/>Вариант 3 <input type=»checkbox» name=»ch5″/>Вариант 4 </form>

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

RADIO — то же что и checkbox, но пользователь может выбрать только одно значение.

Для создания набора альтернатив вам необходимо создать несколько полей ввода с атрибутом TYPE=»RADIO» с разными значениями атрибута VALUE, но с одинаковыми значениями атрибута NAME.

Пример использования:

<form action=»» «method=»get»> <input type=»radio» value=»v1″ name=»ch2″/>Вариант 1 <input type=»radio» value=»v2″ name=»ch3″/>Вариант 2 <input type=»radio» value=»v3″ name=»ch4″ checked=»checked»/>Вариант 3 <input type=»radio» value=»v4″ name=»ch5″/>Вариант 4 </form>

<form action=»» «method=»get»> <input type=»radio» value=»v1″ name=»ch2″/>Вариант 1 <input type=»radio» value=»v2″ name=»ch3″/>Вариант 2 <input type=»radio» value=»v3″ name=»ch4″ checked=»checked»/>Вариант 3 <input type=»radio» value=»v4″ name=»ch5″/>Вариант 4 </form>

PASSWORD — то же самое, что и атрибут TEXT, но вводимое пользователем значение не отображается браузером на экране (отображаются звездочки вместо символов).

RESET — данный тип обозначает кнопку, при нажатии которой все поля формы примут значения, описанные для них по умолчанию.

SUBMIT — данный тип обозначает кнопку, при нажатии которой будет вызвана CGI-программа (или URL), описанная в заголовке формы (action).

Атрибут VALUE может содержать строку, которая будет высвечена на кнопке.

TEXT — данный тип поля ввода описывает однострочное поле ввода. Это как раз те поля, которые используются для регистрации, ввода логина и пароля. Этот тип поля наиболее часто встречающийся.

SELECT — тег SELECT позволяет пользователю выбрать значение из фиксированного списка значений. Обычно это представлено выпадающим меню.

Тег SELECT имеет один или более параметр между стартовым тегом <SELECT> и завершающим </SELECT>. По умолчанию, первый элемент отображается в строке выбора.

Пример использования:

<form action=»» method=»get»> <select name=»n»> <option>Вариант 1</option> <option>Вариант 2</option> <option>Вариант 3</option> <option>Вариант 4</option> </select> </form>

<form action=»» method=»get»> <select name=»n»> <option>Вариант 1</option> <option>Вариант 2</option> <option>Вариант 3</option> <option>Вариант 4</option> </select> </form>

TEXTAREA — Тег (Обращаю внимание! Это именно тег, а не значение параметра type) используется для того, чтобы позволить пользователю вводить свободный текст.

Пример использования:

<form action=»» method=»get»> <textarea name=»namm» rows=»4″ cols=»30″> </textarea> </form>

<form action=»» method=»get»> <textarea name=»namm» rows=»4″ cols=»30″> </textarea> </form>

NAME — имя поля ввода

ROWS — высота поля ввода в символах

COLS — ширина поля ввода в символах

На этом выпуск посвященный HTML-тегам формы, завершим, если возникли вопросы, пишите.

Просьба присылать с вопросом ваш код того, что вы делаете.

Так будет проще и мне понять, что у вас не получилось и дать вам четкий ответ, и вам меньше объяснять в письме, что у вас не выходит.

Всегда Ваш, Андрей Бернацкий.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть