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

Leave a Comment / Html / By /

Содержание

Создание форм в html – от простого к сложному понятным языком

Доброго времени суток, любители веб-разработки и желающие сверстать свой собственный сайт. До этого все мои публикации были посвящены основным элементам языка, способам создания различных объектов контента, их форматированию, структурированию и т.д. Освоив предыдущие темы, вы уже можете создать достаточно хороший сайт. Однако он будет неполноценным без сегодняшней темы: «Создание форм в html».

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

Что такое форма и как она функционирует

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

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

Форма задается при помощи специального элемента языка html <form>.

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

Для нетерпеливых и жаждущих быстрее взглянуть на кодовое представление, я прикрепил простой пример использования панели с текстовым полем для пароля c кнопкой:

1
2
3
4
5
6
7
8
9
10
11
12

<!DOCTYPE html>
 <html>
  <head>
  <meta charset="utf-8">
  <title>Пример</title>
 </head>
 <body>
  <form>
   <p><input name="pas" type="password"><input type="submit"></p>
  </form>
 </body>
</html>

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Пример</title> </head> <body> <form> <p><input name=»pas» type=»password»><input type=»submit»></p> </form> </body> </html>

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

Отправляем данные на сторону сервера

Для того чтобы отправить набранную (или выбранную) информацию в диалоговом окне, необходимо использовать стандартный механизм – кнопку Submit.

Код такого метода выглядит вот так: <input type=»submit»>

При запуске представленной строки в браузере отобразиться кнопка с надписью: «Отправить».

Другой способ отправки данных на сторону сервера – это нажатие в пределах диалогового окна клавиши Enter.

После подтверждения отправки указанной информации, она не сразу поступает на сервер. Сначала ее обрабатывает браузер, приводя к виду «имя=значение».

За имя отвечает параметр атрибута type тега <input>, а за значение – данные, введенные пользователем. Далее преобразованная строка передается обработчику, который чаще всего задан в атрибуте action элемента <form>.

Сам по себе параметр action не обязателен, а в некоторых моментах и вовсе не нужен. Например, если страница сайта написана с использованием php или js, то обработка происходит на текущей странице и ссылки не нужны.

