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

HTML-форма описывается с помощью парного тега form . Этот тег имеет два важнейших атрибута: method и action . В атрибуте method задается тип HTTP-запроса (get или post), в action - запрашиваемый документ, то есть путь к файлу, запрос которого будет осуществлен. Путь может быть как абсолютным (с указанием домена сайта), так и относительным. Например:

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

Элемент представляет собой кнопку, нажатие на которой приводит к выполнению HTTP-запроса. Атрибут value задает надпись на кнопке. Форма может содержать несколько элементов submit. Чтобы в запрашиваемом документе определить, по какой именно из кнопок было произведено нажатие, необходимо элементам submit установить атрибуты name . Например:

При формировании запроса веб-браузер включит HTTP-параметр, характеризующий нажатый элемент submit. В качестве имени параметра будет взято значение атрибута name нажатой кнопки, в качестве значения - значение атрибута value. Таким образом, при нажатии кнопки Add будет сформирован запрос:

/control.php?submit=Add

а при нажатии кнопки Edit:

/control.php?submit=Edit

Следующий элемент представляет собой простейший элемент для ввода однострокового текста. Его HTML-код:

name - обязательный атрибут для участия в HTTP-запросе. Значение этого атрибута будет использовано в качестве имени HTTP-параметра. Этот атрибут имеется у всех типов элементов форм.

Элементу можно также задать атрибут value, указав в нем текст, который по-умолчанию будет введен в элементе. Например:

Элемент password служит для ввода паролей. Внешне он такой же, но введенный текст отображается в виде звездочек или точек:

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

Создадим файл auth.php в корневом каталоге со следующим содержимым:

Как видите, внутри тега form можно размещать теги, помогающие красиво разметить форму (я внутрь поместил таблицу). Форма содержит поля для ввода имени пользователя и пароля с именами login и pass соответственно. При нажатии "Войти" формируется GET-запрос документа /auth.php (то есть, страница запрашивает саму себя). В моем случае полный URL страницы имел вид http://test-domain3/auth.php .

Введите данные и нажмите "Войти". Страница должна перезагрузиться. Должен также измениться и адрес страницы. В моем случае он принял вид:

Http://test-domain3/auth.php?login=Joker-jar&pass=12345

Это означает, что документ auth.php был запрошен с GET-параметрами, которые были введены с помощью HTML-формы. Поместите в начало файла auth.php PHP-обработчик, который будет принимать данные для авторизации:

Если странице были переданы логин и пароль, условие сработает и сообщение будет выведено. Также будет вызван exit , который прекратит дальнейшее выполнение скрипта, следовательно форма выведена не будет.

Передавать пароль с помощью GET-запроса небезопасно, так как он виден в адресной строке. Сменим тип запроса на POST. Для этого изменим значение атрибута method, а в PHP-обработчике обращения к массиву $_GET изменим на $_POST. Проверьте работоспособность скрипта.

Следующий элемент - флажок . Его применяют, когда от пользователя необходим ответ вида "да/нет":

Если флажок не отмечен, в параметрах ничего не передается. Иначе передается параметр name со значением on . Есть еще один момент. Как правило, рядом с флажком присутствует поясняющая надпись. Хорошим тоном является реализация веб-мастером реакции флажка на клики по этой надписи. Делается это просто. Флажку присваивается определенный id, а сама надпись оформляется тегом label с атрибутом for , значение которого равно идентификатору флажка:

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

Обратите внимание, что у всех элементов одинаковое значение name. Можно выбрать только одно значение. В HTTP-параметра передастся value выбранного элемента, например color=blue .

Чтобы изначально был выбран какой-то из элементов, например, первый, ему нужно задать атрибут checked со значением checked (стандарт XHTML):

Для ввода большого многострочного текста существует специальный элемент textarea :

Текст внутри элемента

Этот элемент, как видите, отличается от предыдущих. Он представляет собой парный тег, а текст помещается не в атрибут, а в тело тега. У элемента также есть атрибут name. При помощи атрибута rows можно задать количество строк в элементе, cols - количество символов в строке. Элемент textarea используется, как правило, в POST-формах, т.к. предполагает ввод длинного текста (например, форма сообщения на форуме).

Выпадающий список. Наверняка сталкивались с таким элементом в программах. Позволяет выбрать одно значение из набора. Код элемента также не совсем обычен. Сначала создается элемент-контейнер select , ему задается атрибут name:

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

В HTTP-запросе передается параметр с именем name и значением value выбранного элемента, например town=vlad . По умолчанию выбран первый элемент списка, если хотите, чтобы был выбран другой элемент, задайте ему атрибут selected со значением selected :

