Вы действительно понимаете форму формы?

Я считаю, что как фронтенд-разработчик я более или менее понимаю формы форм; на самом деле, в начале html наши веб-страницы в основном использовались для отображения информации и отправки форм. Если вы действительно понимаете форму (здесь имеется в виду включение ввода, выбора, ранжирования и т. д.), вы почувствуете, что она похожа на ящик Пандоры, и вы понятия не имеете, что с ней произойдет.

input获取焦点时高亮问题

input,textarea {
   outline: none;
   -webkit-tap-highlight-color:transparent;
}
// 对于这种（input高亮）多此一举的功能有时真是无力吐槽

通过label扩大单选框复选框的点击范围

Щелкните необязательное поле

Чтобы облегчить взаимодействие с пользователем, мы надеемся щелкнуть «щелкнуть необязательное поле», чтобы установить флажок;

<label for='check'>点击可选框</lebal>
<input type='checkbox' id='check'>

Щелкните необязательное поле

更改input类型，让用户无需切换键盘，轻松完成输入

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

[type=url]: используется для ввода URL. Он должен начинаться с действительной схемы URI, такой как http://, ftp:// или mailto:.

【type=tel】: Используется для ввода номера телефона. Он не применяет определенный синтаксис проверки, поэтому, если вы хотите обеспечить определенный формат, вы можете использовать атрибут схемы.

[type=email]: используется для ввода адреса электронной почты и подсказывает, что @ должен отображаться по умолчанию на клавиатуре. Если от пользователя требуется указать несколько адресов электронной почты, можно добавить множественный атрибут.

[type=search]: поле ввода текста, стиль которого соответствует полю поиска платформы.

// 统一平台search表现形式
input[type="search"]::-webkit-search-cancel-button{
    display: none; // 隐藏默认x
}
-webkit-appearance: none; // 针对ios 设置样式, 去除ios下input 椭圆形

[тип=число]: используется для цифрового ввода, который может быть любым разумным целым числом или значением с плавающей запятой. Разбудить цифровую клавиатуру можно на Android, но не на ISO. нужно добавитьpattern="\d*";Если мы хотим просто разбудить цифровую клавиатуру, мы можем установить ее напрямуюtype=telИ ISO, и Android могут активировать цифровую клавиатуру (цифровая клавиатура здесь — это клавиша набора номера без . ).

