HTML表单

一，表单

<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="提交"/></p>  
   <p><input type="submit" name="button" value="提交"/></p>   
</form>

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

action: 表示将表单数据发送到何处

在实际网页开发中通常采用post方式提交表单数据

---

二，表单的元素

<input  type="text"  name="fname" value="text"/>

1.文本框

 2.密码框

3.单选按钮

4.复选框 

 5.文件域

 6.按钮

（1）普通按钮

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

（2） 提交按钮

<input  type="submit" name="butSubmit" value="submit按钮">

（3）重置按钮

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

（4）图片按钮

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

7.邮箱

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

提交表单时会自动验证Email地址格式是否正确 

8.网址

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

 提交表单时会自动验证URL地址格式是否正确

9.数字

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

提交表单时会自动验证是否在合理的范围内
10.滑块

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

11.搜索框

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

12.下拉列表框

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

13.多行文本域

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

textarea:多行文本域标签

x:显示的列数

y:显示的行数