Безобразный form html. HTML Формы. Учимся создавать HTML формы

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

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

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

Создание формы начинается с ключевого слова

. У тега

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

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

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

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

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

6) Выпадающий список . Выпадающий список создаётся с помощью тега . В данной конструкции необходимо ещё с помощью тега

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

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

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

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

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

Элемент

является необходимым условием для всех форм. Он может иметь следующие атрибуты:

method Этот атрибут определяет способ пересылки данных сценарию CGI. Здесь протокол GET выбран по умолчанию, но в большинстве случаев разработчики пользуются протоколом POST, который позволяет передавать большие объемы данных.

action Этот атрибут определяет путь к сценарию CGI или адрес электронной почты.

enctype Этот атрибут определяет способ кодирования содержимого формы. Другими словами он сообщает браузеру о способе кодирования информации перед отсылкой серверу. По умолчанию используется значение x-www-form-encoded.

Синтаксис формы для сценария:

Синтаксис формы для почты:

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

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

Синтаксис:

PASSWORD Однострочное поле, в котором вместо вводимых символов отображаются звездочки. Элемент может иметь атрибуты:

maxlength. Задаёт максимально допустимую длину вписываемого значения в символах.

size. Задаёт максимально допустимую длину поля в символах.

value. Задаёт значение по умолчанию, которое можно менять.

Синтаксис:

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

CHECKBOXФлажки используются для предоставления возможности пользователю ответить односложно: да/нет истина/ложь больше/меньше и т.д. Выглядит обычно в виде крестика или птички. Элемент может иметь атрибуты:

checked. Задаёт начальный статус флажка по умолчанию.

value. Задаёт значение по умолчанию, которое можно менять.

Синтаксис:

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

SUBMIT Щелчок на этой кнопке приводит к пересылке содержимого формы сценарию, который был задан атрибутом action в элементе

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

Синтаксис:

IMAGE Во многом похож на кнопку SUBMIT, только в качестве кнопки используется изображение. Одним из преимуществ является возможность передачи координат щелчка пользователя, что позволяет организовать карту изображений. Элемент может иметь атрибуты:

src. Задаёт URL файла с изображением.

align. Задаёт выравнивание изображения относительно текста при помощи значений TOP, MIDDLE и BOTTOM.

name. Задаёт имя карты, которое так же пересылается сценарию вместе с координатами.

Синтаксис:

BUTTON Создает другую кнопку, браузеры пользователей могут использовать значение атрибута value в качестве исходного имени файла.

Синтаксис:

FILE Создает управляющий элемент выбор файла. Синтаксис:

ACCESSKEY Задает кнопку, при нажатии которой происходит обработка поля. Синтаксис:

SIZE Задает ширину элемента в пикселях. Синтаксис:

DISABLED Отключает возможность изменять содержимое поля или положение кнопки. Синтаксис:

Элемент При помощи этого элемента создается область для ввода и просмотра текста. Может использоваться и не в составе формы, а как самостоятельные детали страницы. Область ввода помогает сэкономить место благодаря полосам прокрутки. Может иметь атрибуты:</p> <p>name. Задаёт ключевое слово, по которому сценарий может обращаться к его содержимому.</p> <p>rows. Задаёт высоту области в строках.</p> <p>cols. Задаёт ширину области в символах.</p> <p>Синтаксис:</p> <p><FORM><H3>Введи текст <TEXTAREA name="ключевое слово" rows=5 cols=30>Область для ввода текста

Элемент Синтаксис:

Имеет атрибуты:

selected. Задаёт изначально выбранное слово.

value. Задаёт значение выбранного слова для сценария.

Элемент применяется для логической группировки элементов

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

Пример: Допустим что на текущей странице задан базовый URL при помощи элемента тогда, если пользователь введет в поле ключевые слова для поиска слово1,слово2,слово3, то браузер сформирует и отошлет запрос для поисковой машины сервера в виде: http://www.название.домен/?слово1+слово2+слово3 Если поисковая программа сервера поддерживает стандартный синтаксис запроса с использованием знаков? и +,поиск будет осуществлен.

Элемент

name задает имя элементу.

value задает значение элементу.

type при использовании в качестве кнопки принимает значения: button, submit и reset.

disabled делает недоступным данный элемент

tabindex определяет положение в последовательности перехода клавишей Tab, отключенные поля форм не участвуют в очередности.

accesskey задает клавишу доступа.

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

Элемент

позволяет логически группировать элементы формы. Синтаксис:

имя

Элемент позволяет давать наименования логическим группам элементов формы. Синтаксис: имя

26.02.2016

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

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

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

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

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

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

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

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

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

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

Любая HTML форма будет состоять из основного тега

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

Форма должна размещаться между тегами .
Для тега

закрывающий тег обязателен .

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

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

POST - данные передаются в скрытом виде

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

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

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

○ Тег input

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

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

name - имя элемента

size - размер поля

required – поле обязательное для заполнения

autofocus – указатель мышки при загрузке веб-страницы сразу будет на поле

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

placeholder – подсказка для пользователя, которая будет отображаться прямо внутри формы поля (раньше использовали атрибут value).

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

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

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

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

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

Результат:

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

Результат:

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

Результат:

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

Результат:

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

Результат:

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

Результат:

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

Результат:

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

min – минимальное значение

max – максимальное значение

step – шаг.

Результат:

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

Результат:

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

Результат:

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

Результат:

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

Результат:

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

Результат:

○ Флажок (checkbox) :

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

Результат:

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

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

Результат:

Кнопки

○ Кнопка «button» :

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

Результат:

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

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

Результат:

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

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

Результат:

○ Кнопка картинкой :
Результат:

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

○ Тег select

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

Name – это имя всего списка. Задается только для тега .

Value – задается для каждого пункта списка для тега

disabled - блокирует выбор элемента в выпадающем списке. Задается только для тега

Результат:

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

Или вот так:

Результат:

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

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

Результат:

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

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

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

Результат:
Option Textarea
Label Fieldset Legend

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

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

name – имя поля

cols – ширина поля

rows – высота поля

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

Результат:

Или вот так:
Введите текст
Результат:

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

Или вот так:

Результат:

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

○ Тег fieldset

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

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

Заголовок Текст внутри рамки.

Результат:

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

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

Форма для резюме работника опытного завода ПАО "КМЗ"

Кем вы хотите устроиться?

Какую зарплату вы хотите получать (в месяц)?
10$ 11$

Результат:

Предыдущая запись
Следующая запись

2018-06-28

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

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

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

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

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

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

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

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

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

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

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

Форма на веб-странице устанавливается блочным элементом
, который представляет собой контейнер, включающий в себя все элементы, отвечающие за обработку ввода данных, такие как , , .</p> <p>При этом у тега <form> имеется несколько атрибутов, но два из них являются обязательными. Это "action", который содержит адрес, определяющий, куда будет отправлена форма и "method", определяющий способ (POST или GET), которым она будет отправлена.</p> <p>Что касается ее элементов, то самым разносторонним является тег <input> с помощью которого передается большая часть информации и создаются разные элементы интерфейса. Причем тип полей ввода определяется его основным атрибутом "type", от значения которого зависит их функциональное предназначение.</p> <p>Так, при при значении "text" - текстовое поле, "password" - поле с паролем, "email" - поле для ввода адреса электронной почты, "radio" - переключатель, "checkbox" - флажок, "submit" - кнопка для отправки формы.</p> <p>Ниже показан пример с использования элемента <input> для разных видов полей.</p> <ol><p><form name =<b>"example" </b> action =<b>"#" </b> method =<b>"post" </b> ></p> <p><input type =<b>"text" </b> name =<b>"login" </b> ></p> <p><input type =<b>"email" </b> name =<b>"email" </b> ></p> <p><input type =<b>"password" </b> name =<b>"password" </b> ></p> <p><input type =<b>"submit" </b> name =<b>"button" </b> value =<b>"Отправить" </b> ></p> <li> </ol><p>Рис.1 Пример формы HTML</p> <p>В данном примере видно, что для элемента <input> в зависимости от значения атрибута "type", поле может принимать различный вид. Например, в первом элементе (поз.2) поле предназначено для ввода текстовой информации (в данном случае для логина). В следующем (поз.3) - для ввода e-mail, далее (поз.4) - для пароля, а в последнем (поз.5) - кнопка для отправки формы.</p> <p>Конечно, это упрощенный пример, в котором в основном использованы обязательные атрибуты. В реальности же обычно применяются и другие, определяющие характеристики полей.</p> <p>При этом для каждого элемента имеется свой список атрибутов. Все их перечислять здесь не стоит, так как их достаточно много, и эту информацию лучше брать из специально предназначенной для этого справочной литературе по HTML.</p> <p>В сети интернет можно найти большое количество заслуживающих доверия справочников по HTML. Например, как я уже ранее упоминал, для этих целей можно использовать справочник по веб-технологиям WebReference.ru, одна из частей которого посвящена подробному описанию всех имеющихся в HTML5 элементов.</p> <p>скриншот 33</p> <p>Мы же здесь будем практически создавать формы для построения функциональных узлов нашего сайта. И постараемся как можно больше использовать разные элементы с различными атрибутами.</p> <h2><i>форма онлайн заказа </i></h2> <p>В создаваемом сайте предусматривается оформление заказа на установку противоугонной маркировки стекол автомобиля. Для этого необходимо ввести данные автомобиля и выбрать способа маркировки. После чего, на основе введенных данных, пользователю должна предоставляться информация о стоимости выполнения работ. Причем как полной стоимости, так и рассчитанной с учетом скидок.</p> <p>Соответствующий вариант формы онлайн заказа, который мы будем создавать, приведен на следующем скриншоте.</p> <br><img src='https://i0.wp.com/rabota-vinete.ru/images/article/sait/form/sozdat-formu-html/forma-onlajn-zakaza.jpg' width="100%" loading=lazy><p>Рис.2 Форма онлайн заказа</p> <p>Здесь будут использоваться следующие элементы:</p> <ul><li><input> с полем ввода текста;</li> <li><select>;</li> <li><option>.</li> </ul><p>Форма регистрации, используемая в создаваемом сайте совмещена с онлайн заказом. Это связано с тем, что в данном случае личный кабинет пользователя предназначен для отображения состояния сделанных заказов и оформления новых. Поэтому вполне логично в этом варианте производить регистрацию одновременно с выполнением первого заказа.</p> <p>Ниже показано, как предполагается сформировать эту функциональную часть.</p> <p>Для увеличения / уменьшения размера изображения кликните по картинке</p> <br><img src='https://i2.wp.com/rabota-vinete.ru/images/article/sait/form/sozdat-formu-html/forma-registracii.jpg' width="100%" loading=lazy><p>Рис.3 форма регистрации</p> <p>Элементы, которые должны быть предусмотрены в этом варианте:</p> <ul><li><label>;</li> <li><input> с полем ввода текста;</li> <li><input> с полем ввода e-mail;</li> <li><input> с полем ввода пароля;</li> <li><input> с кнопкой для отправки формы (совмещенная с формой онлайн заказа).</li> </ul><h2><i>Форма авторизации </i></h2> <p>Для входа в личный кабинет необходима авторизация. Обычно такая форма состоит из полей ввода логина, пароля и кнопки для ее отправки. Также для восстановления учетных данных часто используются дополнительные ссылки типа: "Забыли логин?", "Забыли пароль?".</p> <p>Несмотря на то, что такие дополнительные ссылки обычно располагаются вместе с элементами формы регистрации, но по сути к ее элементами они не относятся.</p> <p>Ниже показан общий вид панели пользователя с элементами авторизации.</p> <p>Для увеличения / уменьшения размера изображения кликните по картинке</p> <br><img src='https://i0.wp.com/rabota-vinete.ru/images/article/sait/form/sozdat-formu-html/forma-avtorizacii.jpg' width="100%" loading=lazy> <p>В этом случае будут использоваться следующие элементы:</p> <ul><li><label>;</li> <li><input> с полем ввода текста;</li> <li><input> с полем ввода пароля;</li> <li><input> </li> </ul><h2><i>форма обратной связи </i></h2> <p>Само название этой формы говорит о ее назначении. Поэтому здесь должны быть все необходимые поля для отправки сообщения. В данном случае она будет состоять из четырех полей: два для ввода имени и почтового адреса отправителя и два для передачи самого сообщения.</p> <p>Внешний вид такой формы показан на следующем скриншоте.</p> <p>Для увеличения / уменьшения размера изображения кликните по картинке</p> <br><img src='https://i2.wp.com/rabota-vinete.ru/images/article/sait/form/sozdat-formu-html/forma-obratnoj-svyazi.jpg' width="100%" loading=lazy><p>Рис.5 Форма обратной связи</p> <p>Здесь, помимо уже используемых элементов, должен добавиться еще один (<textarea>), с помощью которого в поле можно будет вводить несколько строк текста. А весь перечень для этого варианта примет следующий вид:</p> <ul><li><label>;</li> <li><input> с полем ввода текста;</li> <li><input> с полем ввода e-mail;</li> <li><textarea> с областью, в которую можно вводить несколько строк текста.</li> <li><input> с кнопкой для отправки формы.</li> </ul><p>Таким образом, в этой, по сути, вводной статье, мы рассмотрели некоторые общие вопросы, связанные с формами HTML. И определились, с какими конкретными примерами мы будем в дальнейшем работать.</p> <p>После чего можем перейти и к практическому созданию форм, составляя для каждого случая необходимый код и описывая их взаимодействие с соответствующими таблицами MySQL. Но это будет уже в следующих статьях.</p> <p>С уважением, Николай Гришин</p> <ul><li>Следующая сатья: </li></ul> <p>Рассматривая основыные теги HTML мы не можем не затронуть такой важный элемент как формы. Часто на web-страницах необходима обратная связь. Например, заполнение анкеты на сайте, регистрация, авторизация, комментарии и т.д. Во всех этих случаях пользователь заполняет специальные области (поля формы) на странице, после чего происходит отправка данных на сервер. Для создания обратной связи используются формы. Форма это фрагмент HTML документа предназначенный для ввода информации пользователем.</p><p>На рисунке представлена форма регистрации студента на сайте образовательного учреждения.</p><p>Для создания формы используется контейнер <form></form> с атрибутом action, в котором указывается страница на сервере, которая будет обрабатывать данные переданные формой.</p><p>Структура простейшей формы:</p><p><formaction="адрес страницы обработчика формы"><br>элементы форм…<br></form></p><p>В каждой форме необходимо также наличие кнопки submit, предназначенной для отправки данных после заполнения формы.</p><p>Структура кнопки:</p><p><input type="submit" name="имя кнопки" value="отображаемое имя"></p><p>Итак, для записи практически всех элементов форм используется тэг <input> с атрибутом type. Для создания кнопки, которая сбрасывать все данные с форм используется следующая структура:</p><p><input type="reset" name="имя кнопки" value="отображаемое имя"></p><p>Для создания текстового поля (textfield) существует параметр text. При этом используются параметры: name – имя поля; size – для поля в симолах; maxlength – максимально возможное количество символов в поле; value – информация, отображаемая в форме по умолчанию</p><p>Пример записи формы с двумя текстовыми полями:</p><p><form action="obrabotka.php"><br>Введитеимя:<br><br><input type="text" name="name" size=”15” maxlength=”20” value="" ><br><br>Введите фамилию:<br><br><input type="text" name="surname" size=”20” maxlength=”25” value="" ><br><br><input type="submit" name="otpravit" value="Отправить"><br><input type="reset" name="ochistit" value="Очистить"><br></form></p><p>Результат работы формы представлен на рисунке.</p><p><img src='https://i1.wp.com/webriz.ru/information/userfiles/1/saiti/1/forms/forma-html-primer.jpg.png' width="100%" loading=lazy></p><p>В случае, если в текстовое поле необходимо ввести большое количество информации, например, комментарий используется форма текстовой области (textarea),которая создается при помощи тэга <textarea> со следующими атрибутами: name – имя области; cols – количество столбцов области; rows – количество строк; wrap – способ переноса сток (on – переносить строки, off – не переносить строки).</p><p>К вышеуказанному коду добавим поле текстовой области:</p><p>Комментарий:<br><textarea name="area" cols=”25” rows=”5” wrap=”on”>
Результат работы кода с текстовой областью представлен на рисунке.
Следующим элементом форм являются списки, позволяющие сделать выбор из представленного множества значений. Создать форму списка позволяют тэги

Для того, чтобы элемент был выделен при загрузке страницы необходимо в тэге
Аналогичным способом выбора являются элементы формы флажок (checkbox) и радиокнопка (radiobutton). Отличие этих элементов состоит в том, что флажок позволяет сделать множественный выбор, а радиокнопка только единичный.
Структура записи флажка и радиокнопки:
текст
Радиокнопка:
текст
В указанных в структуре элементах для выделения флажка и радиокнопки по умолчанию используется атрибут checked. Пример использования флажка, радиокнопки, а также HTML код представлены на рисунке.
Еще одним элементом формы является кнопка, задаваемая при помощи атрибута typeтэга со значением button:
В указанном коде для создания кнопки присутствует параметр onclick, в котором как правило задается код на языке программирования для выполнения того или иного действия при нажатии на эту кнопку:
Для вывода сообщения в специальном окне используется команда на языке jаvascript – aler. Результат работы примера представлен на рисунке.
Для вставки изображения в кнопку используется код, представленный в следующем примере:
При регистрации и входе на сайты используется поле со скрытым тестом, отображаемым в виде звездочек. Это элемент формы password:
Часто регистрация на сайте разбивается на несколько страниц и каждая последующая должна содержать в себе информацию из предыдущей. Для того чтобы скрыть передаваемую информацию используется элемент формы hidden:
Элемент формы hiddenбудет невидим в окне браузера.
Для загрузки файлов на сервер в формах имеется элемент file. Пример кода для загрузки файлов на сервер представлен ниже:
Итак, в этой теме были рассмотрены элементы форм для создания различных HTMLстраниц, которые вместе с обработчиками сценария на компьютере или сервере позволяют разрабатывать полноценные web-приложения.