// 对于type=number 类型通常css除去小箭头样式
input[type='number'] {
    -moz-appearance:textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input输入光标问题

1. При разработке для мобильных устройств иногда нам нужно спроектировать ввод так, чтобы он был относительно высоким для общего макета страницы; если я следую общему мышлению, поле ввода ввода имеет высоту строки, а высота соответствует требования к дизайну.В приведенном выше нет никаких проблем, но в браузере ISO вы обнаружите, что курсор становится очень длинным.

Проанализируйте каждое представление браузера:

IE: высота курсора совпадает с размером шрифта независимо от того, есть ли в строке текст или нет.

FF: когда в строке нет текста, высота курсора равна высоте ввода. Когда в строке есть текст, высота курсора равна размеру шрифта. (Последняя версия, кажется, такая же, как ie)

Chrome: когда в строке нет текста, высота курсора равна высоте строки; когда в строке есть текст, высота курсора определяется от верхней части ввода до нижней части текста (в обоих случаях, когда строка -height устанавливается), если не высота строки совпадает с размером шрифта. решение:

 /*给input的height设定一个较小的高度，然后用padding去填充，基本上可以解决所有浏览器的问题*/
input{
    height: 16px;
    padding: 4px 0px;
    font-size: 12px;
}
/*只给IE line-height就可以了。*/
input{
    -ms-line-height:40px; 
}

2. Курсор ввода во всплывающем окне с фиксированным положением будет неуместен в некоторых мобильных телефонах, таких как iso (как показано на рисунке ниже).

Решение 1:

dialog-show：{ position: fixed; width: 100%;}
// 在弹出框出现时动态添加 dialog-show，消失时移除dialog-show。

Решение 2:

因为手机对fixed的兼容性不是很好；尽量将fixed布局的元素都用absolute代替。

input输入框的自动填充问题和历史记录问题

Описание проблемы: Если это веб-сайт с таким же доменным именем, а учетная запись и пароль были зарегистрированы под веб-сайтом, и вы выбрали запоминать учетную запись и пароль, или установить параметры автозаполнения в настройках. Браузер Chrome автоматически заполнит пароль учетной записи или предоставит его нам в виде выпадающей истории. Хотя эта функция приносит нам некоторое удобство, но в некоторых случаях нам эти функции не нужны.

浏览器填充机制：После повторного тестирования обнаружено, что механизм автозаполнения браузера удовлетворяет: когда на странице есть ввод type=password и перед этим вводом стоит ввод type=text, он будет автоматически заполнен. Метод обработки браузеров Firefox и 360: если обнаружено, что на странице есть механизм заполнения, будь то отображение: нет или нет, пока оно обнаружено, оно будет заполнено напрямую. И если есть несколько, которые соответствуют условиям, просто заполните несколько. Версия chrome 54 немного отличается: вышеуказанные условия соблюдены, и на странице есть только один ввод type=password. автоматически даст первый type=text Ввод type=password заполняется номером учетной записи, а ввод type=password заполняется паролем. Так что в версии chrome 54 нет проблемы с автозаполнением страницы регистрации. Метод, который придумал Google, заключается в изменении типа ввода.Ввод на странице записывается как тип = текст, и когда он получает фокус, он изменяется на тип = пароль. Я подсознательно пытался изменить тип в IE и обнаружил, что тип в IE является атрибутом только для чтения, а метод изменения типа несовместим с IE.

Решение 1: Установите скрытое входное поле, добавьте автозаполнение

<form autocomplete='off'>
<input type="text"  style='display:none' />
<input type="password"  style='display:none' /> 
<input type="text" />
<input type="password" name="password" autocomplete="new-password" /> 
</form>

Анализ: html5 предоставляет атрибут автозаполнения для входного тега, значение on/off, используется для запрета заполнения входного тега, но не действует в chorem браузере. Браузеры Chorem обычно читают первый ввод type="password" и заполняют его. Кажется, что он не подходит для браузеров 360, поэтому мы можем добиться эффекта незаполнения, установив autocomplete="new-password" (в NetEase добавлено автозаполнение).

Решение 2. Динамическое изменение типа type В результате тестирования было обнаружено, что chorem не будет заполнять поле ввода type="text"; оно будет заполнено только при встрече type='password'. Затем мы можем динамически изменить тип типа, чтобы понять, что пароль не заполняется автоматически.Наша платежная страница Ctrip предназначена для изменения типа на пароль после получения фокуса через ввод.

问题的延伸：При использовании виртуальной клавиатуры и очень маленьких устройств, экономя время пользователя и уменьшая вероятность ошибок при наборе текста, мне нужно определить, какие поля могут быть заполнены автоматически на основе данных, указанных пользователем ранее. Как контролировать заполнение конкретных полей? Как мы можем сделать это, чтобы заполнить только тот ввод, который мы хотим заполнить?

[Примечание] Chrome требует, чтобы элемент ввода был заключен в тег формы, чтобы включить автозаполнение. Если они не включены в тег формы, Chrome предоставит предлагаемые значения, но не завершит заполнение формы.

A: Вы можете предоставить атрибут имени и атрибут автозаполнения для каждого элемента ввода, чтобы запрашивать браузер. Мы можем предотвратить автозаполнение, изменив autoComplete на непредлагаемое значение свойства.

<label for="name">Name</label>
<input type="text" name="name" id="name" placeholder="Full name" autocomplete="name">

<label for="email">Email</label>
<input type="email" name="email" id="email" placeholder="name@example.com" autocomplete="email">

 // 将autocomplete 填充为非建议属性就可防止填充
<label for="nameCC">Name on card</label>
<input type="text" name="ccname" id="nameCC"   autocomplete="cc-name" class="dirty">

Предлагаемое имя ввода и значения атрибутов автозаполнения (см. таблицу ниже)

Тип содержимого	атрибут имени	свойство автозаполнения
имя	name fname mname lname	имя (полное имя) имя (имя) дополнительное имя (отчество) фамилия (фамилия)
телефон	phone mobile country-code area-code exchange suffix ext	tel
Эл. почта	email	email
пароль	password	текущий-пароль (для формы входа) новый-пароль (для регистрации и формы смены пароля)

输入框自动填充后怎么除去黄色背景

input:-webkit-autofill {
    box-shadow: 0 0 0px 1000px white inset;
    border: 1px solid #CCC!important;
}

注意：За исключением background-color, background-image и цвета, определенных хромом по умолчанию, вы не можете использовать !important для повышения их приоритета, а другие атрибуты могут использовать !important для повышения своего приоритета.

Для получения более подробной информации посетите:Создавайте великолепные формы