大佬教程收集整理的这篇文章主要介绍了html5 常用标签和属性,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
html5出现了很多让人兴奋的标签和属性,以前一些功能我们自己需要写组件或者去找组件,现在html5原生的就直接帮我们集成了,这当中就表单组件的一些常用功能。
html5 input 组件
month <input type = "month" /><br><br> <!-- 年月 -->
week <input type = "week" /><br><br> <!-- 年周 -->
date <input type = "date" /><br><br> <!-- 年月日 -->
time <input type = "time" /><br><br> <!-- 小时分 -->
datetime-local <input type = "datetime-local" /><br><br> <!-- 年月日小时分 -->
<form>
tel <input type = "tel" /><br><br> <!-- 电话校验,没有严格的匹配,因为电话号码,国家和地区可能不同,你可以自己定义patten属性自定义匹配规则-->
url <input type = "url" /><br><br> <!-- URL校验 -->
email <input type = "email" /><br><br> <!-- 邮箱校验 -->
<input type = "submit" value = "提交"/>
</form>
<form>
number <input type = "number" /><br><br> <!--细调数字-->
range <input type = "range" /><br><br> <!-- 范围拉条-->
color <input type = "color" /><br><br> <!-- 获取颜色 -->
image <input type = "image" src = "color.png" alt = "图片数据"/><br><br> <!-- 可作为图片提交按钮提交表单 -->
<input type = "submit" value = "提交"/>
</form>
type=image和type=submit都可以相应回车,并且都能提交。不过唯一的区别就是type=image的input提交方式会把按钮点击的位置坐标x,y提交过去
html5 input 属性
<input type = "text" maxlength = 10 minlength = 2 /><br><br> <!-- 最多可以输入10个字符,最小可以输入俩个字符 -->
<input type = "text" size = 5 /><br><br> <!-- 输入框最多只能显示5个字符,你可以输入无数个 -->
<input type = "text" required /><br><br>
<label>联系人: <input type=email multiple name=cc list="contacts"></label>
<datalist id="contacts">
<option value="hedral@damowmow.com">
<option value="pillar@example.com">
<option value="astrophy@cute.example">
<option value="astronomy@science.example.org">
</datalist>
<input type = "text" patten = "^([0-9]){7,18}(x|X)?$" /><!--校验身份证-->
<input name=bday type=date max="1979-12-31">
<input name=quantity required="" type="number" min="1" value="1">
<input name="sleepStart" type=time min="21:00" max="06:00" step="60" value="00:00">`
<label>Cc: <input type=email name=cc list="contacts"></label>
<datalist id="contacts">
<option value="hedral@damowmow.com">
<option value="pillar@example.com">
<option value="astrophy@cute.example">
<option value="astronomy@science.example.org">
</datalist>
<input type="email" name="email" placeholder ="输入邮箱" />
10.Autocomplete 是否打开自动匹配输入功能,它通过cookie把上次填写submit的表单value存了下来,作为自动匹配的项,autocomplete = “on||off”,可以在form直接autocomplete = “off”把整个表单自动匹配输入功能去掉
<form >
<label>
<input type = "text" name = "inputName" autocomplete="off" />
<input type = "text" name = "inputAge" autocomplete="on" />
<input type = "submit" value = "提交"/>
</form>
html5 一些常用标签
<label>男:<input type = "radio" name = "sex"/></label>
<label>女:<input type = "radio" name = "sex"/></label>
<select name="c">
<optgroup label="8.01 Physics I: Classical Mechanics">
<option value="8.01.1">Lecture 01: Powers of Ten
<option value="8.01.2">Lecture 02: 1D Kinematics
<option value="8.01.3">Lecture 03: Vectors
<optgroup label="8.02 Electricity and Magnestism">
<option value="8.02.1">Lecture 01: What holds our world together?
<option value="8.02.2">Lecture 02: Electric Field
<option value="8.02.3">Lecture 03: Electric Flux
<optgroup label="8.03 Physics III: Vibrations and Waves">
<option value="8.03.1">Lecture 01: Periodic Phenomenon
<option value="8.03.2">Lecture 02: Beats
<option value="8.03.3">Lecture 03: Forced Oscillations with Damping
</select>
<label>联系人: <input type=email name=cc list="contacts"></label>
<datalist id="contacts">
<option value="hedral@damowmow.com">
<option value="pillar@example.com">
<option value="astrophy@cute.example">
<option value="astronomy@science.example.org">
</datalist>
<p>Progress: <progress id="p" max=100><span>0</span>%</progress></p>
html5 语义化文档结构标签
自己理解分析的一个图:
@H_301_921@
换衣有错指出,一起交流
博客参考:
以上是大佬教程为你收集整理的html5 常用标签和属性全部内容,希望文章能够帮你解决html5 常用标签和属性所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。