Grant-Host
Новичок
INPUT и FORM - форма ввода данных
Тег <INPUT> является одним из разносторонних элементов формы и позволяет создавать разные элементы интерфейса и обеспечить взаимодействие с пользователем. Главным образом <INPUT> предназначен для создания текстовых полей, различных кнопок, переключателей и флажков.
Система регистрации не возможна, как минимум без полей ввода логин (input) и поля ввода (input) пароль. Я хочу показать принцип работы и конечно, что представляют сами эти поля, откуда они берутся и как это сделать.
Само поле ввода которое вы видите на сайтах (), т.е. отображаемое браузерами, где есть система регистрации - это есть HTML код, пример ниже.
Листинг № 1 - HTML тег формирующий поле ввода - INPUT
<input name="" type="text">
У этого тега есть атрибуты, которые описывают его свойства. Например type - описывает тип, т.е. поле для ввода текста ("text"). Атрибут name - это всегда имя этого поля на web странице. Что же это значит? Давайте посмотрим код любой страницы в браузере, например поисковика Яндекс, нажмите на эту ссылку
Чтобы видеть скрытое содержание Зарегистрируйтесь на форуме!
.Перед нами открылась страница поисковой системы "Яндекс". Нажмите две клавиши одновременно 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, находящемуся в той же директории, что и файл с формой.