HTML формы

В этой части учебника, будет рассказываться как создаётся веб форма в HTML 5 и какие вообще её типы есть.

Что такое форма:

Форма на сайте нужна для отправки каких-нибудь данных на сервер, например, для отправки данных при регистрации или при входе.

Как создать форму:

Создаётся веб форма в HTML очень просто, для этого вам надо два главных элемента, первый, <from>, второй, это кнопка для отправки формы, вот пример.

Как возможно вы поняли, тут мы отправляем имя на сервер, давайте разберём что к чему тут.

Первое это тег <form>, как раз он и обозначает форму, у него есть два атрибута, action, определяет адрес куда отправлять данные из формы и method, для определения метода отправки, но о нём потом лучше узнаете когда будите изучать серверные языки программирования, например PHP.

Потом внутри элемента формы идёт из новых тегов, <input>, с атрибутом type, который имеет значение «text», но об этом подробнее ниже, а пока знайте, это просто поле.

Дальше идёт опять тег <input>, но у него значение атрибута type, уже «submit», это просто кнопка для отправки формы, также есть атрибут velue, обычно используется для значения по умолчанию в поле, но здесь, просто текст на кнопки, вот результат.

веб форма html

Ну вот, как то так она выглядит.

Элементы тега input:

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

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

  • text — Обычное текстовое поле;
  • email — Это как текстовой, но только перед отправкой формы
    проверят что это действительно email;
  • password — Как текстовой, но вводится вместо символов,
    будут чёрный точки;
  • submit — Кнопка отправки формы;
  • checkbox — Флажок, для выбора более одного параметра;
  • radio — Переключатель, для выбора только одного параметра,
    среди нескольких;
  • file — Для отправки файлов;
  • reset — Для возвращение формы к значением по умолчанию;

На самом деле тут всё очень просто, зависимо от того что вам нужно, используете нужный тип, но самые интересные это checkbox и radio,
о них расскажу.

Checkbox:

HTML форма с checkbox, очень просто выглядит, примерно так.

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

html форма checkbox

Тут теперь осталось только нажать кнопу отправить.

Radio:

HTML форма с radio тоже очень простая.

Как видите, в отличие от checkbox, radio должен иметь одинаковый атрибут name, но разные значения атрибута value, таких элементов может быть хоть сколько.

html форма radio

Опять же, не чего сложного.

Элементы других тегов:

Хоть и в основном вы и будите использовать тег <input>, но другие тоже важны.

Select и option:

HTML форма select, просто добавляет выбор, я не знаю как это точно объяснить, поэтому смотрите работу с ним.

Как возможно заметили, но сам код не много похоже на то, когда используешь <input> с типом radio, ну нужны по крайне мере они созданы для одного и того же, единственное различие в том, что в <select> можно выбирать несколько значений, ну и вид не много другой.

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

html форма select

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

Textarea:

Формы HTML имеют ещё элемент textarea, он нужен для того чтобы писать много текста, очень удобен для этого, вот как он пишется.

Теперь разберём эту страницу, точнее тег, первый не понятный атрибут, это cols, он по сути определяет сколько символов поместится в одну строку, rows это сколько строк будет в этой теге, placeholder, этот атрибут просто выводит текст прямо в форме, например для того что бы объяснить, что нужно написать, вот весь результат.

формы html textarea

То есть это почти как <input> типа «text», но только с несколькими строками, хотя можно при желание сделать во весь экран.

Label:

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

Суть в том, что пользователь может нажимать на название формы, что бы поставить курсор, но по умолчанию это не работает, поэтому есть тег <label>, вот как с нм работать.

Как видите есть два синтаксиса, первый через атрибут id, мы просто используем в теги <label>, атрибут for, значение которого идентификатор формы.

Второй вариант, это написать поле формы прямо внутри тега <label>, так и должно всё работать.

Вывод:

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

Подписываетесь на соц-сети:

Оценка:

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд
(Пока оценок нет)
Загрузка...

Поделится:

Дополнительно: