form表单那点事儿(上) 基础篇

做为html中最为常见，应用最广泛的标签之一，form常伴随前端左右。了解更深，用的更顺。

表单属性

这个表单展示了form表单常用的属性

属性名	属性值	描述
action	一个url地址	指定表单提交到的地址
method	`GET` , `POST`	表单将以此种方法提交到服务器
target	`_self` 当前页面 `_blank` 每次在新窗口打开 `blank` 每次在同一个新窗口打开 `_parent` 父级frame `_top` 顶级frame iframename 指定的iframe	表单提交后，收到回复的页面
name	-	一个html文档中，每个form的name应该是唯一的
enctype	`application/x-www-form-urlencoded` 默认值 `multipart/form-data` 上传file用 `text/plain` html5默认	以 `POST` 方式提交form时的MIME类型。文件上传必须使用 `multipart/form-data`
autocomplete	`on` , `off`	是否自动完成表单字段
autocapitalize	`none` 完全禁用自动首字母大写 `sentences` 自动对每句话首字母大写 `words` 自动对每个单词首字母大写 `characters` 自动大写所有的字母	iOS 专用属性，表单中文本域英文大小写
accept-charset	字符编码格式( `utf-8` , `gb-2312` 等)	将会以此种编码格式提交表单到服务器，默认值是UNKONWN，即html文档所采用的编码格式。
novalidate	`true` , `false`	是否启用表单校验

下面举例的表单将会以 post 方式将input的值以 utf-8 编码格式提交到 /login 接口，并会打开一个新页面显示返回结果，由于 target="blank" ，所以就算提交多次该表单，都只会继续刷新之前打开的窗口。

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

</head>

<body>

  <form action="/login" method="post" target="blank" >

    <input type="text" name='username'>

    <button>提交</button>

  </form>

</body>

</html>

表单元素

常见的表单元素包括 input , select , textarea , button , progress 等，这些元素都有一些自己的属性

属性名	属性值	描述
必须
type	`text` 单行文本框 `raido` 单选框 `checkbox` 多选框 `tel` 电话号码输入框 `range` 滑块取值框 ... ... 更多	指定input标签展示的样式，忽略type属性将默认使用 `text`
name	字符串	form提交时，该字段的key，忽略value属性的元素将不会被提交
状态
checked	任意值或忽略该属性	有此属性的radio和checkbox元素将被选中，同一name多个元素具有此属性的，提交时取最后一个值
selected	任意值或忽略该属性	有此属性的option元素将被选中，同一name多个元素具有此属性的，提交时取最后一个值
readonly	任意值或忽略该属性	具有该属性的表单元素将不可输入或改变状态，除非用JavaScript操作
disabled	任意值或忽略该属性	除拥有readonly的特征外，表单提交时，将忽略此字段
限制
form	表单id	该元素将作为指定id表单字段被提交。用于 `button` 或 `input type='submit'` 元素时，将提交指定id的表单示例代码
accept	`image/` 只能上传图片 `video/` 只能上传视频	`input type='file'` 使用的属性，是一个MIME类型的值，或文件后缀名。示例代码
multiple	任意值或忽略该属性	`input type='file'` 或 `select` 或应用了 `datalist` 的表单元素才能应用该属性示例代码
maxlength	正整数或0	文本域可输入字符的长度，浮点数将会向下取整，负数将被忽略，JavaScript可以绕过这一限制
required	任意值或忽略该属性	该表单字段是否需要被验证
pattern	一个正则表达式	`\d{4,6}` 形式的正则表达式，作为required校验规则
autocomplete	`on` , `off`	同form的autocomplete属性，在表单元素上应用，优先级将高于form上指定的
autofocus	任意值或忽略该属性	页面加载时，该元素自动聚焦，应用于多个表单元素时，聚焦到第一个
展示
placeholder	字符串	在元素没有value时，用于占位显示
value	字符串或数值	input 或 progress 展示的值,其中： checkbox和radio的默认值是 'on' range和progress的默认值是 0 progress的是0的时候会播放循环动画示例代码

注意：以下示例部分来自 w3.org

form示例

点击预览按钮，将会把 username1 的值提交到 /preview，

点击发布按钮，将会把 username 的值提交给 /publish

预览
发布

<form action="/preview" name='preview' id='preview'></form>

<form action="/publish" name='publish' id='publish'>

  <input type="text" name='username' value='1'>

  <input type="text" form='preview' name='username1' value='2'>

  <button form='preview'>预览</button>

  <button>发布</button>

</form>

accept示例

<input type="file" accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document">

multiple示例

需要键入 ',' 方可多选(需浏览器支持)

Cc:

````html
Cc:

````

需要一直按下ctrl键才可多选

中国
美国
英国

````html

中国
美国
英国

````

直接框选多文件即可

<input type="file" multiple>

value示例

<progress value='70' max='100'></progress>

<input type="range" value='40' max='100'>

<input type="text" value='hello world'>

常识

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

没有 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