Как сделать чтобы input не запоминал данные
Обновлено: 08.07.2024
Наша группа в Telegram для обмена идеями, проектами, мыслями, людьми в сфере ИТ г.Ростова-на-Дону: @it_rostov
Выбор цвета
Это поле, которое позволяет выбрать цвет.
Пример
Атрибут value используют для установки исходного цвета, его можно не указывать.
Поле ввода даты
Поле типа date позволяет ввести дату с помощью календаря.
Можно задать нижнюю и верхнюю границу диапазона дат атрибутами min и max.
Пример
Поле ввода адреса электронной почты
Для ввода нескольких адресов можно добавить атрибут multiple, при этом для разделения адресов используется запятая (,)
Пример
Файл FILE
Позволяет передать сценарию любой файл. Максимальный размер файла в байтах задается скрытым полем max_file_size.
Пример
Сценарий получения файла на PHP:
Для указания возможных типов файлов используется атрибут accept:
Для CSV files (.csv), используйте: Для Excel Files 2003-2007 (.xls), используйте: Для Excel Files 2010 (.xlsx), используйте: Для Text Files (.txt) используйте: Для Image Files (.jpg/.jpg/etc), используйте: Для HTML Files (.htm,.html), используйте: Для Video Files (.avi, .mpg, .mpeg, .mp4), используйте: Для Audio Files (.mp3, .wav, etc), используйте: Для PDF Files, используйте:
Браузер Chrome понимает дополнительные атрибуты "webkitdirectory directory", указание которых у input позволяет выбирать целые папки:
Скрытое поле HIDDEN
Это специальный (скрытый) тип текстового поля. Если один сценарий обрабатывает несколько разных форм, то в скрытом поле каждой формы можно указать идентификатор, который позволит определить, с какой формой вы имеете дело.
Пример
Браузер не отображает скрытое поле, хотя его можно обнаружить, если перевести броузер в режим просмотра HTML-файла и проанализировать текст Web-страницы. Скрытые поля полезны, если необходимо указать требуемую для сценария информацию, но при этом нежелательно, чтобы пользователь имел возможность вносить в нее изменения. Однако учтите, что сообразительный пользователь может сохранить вашу форму в файле, отредактировать его, а затем передать эту форму серверу в измененном виде. Поэтому не стоит полагаться на скрытые поля с целью создания какой-либо защиты.
Пример
Сценарий получит переменную с именем FormVersion, которой будет присвоено значения 1.2. Эта информация может использоваться для определения способа обработки остальной информации, полученной от формы. Если пользователь изменит это значение, то программа сценария может повести себя неожиданным образом.
Поле ввода чисел NUMBER
Пример
Можно задать минимальное, максимальное значение поля и шаг изменения числа. Значение шага может быть как целым, так и дробным, но должно быть больше 0. Если введенное в поле число не будет отвечать заданным ограничениям, то отправка на сервер не произойдет.
Пример
Для задания любого шага используйте step="any".
Пример
Поле number отображается по-разному: некоторые браузеры показывают стрелочки всегда, некоторые – только при наведении или получении полем фокуса.
Если нужно, чтобы стрелочки в поле number были всегда, задайте стиль:
Если нужно убрать стрелочки в поле number, задайте стиль:
Поле ввода пароля PASSWORD
Поле ввода пароля очень похоже на простое текстовое поле. Отличается оно тем, что вместо вводимых символов в нем отображаются точки. Такая возможность очень важна, когда нужно ввести секретную информацию, типа пароля, которую не должны видеть другие.
Пример
Переключатель RADIO
Переключатель напоминает флажок, поскольку он тоже может находиться во включенном или выключенном состоянии.
По смыслу всегда предполагается, что в форме имеется несколько переключателей с одинаковым атрибутом name. У каждого из них свое значение атрибута value. Группа переключателей с одним и тем же именем в форме ведет себя таким образом, что только один из них может быть включенным. При передаче данных передается значение только выбранного переключателя.
Один переключатель из группы может быть изначально выбран по умолчанию с помощью атрибута checked.
Пример
Ползунок RANGE
Поле предназначено для ввода числа в указанном диапазоне.
Можно задать минимальное значение (по умолчанию 0), максимальное значение (по умолчанию 100), шаг изменения числа (по умолчанию 1) и текущее значение (по умолчанию среднее арифметическое минимального и максимального значений).
Пример
Ползунок сам по себе не даёт пользователю представление, какое же число он выбрал. Поэтому здесь без JavaScript не обойтись.
Пример
Поле range отображается разными браузерами по-разному.
Если хотите своё оформление, задайте стили для ползунка:
Но победить до конца стили IE11 не удастся!
Кнопка RESET
Это кнопка очистки формы. При ее нажатии всем измененным элементам возвращается значение по умолчанию. Применяется она достаточно редко. Однако в некоторых случаях может быть весьма полезна.
Пример
Кнопка SUBMIT
Эта кнопка предназначена для передачи формы. В большинстве браузеров внешне почти не отличима от кнопки BUTTON. Сама она не передается, а служит только для управления.
Атрибут onclick для кнопки SUBMIT практически не используется, так как лучше использовать обработчик событий onsubmit, заданный в теге
Атрибут value дает определенные преимущества при использовании более одной кнопки передачи данных. В этом случае на основании значения полученной переменной сценарий сможет определить, как обрабатывать полученную информацию далее.
Пример
Атрибут formnovalidate может быть применен, чтобы предотвратить проверку значений формы.
Пример
Поле ввода TEXT
Текстовое поле ввода используется в формах наиболее часто. Более того, его можно по праву считать основным и главнейшим элементом форм. Этот тип используется тегом по умолчанию, его можно не указывать, чтобы вывести текстовое поле. Однако, если возникнет необходимость задать стиль для селектора input[type="text"], то тогда атрибут type="text" пропускать нельзя.
Имя поля, задаваемое атрибутом name, всегда обязательно, так как базируясь именно на этом параметре, браузер передает сценарию пару имя=значение.
Пример
При заполнении пользователем формы в интернете умница-браузер автоматически подставляет значения, основываясь на вводимых ранее аналогичных данных.
Что такое автодополнение?
При заполнении пользователем формы в интернете смышлёный браузер показывает возможные значения, основываясь на вводимых ранее аналогичных данных. Так пользователь может выбрать и принять подсказанный вариант.
Автозаполнение или автодополнение применяются к имени пользователя, паролю, номеру телефона, адресу, электронной почте, данным кредитной карты или любым другим произвольным полям.
Отличия между автозаполнением и автодополнением незначительны. Бывает, что веб-сайт поддерживает выполнение обеих функций в одной форме. Например, он предлагает варианты автодополнения при вводе имени пользователя, и, как только оно подобрано, автоматически вставляет соответствующий пароль.
Во м н огих ситуациях эти опции взаимозаменяемы. В спецификации HTML автозаполнение значится в официальной терминологии и предназначено для помощи пользователям в заполнении форм. С этой целью используется атрибут HTML autocomplete для подсказки браузеру, как предоставить такую возможность или стоит ли вообще это делать.
Зачем нужны автозаполнение/автодополнение?
Эти функции помогают пользователям быстрее заполнять формы в интернете, особенно на мобильных устройствах. Для каждого веб-сайта рекомендуется создавать надежные и уникальные пароли. Как следствие, с запоминанием сложных из них возникают проблемы. Посредством автозаполнения/автодополнения браузеры запоминают информацию, а именно пароли, номера кредитных карт, адреса и т. д. Пользователю остается только решить, доверяет ли он средствам безопасности браузера.
В статье мы подробно рассмотрим, как браузеры автоматически заполняют стандартные поля кредитных карт, адресов и паролей.
Как отключить autocomplete в основных браузерах для определенного input (или form field )?
Firefox 30 игнорирует autocomplete="off" для паролей, предпочитая вместо этого запрашивать пользователя, должен ли пароль храниться на клиенте. Обратите внимание на следующий комментарий от 5 мая 2014 года:
-
Менеджер паролей всегда запрашивает, хочет ли он сохранить пароль. Пароли не сохраняются без разрешения пользователя. Мы являемся третьим браузером для реализации этого изменения после IE и Chrome.
Согласно документации разработчика Mozilla атрибут элемента формы autocomplete предотвращает кэширование данных форм в старых браузерах.
В дополнение к autocomplete=off вы также можете иметь имена полей форм, которые будут рандомизированы кодом, который генерирует страницу, возможно, добавив некоторую строку, относящуюся к сеансу, в конец имен.
Когда форма отправлена, вы можете снять эту часть перед ее обработкой на стороне сервера. Это помешает веб-браузеру найти контекст для вашего поля, а также может помочь предотвратить атаки XSRF, потому что злоумышленник не сможет угадать имена полей для представления формы.
Большинство основных браузеров и менеджеров паролей (правильно, IMHO) теперь игнорируют autocomplete=off .
Зачем? Многие банки и другие сайты с высокой степенью безопасности добавили autocomplete=off к своим страницам входа в систему "для целей безопасности", но это фактически снижает безопасность, поскольку это заставляет людей менять пароли на этих сайтах с высокой степенью безопасности, чтобы их было легко запомнить (и, следовательно, трещины), так как автозаполнение было нарушено.
Давным-давно большинство менеджеров паролей начали игнорировать autocomplete=off , и теперь браузеры начинают делать то же самое только для ввода имени пользователя и пароля.
К сожалению, ошибки в реализациях автозаполнения вставляют имя пользователя и/или пароль в неправильные поля формы, вызывая ошибки проверки формы или, что еще хуже, случайно вставляя имена пользователей в поля, которые пользователь намеренно оставил пустым пользователем.
Что веб-разработчик делать?
-
Если вы можете хранить все поля пароля на странице самостоятельно, это отличный старт, поскольку кажется, что наличие поля пароля является основным триггером для автозаполнения пользователя/пароля для ввода. В противном случае прочитайте приведенные ниже советы. Safari замечает, что в этом случае есть два поля пароля и в этом случае отключает автозаполнение, предполагая, что это должна быть форма пароля для изменения, а не форма входа в систему. Поэтому просто обязательно используйте 2 поля пароля (новые и подтвердите новые) для любых форм, где вы разрешаете
Chrome 34, к сожалению, будет пытаться автоматически заполнять поля с помощью пользователя/пароля всякий раз, когда он видит поле пароля. Это довольно плохая ошибка, которая, надеюсь, изменит поведение Safari. Однако, добавление этого в начало вашей формы, кажется, отключает автозаполнение пароля:
Я еще не исследовал IE или Firefox полностью, но буду рад обновить ответ, если у других есть информация в комментариях.
Быстрый и легкий jQuery плагин для автозаполнения текстовых input полей формы. Он автоматически предлагает сопоставление введенных в текстовое поле ключевых слов с данными из массива, что позволяет пользователям быстро находить нужные значения.
Пример:
Введите в поле ниже несколько букв от названия любого города РФ
Введите в поле ниже несколько букв латинского алфавита
Установка:
- Подключаем оригинальный CSS autocomplete.css или используемый в этом примере at-autocomplete.css
- Подключаем оригинальный JS autocomplete.js или с изменениями at-autocomplete.js, в котором полностью скрыт список для выбора при отсутствии совпадений.
Добавляем к текстовому полю input нужный ID
и инициализируем с нужными настройками:
В сегодняшней статье я расскажу и покажу парочку трюков, которые можно использовать для тега input .
Не терпится узнать, какие это трюки?
- убрать обводку при клике на поле формы;
- добавить обводку при наведении мишкой;
- изменить курсор мышки при наведении на input;
- убрать при клике на input текст подсказки;
- вывести данные из input в div (JavaScript);
- проверка поля input на ввод цифр.
Как убрать обводку при клике на input (поле формы)
Не знаю как вас, но меня дико раздражает, когда кликаешь мышкой по полю формы, и появляется обводка, которая реально портит весь дизайн полей.
Давайте по порядку.
Вставьте для примера вот этот HTML код к себе на страничку:
Можно поменять и цвет обводки:
Как добавить обводку при наведении мышки на input (поле формы)
Как убрать стандартную обводку при клике на поле формы вы уже знаете, а вот как сделать обводку при наведении на нее мышки, это вы сейчас узнаете.
Чтобы форма красиво смотрелась, можно сделать вот так:
Как изменить курсор мышки при наведении на input (поле формы)
Как убрать при клике на input текст подсказки
Чтобы такое сделать, достаточно вставить код событий в поле input :
Как вывести данные из input в div (JavaScript)
Проверка поля input на ввод цифр (JavaScript)
Если хотите запретить ввод поля input буквами, а разрешить только ввод цифрами, то воспользуйтесь вот таким кодом:
Если хотите запретить только ввод цифр, тогда JS код будет вот таким (обратите внимание на строку №4 ):
Читайте также: