第三章 表单

第三章 表单

1.表单语法

<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>
//规定如何发送表单数据
常用值：get  | post
//action表示向何处发送表单数据

2.表单元素格式

<input  type="text"  name="fname" value="text"/>
//type是input元素类型
name是input元素名称
value是input元素的值

1.文本框

<input  type="text"  name="userName" value="用户名" size="30" maxlength="20" />
//text是文本框  name是文本框名称 value是文本框初始值 size是文本框长度  	maxlength是文本框最大长度

2.密码框

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

3.单选按钮

<input name="gen" type="radio" value="男"  checked  />男
<input name="gen" type="radio" value="女" />女
//radio单选按钮框 value是值	checked单选按钮选中状态

4.复选框

<input type="checkbox" name="interest" value="sports"/>运动
<input type="checkbox" name="interest" value="talk" checked />聊天
<input type="checkbox" name="interest" value="play"/>玩游戏
check 是复选框 value是值 checked是复选框选中状态

5.列表框

<select name="列表名称" size="行数">
<option value="选项的值" selected="selected">…</option >
<option value="选项的值">…</option >
</select>
select是列表框	option是选项 selected是默认选中的值

6.按钮

<input  type="reset" name="butReset" value="reset按钮">
<input  type="image"  src="images/login.gif" />
<input  type="button" name="butButton" value="button按钮"/>
reset 重置按钮 value 按钮上显示的文字
image 提交按钮 src 图片路径
button 普通按钮

7.多行文本域

<textarea  name="showText"  cols="x"  rows="y">文本内容 </textarea  >
textarea 多行文本域  cols显示的列数   rows显示的行数

8.文件域

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

9.邮箱

<p>邮箱:<input type="email"  name="email"/></p>
<input type="submit"/>
	会自动验证Email地址格式是否正确

10.网址

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

11.数字

<p>请输入数字:<input type="number"  name="num" min="0" max="100" step="10"/></p>
<input type="submit"/>
num 最小值  max 最大值  step 合法的数字间隔

12.滑块

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

13.搜索框

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

3.表单的高级应用

隐藏域

<input type="hidden" value="666" name="userid">
隐藏域

只读和禁用文本框

	<input name="name" type="text" value="张三"  readonly>
<input type="submit "  disabled   value="保存" >
readonly 只读文本框
disabled 禁用

表单元素的标注

<label for="male">标注的文本</label>
<input type="radio" name="gender" id="male"/>
 for="male"  表单元素的id	id="male" 表单id'

4.表单的初级验证

1.placeholder

适合于input标签：text、search、url、email和password等类型

<input type="search" name="sousuo"  placeholder="请输入要搜索的关键字"/>
placeholder  文本框输入内容提示 提示语默认显示当文本框输入内容时提示语消失

2.required

规定文本框填写内容不能为空，否则不允许用户提交表单

n**适合于input标签：text、search、url、email、password、number、checkbox、adio，file等类型

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

3.pattern

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

<input type="text" name="tel"  required pattern="^1[358]\d{9}" />
required pattern  验证规则，正则表达式

required 必填

### 3.**pattern**	

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

```html
<input type="text" name="tel"  required pattern="^1[358]\d{9}" />
required pattern  验证规则，正则表达式