07 окт 2010
Как сделать поля ввода логин, пароль.
У нас вы можете скачать бесплатно Как сделать поля ввода логин, пароль.

Данный материал предоставлен сайтом Skripter.info исключительно в ознакомительных целях. Администрация не несет ответственности за его содержимое.
Как сделать поля ввода логин, пароль.


INPUT и FORM - форма ввода данных

Тег <INPUT> является одним из разносторонних элементов формы и позволяет создавать разные элементы интерфейса и обеспечить взаимодействие с пользователем. Главным образом <INPUT> предназначен для создания текстовых полей, различных кнопок, переключателей и флажков.
Система регистрации не возможна, как минимум без полей ввода логин (input) и поля ввода (input) пароль. Я хочу показать принцип работы и конечно, что представляют сами эти поля, откуда они берутся и как это сделать.
Само поле ввода которое вы видите на сайтах (), т.е. отображаемое браузерами, где есть система регистрации - это есть HTML код, пример ниже.


Листинг № 1 - HTML тег формирующий поле ввода - INPUT


<input name="" type="text">

У этого тега есть атрибуты, которые описывают его свойства. Например type - описывает тип, т.е. поле для ввода текста ("text"). Атрибут name - это всегда имя этого поля на web странице. Что же это значит? Давайте посмотрим код любой страницы в браузере, например поисковика Яндекс, нажмите на эту ссылку https://ya.ru.
Перед нами открылась страница поисковой системы "Яндекс". Нажмите две клавиши одновременно Ctrl и U (Ctrl+U), вы увидите тот самый код web страницы, который написан для браузера. Помимо тега <input>, на странице ещё масса кода, который нас сечас не интересует. Я просто хотел продемонстрировать как выглядит код который мы видим с вами в браузере, и что он из себя представляет для самого браузера.
Возвратимся к атрибуту name, тега input, как мы уже видели, код страницы представляется огромным сбором всяческих тегов, текста и ещё массы другой информации. Для того чтоб браузер чётко понимал к какой именно форме на странице нужно обратиться, этой форме присваивается имя или ещё называют ID (идентификатор). Это имя (ID), присваивается атрибуту тега name при помощи оператора = и получаем name="здесь имя этого поля", например поле логин, присвоим имя login.
.




Листинг № 2 - Именованное текстовое поле ввода login



<input name="login" type="text">

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


Листинг № 3 - Именованные поля ввода данных Логин и Пароль


Логин:  <input name="login" type="text">
Пароль: <input name="pass" type="text">

В браузере мы увидим следующие:

Логин:
Пароль:
Теперь нам необходимо добавить кнопку для отправки пользователем того, что он ввёл, обработчику этой формы. Это значит, что данные введённые в форму отправятся некоему коду, который на основании этих данных предпримет ответный шаг. Этим шагом может быть (ответ на правильно введённые данные): предложение войти на сайт или же наоборот, если данные представленные пользователем не подтверждены, то ему предложат зарегистрироваться на сайте. Это принцип работы сервиса регистрации, так сказать логика (алгоритм) работы.


Листинг № 4 - Именованные поля ввода данных Логин, Пароль плюс кнопка Войти



Логин:  <input name="login" type="text">
Пароль: <input name="pass" type="text">
<input name="go" type="submit" value="Войти">

В браузере мы увидим следующие:

Логин:
Пароль:

Теперь чтобы это всё можно было отправить, не хватает поля <form>. Это поле обобщает все данные которые будут отправлены, а так же в этом теге прописывается путь куда именно надо отправить данные из полей логин и пароль. В данном случаи тег <form> является транспортом который перевозит данные, а кнопку можно сравнить с газом (с командой поехали :)). Это все конечно образно. Атрибут action тега <form>, как раз и содержит адрес доставки данных, а атрибут method тега <form> определяет каким способом будет выполнена эта доставка. Ниже можно посмотреть окончательный код для отправки обработчику.


Листинг № 5 - Форма с полями для ввода данных логин, пароль


<form action="avtor.php" method="get">
Логин:  <input name="login" type="text">
Пароль: <input name="pass" type="text">
<input name="go" type="submit" value="Войти">
</form>

В браузере мы увидим следующие:


Логин:
Пароль:


Как мы видим выше, визуально ничего не изменилось, так оно и должно быть. Тег <form>не каким образом не отображается в браузере, этот тег предназначен только для самого браузера, чтоб ему определиться куда направлять данные после срабатывания кнопки с надписью "Войти" и именем (ID) go. В данном случаи данные будут направлены файлу avtor.php, находящемуся в той же директории, что и файл с формой.


Урок закончен.









Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Vovan4ikru | 8 октября 2010 17:47
  • Группа: Посетители |
  • Комментарий: 1 (ссылка)

Спасибо. Полезный урок, все так хорошо расписано

alex2ww | 5 марта 2011 18:38
  • Группа: Посетители |
  • Комментарий: 2 (ссылка)

спасибо помогло!

Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.