Для большего понимания всей картины функционирования сайта я хотел бы добавить, что на сервере работа с данными выполняется уже при помощи других языков. Так, серверными языками считаются: Python, php, си-подобные языки (C#, C и т.д.), Java и другие.

 

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

Тег не обязательно задавать в паре с <form>, однако если необходимо обработать пользовательские записи или занести их, например, в базу данных, то без контейнера не обойтись.

Основными атрибутами данного элемента языка гипертекстовой разметки являются:

  • Text – создает текстовое поле;
  • Submit – создает кнопку для отправки данных на сервер;
  • Image – отвечает за кнопку с картинкой;
  • Reset – устанавливает кнопку для очистки формы;
  • Password – задает текстовое поле специально для паролей;
  • Checkbox – отвечает за поля с флажками;
  • Radio – отвечает за поля с выбором одного элемента;
  • Button – создает кнопку;
  • Hidden – используется для скрытых полей;
  • File – задает поле, отвечающее за отправку файлов.

Способы передачи информации

Существует 2 способа передачи пользовательских данных на серверную сторону: Get и Post. Данные методы выполняют одно и то же действие, однако они существенно отличаются друг от друга. Поэтому прежде чем указывать какой-либо из них, давайте ознакомимся с их особенностями.

 PostGet
Размер передаваемых документовОграничиваются серверной стороной.Максимум – 4 Кб.
Способ отображения отправленной информацииДоступна только при просмотре через браузерные расширения или другие специальные программные продукты.Сразу же доступна всем.
Использование закладокНет возможности добавить в закладки, так как запросы не повторяются (все страницы ссылаются на один адрес).Любую страницу с запросом можно сохранить в закладках и перейти к ней спустя время.
КэшированиеИсходя из предыдущего пункта все запросы на одной странице.Каждую страницу можно кэшировать отдельно.
ПредназначениеИспользуется для пересылки больших файлов (книг, изображений, видео и т.д.), сообщений, комментариев.Отлично подходит для поиска запрашиваемых значений по веб-ресурсу или для передачи коротких текстовых сообщений.

Для того чтобы указать каким из двух методов передачи данных работать браузеру, в элементе <form> используют предусмотренный параметр method (например, method=»post»).

Рассмотрим второй пример. Создадим форму, в которой нужно ввести свои персональные данные (имя и фамилию, дату рождения) и придумать пароль. После все это отправляем на сервер при помощи метода Post.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Метод POST</title>
 </head>
 <body>
 <p>Введите свои персональные данные!</p>
  <form action="handler.php" method="post">
  <p><input name="name" value = "Имя">
<input name="fam" value = "Фамилия">
  <input type="date" name="calendar" value="2016-06-11" max="2016-07-31" min="2016-06-01"> 
<input type="password" name="pass" value = "Пароль"> </p>
  <p><input type="submit"></p> 
</form>
 </body>
</html>

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Метод POST</title> </head> <body> <p>Введите свои персональные данные!</p> <form action=»handler.php» method=»post»> <p><input name=»name» value = «Имя»> <input name=»fam» value = «Фамилия»> <input type=»date» name=»calendar» value=»2016-06-11″ max=»2016-07-31″ min=»2016-06-01″> <input type=»password» name=»pass» value = «Пароль»> </p> <p><input type=»submit»></p> </form> </body> </html>

Запустите пример в браузере и оцените внешний вид каждого поля. В html очень удобно продумано задание типов полей, которые в свою очередь автоматически определяют, какие дополнительные элементы необходимы объектам.

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

Создание панели регистрации

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Регистрация</title>
  <style>
      body {
    background-color:#98FB98;
    background-attachment: fixed;    
   }
   form{
    background-color:#AEEEEE;
    Color: #006400;
   font-size:15px;
   } 
   h5 {
    color: red;
    text-align: center;
  }
   p {
    text-align: center;
  }
  input {
   Color: #006400;
   font-size:15px;
   border: 5px ridge #98FB98;
   background-color:#fff;
  }
  </style>
 </head>
 <body>
  <form>
   <fieldset>
    <legend>Регистрация на сайте</legend>
   <h5> Для последующей корректной работе в нашем сервисе, пожалуйста, вводите правдивые данные!</h5>
    <p>Имя: <input name="name" autofocus required ></p>
    <p>Фамилия: <input name="fam" required></p>
    <p>E-mail: <input type="email" required></p>
    <p>Пароль: <input type="password" name="pass" required></p>
    <p>Повтор пароля:<input type="password" name="pass" required></p>
    <p><input type="submit" value="Зарегистрироваться"></p>
   </fieldset>
  </form>
 </body>
</html>

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Регистрация</title> <style> body { background-color:#98FB98; background-attachment: fixed; } form{ background-color:#AEEEEE; Color: #006400; font-size:15px; } h5 { color: red; text-align: center; } p { text-align: center; } input { Color: #006400; font-size:15px; border: 5px ridge #98FB98; background-color:#fff; } </style> </head> <body> <form> <fieldset> <legend>Регистрация на сайте</legend> <h5> Для последующей корректной работе в нашем сервисе, пожалуйста, вводите правдивые данные!</h5> <p>Имя: <input name=»name» autofocus required ></p> <p>Фамилия: <input name=»fam» required></p> <p>E-mail: <input type=»email» required></p> <p>Пароль: <input type=»password» name=»pass» required></p> <p>Повтор пароля:<input type=»password» name=»pass» required></p> <p><input type=»submit» value=»Зарегистрироваться»></p> </fieldset> </form> </body> </html>

Советую вам сохранить данный код программы в документе с расширением .html и кодировкой utf-8, и открыть последний в окне браузера. Перед вами предстанет во всей красе панель для регистрации с полями для ввода имени, фамилии, e-mail и пароля с повторением. Заметьте, что при запуске страницы курсор сразу же расположен в первом текстовом поле. Этот прием достигается за счет атрибута

autofocus.

Начните заполнять поля, оставив одно без изменений, и нажмите кнопку «Зарегистрироваться». Как вы уже заметили, форма не будет отправлена, так как у каждого элемента <input> указан атрибут required. Он устанавливает отмеченные поля обязательными для заполнения.

Еще одним интересным моментом является указание типа type=»email», который появился в html 5. При использовании такого типа поля, введенная информация автоматически проверяется на корректность. В случае ошибок форма не отправляется на сервер.

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

Пока-пока!

С уважением, Роман Чуешов

Загрузка…

Прочитано: 472 раз

Создание формы | htmlbook.ru

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

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

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

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

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

HTML5IECrOpSaFx

<!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> или другим тегом допустимым в форме, а значение введено пользователем или установлено в поле формы по умолчанию. После нажатия пользователем кнопки Submit, происходит вызов обработчика формы, который получает введенную в форме информацию, а дальше делает с ней то, что предполагает разработчик. В качестве обработчика формы обычно выступает программа, заданная атрибутом action тега <form>. Программа может быть написана на любом серверном языке вроде PHP, Python, C# и др.

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

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

HTML5IECrOpSaFx

<!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. Отправка формы по почте

HTML5IECrOpSaFx

<!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>

Браузеры неоднозначно работают с таким кодом. Firefox предложит список подходящих приложений для отправки почты (рис. 1), Internet Explorer выведет предупреждение (рис. 2) и попытается запустить программу, сопоставленную с почтой, Opera подобно Firefox предложит список вариантов подходящих для отправки почты (рис. 3).

Рис. 1. Запуск приложения в Firefox

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

Рис. 3. Выбор программы в Opera

Работа с формами в html, создание основных элементов формы

Цель урока: Создание и работа с формами в html. Изучение основных элементов формы

Создание и работа с формами в html

Все элементы управления, коими являются текстовые поля, кнопки, флажки, выпадающие списки и т.п., как правило, размещаются внутри формы:

1
2
3
4
5

<form action="file.php" method="post">
...
содержимое формы
...
</form>

<form action=»file.php» method=»post»> … содержимое формы … </form>

  • Как раз внутри элемента form должны располагаться элементы управления, которых может быть сколь угодно много.

    • Атрибуты формы:

    action (англ. «действие»)
    Файл на сервере с кодом для отработки отосланных данных    		 action="http://www.название.домен/имя программы"
    enctype (англ. «тип кодировки») text/plain (обычный текст)
    application/x-www-dorm-urlencoded (для метода Post отправки формы)
    multipart/form-data (для метода Post, если прикрепляются файлы)
    method (метод отправки данных) post
    get
    • В атрибуте action указывается серверный файл со скриптом, ответственным за основную обработку данных, пересылаемых из формы. Обычно код этого файла пишется на серверном языке программирования, например, на языке php или perl.
    • Атрибут enctype указывает на тип передаваемой на сервер информации, если это просто текстовые данные — text/plain, если с формой отсылаются файлы, то следует указать multipart/form-data.
    • Атрибут method указывает и определяет форму передачи данных. Подробно мы на этом останавливаться не будем, однако следует сказать, что для более надежной передачи следует указать метод post.

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

    Важно: Для элементов radio необходимо, чтобы значение атрибута name у всех элементов в группе было одинаковым: в таком случае элементы будут работать взаимосвязано, при включении одного элемента, другие буду отключаться

    Выпадающий список HTML

    Рассмотрим пример добавления выпадающего списка:

    1
2
3
4
5
6

    <select name="book" size="1">
	<option value="asp">ASP</option>
	<option value="js">JavaScript</option>
	<option value="php">PHP</option>
	<option value="html" selected="selected">HTML</option>
</select>

    <select name=»book» size=»1″> <option value=»asp»>ASP</option> <option value=»js»>JavaScript</option> <option value=»php»>PHP</option> <option value=»html» selected=»selected»>HTML</option> </select>

    Результат:

    • Выпадающий список состоит из главного тега — select — который имеет закрывающую пару, а каждый пункт списка — это тег option, внутри которого отображается текст пункта
    • Атрибут size со значением «1» указывает на то, что список в свернутом виде отображает один пункт, остальные открываются при щелчке на стрелочке меню
    • Атрибут selected у пункта (option) указывает на то, что именно этот пункт будет изначально виден, а остальные пункты «свернуты»

    Для больших и сложных списков есть возможность добавить подзаголовки — тег optgroup с атрибутом label (надпись):

    1
2
3
4
5
6
7
8
9
10
11
12

    <select name="book" size="1">
	<optgroup label="Английские">
		<option value="asp">ASP</option>
		<option value="js">JavaScript</option>
		<option value="php">PHP</option>
		<option value="html" selected="selected">HTML</option>
	</optgroup>
	<optgroup label="Русские">
		<option value="asp_rus">ASP по-русски</option>
		<option value="js_rus">JavaScript по-русски</option>
	</optgroup>
</select>

    <select name=»book» size=»1″> <optgroup label=»Английские»> <option value=»asp»>ASP</option> <option value=»js»>JavaScript</option> <option value=»php»>PHP</option> <option value=»html» selected=»selected»>HTML</option> </optgroup> <optgroup label=»Русские»> <option value=»asp_rus»>ASP по-русски</option> <option value=»js_rus»>JavaScript по-русски</option> </optgroup> </select>


    Для предоставления возможности выбора нескольких пунктов одновременно необходимо добавить атрибут multiple. Но в таком случае и атрибут size следует установить в значение, большее, чем 1:

    <select name="book" size="4" multiple="multiple">
...

    <select name=»book» size=»4″ multiple=»multiple»> …

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

    Для ввода большого фрагмента текста служит элемент текстовая область:

    <textarea name="description" cols="30" rows="10">Текст</textarea>

    <textarea name=»description» cols=»30″ rows=»10″>Текст</textarea>


    Результат:

    • Ширина элемента зависит от атрибута cols, который указывает сколько символов помещается по горизонтали
    • Атрибут rows определяет количество строк в элементе

    Другие элементы

    • Обычная кнопка
      • <input type="button" value="что-то сделать">

      <input type=»button» value=»что-то сделать»>

    • Элемент кнопка-изображение
      • <input type="image" src="1.png">

      <input type=»image» src=»1.png»>

      Результат:

    • Элемент загрузка файла

      • Для прикрепления файла к форме существует специальный элемент управления:

      <input type="file" name="userfile" size="20">

      <input type=»file» name=»userfile» size=»20″>

      Результат:

      При его использовании значение кодировки формы (атрибут enctype у тега form) должен иметь значение multipart/form-data

    • Скрытое поле

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

      <input type="hidden" name="uid" value="15362">

      <input type=»hidden» name=»uid» value=»15362″>

    Дополнительные элементы и атрибуты

    • Для элементов управления radio и checkbox удобно использовать дополнительные элементы, которые, во-первых, делают привязку текста к самому элементу radio или checkbox, во-вторых, добавляют обводку при клике:
      • <input type="checkbox">
<label for="book1">ASP</label>

      <input type=»checkbox»> <label for=»book1″>ASP</label>

      В примере создана надпись (тег label) для элемента checkbox. Привязка осуществляется через атрибут id, значение которого указано в атрибуте for надписи.

      Результат:

    • Атрибут disabled позволяет блокировать элемент, делая его недоступным для изменения пользователем:
      • <input type="text" name="login" size="20" value="Логин" maxlength="25" disabled="disabled"><br>
<input type="checkbox" name="asp" value="yes">ASP<br>
<input type="checkbox" name="js" value="yes" checked="checked"  disabled="disabled">javascript<br>

      <input type=»text» name=»login» size=»20″ value=»Логин» maxlength=»25″ disabled=»disabled»><br> <input type=»checkbox» name=»asp» value=»yes»>ASP<br> <input type=»checkbox» name=»js» value=»yes» checked=»checked» disabled=»disabled»>javascript<br>

      Результат:

    • Атрибут readonly делает текстовые документы доступными только для чтения (вносить и изменять текст нельзя):
      • <input type="text" name="login" size="20" value="Логин" 
maxlength="25" readonly="readonly">

      <input type=»text» name=»login» size=»20″ value=»Логин» maxlength=»25″ readonly=»readonly»>

      Результат:

    • Для визуального оформления группы объектов можно использовать элемент fieldset:
      • <fieldset>
<legend>Книги</legend>
<input type="checkbox" value="html">HTML<br>
<input type="checkbox" value="asp">ASP<br>
<input type="checkbox" value="js">javaScript<br>
</fieldset>

      <fieldset> <legend>Книги</legend> <input type=»checkbox» value=»html»>HTML<br> <input type=»checkbox» value=»asp»>ASP<br> <input type=»checkbox» value=»js»>javaScript<br> </fieldset>

      Результат:

    • Можно задать очередность передвижения по элементам клавишей TAB:
      • <элемент tabindex="1">

      <элемент tabindex=»1″>

      Элемент будет первым в очереди переходов.

    Задание: Необходимо создать анкету web-разработчика согласно изображению. Элементы располагать в табличном виде

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

    Всем доброго времени суток. На связи Алексей Гулынин. В прошлой статье мы разобрали проблему с кодировкой на сайте. В данной статье я бы хотел рассказать о создании форм в HTML. Мне кажется, что это самая важная тема в HTML. Мне вспоминаются слова моей учительницы по английскому языку. Она говорила, если вы знаете значения всех словоформ глагола get, то вы сможете объясниться на английском только с их помощью. То же самое и с формами в HTML. Если вы знаете формы — вы уже неплохо знаете HTML. Сейчас наверное уже практически и нет сайтов, на которых отсутствуют формы html. Формы используются везде: при создании регистрации, авторизации, подписки, гостевой книги, форума, создании своего движка, да абсолютно везде. Статья наверняка получится большая, так что приготовьтесь. Давайте приступим к изучению формы сразу на примере:

    
<html>
<meta charset="utf-8"/>
<head><title>Создание форм HTML</title></head>
<body>
<form name="myform" action="" method="post">
Имя<input type = "text" name = "myname" value = "Введите имя"/>
</br>
Пароль<input type = "password" name = "mypass">
</br>
<textarea name = "mytextarea" rows = "10" cols = "30">Введите сообщение...</textarea>
</br>
Выберите поисковую систему<input type = "radio" name = "myradio" value = "Google">Google
<input type = "radio" name = "myradio" value = "Yandex" checked>Yandex
<input type = "radio" name = "myradio" value = "Rambler">Rambler
</br>
Готовы изучить формы?
<input type = "checkbox" name = "mycheck" value = "yes" checked>Да
<input type = "checkbox" name = "mycheck" value = "no">Конечно да=)
</br>
Выберите один из вариантов<select name = "select_list">
  <option value = "var1">Вариант 1
  <option value = "var2" selected>Вариант 2
  <option value = "var3">Вариант 3
</select>
</br>
Файл<input type = "file" name = "myfile">
</br>
<input type="hidden" name="secret" value="скрытое поле">
</br>
Простая кнопка<input type = "button" name = "start" value = "Пуск">
</br>
Отправить форму<input type = "submit" name ="submit" value = "Отправить на сервер">
</br>
Очистить поля формы<input type="reset" name="Reset" value="Очистить поля формы">
</form>
</body>
</html>

    При первом взгляде бросает в дрожь. На самом деле здёсь всё просто, давайте разбираться потихоньку:

    Создание формы начинается с ключевого слова <form>. Это парный тег, соответственно создание формы должно завершаться тегом </form>. У тега <form> есть несколько атрибутов. Атрибут name задаёт имя формы (это нужно для обработки формы, например в Javascript). Можно, конечно, и не указывать имя, но всё-таки рекомендую это делать. В атрибуте action указывается имя скрипта, который будет обрабатывать форму (обычно это скрипт на php) и выглядит это так action=»request.php». В нашем случае мы не обрабатываем форму. Атрибут method указывает каким способом мы будем передавать данные: открытым (get) или скрытым (post). Сразу пример того, что будет показано в строке браузера при этих двух различных атрибутах:

    1) Если мы используем метод post: mysite.ru/request.php.
    2) Если мы используем метод get: mysite.ru/request.php?myname=»Alex»&surname=»Gulynin».
    Думаю различия понятны.

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

    1) Тестовое поле. Текстовое поле создаётся с помощью тега <input>, как впрочем и все элементы формы. Атрибут type=»text» как раз и отвечает за то, что будет создано текстовое поле. Атрибут name — это имя, как и во всех элементах формы. Атрибут value — это значение по умолчанию.

    2) Поле для ввода пароля. Задаётся с помощью все то же тега <input> с атрибутом type=»password».

    3) Текстовая область. Задаётся с помощью тега <textarea>. Это парный тег, текстовая область должна закрываться тегом </textarea>. У этого элемента есть несколько атрибутов. Также можно задать атрибут name. Атрибут rows отвечает за количество строк, атрибут cols — за количество столбцов. Современные браузеры могут расширять текстовую область, чтобы удобнее было вводить в неё текст. Атрибуты rows и cols — это, так сказать, минимальные значения, до которых можно сжать форму (изначально при загрузке страницы текстовая область имеет размеры, которые заданы атрибутами rows и cols).

    4) Радиокнопки. Смысл радиокнопок в том, чтобы выбрать какое-то одно значение из нескольких. Радиокнопки также создаются с помощью тега <input> с атрибутом type=»radio». Атрибут value указывает значение, которое соответствует радиокнопке. Хочу обратить ваше внимание вот на какой момент: в нашем примере все 3 кнопки имеют одинаковое значение атрибута name. Если они будут иметь разное значение атрибута name, ты мы сможем нажать на них все. Соответственно не получится их правильно обработать. Атрибут checked (значения у него нет) указывает на то, какая радиокнопка будет выбрана по умолчанию.

    5) Флажки. В отличие от радиокнопок, флажки можно прощелкать все. Наберите пример и убедитесь в этом сами. Создаются с помощью тега <input> с атрибутом type=»checkbox». Смысл остальных атрибутов такой же, как и у радиокнопок. Скажу только, если мы все галочки снимем, то у нас передастся пустое значение, т.е. в нашем случае будет mycheck=»».

    6) Выпадающий список. Выпадающий список создаётся с помощью тега <select> и заканчивается тегом </select>. В данной конструкции необходимо ещё с помощью тега <option> указать элементы списка.

    7) Поле для отправки файла. Наверняка вы не раз загружали и отправляли файл, например при задании аватарки для своего профиля. Такой элемент реализуется с помощью тега <input> с атрибутом type=»file». Самое сложное — это обработать правильно файл, но этому будет посвящена отдельная статья.

    8) Скрытое поле. Иногда встаёт необходимость передать какие-нибудь данные, вместе со всей остальной формой. Именно для этого и служит тег <input> с атрибутом type=»hidden». На самой форме его не видно, но если вы посмотрите исходный код страницы (правой кнопкой по странице и выбрать «исходный код» или нажать сочетание клавиш «ctrl+u»), та данное поле можно будет увидеть.

    9) Кнопки. Кнопки создаются с помощью тега <input> с атрибутом type=»button». Атрибут value отвечает за то, что будет написано на кнопке. Кнопки обычно служат для обработки какого-то события. О событиях кнопок можно будет прочитать в одной из следующих статей.

    10) Отправка формы. По сути это такая же кнопка, но с атрибутом type=»submit». При нажатии на кнопку форма перейдёт на обработку по пути, указанному в атрибуте action тега <form>.

    11) Сброс все полей формы. Сброс всех полей формы осуществляется с помощью тега <input> с атрибутом type=»reset». Думаю здесь всё прозрачно и объяснять ничего не нужно.
    Опять же повторюсь, что здесь нет ничего сложного. Если у вас остался какой-то вопрос задавайте его в комментариях.

    Домашнее задание: обязательно наберите данный большой пример и проверьте работоспособность всех элементов формы.

    На связи был Алексей Гулынин, оставляйте свои комментарии, увидимся в следующих статьях.


    Следующая статья >

    как сделать и обзор тегов для создания вебформ

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

    Внутреннее устройство

    Фактически форма состоит из двух частей: визуального оформления и скрипта, который обрабатывает введённые данные. Чтобы написать скрипт, нужно владеть одним из языков программирования. Мы здесь их изучением не занимаемся, поэтому будем разбирать HTML-составляющую — учиться создавать интерфейс формы, предполагая, что где-то у нас уже есть обрабатывающий её скрипт.

    HTML-форма создаётся с помощью парного тега <form>, внутри которого располагаются теги её элементов.

    Теги

    Перед тем, как показывать примеры, пройдёмся по тегам.

    <form>. Создаёт форму. Если сравнивать форму с таблицей, то тег <form> выполняет ту же роль, что и тег <table>. К нему прилагаются следующие атрибуты.

    • action. Адрес скрипта или документа, который обрабатывает данные формы. В качестве значения указывается URL.
    • method. Метод передачи данных обработчику. Можно указать GET (по умолчанию) или POST. GET подразумевает передачу данных в виде части URL. Возможно, вы видели в адресах что-то вроде ?id=225. Это оно и есть. Метод POST работает по-другому, а потому передаваемые данные от пользователя скрыты. Он более безопасен, позволяет передавать больше информации, в том числе и файлы. Но всё это больше касается программирования, нежели HTML-разметки.
    • accept-charset. Устанавливает кодировку.
    • autocomplete. Включает (on) или отключает (off) автозаполнение форм, когда браузер сам подсказывает вам, что вводить, основываясь на том, что вы набирали в прошлый раз. Отключать функцию имеет смысл для конфиденциальных форм, чтобы обозреватель ненароком не показал важных данных.
    • name. Имя формы.

    Есть и ещё атрибуты, но используются они крайне редко.

    <input>. Интересный тег, с помощью которого можно создать любой элемент ввода, какой именно — задаётся атрибутом type. Строго говоря, этот тег можно использовать и вне формы, но тогда вы не сможете указать адрес обработчика, и элемент страницы будет нефункциональным.

    • type. Главный атрибут тега <input>, определяющий, как уже говорилось, тип элемента ввода. Значений у него так много, и они так важны, что хватило на целую таблицу (см. ниже).

    Значение

    Описание

    button

    Кнопка

    checkbox

    Флажки. С их помощью вы можете выбрать сразу несколько вариантов

    file

    Кнопка выбора файла

    hidden

    Скрытое поле, в браузере не отображается

    image

    Кнопка с картинкой

    password

    Поле для ввода пароля. Обычное текстовое поле, но вводимые символы скрываются за звёздочками (*)

    radio

    Переключатели. Почти флажки, но с их помощью можно выбрать только один из предложенных вариантов

    reset

    Кнопка сброса данных формы к первоначальным значениям

    submit

    Кнопка отправки данных на сервер. Обычно вы нажимаете их, чтобы подтвердить ввод — Сохранить, Применить, ОК

    text

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

    Множество новых значений появилось в HTML5, но они, к сожалению, пока (июнь 2016) поддерживаются только частично.

    • autofocus. Фокус ввода будет по умолчанию устанавливаться на том элементе, для которого указан этот атрибут.
    • checked. Установить флажок или радиокнопку по умолчанию.
    • pattern. С помощью этого атрибута можно заставить пользователя ввести данные в определённом формате. Например, ввести только одну цифру от 0 до 9 или только буквы латинского алфавита (должно быть знакомо). Пока поле не будет заполнено правильно, данные формы не будут переданы на обработку.
    • placeholder. Задаёт текст-подсказку.
    • <select>. Контейнер, с помощью которого создаётся список. Это может быть раскрывающийся список либо список с одним или множественным выбором. За элементы списка отвечают теги <option>.
    • size. Главное свойство, которое указывает количество отображаемых строк списка. Например, если значение равно 1, то список получается раскрывающимся, в противном случае получается либо список, все элементы которого сразу видны, либо список, по элементам которого можно перемещаться с помощью полосы прокрутки.
    • multiple. Атрибут без значений. Укажите его, чтобы получить список со множественным выбором.
    • required. Делает список обязательным для выбора, то есть пока пользователь не укажет в нём значение, форма не отправится. Часто так поступают со списком Пол в регистрационных формах.
    • <option>. Тег элемента списка, используемый внутри <select>.
    • value. Значение пункта списка для обработки скриптом.
    • selected. Пункт с этим атрибутом по умолчанию будет выделен, как будто пользователь выбрал именно его.
    • <optgroup>. Контейнер позволяет группировать элементы списка <option>.
    • disabled. Делает группу списка недоступной для выбора (при этом она отображается другим цветом).
    • label. Текст заголовка группы.

    Пример формы

    Теперь, когда все теги известны, создадим небольшую форму авторизации, данные которой обрабатывает файл script.php, находящийся в папке с HTML-страницей.

    Код будет таким.

    <!DOCTYPE html>