Список значений. Если элементу select задать атрибут size с числовым значением, выпадающий список превратится в список значений. При этом значение атрибута size будет определять вертикальный размер элемента:

Москва Владивосток Новосибирск

Если элементу select задать атрибут multiple со значением multiple (стандарт XHTML), то появится возможность выбирать более одного элемента одновременно (например, с зажатой клавишей Ctrl). В этом случае в HTTP-запросе будут переданы все выбранные элементы с одинаковыми именами, например: town=msk&town=vlad&town=nsk .

Иногда необходимо в HTTP-запросе передать параметр, который пользователь не должен редактировать, а порой даже и видеть. Допустим, вы реализуете форму редактирования новости. В HTTP-запросе необходимо передавать идентификатор этой новости. Для подобных случаев есть скрытый элемент HTML-форм:

Этот элемент не будет виден на форме, но при выполнении запроса будет передан HTTP-параметр name=value.

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

Перечисленные элементы имеют два специальных атрибута:

readonly="readonly" - запрещает изменение информации в элементе (режим "только для чтения);
disabled="disabled" - делает элемент неактивным.

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

DesignMaz have collected list of the best CSS /HTML Login Form Templates for Web Designers, Developers that they can download and use to create a form and most of them also have pre built HTML validation features as well as some option jQuery validation (like the Login /Register form with pass meter below).

Free Responsive Flat New Login Form Widget Template for your websites. This Login form is designed using web technologies such as . It is completely free for download and can be use for your website or application sign in.

This is a flat modern css3 design based on Booststrap 3 Framework. Responsive design with multi-color multipurpose web forms with pure css3.

Free Responsive Static Login Form HTML5 CSS3 Template. You can download this HTML CSS Sign In Widget which can be used in you web projects.

A Responsive Flat and Clean Login Form HTML Template designed using web technologies such as HTML5 and CSS3. You can free download and use for your website or application sign in.

A free Responsive Flat Purple Login Form Template built with HTML5, and CSS3. It is completely free for download and can be used straight away in your website or app.

Any Twitter Bootstrap developer will love these free Responsive Bootstrap login form template with social buttons . This Responsive Bootstrap login form template is a Simple and Clean login form website template base on Bootstrap 3.1.0 .

Easy to use the beautiful and colorful css login form for their own website. Simply insert into the existing CSS file and enjoy the new CSS login form . Created with rounded corners and nice look. It degrades nicely on older browsers, e.g. IE7 and IE8.

MetroLogin is a Windows 8’s Login form simulator that gives you this ability to make a login page for your website’s users or a login Page for your admin panel with a nice metro design.

This is a drop down login form similar to the one found on twitter. It comes complete with JavaScript , CSS and HTML . Just like Twitters login in form it comes with enhancements like tooltips and a compact login form and a clicked state button. It uses CSS3 to reduce the need for images and it degrades nicely in non CSS browsers. It has great browser support and works in most modern browsers and even older ones like Internet explorer 6 and 7.

This is clean and pleasant designed login & register HTML user interface with error handling and social buttons.

Clean and usable login & register form is for every developer. It’s very fast pure CSS . Error handling states, social buttons and forgotten password state is in there.

Clean and usable login & register form is for every developer. It’s very fast CSS form with jQuery validation. Error handling, social buttons and forgotten password handling is in there. Bring to live with a jQuery.

Minimalistic Designed Login , Register and Forgot Template Forms Pack. Packed with jQuery Live Validation, 7 color styles, 3 different form size options, title animation, custom checkbox, tooltip hints and jQuery Error Handling.

Summer Forms are coupled login and registration forms having a set of impressing effects bundled with the bright modern design. The flexibility of these responsive forms Summer Forms may be become the first brick of your new web site or may be just a replacement of your old forms . Every year the people get more exacting. The forms are well thought out and may satisfy any user.

Not so long ago, in order to achieve such effects, we used JS. But, now, CSS3 has all the necessary tools for making pop-up windows too.

Moon Forms are coupled login and registration forms having a modern design. The flexibility of these responsive forms allows placing it into any area on your site (like a widget, like a popup window, like a standalone page).

Tab and form developed by using only CSS3 , no javascript used. It is simple , clean and browser compatible. Very Easy to implement on any kind of website.

Features a large collection of form styles that are used regularly in websites. You get Search Forms , Login Forms , Contact Forms and General Form styles. Further all these forms are available in Dark and Light coloured versions, so you get a total of 224 form styles! The login , contact and general forms also have focus and validation error styles defined in the css.

Form Framework that strikes a balance between simplicity and elegance.CSS3 Responsive Forms kit is simple, clean and fresh modern form pack develop using bootstrap .

Day / Night Login Forms – has the net and unique design. In the kit you get 2 folder with 6 forms. In two colors white and dark. As in the kit includes 4 style buttons. Thanks to the Day / Night Login Forms developers can save time and money on developing the design. And the designers can see an example of the correct organization of layers.

Is a set of beautiful form elements. It has large amount of customized items, different color schemes, responsive grid system and allows you to create forms of any complexity and for any needs: login , registration , contacts , review , order , comment , checkout , etc.

Golden Forms is a simple and professional Form Framework that strikes a balance between simplicity and elegance. The framework is built with pure CSS3 + HTML5 (no images), features a clean consistent Form UI , responsive 12 column grid, and can be used to build any kind of Web Forms quickly whether simple or complex, without special CSS and coding knowledge.

Your visitors won’t be able to stop themselves contacting you with this baby. The HTML5 AJAX Contact Form utilises cutting edge HMTL5 code and CSS3 animations to make your contact page elegant and ultra-usable.

– has a clean design and a powerfull 3D Flip Effect which give user a unique exprince and a fast way to complete the process . In the kit you get 1 psd file with 3 forms styes.

Responsive HTML5 Sign In / Registration form , with jQuery effects and CSS3 customization.

HTML теги, определяющие HTML формы на сайте

Создаем сайты и отдельные страницы в сети интернет для общения с посетителями.

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

Теги, атрибуты и значения

• - определяют форму.
• name="" - определяет имя формы.
• method="" - определяет способ отправки данных из формы. Значения: "get" (по умолчанию) и "post" . Чаше используется метод "post" , так как позволяет передавать большие объемы данных.
• action="" - определяет url по которому данные отправляются на обработку. В нашем случае - enter_data.php ..
• - определяют такие элементы формы как кнопки, переключатели, текстовые поля для ввода данных.
• type="text" - определяет текстовое поле для ввода данных.
• type="password" - определяет поле для ввода пароля, при этом текст отображается в виде звездочек или кружочков.
• type="checkbox" - определяет переключатель.
• type="hidden" - определяет скрытый элемент формы - используется для передачи дополнительной информации на сервер.
• size="25" - длина текстового поля в символах.
• maxlength="30" - максимально допустимое количество вводимых символов.
• value="" - определяет значение, которое будет отправлено на обработку если относится к радиобутонам или переключателям. Значение данного атрибута в составе текстового поля или кнопки будет показано как, например, Вася или Вход в примере выше.

Теги, атрибуты и значения

• action="http://сайт/comments.php" - определяет url по которому будут отправлены данные из формы.
• id="" - определяет имя, идентификатор элемента формы.
• name="" - определяет имя элемента формы.
• - определяют текстовое поле в составе формы.
• cols="" - определяет количество колонок текстового поля формы.
• rows="" - определяет количество рядов текстового поля формы.

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

Теги, атрибуты и значения

• - определяют список с позициями для выбора.
• size="" - определяeт количество видимых позиций списка. Если значение равно 1 , мы имеем дело с выпадающим списком.
• - определяют позиции (пункты) списка.
• value="" - содержит значение, которое будет отправлено формой по указанному url на обработку.
• selected="selected" - выделяет позицию списка в качестве примера.

Увеличив значение атрибута size="" , мы получим список с полосой прокрутки:

Первая позиция Вторая позиция Третья позиция Четвертая позиция

Для этого варианта применим флажок multiple="multiple" , который делает возможным выбор нескольких позиций. Его отсутствие разрешает выбрать только один пункт.

Смотрите дополнительно:

Сама форма обычно предназначена для получения от пользователя информации для дальнейшей пересылки её на сервер, где данные формы принимает программа-обработчик. Такая программа может быть написана на любом серверном языке программирования вроде PHP, Perl и др. Адрес программы указывается в атрибуте action тега , как показано в примере 1.

Пример 1. Отправка данных формы

HTML5 IE Cr Op Sa Fx

Данные формы

В этом примере данные формы, обозначенные атрибутом name (login и password ), будут переданы в файл по адресу /example/handler.php. Если атрибут action не указывать, то передача происходит на адрес текущей страницы.

Передача на сервер происходит двумя разными методами: GET и POST, для задания метода в теге используется атрибут method , а его значениями выступают ключевые слова get и post . Если атрибут method не задан, то по умолчанию данные отправляются на сервер методом GET. В табл. 1 показаны различия между этими методами.

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

http://www.google.ru/search?q=%D1%81%D0%B8%D1%81%D1%8C%D0%BA%D0%B8&ie=utf-8

Уникальное сочетание параметров в адресной строке однозначно идентифицирует страницу, так что страницы с адресами?q=node/add и?q=node считаются разными. Эту особенность используют системы управления контентом (CMS, Content management system) для создания множества страниц сайта. В реальности же используется один файл, который получает запрос GET и согласно ему формирует содержимое документа.

Ниже перечислены типовые области применения этих методов на сайтах.

Передача небольших текстовых данных на сервер; поиск по сайту.

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

Пересылка файлов (фотографий, архивов, программ и др.); отправка комментариев; добавление и редактирование сообщений на форуме, блоге.

Работа с формой по умолчанию происходит в текущей вкладке браузера, при этом допустимо при отправке формы изменить этот параметр и открывать обработчик формы в новой вкладке или во фрейме. Такое поведение задаётся через «имя контекста», которое выступает значением атрибута target тега . Популярные значения это _blank для открытия формы в новом окне или вкладке, и имя фрейма, которое задаётся атрибутом name тега (пример 2).

Пример 2. Открытие формы во фрейме

HTML5 IE Cr Op Sa Fx

Использование фрейма

В данном примере при нажатии на кнопку «Отправить» результат отправки формы открывается во фрейме с именем area .

Элементы формы традиционно располагаются внутри тега , тем самым определяя те данные, которые будут передаваться на сервер. В то же время в HTML5 есть возможность отделить форму от её элементов. Это сделано для удобства и универсальности, так, сложный макет может содержать несколько форм, которые не должны пересекаться меж собой или к примеру, некоторые элементы выводятся с помощью скриптов в одном месте страницы, а сама форма находится в другом. Связь между формой и её элементами происходит в таком случае через идентификатор формы, а к элементам следует добавить атрибут form со значением, равным этому идентификатору (пример 3).

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

HTML5 IE Cr Op Sa Fx

Форма

В этом примере тег однозначно отождествляется через идентификатор auth , а к полям, которые следует отправить с помощью формы, добавляется form="auth" . При этом поведение элементов не меняется, при нажатии на кнопку логин и пароль пересылаются на обработчик handler.php.

Хотя параметры передачи формы традиционно указываются в теге , их можно перенести и в кнопки отправки формы ( и ). Для этого применяется набор атрибутов formaction , formmethod , formenctype и formtarget , которые являются аналогами соответствующих атрибутов без приставки form. В примере 4 показано использование этих атрибутов.

Пример 4. Отправка формы

HTML5 IE Cr Op Sa Fx

Отправка формы

Все новые атрибуты форм не поддерживаются некоторыми браузерами, в частности, Internet Explorer и Safari.

Here is an example of html login page code. In this example, we have displayed one text field, Password, Reset button and Login button. We have used Reset button that resets all fields to blank.We have used JavaScript validation in Login page. We have set username and password value.

Here is an example of html login page code. In this example, we have displayed one text field, Password, Reset button and Login button. We have used Reset button that resets all fields to blank. We have used JavaScript validation in Login page. We have set username and password value. If a person enter a wrong username or password or both, an error message with "Error: Incorrect Username or Password" will be displayed. Till the person enters the correct username and password, it will not Login.

Once you enter the correct Username and Password, you will be redirected to another page.

Login page is used in most of the dynamic website to validate user based on their credentials. For making login page for websites HTML form and HTML elements are used. Text field is used to accept username and password text field is used to accept password from user.

The submit button is used for submitting data to server for validation. Its good to validate user input in the browser using JavaScript. In this tutorial we are creating a HTML Login page code and validating user input with JavaScript. In modern web application server-side validation is also very important it is done on server side with the program running on the server.

Here is video tutorial:

But in this tutorial you will learn to create a login page in HTML and validate user input with JavaScript. View demo of HTML Login page .

Here is the screen shot of the the login page we are making:

This login page displays Username, Password text fields and then buttons for reset and Login. Once user enters the data and clicks on the Login button, JavaScript is used to validate the form and error message is displayed if validation fails.

HTML Login page with JavaScript Validation

Login Page

The tag of HTML is the heart of creating user entry form in web application which takes the user input data and finally submit it to server side program for further processing. Data of all the input or hidden field is taken and submitted to the server through form tag. The "submit" button is used to initiate form data submit to the server. You can also use JavaScript code for submitting the form. For example if your form name is "loginForm" then following JavaScript code can be called for submitting the form programmatically.