Ответ 1

HTML5 имеет атрибут autocomplete, который может быть указан как on или off в поле.

Вот пример:

<form action="/form.php" autocomplete="on">
  First name:<input type="text" name="first_name"><br>
  Last name: <input type="text" name="last_name"><br>
  E-mail: <input type="email" name="email" autocomplete="off">
  <input type="submit">
</form>

То, как это работает, - это то, что значения, которые вы отправляете в первый раз, будут предложены вам в последующие времена, когда вы посещаете эту страницу в keyup каждого поля.

• Проблема при решении использовать эту функцию является совместимой с браузером. Лучше всего проверять несколько браузеров, чтобы убедиться, что он работает. caniuse.com заставляет поддержку выглядеть довольно плохо, но я не вижу никакого вреда, которое она использует, чтобы помочь тем, у кого есть современные браузеры.

Другие фактоиды о autocomplete от W3Schools, не ненавидите в этом случае, поскольку он охватывает основы:

• Когда автозаполнение включено, браузер автоматически заполняет значения на основе значений, которые пользователь ввел ранее.
• Можно имеют автозаполнение "on" для формы и "off" для конкретного ввода полей или наоборот.
• Атрибут автозаполнения работает с и следующие типы: текст, поиск, URL, тел, электронная почта, пароль, датапикеры, диапазон и цвет.

Ответ 2

Вы должны попробовать элемент datalist. Он четко определен в рекомендации W3C HTML5, вероятно, лучший вариант на столе в настоящее время и в ближайшем будущем.

Элемент datalist подключается к элементу input, используя список атрибут на входном элементе.

Каждый элемент option, являющийся потомком элемента datalist, который не отключен, и значение которого представляет собой строку, которая не является пустой строка, представляет собой предложение. Каждое предложение имеет value и label.

Google Chrome и chromium браузеры поддерживают его с v21.x(по состоянию на декабрь 2014 года текущая версия равна 39, проверьте статус совместимости другие браузеры здесь) Firefox и Opera также поддерживается в течение длительного времени. Современные (!) Версии IE частично поддерживают datalist.

Демонстрация: Отличная работающая datalist реализация от Eiji Kitamura.

Polyfill. Также проверьте RelevantDropdown. Это datalist HTML5 polyfill, который зависит от jQuery и Modernizr.

Попробуйте запустить этот пример:

<input type="search" list="languages" placeholder="Pick a programming language..">

<datalist id="languages">
  <option value="PHP" />
  <option value="C++" />
  <option value="Java" />
  <option value="Ruby" />
  <option value="Python" />
  <option value="Go" />
  <option value="Perl" />
  <option value="Erlang" />
</datalist>

Ответ 3

С HTML5 возможен ввод автозаполнения стиля google без использования Javascript!

Смотрите эту статью: HTML5-стиль "Google Suggest"

Однако он еще не полностью поддерживается. Примеры из этой статьи будут работать только в Opera.

На данный момент лучше всего использовать хорошо протестированную библиотеку с широкой поддержкой браузера, например, JQuery UI, который имеет Autocomplete виджет.

Ответ 4

Этот вопрос довольно старый, но у меня есть обновленный ответ для 2017!

Здесь ссылка на официальный текущий WHATWG HTML Standard для включения автозаполнения.

Следующий ответ от моего первоначального ответа отсюда: fooobar.com/questions/40163/...

Все, что вам нужно сделать, чтобы запустить автозаполнение, это правильно назвать тэг input.

Google написал довольно приятное руководство для разработки веб-приложений, дружественных к мобильным устройствам. У них есть раздел о том, как назвать входы форм, чтобы легко использовать автозаполнение. Несмотря на то, что он написан для мобильных устройств, это применимо как для настольных, так и для мобильных устройств!

Как включить автозаполнение в ваших HTML-формах

Вот несколько ключевых моментов включения автозаполнения:

• Используйте <label> для всех ваших полей <input>
• Добавьте атрибут autocomplete в теги <input> и заполните его с помощью .
• Назовите свои атрибуты 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 и <Т23 > атрибуты в тегах <input>. Это автоматически разрешит автозаполнение форм. Удостоверьтесь, что у вас есть <label>! Эта информация также может быть найдена здесь.

Здесь, как назвать ваши входы:

• Имя
  • Используйте любой из них для name: name fname mname lname
  • Используйте любой из них для autocomplete:
    • name (для полного имени)
    • given-name (для имени)
    • additional-name (для среднего имени)
    • family-name (для фамилии)
  • Пример: <input type="text" name="fname" autocomplete="given-name">
• Email
  • Используйте любой из них для name: email
  • Используйте любой из них для autocomplete email
  • Пример: <input type="text" name="email" autocomplete="email">
• Адрес
  • Используйте любой из них для name: address city region province state zip zip2 postal country
  • Используйте любой из них для autocomplete:
    • Для ввода одного адреса:
      • street-address
    • Для двух адресных входов:
      • address-line1
      • address-line2
    • address-level1 (штат или провинция)
    • address-level2 (город)
    • postal-code (почтовый индекс)
    • country
• Телефон
  • Используйте любой из них для name: phone mobile country-code area-code exchange suffix ext
  • Используйте любой из них для autocomplete: tel
• Кредитная карта
  • Используйте любой из них для name: ccname cardnumber cvc ccmonth ccyear exp-date card-type
  • Используйте любой из них для autocomplete:
    • cc-name
    • cc-number
    • cc-csc
    • cc-exp-month
    • cc-exp-year
    • cc-exp
    • cc-type
• Usernames
  • Используйте любой из них для name: username
  • Используйте любой из них для autocomplete: username
• Пароли
  • Используйте любой из них для name: password
  • Используйте любой из них для autocomplete:
    • current-password (для форм входа)
    • new-password (для форм регистрации и изменения пароля)

Ресурсы

• Текущий HTML-стандарт WHATWG для автозаполнения.
• "Создать удивительные формы" от Google. Кажется, обновляется почти ежедневно. Отлично прочитал.
• "Скорее скопировать пользователей с помощью Autofill" из Google в 2015 году.

Ответ 5

Я следил за этим руководством MSDN, чтобы принудительно вводить входной сигнал datalist, чтобы разрешать только текст, соответствующий параметрам в datalist. Он использует API проверки соответствия HTML:

http://msdn.microsoft.com/en-us/magazine/dn133614.aspx