51工具盒子1.form表单
1.1form标签简介
在HTML中，form表单是用于收集用户的信息，然后将数据提交给服务器来处理。表单标签有5种：form、input、textarea、select和option。表单与表格有些类似，表格的行（tr）、单元格（th、td）等都必须放在table标签内部。创建一个表单，跟创建一个表格一样，我们也必须要把所有表单标签放在form标签内部，但表单跟表格是不一样的概念，我们常说的表单，指的是文本框、按钮、单选框、复选框、下拉列表等的统称
语法：
<form>
//各种表单标签
</form>
form表单属性:
name == 表单名称
method == 提交方式
action == 提交地址
name属性：
在一个页面中，有可能不止一个form表单。为了区分这些表单，我们可以使用name属性来给表单进行命名
语法：
<form name="form1">
</form>
<form name="form2">
</form>
method属性：
method属性用于指定表单数据的提交方法。method属性取值有两个：一个是"get"，另外一个是"post"。get的安全性较差，而post的安全性较好。所以在实际开发中，使用post比较多
语法：
<form action="a.html"></form>
2.表单元素
元素分类：input、textarea、select和option
2.1表单元素-input标签
在HTML中，大多数表单都是使用input标签来实现的,input是自闭合标签，它是没有结束符号的。
语法：
<input type="表单类型" />
** 属性：**
type：指定元素类型
name：指定单元素的名称
value：元素的初始值，type为radio时必须指定一个值
size：指定表单元素的初始宽度
maxlength：type为password时，输入的最大字符数
checked：type为radio或checkbox时，指定按钮是否被选中
type属性值：
text == 单行文本框
pass == 密码文本框
button == 按钮
reset == 重置按钮
image == 图像形式的提交按钮
radio == 复选框
checkbox == 复选框
hidden == 隐藏字段
file == 文件上传
2.2单行文本框text语法：
<input type="text" />
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>单行</title>
</head>
<body>
<form>
账号:<input type="text" />
</form>
</body>
</html>
2.3密码框password 密码框使用input标签来实现的，其中type属性取值为"password"
语法：
<input type="password" />
案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>单行</title>
</head>
<body>
<form>
账号:<input type="text" /><br/>
密码:<input type="password" />
</form>
</body>
</html>
2.4按钮radio单选框使用input标签来实现的，其中type属性取值为"radio"
语法：
<input type="radio" name="组名" value="值" />
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>单选</title>
</head>
<body>
<form>
账号:<input type="text" /><br/>
密码:<input type="password" /><br/>
性别：<input type="radio" name="sex1" value="男"/>男
<input type="radio" name="sex1" value="女"/>女
</form>
</body>
</html>
如果想要在默认情况下，让第一个单选框选中，我们可以使用checked属性来实现。
语法： 第一种方式checked="checked"
<input type="radio" name="组名" value="值" checked="checked"/>
第二种方式checked
<input type="radio" name="组名" value="值" checked/>
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>单选</title>
</head>
<body>
<form>
账号:<input type="text" /><br/>
密码:<input type="password" /><br/>
性别：<input type="radio" name="sex1" value="男" checked="checked"/>男
<input type="radio" name="sex1" value="女"/>女
</form>
</body>
</html>
2.5复选框checkbox 复选框使用input标签来实现的，其中type属性取值为"checkbox"。单选框只能选择一项，而复选框可以选择多项
语法：
<input type="checkbox" name="组名" value="值" />
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>复选</title>
</head>
<body>
账号:<input type="text" /><br/>
密码:<input type="password" /><br/>
性别:<input type="radio" name="sex1" value="男" checked="checked"/>男
<input type="radio" name="sex1" value="女"/>女<br/>
爱好:<input type="radio" name="hobby" value="java"/>java
<input type="radio" name="hobby" value="html"/>html
<input type="radio" name="hobby" value="html"/>sql
</body>
</html>
checked属性：如果想要在默认情况下，让第一个和第三个复选框选中，我们可以使用checked属性来实现案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>复选</title>
</head>
<body>
<form>
账号:<input type="text" /><br/>
密码:<input type="password" /><br/>
性别:<input type="radio" name="sex1" value="男" checked="checked"/>男
<input type="radio" name="sex1" value="女"/>女<br/>
爱好:<input type="checkbox" name="hobby" value="java" checked />java
<input type="checkbox" name="hobby" value="html"/>html
<input type="checkbox" name="hobby" value="html" checked />sql
</form>
</body>
</html>
2.6按钮buttonbutton是一个普通按钮，后期我们需要配合JavaScript来进行各种操作的
语法：
<input type="button" value="值" />value的值就是按钮上的文字
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>按钮</title>
</head>
<body>
<form>
账号:<input type="text" /><br/>
密码:<input type="password" /><br/>
性别:<input type="radio" name="sex1" value="男" checked="checked"/>男
<input type="radio" name="sex1" value="女"/>女<br/>
爱好:<input type="checkbox" name="hobby" value="java" checked />java
<input type="checkbox" name="hobby" value="html"/>html
<input type="checkbox" name="hobby" value="html" checked />sql
<br/>
<input type="button" />
<input type="button" value="我是按钮"/>
</form>
</body>
</html>
2.7重置reset重置按钮一般用来清除用户在表单中输入的内容。重置按钮也可以看成是具有特殊功能的普通按钮
语法：
<input type="reset" value="值" />
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>重置按钮</title>
</head>
<body>
<form>
账号:<input type="text" /><br/>
密码:<input type="password" /><br/>
性别:<input type="radio" name="sex1" value="男" checked="checked"/>男
<input type="radio" name="sex1" value="女"/>女<br/>
爱好:<input type="checkbox" name="hobby" value="java" checked />java
<input type="checkbox" name="hobby" value="html"/>html
<input type="checkbox" name="hobby" value="html" checked />sql
<br/>
<input type="button" />
<input type="button" value="我是按钮"/>
<input type="reset" />
</form>
</body>
</html>
2.8提交按钮submit提交按钮一般都是用来给服务器提交数据的
语法：
<input type="submit" value="值" />
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>提交按钮</title>
</head>
<body>
<form>
账号:<input type="text" /><br/>
密码:<input type="password" /><br/>
性别:<input type="radio" name="sex1" value="男" checked="checked"/>男
<input type="radio" name="sex1" value="女"/>女<br/>
爱好:<input type="checkbox" name="hobby" value="java" checked />java
<input type="checkbox" name="hobby" value="html"/>html
<input type="checkbox" name="hobby" value="html" checked />sql
<br/>
<input type="button" />
<input type="button" value="我是按钮"/>
<input type="reset" />
<input type="submit" value="注册" />
</form>
</body>
</html>
2.9隐藏域hidden在浏览器中看不到隐藏域，但是在提交表单时可以看到隐藏域的内容被提交至服务器
语法：
<input type=hidden" />
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文件上传</title>
</head>
<body>
<form>
<input type="file" />
</form>
</body>
</html>
2.11邮箱email会自动验证Email地址格式是否正确
语法：
<input type="email" />
案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>邮箱框</title>
</head>
<body>
<form>
<input type="email" />
<br/>
<input type="submit" value="注册" />
</form>
</body>
</html>
2.12表单元素-textarea标签单行文本框只能输入一行文本，而多行文本框却可以输入多行文本。在HTML中，多行文本框使用的是textarea标签。
语法：
<textarea rows="行数" cols="列数" >默认内容</textarea>
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>多行文本域</title>
</head>
<body>
<form>
评价:<br/>
<textarea rows="20" cols="50">您的评价使我们进步</textarea>
</form>
</body>
</html>
2.13下拉列表下拉列表由select和option这两个标签配合使用来表示的。这一点跟无序列表很像。
语法：
<select>
<option>选项内容</option>
......
<option>选项内容</option>
</select>
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>下拉列表</title>
</head>
<body>
<form >
<select>
<option>JAVA</option>
<option>HTML</option>
<option>CSS</option>
<option>SQL</option>
</select>
</form>
</body>
</html>
** select属性**
multiple == 设置下拉列表可以选择多项
size == 设置下拉列表显示几个列表项，取值为整数
案例：multiple
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>下拉列表</title>
</head>
<body>
<form method="post">
<select multiple="">
<option>JAVA</option>
<option>HTML</option>
<option>CSS</option>
<option>SQL</option>
</select>
</form>
</body>
</html>
案例：size
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>下拉列表</title>
</head>
<body>
<form method="post">
<select size="3">
<option>JAVA</option>
<option>HTML</option>
<option>CSS</option>
<option>SQL</option>
</select>
</form>
</body>
</html>
option属性：
selected == 是否选中
value == 选项值
selected属性：
下拉列表默认是选中第一项，如果想要在默认情况下选定其中项，我们可以使用selected属性来实现。
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>下拉列表</title>
</head>
<body>
<form method="post">
<select >
<option>JAVA</option>
<option>HTML</option>
<option selected>CSS</option>
<option>SQL</option>
</select>
</form>
</body>
</html>
3.表单元素的只读与禁用只读和禁用这两种属性在HTML表单中的作用范围不同，disabled属性可以用于所有表单元素，而readonly属性只针对input（输入框）、text area有效，对元素的影响程度不同，disability属性只是阻止元素的一切操作，例如获取焦点，点击等等；readonly属性只是将元素设置为只读，其他操作正常，还有在做提交操作时，disabled属性可以让表单元素的值无法被提交；readonly属性则不影响正常提交操作。
3.1readonly只读语法：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>只读</title>
</head>
<body>
<form >
可输入<input type="text" />
只读不可输入<input type="text" readonly="readonly" />
<br/>
可输入 <textarea rows="5" cols="10" ></textarea>
只读不可输入<textarea rows="5" cols="10" readonly="readonly"></textarea>
</form>
</body>
</html>
3.2diable禁用语法：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>禁用</title>
</head>
<body>
<form >
未禁用<input type="text" />
禁用<input type="text" disabled="disabled" />
<br/>
未禁用 <textarea rows="5" cols="10" ></textarea>
禁用<textarea rows="5" cols="10" disabled="disabled"></textarea>
</form>
</body>
</html>
4.占位符、必填属性 4.1placeholder属性适用于以下的 <input> 类型：text、email 以及 password 语法：
<input type="text" placeholder="提示信息内容" >
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>提示</title>
</head>
<body>
<form >
<input type="text" placeholder="用户名"/>
</form>
</body>
</html>
4.2required当表单元素使用此属性就说明该元素是必填字段。
语法：
<input type="text" required="required">
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>必填</title>
</head>
<body>
<form >
<input type="text" required="required"/>
<input type="submit" />
</form>
</body>
</html>