<html>

 <head>

  <meta charset="utf-8">

  <title>Форма</title>

 </head>

 <body>

  <form method="get" action="script.php">

    Логин:<br>

    <input name="login" type="text" size="25" maxlength="30" value="Михаил"> <br>

    <br>Пароль: <br>

    <input name="pass" type="password" size="25" maxlength="30" value=""> <br>

    <br>Кто вы?

    <select>

    <option value="c1">Гость</option>

    <option value="c2">Администратор</option>

    </select></p>

    <input name="save" type="checkbox" value="yes"> Запомнить <br>

    <br><input type="submit" name="enter" value="Вход">

  </form>

 </body>

</html>

    Разберём некоторые его части.

    <form method=»get» action=»script.php»> — создаём форму, обрабатываемую файлом script.php. Данные передаются методом GET.

    <br> — тег перехода на следующую строку.

    <input name=»login» type=»text» size=»25″ maxlength=»30″ value=»Михаил»> — создаём текстовое поле с именем login шириной в 25 символов. В качестве значения по умолчанию указываем Михаил, чтобы пользователю было понятно, что и как вводить.

    <input name=»pass» type=»password» size=»25″ maxlength=»30″ value=»»> — создаём поле ввода пароля (символы замещаются звёздочками). Ширина поля — 25, максимальная длина пароля — 30 символов.

    <select><option value=»c1″>Гость</option><option value=»c2″>Администратор</option></select> — создаём простой раскрывающийся список из двух пунктов.

    <input name=»save» type=»checkbox» value=»yes«> Запомнить — добавляем флажок и пишем поясняющий текст.

    <br><input type=»submit» name=»enter» value=»Вход»> — создаём кнопку, нажатие которой запускает процесс обработки данных.

    </form> — закрываем форму.

    В браузере веб-форма будет выглядеть, как на рисунке ниже.

    Просмотр формы

    Её можно заполнять, но чтобы она начала работать, необходимо написать код и сохранить его в файле script.php рядом с HTML-страницей.

    Полезные ссылки:

    HTML Формы

    Формы предназначены для пересылки данных от пользователя к веб-серверу. Формы в HTML могут состоять из текстовых полей и текстовых областей, флажков и переключателей, а также раскрывающихся списков. Все это — элементы формы. Каждый элемент служит для того, чтобы передать какое-либо значение сайту.
    По своей сути HTML-форма — это веб-страница на которой вы видите области для ввода своей информации. После того, как вы заполните форму и нажмете кнопку отправить, информация из формы упаковывается и отсылается веб-серверу для обработки серверным сценарием (файлом-обработчиком). После обработки к вам возвращается в качестве ответа другая веб-страница. Следующий рисунок наглядно демонстрирует как работает форма:

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

    Пример: Простая HTML-форма

    <!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
<title>Простая форма</title>
</head>
    <body>
<form action="action_form.php" method="POST">
  <p>Моя первая форма:<br>
    Имя: <input type="text" name="firstname" value=""><br>
    Фамилия:  <input type="text" name="lastname" value=""><br>
    <input type="submit">
  </p>
</form>
</body>
    </html>

    Элемент <form>

    Формы вставляются на веб-страницы посредством элемента <form>. Он представляет собой контейнер для всего содержимого формы, включая такие элементы, как текстовые поля и кнопки, а также любые другие теги языка HTML. Однако он не может содержать в себе другой элемент <form>.
    Для отправки формы на сервер используется кнопка «Submit», того же результат получится, если нажать клавишу «Enter» в пределах формы. Если кнопка «Submit» отсутствует в форме, клавиша «Enter» может быть использована для отправки.
    Большинство атрибутов элемента <form> влияют на обработку формы, а не на ее дизайн. Наиболее распространёнными из которых являются action и method. Атрибут action содержит URL, на который информация в форме будет отправлена для обработки сервером. Атрибут method является методом HTTP, который должны использовать браузеры для отправки данных формы.

    Элемент <input>

    Практически все поля для формы создается с помощью элемента <input> (от англ. input — ввод). Внешний вид элемента <input> меняются в зависимости от значения его атрибута type:

    <input type="значение">

    Вот некоторые значения атрибута type:

    ЗначениеОписание
    textввод одной строки текста
    radioэлемент-переключатель (иногда их называют радио-кнопками)
    passwordтекстовое поле для ввода пароля, в котором все вводимые символы заменяются звездочкой
    checkboxполе для установки флажка, который можно установить или сбросить
    submitкнопка, при нажатии которой происходит отправка данных, введенных в форму
    resetкнопка, при нажатии которой вся форма очищается. Точнее сказать, все элементы формы получают значения по умолчанию
    buttonобычная командная кнопка

    Ввод текста и пароля

    Одним из самых простых типов элементов формы является текстовое поле, предназначенное для ввода текста из одной строки. Данный тип ввода текста установлен по умолчанию, а следовательно, именно однострочное поле отобразится, если вы забудете указать атрибут type. Для добавления однострочного поля ввода текста в форму следует внутри элемента <input> прописать атрибут type со значением text:

    <input type="text">

    Поле ввода пароля является разновидностью обычного текстового поля. Оно поддерживает те же атрибуты, что и однострочное текстовое поле. Атрибут name устанавливает имя поля ввода пароля, которое будет отправлено на сервер вместе с паролем, введенным пользователем. Чтобы создать поле для ввода пароля, необходимо задать значение password атрибуту type (password (англ.) — пароль):

    <input type="password">

    Пример создания формы с полем для ввода пароля:

    Пример: Поле ввода пароля

    <!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
