资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/form表单那点事儿(上) 基础篇

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

Forest10 / 549人阅读

摘要：用于或元素时，将提交指定的表单示例代码只能上传图片只能上传视频使用的属性，是一个类型的值，或文件后缀名。在以前，要想改变表单元素外观，需要通过其他标签来模拟。以下点到名的表单元素，还是可以照常使用的。

做为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" ，所以就算提交多次该表单，都只会继续刷新之前打开的窗口。
表单元素

常见的表单元素包括 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


accept示例


multiple示例

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

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

input 直接框选多文件即可


value示例

常识

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

没有 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做成开关的例子：不出意外，长成这样 ,

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

参考资料

MDN

w3.org

idc机房托管 超融合服务器 基础篇 之基础篇 form表单校验 form表单插件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/49890.html

相关文章

  • form表单那点事儿(下) 进阶篇

    摘要：在表单提交时，浏览器会自动进行一系列的校验工作，没有通过校验的表单是无法提交到服务器的。而方法提交表单，会在请求中发送表单字段键值对。表单提交事件表单提交到服务器时，会触发事件。 上一篇主要温习了一下form表单的属性和表单元素，这一片主要讲解用JavaScript如何操作form。 表单操作 取值 用JavaScript操作表单，免不了会有取值赋值操作，比如有以下表单： ...

    Java_oldboy 评论0 收藏0

  • form表单那点事儿(下) 进阶篇

    摘要：在表单提交时，浏览器会自动进行一系列的校验工作，没有通过校验的表单是无法提交到服务器的。而方法提交表单，会在请求中发送表单字段键值对。表单提交事件表单提交到服务器时，会触发事件。 上一篇主要温习了一下form表单的属性和表单元素，这一片主要讲解用JavaScript如何操作form。 表单操作 取值 用JavaScript操作表单，免不了会有取值赋值操作，比如有以下表单： ...

    jerryloveemily 评论0 收藏0

  • 彻底弄懂session，cookie，token

    摘要：分布式情况下的和我们已经知道时有状态的，一般存于服务器内存或硬盘中，当服务器采用分布式或集群时，就会面对负载均衡问题。负载均衡多服务器的情况，不好确认当前用户是否登录，因为多服务器不共享。 session，cookie和token究竟是什么 简述 我在写之前看了很多篇session，cookie的文章，有的人说先有了cookie，后有了session。也有人说先有session，后有c...

    garfileo 评论0 收藏0

  • Javascripit类型转换比较那点事儿，双等号（==）

    摘要：同理，若为，返回的结果若为或者，且为，返回的结果。同理，若为或者，且为，返回的结果是对象转换基本类型的方法。看个例子根据上述规则来解析为，上式为第条上式为第条上式为，上式为第条上式为 前不久因为一个项目设计的问题，烦心了好几天，为了不留坑拥抱强类型语言特点，还是选择了===作为数据判断是否相等，对于==今天来探究一下猫腻（弱类型的JavaScript的坑真的太多了，typescript...

    Steve_Wang_ 评论0 收藏0

  • 【C语言】玩转结构体——结构体的那点事儿！

    摘要：一结构体的声明与定义结构体的声明结构是一些值的集合，这些值称为成员变量。但是结构体变量的变量名并不是指向该结构体的地址，所以要使用取地址运算符才能获取其地址。因此，结构体传参的时候，要传结构体的地址。 ...

    jeffrey_up 评论0 收藏0

发表评论

登陆后可评论

0条评论

Forest10

男|高级讲师
我要私信

TA的文章

阅读更多

云社区相关服务

提问 提问 学习 学习 认证 认证 产品 产品 技术服务 技术服务 售前咨询 售前咨询
最新活动
阅读需要支付1元查看
<