第09章 表单
9.1 表单简介
在HTML中表单标签有五种：form、input、textarea、select、option
从外观上来划分，表单分为八种：单行文本框、密码文本框、单选框、复选框、按钮、文件上传、多行文本框、下拉列表
# form标签简介
所有表单标签都需放在form标签内
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>all tag</title>
</head>
<body>
<form>
<input type="text" value="这是一个单行文本框" />单行文本框<br/>
<input type="radio" />单选框<br/>
<input type="checkbox" />复选框<br/>
<input type="password" />密码框<br/>
<input type="file"/><br/>
<input type="button" value="普通按钮"/><br/>
<input type="submit"/>提交按钮<br/>
<input type="reset" />重置按钮<br/>
<textarea>这是一个多行文本框</textarea>多行文本框<br/>
<select>
<option>HTML</option>
<option>CSS</option>
<option>JavaScript</option>
</select>下拉列表
</form>
</body>
</html>
# form标签属性
name 表单名称：一个页面中表单不止一个，每个form标签就是一个表单，使用name来区分；
method 提交方式：在form标签中，method属性用于指定表单数据使用哪一种http提交方法；
action 提交地址：用于指定表单数据提交到哪个地址进行处理；
target 打开方式：用来指定窗口的打开方式；
enctype 编码方式：用于指定表单数据提交的编码方式；
在HTML中，大多数表单都是使用input标签来实现的；input标签是自闭合标签，没有结束符号；
<input type="表单类型" />
表单类型：
text 单行文本框
password 密码文本框
radio 单选框
checkbox 复选框
button或submit或reset 按钮
file 文件上传
9.4 单行文本框
# 单行文本框
使用input标签来实现，type属性值设为text
<form>
姓名：<input type="text" value="这是一个单行文本框" /><br/>
</form>
# 单行文本框属性
value 设置文本框显示的默认值，默认文字
size 设置文本框长度
maxlength 设置文本框中最多可输入字符数
9.5 密码文本框
# 密码文本框
使用input标签来实现，type属性值设为password
密码文本框中输入的字符不可见
<form>
姓名：<input type="text" value="请输入姓名" /><br/>
密码：<input type="password" value="默认密码为123456" /><br/>
</form>
# 密码文本框的属性同单行文本框
9.6 单选框
# 单选框
使用input标签来实现，type属性值设为radio
<form>
性别：
<input type="radio" name="gender" value="男" />男
<input type="radio" name="gender" value="女" />女
</form>
# checked属性
可默认选中一个单选框，name属性值相同是一个组，选项是互斥的；
<form>
性别：
<input type="radio" name="gender" value="男" checked="checked"/>男
<input type="radio" name="gender" value="女" />女
</form>
9.7 复选框
# 复选框
<form>
你喜欢哪一种水果：
<input type="checkbox" name="fruit" value="苹果" checked="checked"/>苹果
<input type="checkbox" name="fruit" value="香蕉" />香蕉
</form>
9.8 按钮
# 按钮
普通按钮button
提交按钮submit
重置按钮reset
# 普通按钮button
<form>
普通按钮：<input type="button" value="普通按钮" onclick="alert()"/>
</form>
# 提交按钮submit
<form>
提交按钮：<input type="submit" value="提交按钮" />
</form>
# 重置按钮reset
<form>
重置按钮：<input type="reset" value="重置按钮" />
</form>
9.9 文件上传
# 文件上传
<form>
文件上传：
<input type="file" />
</form>
9.10 多行文本框
# 多行文本框
<form>
多行文本框：<br />
<textarea rows="5" cols="20">多行文本框</textarea>
</form>
9.11 下拉列表
# 下拉列表
<form>
<select>
<option>HTML</option>
<option>CSS</option>
<option>JavaScript</option>
</select>
</form>
# select标签属性
multiple:设置下拉列表可以选择多项
size：设置下拉列表显示几个列表项，取值为整数
# option标签属性
selected 是否选中
value 选项值