HTML5智能表单

1:便于排版的Form表单
HTML5为了方便排版,可以使form的表单标签脱离form的嵌套。
方法:form指定id,所有的标签标签都添加form= id属性。
例如:
<form action="" method="post" id="register"></form>
<input type="text" name="user" value="" form="register" />
<input type="password" name="pwd" value="" form="register" />


2:form新类型
type = "email" 邮箱(自带格式校验)
type = "url"   网址,必须带协议(自带格式校验)
type = "date"  日期选择器
type = "time" 时间选择器
type = "month" 月份选择器
type = "week" 周选择器
type = "number" 数字选择器
type = "range" 滑动条 
max属性 
step属性(验证合法性) step="2",例如从0开始,只能选择0-2-4-6-8
type = "search" 搜索框
results="n"谷歌浏览器可用,显示搜索图标。
type = "color" 颜色选择器


3:新增的表单属性
required="required" 设置必填项
placeholder = "我是默认值" 设置默认值,不会提交到后台
autofocus = "autofocus" 自动聚焦
pattern="\d{3}" 自定义正则表达式




4:自动填充表单
<input type="text" name="auto" value="" list="movie" />
<datalist id="movie">
<option>人在囧途</option>
<option>车在囧途</option>
<option>泰囧</option>
</datalist>

5:output标签


<form action="" method="post"
οninput="result.value=parseInt(no1.value)+parseInt(no2.value)">
<input type="number" name="no1" value="" /> 
<input type="number" name="no2" value="" />
<output name="result"></output>
</form>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

十五楼亮哥

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值