表单的分类

一.语法

method 请求方式        get 不安全     post 安全

action 请求路径

二.表单分类

1.文本框(text)

2.密码框(password)

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

 3.单选框(radio)

<input name="gen" type="radio" value="男"  checked  />男
<input name="gen" type="radio" value="女" />女

4.复选框(checkbox)

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

5.列表框

select 列表框

option选项

selected默认选中项

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

三.按钮

1.重置按钮 (reset)

<input  type="reset" name="butReset" value="reset按钮">

2.图片按钮（image）

<input  type="image"  src="images/login.gif" />

3.提交按钮 （submit）

<input  type="submit"  name="提交" >

4.普通按钮(button)

<input  type="button" name="butButton" value="button按钮"/>

四.多行文本域（textarea）

        clos 列数    rows行数

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

五.文件域（file）

enctype="multipart/form-data" 表单编码属性

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

六.邮箱 （Email）

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

七.网址（url）

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

八.数字（number）

min允许最小值

 max允许最大值

step 合法数字间隔

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

九.滑块（range）

min允许最小值

max允许最大值

step 合法数字间隔

<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"/>

十一.隐藏域（hidden）

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

十二.只读（readonly）

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

十三.禁用（disabled）

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

十四.必填（required）

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

十五.正则表达式（pattern）

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

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

十六.本章小结