form表单那点事儿(上) 基础篇
2016-06-25 01:30
387 查看
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的时候会播放循环动画 示例代码 |
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:
<label>Cc: <input type=email multiple name=cc list=contacts></label> <datalist id="contacts"> <option value="hedral@damowmow.com"> <option value="pillar@example.com"> <option value="astrophy@cute.example"> <option value="astronomy@science.example.org"> </datalist>
.
需要一直按下ctrl键才可多选
中国
美国
英国
<select name='number' multiple> <option value="CN">中国</option> <option value="US">美国</option> <option value="UK">英国</option> </select>
.
直接框选多文件即可
<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美化版复选框和单选框
参考资料
MDNw3.org
相关文章推荐
- maven配置plugin报错vc-complex-type.2.4.a: Invalid content was found starting with element 'plugins'
- node入门
- 算法学习笔记(一)——算法概述
- Oracle进程管理常用查询语句
- 理解devfs、sysfs、udev
- sublime个性化设置
- linux内核sysfs详解
- [Webpack 2] Import a non-ES6 module with Webpack
- hadoop安装后测试运行
- "AsynchTask和Handler"的区别与用法-Android异步消息处理机制之图文代码详解
- JAVA 微信JSSDK Config参数配置方法
- 使用Maven插件Cargo实现自动化部署
- TabLayout+ViewPager+Fragment实现带图标和文字的底部导航栏
- 缓存、缓存算法和缓存框架简介
- Bootstrap Modals(模态框)
- CJV_1——简单的Applet程序
- 使用存储过程进行数据分页
- Android的硬编码国际化
- Android下打印调试堆栈方法
- 禁用 BootStrap Modal 点击空白时自动关闭