Блог веб разработки статьи | видеообзоры | исходный код

Блог веб разработки статьи | видеообзоры | исходный код

webfanat вконтакте webfanat youtube

autocomplete html

autocomplete html

Всем привет. Формы являются важной составляющей любого интернет ресурса и поэтому нужно максимально упрощать работу с ними. И именно для этого в стандарт html было введено автозаполнение полей форм:

Давайте рассмотрим пример:

<form method="post" action="/">
    <input placeholder="Введите login " name="login" type="text" required />
    <br>
    <br>
    <input type="password" name="password" placeholder="Введите пароль" required>
    <br>
    <br>
    <button>
        Отправить
    </button>
</form>

Здесь у нас есть некая форма авторизации. Допустим мы авторизуемся под логином 'uhrufhu'. И теперь в следующий раз когда мы захотим авторизоваться и начнем вводить логин. У нас внизу подсветиться подсказка в виде выпадающего списка в которой будет содержаться наш логин. То есть, нам не придется вводить логин полностью, а достаточно будет выбрать значение из списка. Это и есть, то самое автозаполнение полей форм которое можем облегчить работу пользователя.

Заметьте что в поле с типом 'password' автозаполнение не работает. Это сделано для безопасности.

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

К счатью автозаполнение можно отменять.

Пример:

<input placeholder="Введите  проверочный код" name="captcha" type="text" required autocomplete="off"/>

Здесь у нас поле для ввода кода капчи и мы отменили автозаполение данного поля с помощью свойства 'off' атрибута autocomplete.

Именно атрибут autocomplete и отвечает за автозаполнение поля формы. По умолчанию данный атрибут имеет значение 'on', то есть автозаполнение включено:

<input placeholder="Введите login " name="login" autocomplete="on"  type="text" required />

В принципе autocomplete="on" можно не указывать, так как автозаполнение работает по умолчанию.

Но если мы хотим от него избавится, нам достаточно прописать в качестве атрибута autocomplete="off" и автозаполнение в данном поле перестанет работать.

На этом данная статья подошла к концу. Скажу что помимо значений 'on' и 'off ' атрибут autocomplete может принимать и другие значения( autofill detail tokens). Более подробную информацию о них вы можете найти на Хабре https://habrahabr.ru/company/mailru/blog/301840/ .

Я с вами прощаюсь. Желаю успехов и удачи! Пока!

Оцените статью:

Статьи

Комментарии

Внимание!!! Комментарий теперь перед публикацией проходит модерацию

Все комментарии отправлены на модерацию

Реклама

Запись экрана

Данное расширение позволяет записывать экран и выводит видео в формате webm