input标签总结

Zachary 发布于2019-08-01 16:22 / 3249人阅读

摘要：提交时，的，不会提交会继续提交。指定为文本框提供建议值的元素，其值为元素的值。其他类型说明文本长度文本框宽度提示

1. input标签所有type 1.1 常用

类型	说明
text	文本
password	密码
radio	单选
checkbox	多选
file	文件选择器
button	普通按钮
submit	提交
reset	重置
hidden	传隐藏值
image	图片

1.2 日期时间(html5)

类型	说明
date	定义日期字段（带有 calendar 控件）
datetime	定义日期字段（带有 calendar 和 time 控件）
datetime-local	定义日期字段（带有 calendar 和 time 控件）
month	定义日期字段的月（带有 calendar 控件）
week	定义日期字段的周（带有 calendar 控件）
time	定义日期字段的时、分、秒（带有 time 控件）

1.3 color(html5)

类型	说明
color	定义拾色器

1.4 number(html5)

类型	说明
number	定义带有 spinner 控件的数字字段

1.5 range(html5)

类型	说明
range	定义带有 slider 控件的数字字段

1.6 search(html5)

类型	说明
search	定义用于搜索的文本字段，会有清空按钮

1.7 其他

类型	说明
email	会有email格式校验
tel	会有tel格式校验
url	会有url格式校验

2. input的pattern和required

类型	说明
pattern	正则校验校验
required	不能为空

代码如下：

3. readonly和disabled

类型	说明
readonly	只读
disabled	禁用

二者的区别：

样式上不一样，disabled会改样式。

提交时，disable的name，value不会提交；readonly会继续提交。

4. list

指定为文本框提供建议值的datalist元素，其值为datalist元素的id值。代码如下：

和select的区别是，select选择的value是option的value，显示的文本是option的文本。而datalist一般显示option的文本，如果option有value，则显示value。由于datalist只是提供给input建议值，一般不需要value。

5. 其他

类型	说明
maxlength	文本长度
size	文本框宽度
placeholder	提示

GPU云服务器云服务器 input标签 input标签的操作 Inputs input

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

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

自学前端的小白之初次编写form表单的经验与错误总结

摘要：对我这个初学前端的小白来讲，在每次编写标签的时候经常把属性省略掉，经了解标签属性和属性是必须有的。五阻止表单提交以及与互换电话这是当表单不符合要求时，阻止提交表单的代码，但写表单的时候难免会用到，所以要把替换成电话提交学了这么久的前端，一直没有具体总结自己的经验，只有一些记录在笔记的零星经验，今天来这里说说我在初次编写from表单过程中总结出的东西：首先我个人认为最难的也是个人认为...

JackJiang 2019-08-22 11:06 评论0 收藏0
自学前端的小白之初次编写form表单的经验与错误总结

摘要：对我这个初学前端的小白来讲，在每次编写标签的时候经常把属性省略掉，经了解标签属性和属性是必须有的。五阻止表单提交以及与互换电话这是当表单不符合要求时，阻止提交表单的代码，但写表单的时候难免会用到，所以要把替换成电话提交学了这么久的前端，一直没有具体总结自己的经验，只有一些记录在笔记的零星经验，今天来这里说说我在初次编写from表单过程中总结出的东西：首先我个人认为最难的也是个人认为...

AaronYuan 2019-08-01 17:36 评论0 收藏0
自学前端的小白之初次编写form表单的经验与错误总结

摘要：对我这个初学前端的小白来讲，在每次编写标签的时候经常把属性省略掉，经了解标签属性和属性是必须有的。五阻止表单提交以及与互换电话这是当表单不符合要求时，阻止提交表单的代码，但写表单的时候难免会用到，所以要把替换成电话提交学了这么久的前端，一直没有具体总结自己的经验，只有一些记录在笔记的零星经验，今天来这里说说我在初次编写from表单过程中总结出的东西：首先我个人认为最难的也是个人认为...

cgh1999520 2019-08-29 13:26 评论0 收藏0
移动端h5开发总结不断更新中....

摘要：一手机端开发页面必须要加一段代码注这段代码的主要意思是让页面宽度等于设备宽度，缩放比例为，禁止用户缩放。用于检测视口，主要的效果就是取消下面的滚动条，让页面适应屏幕。一.手机端开发页面必须要加一段代码：注：这段代码的主要意思是：让页面宽度等于设备宽度，缩放比例为1，禁止用户缩放。用于检测视口，主要的效果就是取消下面的滚动条，让页面适应屏幕。二.为自己的页面设置最大宽度和最小宽...

kviccn 2019-08-29 12:32 评论0 收藏0