第三章 表单

第三章 表单

表单主要用来制作动态网页，方便和用户进行交互

表单语法

method规定如何发送表单数据
常用值：get  | post

action表示向何处发送表单数据

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

1.常用的表单元素

表单元素格式

文本框（text）

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

密码框（password）

<input type="password" name="pass" size="20"/>size表示密码框的长度

单选按钮（radio）

//checked表示选中状态
<input name="gen" type="radio" value="男" checked/>男
<input name="gen" type="radio" calue="女"/>女 

复选框（checkbox）

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

列表框（select和option）

<select name="列表名称" size="行数">//列表框
    <option value="选项的值" selected="selected(表示默认选中项)">...</option>//选项
    <optinon value="选项的值">...</optinon>
</select>

按钮（button、submit和reset）

<!--重置按钮，value表示按钮上显示的文字-->
<input  type="reset" name="butReset" value="reset按钮">
<input  type="image"  src="images/login.gif" />
<input  type="submit" name="butSubmit" value="submit按钮">
<input  type="button" name="butButton" value="button按钮"/>

多行文本框(textarea)

<textarea name="showText" cols="x(表示显示的列数)" rows="y">文本内容 </textarea>

文件域（file）

<form action="" method="post" enctype="multipart/form-data"> enctype表单编码属性
  <p><input type="file" name="files" /> file文件域
  <input type="submit" name="upload" value="上传" /></p>
</form>

邮箱（email）

会自动验证Email地址格式是否正确

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

网址（url）

会自动验证URL地址格式是否正确

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

数字（number）

<p>
    请输入数字：<input type="number" name="num" min="0" max="100" step="10"/> step合法的数字间隔
</p>

滑块（range）

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

搜索（search）

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

2.表单的高级应用

隐藏域

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

只读

W3C HTML5标准中，规定对于布尔类型的属性，属性值可以省略

<input name="name" type="text" value="张三"  readonly>

禁用

<input type="submit "  disabled   value="保存" >

表单元素的标注

增强鼠标的可用性
自动将焦点转移到与该标注相关的表单元素上

根据id

<label for="male">标注的文本</label>
<input type="radio" name="gender" id="male"/>

3.表单的初级验证

• 减轻服务器的压力
• 保证数据的可行性和安全性

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="uName" requird/>
  

pattern

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

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

ox、radio、file等类型

<input type="text" name="uName" requird/>

pattern

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

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