HTML5-表单

表单语法

<form  method="post" action="result.html" >
    名字：<input type="text" name="name"  />  
    密码：<input type="password"  name="pass" />  
          <input type="submit" name="Button" value="提交"/>
          <input type="reset" name="Reset" value="重填“/> 
</form>

• method属性

  • method 属性规定在提交表单时所用的 HTTP 方法
  • 规定如何发送表单数据常用值：get | post
  • 在实际网页开发中通常采用post方式提交表单数据

• action属性

  • 表示向何处发送表单数据
  • 如果省略 action 属性，则 action 会被设置为当前页面

• name属性

  • 如果input元素没有name属性，表单数据不会被提交到"result.html"页面

• < fieldset >

  • < fieldset > 元素组合表单中的相关数据
  • < legend > 元素为 < fieldset > 元素定义标题

<form action="action_page.php">
<fieldset>
<legend>Personal information:</legend>
First name:<br/>
<input type="text" name="firstname" value="Mickey">
<br/>
Last name:<br/>
<input type="text" name="lastname" value="Mouse">
<br/><br/>
<input type="submit" value="Submit"></fieldset>
</form> 

表单元素格式

文本框

<input  type="text"  name="userName" value="用户名" size="30" maxlength="20" />

密码框

<input  type="password "  name="pass"  size="20" /> 

单选按钮

<input type="radio" name="sex" value="男"  checked  />男
<input type="radio" name=“sex” value="女" />女

复选框

<input type="checkbox" name="interest" value="sports"/>运动
<input type="checkbox" name="interest" value="talk" checked />聊天
<input type="checkbox" name="interest" value="play"/>玩游戏

列表框(下拉列表)

<select name="列表名称" >
  <option value="选项的值" selected>值1</option>
  <option value="选项的值">值2</option>
</select>

按钮

<input  type="reset" name="butReset" value="reset按钮"/>
<input  type="submit" name="butSubmit" value="submit按钮"/>
<input  type="button" name="butButton" value="button按钮"/>
<input  type="image"  src="images/login.gif" />

多行文本域

<textarea  name="showText"  cols="x"  rows="y">文本内容 </textarea>

文件域

<form action="  " method="post" enctype="multipart/form-data">
<p><input type="file" name="files" />
<input type="submit" name="upload" value="上传" /></p>
</form>

HTML5 < datalist > 元素

• < datalist> 元素为 < input > 元素规定预定义选项列表
• 用户会在他们输入数据时看到预定义选项的下拉列表
• < input > 元素的 list 属性必须引用 < datalist > 元素的 id 属性

<form action="action_page.php">
<input list="browsers">
<datalist id="browsers">
   <option value="Internet Explorer">
   <option value="Firefox">
   <option value="Chrome">
   <option value="Opera">
   <option value="Safari">
</datalist> 
</form>

邮箱

<p>邮箱:<input type="email"  name="email"/></p>
<input type="submit"/>

网址

<p>请输入你的网址:<input type="url"  name="userUrl"/></p>
<input type="submit"/>

数字

<p>请输入数字:<input type="number"  name="num" 
min="0" max="100" step="10"/></p>
<input type="submit"/>

滑块

<p>请输入数字:<input type="range"  name="range1" 
min="0" max="10" step="2"/></p>
<input type="submit"/>

搜索框

<p>请输入搜索的关键词:<input type="search"  name="sousuo"/></p>
<input type="submit"/>

表单高级应用

隐藏域

<input type="hidden" value="666" name="userid">

只读和禁用

<input type="text" name="name" value="张三"  readonly>
<input type="submit "  disabled   value="保存" >

表单的初级验证

表单初级验证的方法

• placeholder
• required
• pattern

placeholder

input类型的文本框提供一种提示（hint）
可以描述文本框期待用户输入何种内容
提示语默认显示，当文本框中输入内容时提示语消失
适合于input标签：text、search、url、email和password等类型

<input type="search" name="sousuo"  placeholder="请输入要搜索的关键字"/>

required

规定文本框填写内容不能为空，否则不允许用户提交表单
适合于input标签：text、search、url、email、password、number、checkbox、radio、file等类型

<input type="text" name="username"  required/>

pattern

用户输入的内容必须符合正则表达式所指的规则，否则就不能提交表单

<input type="text" name="tel"  required pattern="^1[358]\d{9}" />

总结