input表单的type属性详解,不同type不同属性之间区别
目标:详解表单input标签type属性常用的属性值
一、input标签和它的type属性
PS:input 元素可以用来生成一个供用户输入数据的简单文本框。 在默认的情况下, 什么样的数据均可以输入。而通过不同的type属性值,可以限制输入的内容。
二、总结
1、text 一个单行文本框,默认属性值
2、password 隐藏字符的密码框
3、search 搜索框,在某些浏览器中输入内容会出现叉形标记
4、submit、reset、button 依次是:提交按钮、重置按钮、普通按钮
5、number、range 依次是:只能输入数值的框、只能输入在一个指定范围的数值框
6、checkbox、radio 依次是:复选框,一组复选框(name属性值相同)用户可以勾选多个、单选按钮,一组单选按钮(name属性值相同)用户只可以选中一个
7、image、color 依次是:图片按钮、颜色代码按钮
8、email、tel、url 依次是:检测电子邮件、号码、网址的文本框
9、hidden 生成一个隐藏控件
10、file 生成一个上传控件
11、获取各种日期、时间 data、month、time、week、datetime、datatime-local
三、详解
1、type=”text”
1.1)、list 指定为文本框提供建议值的 datalist 元素,其值为datalist 元素的 id 值
1.2)、maxlength 设置文本最大字符长度
1.3)、pattern 用于输入验证的正则表达式
1.4)、placeholder 输入提示的文本,当用户输入内容时会自动消失
1.5)、readonly 文本框处于只读状态
1.6)、disabled 文本框处于禁用状态
1.7)、size 设置文本框宽度
1.8)、value 设置文本框初始值,会显示在文本框中,显示时优先级比placeholder高,表单提交时优先提交用户输入的内容,如果用户没有输入则提交默认的值
1.9)、required 表示用户必须输入一个值,否则无法通过输入验证
2、type=”password”,和type=”text”时所拥的额外属性基本一致,少了一个list属性
3、type=”search” , 和type=”text”所有用的额外属性值一致
4、当type为submit、reset、button,提交表单、重置表单、普通按钮
4.1)、如果是 submit 时,还提供了和元素一样的额外属性:formaction、formenctype、formmethod、formtarget 和 formnovalidate。
5、当type为number、range时
5.1)、type=”number” 只能输入数字的文本框
5.2)、type=”range” 生成一个通过拖拽调节大小的调节器
额外属性:
5.3)、min 设置可接受的最小值
5.4)、max 设定可接受的最大值
5.5)、value 指定初始值
5.6)、step 指定上下调节值的步长
5.7)、required 表明用户必须输入一个值,否则无法通过输入验证
5.8)、readonly 设置文本框内容只读
6、当type为checkbox、radio
6.1)、不管type等于checkbox还是radio,都必须有属性name和value
6.2)、他们还有可选属性checked、required
PS:复选框和单选按钮都是以一组一组的形式存在,name值相同的即为一组,一组复选框可以同时选中几个,而一组单选按钮同时只能选中一个
<section><label for="c">C</label> <input type="checkbox" id="c" name="hobby" value="c"/> <label for="python">python</label> <input type="checkbox" id="python" name="hobby" value="python"/> <label for="java">java</label> <input type="checkbox" id="java" name="hobby" value="java"/> </section> <section> <label for="apple">apple</label> <input type="checkbox" id="apple" name="eat" value="apple"/> <label for="orange">orange</label> <input type="checkbox" id="orange" name="eat" value="orange"/> <label for="pear">pear</label> <input type="checkbox" id="pear" name="eat" value="pear"/> </section>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
提交时数据格式:hobby=c&hobby=python&eat=orange&eat=pear
- 1
- 2
<section><label for="man">男</label> <input type="radio" id="man" name="sex" value="man"/> <label for="men">女</label> <input type="radio" id="men" name="sex" value="men"/> </section>
- 1
- 2
- 3
- 4
提交时数据格式:sex=man
- 1
- 2
7、当type为image、color
7.1)、当type=”image”时,功能上和type=”submit”一样,前者是用图片作为按钮,当然后者也可以达到同样的效果
额外属性:
7.2)、src 指定要显示图像的 URL
7.3)、alt 提供图片的文字说明,当图片找不到时显示该文字
7.4)、width 图像的长度,注意这是标签属性,而不是样式属性
7.5)、height 图片的高度,注意事项如上
7.6)、提交时的额外属性 formaction、formenctype、formmethod、formtarget和 formnovalidate。
8、当type为email、tel、url
8.1)、email 为电子邮件格式
8.2)、tel 为电话格式
8.3)、url 为网址格式
8.4)、额外属性和 text一致。但对于这几种类型,浏览器支持是不同的。email 支持比较好,现在浏览器都支持格式验证;tel 基本不支持;url 支持一般,部分浏览器只要检测到 http://就能通过。
9、type=”hidden”
9.1)、生成一个隐藏控件,一般用于表单提交时关联主键 ID 提交,而这个数据作为隐藏存在
10、type=”file”
10.1)、生成一个文件上传控件,用于文件的上传。
额外属性:
10.2)、required 表明用户必须提供一个值,否则无法通过验证
10.3)、accept 指定接收的MIME类型 例如:accept=”image/gif, image/jpeg, image/png”
《1》上传.csv格式的
<input text="file" accept=".csv" />
《2》上传.xls格式
<input text="file" accept="application/vnd.ms-excel"/>
《3》上传.xslx格式
<input text="fiel" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"/>
《4》上传.png/.jpg/etc格式
<input type="file" accept="text/plain" />
《5》上传图片格式
<input type="file" accept="image/*" />
《6》上传.htm,.html格式
<input type="file" accept="text/html" />
《7》上传video(.avi, .mpg, .mpeg, .mp4)格式
<input type="file" accept="video/*" />
《8》上传audio(.mp3, .wav, etc)格式
<input type="file" accept="audio/*" />
《9》上传.pdf格式
<input type="file" accept=".pdf" />
《10》如果限制两种文件格式,同时限制
<input type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel">
PS:当需要上传文件时,form标签的enctype属性必须设置为multipart/form-data
11、当type为data、month、time、week、datetime、datatime-local,因为各种原因还是用jquery等前端库写吧!!!
转载于:https://www.cnblogs.com/wangEddy/p/7830911.html
input表单的type属性详解,不同type不同属性之间区别相关推荐
- php表单提交到数据库详解
一般朋友们逛一些网站的时候,想使用网站或者看到更多网站里的内容,网站会要求用户进行新用户的注册,网站会把新用户的注册信息存入数据库中,需要的时候再进行提取. 这样网站就会首先创建自己的数据库和对应的表 ...
- layui单选框verify_layui lay-verify form表单自定义验证规则详解
虽然layui的官方文档已经是写的比较详细,但是初次使用的时候总会懵一下,这里纪录一下lay-verify自定义验证规则的时候到底放哪. html: 提交 js: form.verify({ //数组 ...
- Jquery ajax提交表单几种方法详解
[导读] 在jquery中ajax提交表单有post与get方式,在使用get方式时我们可以直接使用ajax 序列化表单$( 表单ID) serialize();就行了,下面我来介绍两个提交表单数据的 ...
- ONLYOFFICE的表单复杂字段开发详解
上一回图文讲到了表单文件的入门使用,展示了使用正则表达式来设计开发逻辑复杂的填表域空格的功能,但是,正则表达式是一种非常难学的晦涩难懂的语言,虽然掌握后是屠龙宝刀,正则表达式不是谁都可以学得会的-- ...
- createform用法_vue自定义表单生成器form-create使用详解
介绍 form-create 是一个可以通过 JSON 生成具有动态渲染.数据收集.验证和提交功能的表单生成器.并且支持生成任何 Vue 组件.结合内置17种常用表单组件和自定义组件,再复杂的表单都可 ...
- JavaScript表单序列化的方法详解
本文介绍下,在javascript中实现表单序列化的方法,通过实例加深理解,有需要的朋友参考下吧. 在JavaScript中,可以利用表单字段的type属性,连同name和value属性一起实现对表单 ...
- layui的表单与表格使用详解
一.开始前准备 到官网下载layui需要的文件 在html文件里面导入: <script src="../layui/layui.js"></script> ...
- Jquery表单插件ajaxForm用法详解
原文地址: http://www.open-open.com/lib/view/open1325032463827.html 插件主要的方法: ajaxForm ajaxSubmit formToAr ...
- 表单ajax提交插件,详解javascript表单的Ajax提交插件的使用
Ajax 提交插件 form.js 插件有两个核心方法:ajaxForm()和ajaxSubmit(),它们集合了从控制表单元素到决定如何管理提交进行的功能. //ajaxForm 提交方式 $('# ...
- 【onsubmit】Form表单onsubmit事件用法详解
表单提交数据时,我们有时会用到onsubmit事件,那么onsubmit事件到底是干什么用的,在什么时候触发onsubmit事件以及如何使用onsubmit.本文章将向大家详细讲解onsubmit事件 ...
最新文章
- qdbus 复杂类型
- java keytool 导入证书_java - Keytool无法导入证书 - SO中文参考 - www.soinside.com
- mysql绕过防火墙_[转载]使用sqlmap 绕过防火墙进行注入测试
- [bzoj1050 HAOI2006] 旅行comf (kruskal)
- android thrift https,HTTPS 学习
- 一叶障目:排查问题的思路
- 11g RAC环境下客户端配置TAF
- 递推算法题:令人费解的开关『拉灯』
- 线性代数matlab的心得体会,线性代数的学习心得
- 迈信EP100伺服驱动器量产型修改bug全套C源代码和硬件
- matlab 平滑曲线连接_从零开始的matlab学习笔记——(16)函数绘图
- 产品管理:新产品开发流程「权威指南」
- ps渐变怎么用和渐变工具技巧
- 一周小结:webgis—北京核酸检测—demo
- HDU_4379_The More The Better
- 在虚拟机中安装mysql数据库
- 【python爬虫 系列】13.实战二 爬取京东信息
- 计算机学报杂志官网在线出版,计算机学报
- 登录提示 ORA-28000 The account is locked.
- 学习 Python 需要花多久时间?