CSS формы. Создание и работа с формами в html C вставка данных в html форму


Формы в HTML - это самая сложная, но с другой стороны, пожалуй самая интересная тема в HTML.

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

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

Пользуясь HTML, Вы можете создать каркас формы: текстовые поля, меню, списки, кнопки, флажки и переключатели. То есть те элементы, при помощи которых в форму вносится определенная информация.

Затем данные, внесенные в форму, отправляются на сервер для обработки. Но HTML здесь бессилен - над обработкой формы уже работает программа или скрипт, который к ней привязывается. Такие программы обычно пишут на языке php или javascript.

Атрибуты формы - тег

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

Атрибут action является обязательным для любой формы - он указывает адрес к файлу, который обслуживает форму (обрабатывает внесенные в нее данные ).

Атрибут method определяет способ отправки содержимого формы. Существует два метода - GET и POST . Сейчас не имеет смысла вникать в эти параметры, так как тема отправки информации методами GET и POST относится к языкам обработки данных (например, PHP ). Достаточно знать, что именно метод передачи данных POST в большинстве случаях используется в формах.

Атрибут name тега

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

Можно также установить кодировку для вводимых данных - за это отвечает атрибут accept-charset , а также, при помощи атрибута target , определить окно, в котором будет отображаться результат обработки отправленной формы (в новом или в текущем окне ).

Но сам по себе тег не имеет смысла, ведь форма передает данные, которые сначала нужно куда-то внести!

Ввод данных. Поля формы - тег

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

type - это основной атрибут тега . Он устанавливает тип поля (элемента ) формы:

Значение атрибута type= "..."

Результат

Описание

Однострочное текстовое поле для ввода текста. Атрибут size задает ширину поля в символах.

Текстовое поле для ввода пароля.
Атрибут maxlength устанавливает максимальное количество символов, которое можно ввести

Переключатель.
Возможен выбор лишь одного варианта из предложенных. Атрибут checked определяет заранее помеченное поле.

Флажок.
Возможен выбор нескольких вариантов. Атрибут checked определяет заранее помеченное поле.

Кнопка.
Атрибут value устанавливает надпись на кнопке.

Кнопка сброса.
Возвращает поля формы к их первоначальному виду. Сброс внесенных данных.

Кнопка для отправки внесенных данных.

Поле для ввода имени пересылаемого файла.

Кнопка-изображение.
Служит также для отправки данных на сервер. Атрибут src указывает адрес файла с изображением.

Скрытое поле - невидимое для пользователя.

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

Вид создаваемого списка зависит от значения атрибута size : при size= "1" (значение по умолчанию ) список будет раскрывающимся.

Иное значение атрибута size будет соответствовать количеству отображаемых пунктов списка. Например, при size= "3" , видимыми будут три элемента. Для просмотра остальных пунктов списка (если таковые есть ) следует воспользоваться вертикальной полосой прокрутки, которая добавляется автоматически.

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

При помощи атрибута name тега





7 Чудес света!




Многострочное текстовое поле - тег

Если содержимое поля превысит его размеры - появится бегунок.

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

Теперь давайте посмотрим: как работает форма.

Форма заказа обучающего видеоматериала:


Ваше имя: *



Ваш заказ:



Выберите носитель:


CD


DVD


USB Flash


Ваш E-mail: *



Ваш адрес: *





Формы встречаются в интернете почти на каждом сайте. Например, когда Вы вводите логин и пароль на сайте, то данные заполняются через формы и отправляются на сервер. Также примером формы являются различные опросы.

Синтаксис тега

...

Тег

имеет очень важный атрибут action , которому присваивается адрес (URL) скрипта, которому передается полученная информация с формы для обработки. Мы не будем углубляться в подробности того, что происходит после отправки данных, поскольку эти вопросы уже решает не html, а методы GET и POST в PHP.

Пример 1. Форма html с кнопками

Это будут кнопки:
Кнопка один
Кнопка два
Кнопка три
А это будет текстовое поле. Например сюда можно вводить логин

А это будет большое текстовое поле. Например сюда можно ввести информацию о себе

После всего перечисленного будет кнопка ОК

После нажатия кнопки ОК, страница просто обновится, т.к. мы не прописали параметр action

Преобразуется на странице в следующее:

