16.03.2017   4427
Форма авторизации на HTML

Создаём форму авторизации на HTML

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

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

Пример:

<form method="post" action="/login/">
    <table>
        <tr>
            <td><label for="loginField">Логин</label></td>
            <td><input id="loginField" type="text" name="login"></td>
        </tr>
        <tr>
            <td><label for="passwordField">Пароль</label></td>
            <td><input id="passwordField" type="text" name="password"></td>
        </tr>
    </table>
</form>

Результат в браузере:
Форма авторизации

Чтобы введенный в нем текст заменялся на звездочки, как это принято для поля такого типа, необходимо сделать одно простое действие. А именно, осуществить замену значения атрибута type на password:

<input id="passwordField" type="password" name="password">

Результат:
Форма авторизации с полем пароля

Кнопка отправки формы

Ну, вот. Наша форма уже почти готова. Теперь, чтобы завершить ее создание, необходимо сделать кнопку, которой будет осуществляться отправка формы. Задача решается с применением тега <input> с типом submit.

Если на кнопке должна присутствовать какая-то надпись, то ее можно сделать, используя атрибут value. Задавать имя кнопке или нет – на ваше усмотрение, то если вы это сделаете, то сервер будет получать это имя, а также значение кнопки.

Пример:

<input type="submit" value="Войти">

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

В итоге код нашей формы получится следующим:

<form method="post" action="/login/">
    <table>
        <tr>
            <td><label for="loginField">Логин</label></td>
            <td><input id="loginField" type="text" name="login"></td>
        </tr>
        <tr>
            <td><label for="passwordField">Пароль</label></td>
            <td><input id="passwordField" type="password" name="password"></td>
        </tr>
        <tr>
            <td colspan="2" style="text-align: center"><input type="submit" value="Войти"></td>
        </tr>
    </table>
</form>

Результат в браузере:
Полноценная форма авторизации

Вот и получилась наша формочка авторизации на HTML. Подписывайтесь на нас в социальных сетях, чтобы не пропустить новые уроки!

Домашнее задание
Для просмотра нужно войти на сайт.
Или получить доступ прямо сейчас:


Нажимая эту кнопку
Вы принимаете политику конфиденциальности

КОММЕНТАРИИ

 Nikita1994 2017-09-07 18:15:52
0

В поле формы не отображается изначально выведенный текст ("login" и "password") как на этом изображении enter image description here
Даже при копировании вашего кода в браузере этот текст не отображается. Как можно решить эту проблему?

<form method="post" action="/login/">
    <table>
        <tr>
            <td><label for="loginField">Логин</label></td>
            <td><input id="loginField" type="text" name="login"></td>
        </tr>
        <tr>
            <td><label for="passwordField">Пароль</label></td>
            <td><input id="passwordField" type="text" name="password"></td>
        </tr>
    </table>
</form>

Ответить
  •  ivashkevich 2017-09-10 14:31:33
    0

    Вообще я просто заполнил форму уже в браузере. Вы же можете использовать атрибут placeholder, вот так:

    <input id="loginField" type="text" name="login" placeholder="login">

    Ответить
Чтобы написать комментарий нужно войти на сайт.
Или получить доступ прямо сейчас:


Нажимая эту кнопку
Вы принимаете политику конфиденциальности