Form表单你真的了解么？

　　我相信作为一个前端开发，对于form表单或多或少都有一些了解；其实在html开始的阶段我们网页主要就是用来展示信息和提交表单的。如果你真正的了解form（这里指的是包括input、select、rank等），你会觉得它就像一个潘多拉魔盒你根本不知道它会发生什么。

input获取焦点时高亮问题

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

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

点击可选框

为了方便用户的交互我们希望点击“点击可选框”也可以选中checkBox；

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

点击可选框

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

HTML5引入了大量新的输入类型。这些新输入类型可以提示浏览器，屏幕键盘应显示什么类型的键盘布局。用户无需切换键盘，就能更轻松地输入所需信息，并且只看到该输入类型的相应按键。

【type=url】：用于输入网址。其开头必须是有效的 URI 架构，例如 http://、 ftp:// 或 mailto:。

【type=tel】：用于输入电话号码。它不 执行特定的验证语法，因此，如果要确保特定的格式，可以使用模式属性。

【type=email】：用于输入电子邮件地址，并提示键盘上应默认显示 @。 如果需要用户提供多个电子邮件地址，则可以添加 multiple 属性。

【type=search】：一个文本输入字段，其样式与平台的搜索字段一致。

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

【type=number】：用于数字输入，可以是任意合理的整数或浮点值。在安卓是可以唤醒数字键盘，但是在ISO却不能。需要加上pattern="\d*";如果想简单的唤醒数字键盘我们可以直接设置 type=tel在ISO和安卓下面都能唤醒数字键盘（这里的数字键盘是拨号键没有 . ）。

// 对于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.在做移动端开发的时候有时为了页面整体布局我们需要将input设计的比较高；如果我按照一般思维都是将input输入框给定line-hiegt，height让它达到设计要求，在安卓手机上是没有什么问题；但是到了ISO浏览器中会发现光标变的很长。

分析各个浏览器表现形式：

IE：不管该行有没有文字，光标高度与font-size一致。

FF：该行无文字时，光标高度与input的height一致。该行有文字时，光标高度与font-size一致。(最新版的好像和ie一样了)

Chrome：该行无文字时，光标高度与line-height一致；该行有文字时，光标高度从input顶部到文字底部(这两种情况都是在有设定line-height的时候)，如果没有line-height，则是与font-size一致。 解决方案：

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

2.在fixed定位的弹出框中的input光标会在iso等一些手机发生如下图的错位现象（如下图）。

解决方案1：

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

解决方案2:

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

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

问题描述：如果是同域名网站，并且曾经在该网站下登录过账号密码，并且选择了记住账号密码，或者在设置中设置了自动填充设置。chrome浏览器会对账号密码进行自动填充功能，或者以下拉历史记录的形式给到我们。虽然这个功能给我们带来一些方便但是有些情况下我们并不需要这些功能。

浏览器填充机制：反复测试后发现浏览器自动填充机制是满足：页面里有一个type=password的input且这个input前面有一个type=text的input的时候就会进行自动填充。firefox和360浏览器的处理方式是：只要检测到页面里有满足填充机制的，不管是不是display：none 的，只要检测到就直接往里填充。而且是有几个符合条件的就填充几个。而chrome 54版本略有不同：满足上面的条件且页面里只有一个type=password 的input。才会自动给第一个type=text 的input填充账号，给type=password 的input填充密码。所以chrome 54版本不存在注册页面自动填充的问题。 Google出来的方法是修改input的type , 页面里input都写成type=text ， 等获得焦点的时候给改成type=password。下意识去搜了下IE下修改type，发现IE下type是个只读属性，修改type的方法并不能兼容IE。

解决方案1：设置隐藏输入框，添加autocomplete

<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 为input标签提供了autocomplete属性；值为on/off；用来禁止input标签是否填充但是chorem浏览器中却不能生效。chorem浏览器通常会读取第一个type=”password”的input对其进行填充。对于360浏览器好像又不适应所以我们可以通过设置autocomplete=”new-password”来实现不填充的效果（网易就是添加了autocomplete）。

解决方案2：动态修改type类型 通过测试发现chorem对type=”text”类型的输入框不会进行填充；只会碰到type=’password’才填充。那么我们就可通过动态改变type类型就可以实现密码不自动回填，我们携程支付页就是通过input获取焦点后改变type为password。

问题的延伸：在使用虚拟键盘和很小的设备时，为用户节省时间时，减少潜在的输入错误，我需要根据用户之前指定的数据来确定可以自动填充哪些字段。填充的具体字段怎么控制呢？如何做到只填充我们想要填充的input？

【注意】Chrome 需要将 input 元素包含在 form 标记中才能启用自动完成。如果它们不包含在form标签中，Chrome 将提供建议值，但是不会完成表单填充。

答：你可以为每个输入元素提供 name 属性和 autocomplete 属性来提示浏览器。我们可以修改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 和 autocomplete 属性值(如下表)

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

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

注意：chrome默认定义的background-color，background-image，color不能用!important提升其优先级以外，其他的属性均可使用!important提升其优先级。

对细节更多了解可访问：
创建出色的表单