Как форма autofill работает в современных веб-браузерах? Каковы наиболее распространенные методы, используемые в браузерах, которые реализуют автоматическое заполнение форм?
- EDIT -
Вопрос не в автозаполнении, а в форме автозаполнения формы, который заботится не только о ранее введенных значениях, но также учитывает значение и структуру поля. Реализация Google Chrome, например, пытается проанализировать введенные поля, чтобы угадать их тип и структуру. Или, по крайней мере, это то, что я понял из приведенного выше кода.
Посмотрите этот ответ на kmote.
Выделите, что браузер смотрит в поле тег name и дает обоснованное предположение, какие данные будут поступать туда (сопоставление регулярных выражений - это наивный наивный способ сделать это). Chrome работает, чтобы получить некоторую стандартизацию, так что это не совсем так, как удар или промах.
Различные технологии и браузеры используют различные методы для расчета того, что отображаться, а также как они отображают его, но некоторые источники для проверки:
Если вы изучаете его (или просто используете) самостоятельно, я настоятельно рекомендую взглянуть на плагин.
Первый элемент ответа - это просто нестандартный атрибут HTML autocomplete, который был введен с Internet Explorer несколько лет назад.
По иронии судьбы, вы можете прочитать хорошую историю на сайте mozilla: Атрибут autocomplete и веб-документы с использованием XHTML
Этот вопрос довольно старый, но у меня есть обновленный ответ для 2017!
Чтобы запустить автозаполнение, все, что вам нужно сделать, это правильно назвать.
Следующий ответ из моего первоначального ответа отсюда: fooobar.com/info/40163/...
Здесь ссылка на официальный текущий WHATWG HTML Standard для включения автозаполнения.
Google написал довольно приятное руководство для разработки веб-приложений, дружественных к мобильным устройствам. У них есть раздел о том, как назвать входы форм, чтобы легко использовать автозаполнение. Несмотря на то, что он написан для мобильных устройств, это применимо как для настольных, так и для мобильных устройств!
Вот несколько ключевых моментов включения автозаполнения:
<label> для всех ваших полей <input>autocomplete в теги <input> и заполнить его с помощью этого guide.name и autocomplete правильно для всех тегов <input>Пример:
<label for="frmNameA">Name</label>
<input type="text" name="name" id="frmNameA"
placeholder="Full name" required autocomplete="name">
<label for="frmEmailA">Email</label>
<input type="email" name="email" id="frmEmailA"
placeholder="[email protected]" required autocomplete="email">
<!-- note that "emailC" will not be autocompleted -->
<label for="frmEmailC">Confirm Email</label>
<input type="email" name="emailC" id="frmEmailC"
placeholder="[email protected]" required autocomplete="email">
<label for="frmPhoneNumA">Phone</label>
<input type="tel" name="phone" id="frmPhoneNumA"
placeholder="+1-555-555-1212" required autocomplete="tel">
<input>Чтобы запустить автозаполнение, убедитесь, что вы правильно назвали атрибуты name и autocomplete в тегах <input>. Это автоматически разрешит автозаполнение форм. Убедитесь, что у вас есть <label>! Эта информация также может быть найдена здесь.
Здесь, как назвать ваши входы:
name: name fname mname lnameautocomplete:
name (для полного имени)given-name (для имени)additional-name (для среднего имени)family-name (для фамилии)<input type="text" name="fname" autocomplete="given-name">name: emailautocomplete: email<input type="text" name="email" autocomplete="email">name: address city region province state zip zip2 postal countryautocomplete:
street-addressaddress-line1address-line2address-level1 (состояние или провинция)address-level2 (город)postal-code (почтовый индекс)countryname: phone mobile country-code area-code exchange suffix extautocomplete: telname: ccname cardnumber cvc ccmonth ccyear exp-date card-typeautocomplete:
cc-namecc-numbercc-csccc-exp-monthcc-exp-yearcc-expcc-typename: usernameautocomplete: usernamename: passwordautocomplete:
current-password (для форм входа)new-password (для форм регистрации и изменения пароля)