HTML5表单(中)(20160810-0010)
来源:互联网 发布:微信打赏视频破解软件 编辑:程序博客网 时间:2024/05/22 04:51
一、type 属性总汇
input 元素可以从来生成一个提供用户数据的简单文本框。默认情况下,什么样的数据均可以输入。而通过不同的属性值,可以限制输入的内容。
二、input 元素解析
1、type 为 text 值时
<input type="text">
解释:当 type 为 text 时,呈现的就是一个可以输入任意字符的文本框,这也是默认行为。并且,还提供了一些额外的属性。
//设置文本框长度<input type="text" size="40">//设置文本框输入字符长度<input type="text" maxlength="10">//设置文本框内容不可用,不可以提交数据<input type="text" disabled>2、type 为 password 值时
<input type="password">
解释:当 type 值为 password 时,一般用于密码框的输入,所有的字符都会显示星号。密码框也有一些额外属性:
3、type 为 search 时
<input type="search>
解释:和文本框一样,在除 Firefox 浏览器的其他现代浏览器,会显示一个叉来取消搜索内容。额外属性同 text 。
4、type 为 number、range 时
<input type="number>
<input type="range>
解释:只限输入数字的文本框,不同浏览器可能显示方式不同。生成一个数值范围文本框,只是样式是拖动的。属性:
//范围和步长<input type="number" step="2" min="10" max="100">5、type 为 date 系列时
<input type=" xxx ">
解释:实现文本框可以获取日期和时间的值,但支持的浏览器不完整。所以,在获取日期和时间,目前还是推荐使用 jQuery 等前端库来实现日历功能。额外属性和 number 一致。
6、type 为 color 时
<input type="color">
解释:实现文本框获取颜色的功能。
7、type 为 checkbox、radio 时
音乐<input type="checkbox">体育<input type="checkbox"><input type="radio" name="sex" value="男">男<input type="radio" name="sex" value="女">女解释:生成一个获取布尔值的复选框或固定选项的单选框。属性:
//默认勾选,默认值为 1<input type="checkbox" name="music" checked value="1">8、type 为 submit、reset、和 button 时
<input type="submit">
解释:生成一个按钮,三种模式:提交、重置和一般按钮,和 <button> 元素相同。
9、type 为 image 时
<input type="image" src="xxx.png">
解释:生成一个图片按钮,点击图片就实现功能提交,并且传送了分区响应数据。属性 src、alt、width、height 同 <img> 元素,额外属性formaction、formenctype、form method、formtarget 和 formnovalidate。
10、type 为 email、tel、url时
<input type="email">
解释:email 为电子邮件格式、tel 为电话格式、url 为网址格式。额外属性和 text 一致。
11、type 为 hidden 时
<input type="hidden">
解释:生成一个隐藏控件,一般用于表单提交时关联主键 ID 提交,而这个数据作为隐藏存在。
12、type 为 file 时
<input type="file>
解释:生成一个文件上传控件,用于文件的上传。属性:
示例代码地址
- HTML5表单(中)(20160810-0010)
- html5表单元素(中)
- (HTML5)表单样式
- 每天15min-HTML5(11)-表单(中)
- HTML5表单属性(一)
- HTML5表单属性(二)
- HTML5表单属性(三)
- HTML5表单属性(四)
- HTML5:学习(3)表单
- html5中form表单
- HTML5(一)HTML5表单类型与属性
- 自定义表单(完)--(html5版本)
- HTML5表单(上)(20160809-0009)
- HTML5表单(下)(20160811-0011)
- HTML5 form (表单)的使用
- 关于表单的提交方式(html5)
- (二)Html5创建表单及按钮
- HTML5入门----表单元素(1)
- [leetcode]144. Binary Tree Preorder Traversal -- JavaScript 代码
- Android开发之阿里百川OneSDK与手机淘宝技术简介
- 年度总结-浴火重生
- Laravel使用Form
- Qt中事件分发源代码剖析
- HTML5表单(中)(20160810-0010)
- mrjob运行方式
- JS倒计时类
- android官方文档学习之路-高效显示Bitmap
- 视觉slam学习资料
- 适配器模式 合成模式
- 短信验证码是什么?短信验证码是什么意思
- mrjob运行runner参数
- 一个奇奇怪怪的数学问题