Пояснения к примеру

  • action="" - говорит о том, что обработка данных будет происходить на этой же странице.
  • - атрибут type="radio" говорит о том, что нужно отобразить текст после этого кода, как кнопку выбора. Атрибут name и value в данном теге для нас сейчас играют маленькую роль, т.к. мы не изучаем сейчас php (см. уроки php).
  • - атрибут type="text" говорит о том, что это будет текстовое поле. Здесь так же есть два важных атрибута: name (для php) и value (значение по умолчанию).
  • - атрибут type="textarea" говорит о том, что это будет большое текстовое поле. Разница от предыдущего случая лишь в том, что он позволяет записывать большой объем текста.
  • - атрибут type="submit" говорит о том, что это кнопка. В атрибуте value пишется то, что будет написано на кнопке.

Более подробно про все эти элементы можно прочитать в 15 уроке: элементы тега

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

Теперь рассмотрим подробно все атрибуты тега .

Атрибуты и свойства тега

1. Атрибут accept-charset="Кодировка" - определяет кодировку, в которой сервер может принимать и обрабатывать данные формы. Может принимать различные значения, например, CP1251, UTF-8 и т.п.

2. Атрибут action="URL" - адрес скрипта, который обрабатывает передаваемые данные от формы. Если оставить это значение пустым, то данные будут обрабатываться в этом же документе, где расположена форма.

3. Атрибут autocomplete="on/off" - задает или отключает автозаполнение формы. Может принимать два значения:

  • on - включить автозаполнение;
  • off - выключить автозаполнение;

4. Атрибут enctype="параметр" - задает способ кодирования данных. Может принимать следующие значения:

  • application/x-www-form-urlencoded - вместо пробелов ставится +, символы вроде русских букв кодируются их шестнадцатеричными значениями
  • multipart/form-data - данные не кодируются
  • text/plain - пробелы заменяются знаком +, буквы и другие символы не кодируются.

5. Атрибут method="POST/GET" - задает метод отправки. Может принимать два значения:

  • GET - передача данных в адресной строке (есть ограничение по объёму отправки данных)
  • POST - посылает на сервер данные в запросе браузера (может отправить большое количество данных, т.к. нету ограничения объёма)

6. Атрибут name="имя" - задает имя формы. Чаще всего используется в случае наличия множества форм для того, чтобы можно было обратиться к конкретной форме через скрипт.

7. Атрибут novalidate - отменяет встроенную проверку данных формы на корректность ввода.

8. Атрибут target="параметр" - имя окна или фрейма, куда обработчик будет загружать возвращаемый результат. Может принимать следующие значения:

  • _blank - загружает страницу в новое окно браузера
  • _self - загружает страницу в текущее окно
  • _parent - загружает страницу во фрейм-родитель
  • _top - отменяет все фреймы и загружает страницу в полном окне браузера

Уважаемый читатель, теперь Вы узнали гораздо больше о html теге form. Теперь советую перейти к следующему уроку.

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

Создание форм HTML Имя
Пароль

Выберите поисковую системуGoogle Yandex Rambler
Готовы изучить формы? Да Конечно да=)
Выберите один из вариантов
Файл

Простая кнопка
Отправить форму
Очистить поля формы

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

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

. Это парный тег, соответственно создание формы должно завершаться тегом
. У тега
есть несколько атрибутов. Атрибут 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 в элементе

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

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

Синтаксис:

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

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

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

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

Синтаксис:

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

Синтаксис:

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

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

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

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

Элемент

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

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

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

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

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

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

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

Элемент

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

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

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

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

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

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

Элемент

Элемент

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

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

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

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

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

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

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

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

.

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

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

1 2 3 4 5 6 7 8 9 10 11 12 Пример

Пример

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

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

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

Код такого метода выглядит вот так:

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

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

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

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

.

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

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

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

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

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

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

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

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

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

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

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

Метод POST

Введите свои персональные данные!

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

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

Основные теги и атрибуты были рассмотрены. Именно поэтому настало время для создания полноценной формы регистрации с использованием стилевой разметки 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 Регистрация
Регистрация на сайте

Имя:

Фамилия:

E-mail:

Пароль:

Повтор пароля:

Регистрация

Регистрация на сайте

Для последующей корректной работе в нашем сервисе, пожалуйста, вводите правдивые данные!

Имя:

Фамилия:

E-mail:

Пароль:

Повтор пароля:

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