</head>
    <body>
<form action="action_form.php" method="POST">
  <p>Ваш логин: 
  <input type="text" name="login" size="15" maxlength="30" value="Ваше имя">  
  </p> 
  <p>Пароль: <input type="password" name="password" size="15" maxlength="30">  
  </p>
  <input type="submit"> 
</form>
</body>
    </html>

    Вместе с этим атрибутом можно использовать атрибут maxlenght, значение которого определяет максимальное количество символов, которые можно ввести в данную строку. Можно также задать длину поля ввода, используя атрибут size. По умолчанию, в большинстве браузеров ширина текстового поля ограничена 20 символами. Для управления шириной элементов новых форм, вместо атрибута size, рекомендуется использовать средства каскадных таблиц стилей (CSS).
    Атрибут value задает значение, которое по умолчанию отображается в текстовом поле в момент загрузки формы. Введя в поле значение по умолчанию, можно пояснить пользователю, какие именно данные и в каком формате вы хотите, чтобы пользователь сюда занес. Это как образец, ведь пользователю гораздо удобнее заполнять форму, видя перед собой пример.

    Переключатели (radio)

    Элемент <input> типа radio создает переключатели, которые используют принцип логического «ИЛИ», позволяя выбрать только одно из нескольких значений: если вы выбираете одно положение, то все остальные становятся неактивными. Основной синтаксис элемента-переключателя:

    <input type="radio" name="имя _переменной" value="значение">

    Атрибут name для переключателей обязателен и играет важную роль в объединении нескольких элементов-переключателей в группу. Для объединения переключателей в группу необходимо установить одинаковое значение атрибута name и разное значение атрибута value. Атрибут vаluе устанавливает значение выбранного переключателя, которое будет отправлено серверу. Значение каждого элемента-переключателя должно быть уникальным внутри группы, для того, чтобы сервер знал, какой вариант ответа выбрал пользователь.
    Наличие атрибута checked (с англ. — установлен) у элемента-переключателя указывает на то, какой из предлагаемых вариантов должен быть выбран по умолчанию при загрузке страницы, если это необходимо. Данный атрибут может быть установлен только у одного элемента-переключателя из группы:

    Пример: Использование переключателей

    <!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
