表单

表单语法

<form action="result.html" method="post">
<input type="..." name="..." value="...">
</form>

action表示向何处发送表单数据
method规定如何发送表单数据，常用值：get/post

表单元素格式

属性	说明
type	指定元素的类型。text，password，checkbox，radio，submit，reset，file，email，url，image，button，search，textarea，hidden，默认为text
name	指定表单元素名称
value	元素的初始值，type为radio时必须指定一个值
size	指定表单元素的初始宽度。当 type 为 text 或 password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位
maxlength	type为text 或 password 时，输入的最大字符数
checked	type为radio或checkbox时，指定按钮是否是被选中

表单元素

1、文本框

代码：

<input type="text" name="userName" value="chenxingjies" size="20"/>

网页效果图：

2、密码框

代码：

<input type="password" name="password" maxlength="20"/>

网页效果图：

3、单选按钮

代码：

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

网页效果图：

4、复选框

代码：

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

网页效果图：

5、列表框

代码：

<select name="job">
		<option value="teacher">教师</option>
		<option value="student">学员</option>
		<option value="worker">工人</option>
		<option value="encourager">鼓励师</option>
		<option value="wise" selected>巫师</option>
		<input type="submit">
</select>

网页效果图：

6、按钮

重置按钮

代码：

<input type="reset" name="butreset" value="重置"/>

网页效果图：

提交按钮

<input type="submit" name="butsubmit" value="提交"/>

网页效果图：

普通按钮

代码：

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

网页效果图：

图片按钮

代码：

<input type="image" src="img/img1.png"/>

网页效果图：

图片就是一个按钮的作用

7、多行文本域

代码：

<textarea name="showtext" cols="10" rows="10">文本内容</textarea>

网页效果图：

8、文件域

代码：

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

网页效果图：

9、邮箱

代码：

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

网页效果图：

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

10、网址

代码：

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

网页效果图：

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

11、数字

代码：

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

网页效果图：

12、滑块

代码：

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

网页效果图：

13、搜索框

代码：

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

网页效果图：