HTML5新特性:增强表单 input标签中中type的值

HTML5新特性:增强表单 input标签中中type的值:
html4中:text password radio checkbox submit reset button file;
html5中:email url number search color date month week tel range time;
A、email:
用来表示一个应该输入邮箱格式文本的输入框,如果格式不对会给提示;
案例:

<form action="" method="">
	邮箱:<input type="email">
	<input type="submit">
</form>

效果:
在这里插入图片描述
B、url:
用来表示一个应该输入网址格式文本的输入框,如果格式不对会给提示;
案例:

<form action="" method="">
	网址:<input type="url">
	<input type="submit">
</form>

效果:
在这里插入图片描述
C、number:
用来表示一个应该包含数值域的输入框;它的属性有:min表示输入域的最小值,max表示输入域的最大值,step表示步长,即每次加或减得数量,默认step为1。
案例:

<form action="" method="">
	数量:<input type="number" min="1" max="10" step="2"/>
	<input type="submit">
</form>

效果:
在这里插入图片描述
D、search:
用来表示搜索域,比如站点搜索或 Google 搜索。它显示为常规的文本域。
E、color:
用来表示一个拾色器,点开它可以选择你要的颜色。
F、date:
用来表示日期的一个输入框点开后会给一个日期表供你选择日期。
案例:

<form action="" method="">
		日期:<input type="date">
		<input type="submit">
	</form>

效果:
在这里插入图片描述
G、month:
和上面的date一样也会给你一个日期表供你选择日期,只是只能选择年和月;
H、week:
和上面的date和month一样会给你一个日期表供你选择,只是你只能选择xxxx年第xx周;
案例:

<form action="" method="">
		week:<input type="week">
		<input type="submit">
	</form>

效果:
在这里插入图片描述

I、tel:
用来输入一个电话号码的输入框,在电脑端与type="text"差不多,在移动手机端会自动将输入法换成是数字!
J、range:
用来显示一个滑块控件,可拖动,和number一样可以设置最大值、最小值和步长;
案例:

<form action="" method="">
		音量:<input type="range" min="0" max="100" step="5" value="10">
		<input type="submit">
	</form>

效果:
在这里插入图片描述
K、time:
用来写入时间的输入框,点开后可以选择到xx时xx分
案例:

<form action="" method="">
		时间:<input type="time">
		<input type="submit">
	</form>

效果:
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值