У нас вы можете скачать бесплатно Как сделать поля ввода логин, пароль.
Данный материал предоставлен сайтом 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 - Именованные поля ввода данных Логин и Пароль
Теперь нам необходимо добавить кнопку для отправки пользователем того, что он ввёл, обработчику этой формы. Это значит, что данные введённые в форму отправятся некоему коду, который на основании этих данных предпримет ответный шаг. Этим шагом может быть (ответ на правильно введённые данные): предложение войти на сайт или же наоборот, если данные представленные пользователем не подтверждены, то ему предложат зарегистрироваться на сайте. Это принцип работы сервиса регистрации, так сказать логика (алгоритм) работы.
Листинг № 4 - Именованные поля ввода данных Логин, Пароль плюс кнопка Войти
Теперь чтобы это всё можно было отправить, не хватает поля <form>. Это поле обобщает все данные которые будут отправлены, а так же в этом теге прописывается путь куда именно надо отправить данные из полей логин и пароль. В данном случаи тег <form> является транспортом который перевозит данные, а кнопку можно сравнить с газом (с командой поехали :)). Это все конечно образно. Атрибут action тега <form>, как раз и содержит адрес доставки данных, а атрибут method тега <form> определяет каким способом будет выполнена эта доставка. Ниже можно посмотреть окончательный код для отправки обработчику.
Листинг № 5 - Форма с полями для ввода данных логин, пароль
Как мы видим выше, визуально ничего не изменилось, так оно и должно быть. Тег <form>не каким образом не отображается в браузере, этот тег предназначен только для самого браузера, чтоб ему определиться куда направлять данные после срабатывания кнопки с надписью "Войти" и именем (ID) go. В данном случаи данные будут направлены файлу avtor.php, находящемуся в той же директории, что и файл с формой.
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Информация Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.