Введение

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

 

HTML5 & CSS3


 

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

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

 

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

 

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

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

 

<!DOCTYPE html>

<html>

<head>

    <title>Formidable Form with HTML5title>

head>

<body>

    <div class="container">

        <header>

            <h1>Formidable Form with HTML5h1>

        header>

        <div class="form">

           

           

        div>

    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» и наблюдайте.

 

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

 

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

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

 

 

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

 

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

 

 

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

maxlength

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

 

<input maxlength="10">

 

Тег <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

 

Тег <input type="file"> определяет кнопку загрузки для пользователей, чтобы выбрать и загрузить файл.

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

 

Атрибут file

 

Таким образом можно без проблем создать свою форму с помощью HTML5.

Источник: http://www.codeproject.com/Articles/761123/Beginners-Guide-to-HTML-CSS-Formidable-Forms-with