</head>
    <body>
<form action="action_form.php" method="POST">
  <p>Сколько Вам лет?</p>
  <ol>
    <li><input type="radio" name="age" value="18" checked>младше 18</li>
    <li><input type="radio" name="age" value="18-24">от 18 до 24</li>
    <li><input type="radio" name="age" value="25-34">от 25 до 35</li>
    <li><input type="radio" name="age" value="35-50">более 35</li>
  </ol>
  <input type="submit"<
</form>
</body>
    </html>

    Флажки (checkbox)

    Элемент <input> типа checkbox создает флажки, которые напоминают переключатели тем, что дают пользователю возможность выбирать из предложенных вами вариантов. Главным отличием от переключателей является то, что посетитель может выбрать сразу несколько вариантов, а сами флажки обозначаются квадратиками, а не кружочками. Как и в случае с переключателями, группа флажков создается путем назначения каждому пункту одного и того же значения атрибута name, однако каждый флажок имеет собственное значение. Основной синтаксис флажка:

    <input  type="checkbox"  name="имя _переменной"  value="значение">

    Атрибут checked, как и в случае с переключателями, указывает, что данный флажок должен быть установлен по умолчанию при загрузке страницы. Данный атрибут может быть установлен одновременно для нескольких флажков группы.
    В следующем примере использование флажков заданы несколько выбранных по умолчанию вариантов ответа:

    Пример: Использование переключателей

    <!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
</head>
    <body>
<form action="action_form.php" method="POST">
<p>Какие музыкальные жанры Вы любите?</p>
<ol>
  <li><input type="checkbox" name="musik" value="juze" checked>Джаз</li>
  <li><input type="checkbox" name="musik" value="bluse" checked>Блюз</li>
  <li><input type="checkbox" name="musik" value="rock">Рок</li>
  <li><input type="checkbox" name="musik" value="shanson">Шансон</li>
  <li><input type="checkbox" name="musik" value="kantry">Кантри</li>
</ol>
<input type="submit"<
</form>
</body>
    </html>

    Кнопки подтверждения (submit) и очистки (reset)

    Элемент <input> типа submit создает кнопку, при нажатии которой происходит отправка браузером серверному сценарию на обработку данных, введенных пользователем в форму. Если создаем кнопку, очищающую форму, то присваиваем атрибуту type значение «reset». Элементу <input> типа submit может быть присвоен необязательный атрибут name. Атрибут vаluе используется в данном элементе для указания текста, обозначающего надпись на кнопке. По умолчанию в браузерах на кнопке пишется «Отправить» (Submit), если вас данная надпись не устраивает — введите ее самостоятельно. Поскольку в разных браузерах стили кнопок подтверждения могут отличаться, поэтому лучше самостоятельно настроить стиль кнопки, воспользовавшись средствами CSS либо использовать графические кнопки.
    Создание кнопок подтверждения и очистки:

    Пример: Использование submit и reset

    <!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
</head>
    <body>
<form action="action_form.php" method="POST">
 <p>Подпишись на рассылку новостей:</p> 
  <input type="text" name="email">
  <input type="submit" name="podpisatsya" value="Подписаться">
  <input name="reset" type="reset" value="Очистить">
