已经有的输入类型 HTML代码示例:
文本域 <input type=text> 单选按钮 <input type=radio> 复选框 <input type=checkBox> 下拉列表 <select><option> 密码域 <input type=password> 提交按钮 <input type=submit> 可单击按钮 <input type=button> 图像按钮 <input type=image> 隐藏域 <input type=hidden> 重置按钮 <input type=reset> 文件域 <input type=file>
在HTML5中,增加了多个新的表单input输入类型,通过使用这些新增元素,可以实现更好的输入控制和验证。
1、email类型的应用
email类型的input元素是一种专门用于输入E-mail地址的文本输入框,在提交表单的时候,会自动验证email输入框的值。
<input type=email name=user_email />
2、url类型的应用
url类型的input元素提供用于输入URL地址这类特殊文本的文本框。
<input type=url name=user_url />
3、number类型的应用
number类型的input元素提供用于输入数值的文本框。
<input type=number name=number1 min=1 max=20 step=4 />
4、range类型的应用
range类型的input元素提供用于输入包含一定范围内数字值得文本框,在网页中显示为滚动条。
<input type=range name=range1 min=1 max=30 />
date <input type=date>
选取日、月、年
month <input type=month>
选取月、年
week <input type=week>
选取周和年
time <input type=time>
选取时间(小时和分钟)
datetime <input type=datetime>
选取时间、日、月、年(UTC时间)
datetime-local <input type=datetime-local> 选取时间、日、月、年(本地时间)
6、search类型的应用
search类型的input元素提供用于输入搜索关键词的文本框。
<input type=search name=search1 /> input[type=search] { -webkit-appearance:textfield; }
7、tel类型的应用
tel类型的input元素提供专门用于输入电话号码的文本框。
<input type=tel name=tel />
8、color类型的应用
color类型的input元素提供专门用于设置颜色的文本框。
<input type=color name=color />
原文地址:https://www.jb51.cc/html5/1200260.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。