常识

下面是对于上面表格的一些总结，也加入了一些新的知识点

• 没有 name 和有 disable 的字段不会被提交
• 同一个表单中，相同name的字段值会发生覆盖，radio 和 checkbox 除外
• 在低版本浏览器中，name可以作为id使用
• 忽略或使用浏览器不支持的 type 会转为 type=text
• 低版本浏览器不支持动态改变 type
• 点击 button 会默认提交表单
• 低版本浏览器需要指定 button 的 type=submit 才会提交表单
• 文本域的光标颜色由字体颜色决定
• form表单不能互相嵌套
• 表单元素可以不在表单的html结构内 示例代码
• 在表单最后一个input元素中敲回车，会触发表单提交

模拟外观

有一千种浏览器，就有一千种表单元素外观。在以前，要想改变表单元素外观，需要通过其他标签来模拟。
而在现代浏览器上，通过css3的appearance属性( 兼容情况 )指定元素的渲染风格，
再结合:after,:before伪元素，可以做出很酷炫的表单元素外观。

作为可替换元素，input标签无法使用伪元素。当然这只是W3标准。以下点到名的表单元素，还是可以照常使用:after,:before的。

input type='radio' , input type='checkbox' , input type='file' , input type='range' , button , progress.

appearance是css3的标准属性，面对现实，很多时候还是需要加上-webkit- ，-moz- 前缀，举一个把checkbox做成开关的例子：

<style>
    input[type='checkbox'] {
        -webkit-appearance: none;
        padding: 9px;
        border-radius: 50px;
        display: inline-block;
        position: relative;
        outline: 0;
        -webkit-transition: all 0.1s ease-in;
        transition: all 0.1s ease-in;
        width: 70px;
        height: 33px;
    }
    
    input[type='checkbox']:before,
    input[type='checkbox']:after {
        position: absolute;
        content: '';
        border-radius: 100px;
        -webkit-transition: all 0.1s ease-in;
        transition: all 0.1s ease-in;
    }
    
    input[type='checkbox']:before {
        background: white;
        top: 1px;
        left: 1px;
        z-index: 2;
        width: 31px;
        height: 31px;
        box-shadow: 0 3px 1px rgba(0, 0, 0, 0.05), 0 0px 1px rgba(0, 0, 0, 0.3);
    }
    
    input[type='checkbox']:after {
        content: 'OFF';
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        box-shadow: inset 0 0 0 0 #eee, 0 0 1px rgba(0, 0, 0, 0.4);
        line-height: 34px;
        font-size: 14px;
        background: #eee;
        color: #ccc;
        text-indent: 35px;
        box-sizing: border-box;
        box-shadow: 0 0 1px #eee;
    }
    
    input[type='checkbox']:checked:before {
        left: 37px;
    }
    
    input[type='checkbox']:checked:after {
        content: 'ON';
        color: #fff;
        text-indent: 10px;
        background: #4cda60;
    }
</style>
<input type="checkbox">

不出意外，长成这样 ,

示例代码来自10个HTML5美化版复选框和单选框

参考资料

MDN

w3.org