html5中form表单

html5中form表单

在html5中表单里的内容单独写出来，input框中加入关键的

form=”id”(form表单中的id)；

基本使用

<form id="myForm" action="#"></form>

<input type="text" form="myForm">

`“

关于email

<input type=email name=email form="myForm">

//空单提交时没有检查，输入后有检查；

关于url

<input type=url name=url form="myForm">

//http://www.baidu.com注意前面的http头；

关于时间

type=”date”/type=”time”/type=”month”/type=”week”

关于number

<input type="number" max=10 min=0 step=2 value=5/>

//step决定每增加或减少一次数值跳过几个；value表示开始的数值；

关于range

<input type="range" max=10 min=0 step=1 value=5>

//与number不同之处，他是进度条；

关于color

<input type="color" value="#34538b" />

//可以取浏览器的颜色；

textarea中maxLength的最大长度；

<textarea id="notes" name="notes" maxLength="10"></textarea>

//最多输入10个字；

关于提示文字

“input type="text" name="myText" required form="myForm"”//required设为true时，提交时这个input框提示不能为空值</li>

<li>

pattern=”\w+”

把这个判断加到input框中，正则表达式的判断，还可以用placeholder=""来做提示

<form action="www.baidu.com" method="post" id="myForm"></form>
name:<input type="text" name="name" required pattern="\w+" placeholder="请输入数字/字母/下划线" form="myForm"><br/>
pwd:<input type="text" name="pwd"  required pattern="\w+" placeholder="请输入数字/字母/下划线" form="myForm"/><br/>
email:<input type=email name=email pattern="\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" placeholder="请输入正确的格式" form="myForm" required/><br/>
tel:<input type="text" name="tel" pattern="^\d{11}" placeholder="请输入正确的格式" form="myForm" required/><br/>
<input type="submit" form="myForm" /><br/>