HTML Input
html5中input的type类型有哪些
button
<按钮:<input type="button" value="按钮" name="bt" onclick=""/>
- 定义可以点击的按钮(大多与JavaScript使用来启动脚本)
type="button"
普通按钮value
属性中输入的值为按钮上显示的文本name
代表该按钮的名称onclick
表示处理程序- 按钮的消失效果也可以通过CSS样式来设置
checkbox
北京<input type="checkbox" value="北京" name="city">
上海<input type="checkbox" value="上海" name="city">
杭州<input type="checkbox" value="杭州" name="city">
香港<input type="checkbox" value="香港" name="city">
澳门<input type="checkbox" value="澳门" name="city">
type="checkbox"
复选框,用户可以进行多个选项value
属性中的值用来设置用户选中改项目后提交到数据库中的值name
为复选框的名称
color H5
颜色:<input type="color"/>
type="color"
颜色选择器- 使用color属性能直接调用系统的颜色调节窗口
- 默认为黑色
data H5
<input type="date" min="2001-06-08" max="2016-04-03"/>
- 可以用来选择或输入日期,包括(年/月/日),不包括时间
type="date"
定义日期字段(带有calendar控件)min
属性控制开始日期max
属性控制结束日期value
属性为默认值
time H5
<input type="time" min="00:12" max="10:12" value="00:12"/>
type="time"
定义日期字段的时分秒(带有time控件)min
属性控制开始日期max
属性控制结束日期value
属性为默认值
datatime H5
<input type="datetime" id="datetime" value="2019-05-09T22:47Z">
type="datetime"
日期加时间控件(基于UTC时区,带有calendar,time控件)- 创建日期时间,包括(年/月/日/时/分/秒/零点几秒)
month
<input type="month" value="2018-06"/>
type="month"
定义日期字段的月value
属性用来控制年月
week
<input type="week" value="2018-W06"/>
type="week"
定义日期字段的月(带有calendar控件)value
属性用来控制年周
email H5
邮箱:<input type="email"/>
type="email"
定义用于e-mail地址的文本字段- 若用户输入非email格式
- 那么再支持HTML5的浏览器中提交改表单时
- 会提示为不是合法格式
file
<input type="file" name="file" value="选择文件" />
type="file"
供文件上传- 文件域用于从本地硬盘中上传文件并提交
hidden
<input type="hidden" name="hidden" value="提交的值">
type="hidden"
定义隐藏输入字段- 隐藏域在页面上不显示
- 用来存储与传递表单的值
- 当用户提交表单时隐藏域的内容会一起提交给处理程序
image
<input type="image" src="图片URL" name="Yes" width="70" height="35"/>
type="image"
这个功能是将图片转为图片形式按钮src
是链接图片的路径name
为图片名称width
为图片宽度height
为图片高度- 当按下图片按钮会以name中的值向服务器发送信息
number H5
<input type="number" name="number" min="200" max="800" value="300" step="3"/>
type="number"
定义带有Spinner控件的数字字段min
允许的最小值max
为允许的最大值value
规定默认值step
可规定合法数字间隔
password
<input type="password" size="25" maxlength="15" value="">
type="password"
定义密码字段,字段中的字符会被遮蔽,密码输入框size
元素长度maxlength
最多允许输入长度value
输入框中默认显示- 主要区别在于内容的模糊,以防止用户附近的人阅读密码
radio
篮球<input type="radio" value="bb" name="bool">
足球<input type="radio" value="fb" name="bool">
乒乓<input type="radio" value="pp" name="bool" checked>
type="radio"
单选按钮value
属性中的值用来设置用户选中改项后提交到数据库中的值name
拥有相同name属性的单选框为同一组,一个组里只能同时选中一个选项checked
初始默认选项
range H5
<input type="range" name="range" min="0" max="10" step="1" value=""/>
type="range"
定义用于精确值不重要的输入数字的控件(带有Slider控件)min
允许的最小值max
为允许的最大值value
规定默认值step
可规定合法数字间隔
reset
<input type="reset" value="重置" name="reset"/>
type="reset"
重置按钮,将表端字段重置为初始值value
按钮上显示的文本
search
<input type="search" autocomplete="off" placeholder="请输入关键词"/>
type="search"
定义用于搜索的文本字段input autocomplete="off"
去掉弹出的下拉框placeholder
默认显示文本required
值为required表示输入不能为空
submit
<input type="submit" value="提交" name="sm"/>
type="submit"
提交按钮value
属性中的值为按钮上显示的文字- 提交按钮不需要设置
onclick
参数 - 在单击提交按钮时可以向服务器发送表单数据
- 数据会发送到表单的action属性中指定的页面
- 提交按钮不需要设置
tel
<input type='tel' maxlengt="11">
type='tel'
定义用于电话号码的文本字段maxlength
手机端最多允许输入长度- 允许输入#,*
text
<input type="text" size="20" maxlength="20" value="文本输入框" color="red">
type="text"
文本输入框size
元素长度maxlength
最多允许输入长度value
输入框默认显示color
文字颜色red
url
<input type="url"/>
type="url"
限制用户输入URL类型
添加几个H5新增表单属性
required="required"
值不能为空placeholder="提示文本"
表单的提示信息,存在默认值将不显示autofocus="autofocus"
自动聚焦属性,页面加载完成自动聚焦到指定表单autocomplete="off/on"
当用户在字段开始键入时,游览器基于之前键入过的值,应该显示出在字段中填写的选项- 默认已经打开,需要放在表单内,同时加上name属性,同时提交成功
multiple="multiple"
可以多选文件提交
本文来自博客园,作者:懒惰ing,转载请注明原文链接:https://www.cnblogs.com/landuo629/p/12437225.html