Чат веб-разработчиков
Форма авторизации на HTML

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

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

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

Пример:

Код доступен только после покупки курса HTML для начинающих.

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

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

Код доступен только после покупки курса HTML для начинающих.

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

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

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

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

Пример:

Код доступен только после покупки курса HTML для начинающих.

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

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

Код доступен только после покупки курса HTML для начинающих.

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

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

Читайте также
Комментарии


Nikita1994
Nikita1994

В поле формы не отображается изначально выведенный текст ("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
ivashkevich

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

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