</form>
</body>
    </html>

    Атрибут action.

    Главным для элемента <form> является атрибут action, который указывает обработчик данных для формы. Обработчик данных — это файл, описывающий, что нужно делать с данными формы. В качестве результата этой обработки выдается новая HTML-страница, которая возвращается браузеру. Другими словами в атрибуте action указывается URL-путь к файлу-обработчику на сервере (иногда называемого страницей сценария) для обработки формы. Синтаксис следующий:

    <form action="http://mytestserver.com/namefolder/obrabotchik.php">…    </form>

    Файл обработки находится на сервере mytestserver.com в папке namefolder и название серверного сценария, который будет обрабатывать данные — obrabotchik.php. Именно ему и будут переданы все данные, введенные вами в форму на веб-странице. Расширение .php указывает на то, что указанная форма обрабатывается сценарием написанном на языке PHР. Сам обработчик может быть написан на другом языке, например это может быть язык сценариев Python, Ruby и др.
    Желательно всегда задавать значение атрибута action. Если форма должна передать значения на ту же страницу, где она расположена в качестве значения атрибута action укажите пустую строку: action=»».

    Атрибут method

    Атрибут method задает то, каким образом информация должна быть передана на сервер. Выбор метода отправки формы зависит от данных, которые необходимо отправить вместе с ней. Здесь основную роль играет объем этих данных. Наиболее популярными являются два метода передачи исходных данных вашей формы из браузера на сервер: GET и POST. Метод устанавливается любой на выбор, и если вы его не указали, по умолчанию будет использоваться GET. Рассмотрим применение каждого из них.

    Метод POST

    Метод POST упаковывает данные формы и отсылает их серверу незаметно для пользователя, поскольку данные содержатся в теле сообщения. Веб-браузер, при использовании метода POST отправляет на сервер запрос, состоящий из специальных заголовков за которыми следуют данные формы. Так как содержимое этого запроса доступно только серверу, метод POST применяется для передачи конфиденциальных данных, таких как пароли, реквизиты банковских карт и другая персональная информация пользователей. Метод POST также подходит для отправки больших объемов информации, так как в отличие от метода GET, у него нет ограничений по количеству передаваемых символов.

    Метод GET

    Как вы уже знаете основная работа браузера — это получать веб-страницы от сервера. Так вот, когда вы используете метод GET, ваш браузер просто получает веб-страницу, как делает это всегда. Метод GET также упаковывает данные формы, но, прежде чем отправить запрос серверу, присоединяет их в конец URL-адреса. Чтобы понять, как работает метод GET, давайте посмотрим его в действии. Откройте в блокноте (например Notepad++) первый пример из этого урока (Пример: Простая HTML-форма) и внесите в HTML-код небольшое изменение:

    <form action="" method="GET">

    т.е. замените POST на GET.
    Сохраните файл под именем file_name.html и обновите страницу браузера (F5), затем заполните форму, например Вася Пупкин, и нажмите кнопку «Отправить». В адресной строке браузера Вы увидите что-то типа этого:

    ...file_name.html?firstname=Вася&lastname=Пупкин

    Теперь вы видите имя каждого элемента формы, а также его значение, прямо здесь, в URL-адресе.
    URL-адрес отделяется от остальных данных формы символом знака вопроса, а имена и значения переменных разделяются знаком амперсанд (&).
    Этот метод нужно использовать, если вы не передаете больших объемов информации.
    Этот метод не подойдет, если данные в вашей форме являются конфиденциальными, например хранят номер банковской карты или пароль.
    Кроме того, метод GET непригоден, если вместе с формой вы хотите переслать на сервер файлы.

    Группировка элементов формы

    Элементы формы, связанные по смыслу, можно сгруппировать между тегами <fieldset> и </fieldset>. Браузер отобразит <fieldset> в виде рамки вокруг группы элементов формы. Внешний вид рамки может быть изменен с помощью каскадных таблиц стилей (CSS).
    Чтобы добавить заголовок для каждой группы, понадобится элемент <legend>, который задает встраиваемый в рамку текст заголовка группы:

    Пример: Использование тега <fieldset>

    Задачи



    Please enable JavaScript to view the comments powered by Disqus.

    Создаем формы HTML

    Создать форму HTML

    Здравствуйте уважаемый посетитель!

    В предыдущих разделах мы создали основные элементы сайта, а также рассмотрели вопросы, связанные с наполнением контента. И теперь можем перейти к следующей довольно важной и обширной теме — к работе с формами HTML.

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

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

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

    • В общем о формах HTML
    • форма онлайн заказа
    • форма регистрации
    • Форма авторизации
    • форма обратной связи

    В общем о формах HTML

    Форма на веб-странице устанавливается блочным элементом <form>, который представляет собой контейнер, включающий в себя все элементы, отвечающие за обработку ввода данных, такие как <input>, <label>, <select> или <textarea>.

    При этом у тега <form> имеется несколько атрибутов, но два из них являются обязательными. Это «action», который содержит адрес, определяющий, куда будет отправлена форма и «method», определяющий способ (POST или GET), которым она будет отправлена.

    Что касается ее элементов, то самым разносторонним является тег <input> с помощью которого передается большая часть информации и создаются разные элементы интерфейса. Причем тип полей ввода определяется его основным атрибутом «type», от значения которого зависит их функциональное предназначение.

    Так, при при значении «text» — текстовое поле, «password» — поле с паролем, «email» — поле для ввода адреса электронной почты, «radio» — переключатель, «checkbox» — флажок, «submit» — кнопка для отправки формы.

    Ниже показан пример с использования элемента <input> для разных видов полей.

    1. <form name=«example» action=«#» method=«post»>

    2. <input type=«text» name=«login»>

    3. <input type=«email» name=«email»>

    4. <input type=«password» name=«password»>

    5. <input type=«submit» name=«button» value=«Отправить»>

    6. </form>

    Рис.1 Пример формы HTML

    В данном примере видно, что для элемента <input> в зависимости от значения атрибута «type», поле может принимать различный вид. Например, в первом элементе (поз.2) поле предназначено для ввода текстовой информации (в данном случае для логина). В следующем (поз.3) — для ввода e-mail, далее (поз.4) — для пароля, а в последнем (поз.5) — кнопка для отправки формы.

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

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

    В сети интернет можно найти большое количество заслуживающих доверия справочников по HTML. Например, как я уже ранее упоминал, для этих целей можно использовать справочник по веб-технологиям WebReference.ru, одна из частей которого посвящена подробному описанию всех имеющихся в HTML5 элементов.

    скриншот 33

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

    Далее будет показано какие варианты мы будем создавать и какие типы элементов будем в них использовать.

    форма онлайн заказа

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

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

    Для увеличения / уменьшения размера изображения кликните по картинке

    Форма онлайн заказа

    Рис.2 Форма онлайн заказа

    Здесь будут использоваться следующие элементы:

    • <input> с полем ввода текста;
    • <select>;
    • <option>.

    форма регистрации

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

    Ниже показано, как предполагается сформировать эту функциональную часть.

    Для увеличения / уменьшения размера изображения кликните по картинке

    форма регистрации

    Рис.3 форма регистрации

    Элементы, которые должны быть предусмотрены в этом варианте:

    • <label>;
    • <input> с полем ввода текста;
    • <input> с полем ввода e-mail;
    • <input> с полем ввода пароля;
    • <input> с кнопкой для отправки формы (совмещенная с формой онлайн заказа).

    Форма авторизации

    Для входа в личный кабинет необходима авторизация. Обычно такая форма состоит из полей ввода логина, пароля и кнопки для ее отправки. Также для восстановления учетных данных часто используются дополнительные ссылки типа: «Забыли логин?», «Забыли пароль?».

    Несмотря на то, что такие дополнительные ссылки обычно располагаются вместе с элементами формы регистрации, но по сути к ее элементами они не относятся.

    Ниже показан общий вид панели пользователя с элементами авторизации.

    Для увеличения / уменьшения размера изображения кликните по картинке

    форма авторизации

    Рис.4 форма авторизации

    В этом случае будут использоваться следующие элементы:

    • <label>;
    • <input> с полем ввода текста;
    • <input> с полем ввода пароля;
    • <input> с кнопкой для отправки формы.

    форма обратной связи

    Само название этой формы говорит о ее назначении. Поэтому здесь должны быть все необходимые поля для отправки сообщения. В данном случае она будет состоять из четырех полей: два для ввода имени и почтового адреса отправителя и два для передачи самого сообщения.

    Внешний вид такой формы показан на следующем скриншоте.

    Для увеличения / уменьшения размера изображения кликните по картинке

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

    Рис.5 Форма обратной связи

    Здесь, помимо уже используемых элементов, должен добавиться еще один (<textarea>), с помощью которого в поле можно будет вводить несколько строк текста. А весь перечень для этого варианта примет следующий вид:

    • <label>;
    • <input> с полем ввода текста;
    • <input> с полем ввода e-mail;
    • <textarea> с областью, в которую можно вводить несколько строк текста.
    • <input> с кнопкой для отправки формы.

    Таким образом, в этой, по сути, вводной статье, мы рассмотрели некоторые общие вопросы, связанные с формами HTML. И определились, с какими конкретными примерами мы будем в дальнейшем работать.

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

    С уважением, Николай Гришин

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *