Руководство новичка по HTML5 & CSS3 – объёмные формы в HTML5

Введение

К сожалению, от бумажных форм не скрыться даже сегодня. Разумеется, когда появились web-формы, распространение бумажных сбавило свой былой темп. В наше время, когда нужно зарегистрироваться в системе, необходимо просто посетить соответствующий веб-сайт и заполнить веб-форму через браузер. У такой веб-формы будет кнопка в нижней части экрана, для сиюминутной передачи информации нужно всего лишь щелкнуть по ней. Веб-форма – это в первую очередь удобный и быстрый способ передать серверу информацию пользователя для обработки. Веб-формы прежде всего были придуманы, чтобы избавиться от неудобств предшественников – бумажных форм. А также для простоты обмена информациtq в социальных сетях и для удобств электронной коммерции: например, легко можно осуществлять электронную оплату.

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

Прочитав эту статью, Вы научитесь создавать объёмную форму с помощью HTML5.

Окно браузера

Основы создания формы

index.html – HTML-файл (показанный ниже). В него Вы добавите HTML-код, чтобы создать форму. Читая эту статью, Вы будете добавлять код между закомментированными тегами start и end.

<!DOCTYPE html>

<html>

<head>

<title>Formidable Form with HTML5title>

head>

<body>

<h1>Formidable Form with HTML5h1>

header>

div>

body>

html>

Приступайте к работе с HTML формой

HTML форма – основа многих веб-форм, известных на сегодняшний день. Она может содержать следующие элементы ввода данных:

1. Текстовые поля, поля пароля, checkbox, radio buttons и кнопки submit.

2. Текстовая область и выпадающие списки.

Они вместе предоставляют средства управления UI, чтобы ввести и отправить информацию на сервер. Кроме того, форма может содержать элементы fieldset, legend и label.

В любом текстовом редакторе откройте файл index.html и добавьте HTML-код, между тегами и . Как только это сделаете, сохраните файл и откройте его в браузере – и увидите результат.

Результат

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

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

Id. Содержит значения – к примеру, particularsform – используемые для ссылки на HTML-элемент в JavaScript и CSS.
Action. Содержит URL веб-страницы – данные формы будут отправлены на него после ввода.
Method. Присваивает значение «get» в данном примере. Метод get передаст данные формы на страницу получения, добавляя их в виде пар имя-значение в URL-страницы. В данном атрибуте иногда ещё используется метод post.

Тег – самый важный в элемент HTML-форме. Он определяет поле ввода в теге.

<input type="submit"> определяет кнопку отправки. Когда пользователь нажимает эту кнопку, она отправляет данные формы в файл, определенный в атрибуте «action». Добавьте выделенный код в index.html. Это выведет на экран кнопку отправки с заголовком «Sign up». Заголовок «Sign up» присвоен через значение атрибута.

Изменение заголовка

Введите любые значения в текстовые поля имени и адреса электронной почты соответственно, щелкните по кнопке «Sign up» и наблюдайте.

Видео курсы по схожей тематике:

CSS Flexbox

Алексей Кучеренко

Angular Углубленный

Дмитрий Охрименко

HTML5 & CSS3 Углубленный

Сергей Патёха

Форма в браузере

Значения, введенные в соответствующие текстовые поля вместе с их соответствующими именами, были бы отправлены в acknowledge.html, значение атрибута action тега

. В данном примере acknowledge.html просто выведет в браузере на экран данные, полученные от index.html.

Данные на экране

Обратите внимание на строку поиска. Вы видете, что имя, электронная почта, и кнопка отправки были добавлены к URL acknowledge.html как пары значение-имя таким образом:

Это то, как данные передаются к странице получения, когда в теге определяется значение get.

maxlength

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

Тег <input type="password"> определяет поле пароля. Это текстовое поле, символы в котором замаскированы в форме звездочек или кругов.

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

Использование тега input

Тег <input type="radio"> – тег-переключатель. Переключателей обычно как минимум два и они находятся в группах, используют одинаковое значение для их атрибутов name, но различное значение для их атрибутов value. Пользователь может выбрать только один из них в группе.

Добавьте выделенный код в index.html. Это создаст два переключателя для выбора пола. Эти переключатели используют одинаковое название "Gender", который идентифицирует их как группу, и только один пол может быть выбран в этой группе. Если Вы измените одно из названий на другое значение, Вы нарушите это правило, и обе кнопки могут быть выбраны одновременно. Но, конечно, это не имеет никакого смысла для выбора пола.

Тег input type=radio

and

Тег

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

Давайте изменим код выделенной области. Это образует рамки вокруг этих 2 переключателей для выбора пола с заголовком "Gender".

Тег fieldset

Тег <input type="checkbox"> создает область с флажком, чтобы пользователь мог выбрать или отменять опцию. Как в случае с переключателями, флажки обычно находятся в группах. Но в отличие от переключателей, пользователь может выбрать больше, чем одну строку с флажком.

Добавьте выделенный код в index.html. Это создаст шесть переключателей для выбора хобби. Эти переключатели используют одинаковое название "hobbies", идентифицирующее их как группу.

Атрибут ckeckbox