一、表单
1.表单是什么?
之前我们学的标签做出来都是静态页面，而不是动态的。要想做出一个动态页面，就需要借助表单来实现。
如果一个页面仅仅供用户浏览,那就是静态页面；若这个页面还能实现与服务器进行数据交互（注册登录、话费充值、评论交流），那就是动态页面。
表单是我们接触动态页面的第一步，表单最重要的作用就是：在浏览器端收集用户的信息，然后将数据提交给服务器来处理。
之前学习
HTML时仅仅是把登录注册等这些表单页面效果 做出来，址遇服务器是怎么处理这些数据的就不是前端所需要考虑的了，学习HTML只需要把效果做出来就可以了，而不需要管数据处理。
2.表单标签
在
HTML中，表单标签有 5 种：
- form
- input
- textarea
- select
- option
从外观看，表单可划分以下 8 种：
- 单行文本框
- 密码文本框
- 单选框
- 复选框
- 按钮
- 文件上传
- 多行文本框
- 下拉列表
二、form标签
1.form标签
在
HTML表格中，我们都知道表格的tr（行）、th、td（单元格）等都必须放在table标签内部。其实创建一个表单，和创建一个表格一样，我们也必须要把所有表单标签放在
form标签内部。但要注意，表单与表格是两个完全不一样的概念，我们常说的表单指的是文本框、按钮、单选框、复选框、下拉列表等的统称。
（1）语法格式
<form> 各种表单标签 </form>
2.form标签属性
（1）form标签常用属性
| 属性值 | 说明 |
|---|---|
| name | 表单名称 |
| method | 提交方式 |
| action | 提交地址 |
| target | 打开方式 |
| enctype | 编码方式 |
① name属性
在一个页面中，可能不止一个表单，而每一个
form标签就是一个表单。为了区分众多表单，我们可以使用
name属性来给表单进行命名。
Ⅰ.例1
<form name="happy"></form>
② method属性
在
form标签中，method属性用于指定表单数据使用哪一种http提交方法。
method属性取值有二：1是get，2是post。
Ⅰ.实际开发
get安全性较差，而post安全性较好，所以在实际开发中，都是使用post。
Ⅱ.例1
<form method="post"></form>
③ action属性
在
form标签中，action属性用于指定表单数据提交到哪一个地址进行数据处理。
Ⅰ.例1
<form action="www.php"></form>
④ target属性
在
form标签中，target属性与a标签的target属性一样，都是用来指定窗口的打开方式。并且，一般情况下，我们只会使用
_blank这一个属性值。
Ⅰ.例1
<form target="_blank"></form>
⑤ enctype属性
在
form标签中，enctype属性用于指定表单数据提交的编码方式。一般情况下，我们不需设置，除非用到上传文件功能。
三、input标签
在
HTML中，大多数表单都是使用input标签来实现。
input标签是自闭和标签。
1.语法格式
<input type="表单类型"/>
（1）type属性取值
| 属性值 | 说明 |
|---|---|
| text | 单行文本框 |
| password | 密码文本框 |
| radio | 单选框 |
| checkbox | 复选框 |
| button、submit、reset | 按钮 |
| file | 文件上传 |
以下的几点，都是基于
input标签实现，这些表单类型的不同都是由type属性取值的不同而决定。
四、单行文本框-text
1.是什么?
在
HTML中，单行文本框是由input标签实现的，其type属性取值为text。单行文本框常见于注册登录功能。
（1）语法格式
<input type="text" />
① 示例
Ⅰ.例1
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title>表单</title>
</head>
<body>
<form name="单行文本框" action="" method="post">
<label for="name">尊姓大名:</label><input type="text" id="name"/>
</form>
</body>
</html>
单行文本框示例1.png
2.单行文本框属性
（1）单行文本框常用属性
| 属性 | 说明 |
|---|---|
| value | 设置文本框的默认值，即默认情况下文本框显示的文字。 |
| size | 设置文本框的长度。 |
| maxlength | 设置文本框中最多可以输入的字符数。 |
元素属性的定义是没有先后顺序的，你可将
value定义在前面，也可定义在后面。
（2）示例
① 例1-value属性
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title>表单</title>
</head>
<body>
<form name="单行文本框" action="" method="post">
<label for="name">芳名几许:</label><input type="text" id="name"/> <br/>
<label for="age">芳龄几何:</label><input type="text" id="age" value="永远18岁"/>
</form>
</body>
</html>
单行文本框value属性示例1.png
value属性用于设置单行文本框中默认的文本，若没有设置，就是空白。
② 例2-size属性
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title>表单</title>
</head>
<body>
<form name="单行文本框" action="" method="post">
<label for="name">芳名几许:</label><input type="text" id="name" size="20" /> <br/>
<label for="age">芳龄几何:</label><input type="text" id="age" value="永远18岁" size="10" />
</form>
</body>
</html>
单行文本框size属性示例1.png
Ⅰ.实际开发
size属性可用来设置单行文本框长度，但在实际开发中，一般不会用到此属性，而是用
CSS来控制。
③ 例3-maxlength属性
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title>表单</title>
</head>
<body>
<form name="单行文本框" action="" method="post">
<label for="name">芳名几许:</label><input type="text" id="name" size="20" /> <br/>
<label for="age">芳龄几何:</label><input type="text" id="age" value="永远18岁" /> <br/>
<label for="age">芳龄几何:</label><input type="text" id="age" value="永远18岁" maxlength="10" />
</form>
</body>
</html>
单行文本框maxlength属性示例1.png
限制单行文本框最多输入字符数。
五、密码文本框
1.是什么?
密码文本框在外观上不仅与单行文本框相似，而且两者也拥有相同的属性( value、size、 maxlength等)。
密码文本框与单行文本框区别
不过两者也有着本质上的区别：在单行文本框中输入的字符可见，而在密码文本框中输入的字符不可见。
我们可以把密码文本框看成是一种特殊的单行文本框。
（1）语法格式
<input type="password" />
① 示例
Ⅰ.例1
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title>表单</title>
</head>
<body>
<form name="密码文本框" action="" method="post">
<label for="name">用户:</label><input type="text" id="name" /> <br/>
<label for="passwd">密码:</label><input type="password" id="passwd" /> <br/>
</form>
</body>
</html>
密码文本框示例1.png
2.密码文本框属性
（1）密码文本框常用属性
| 属性 | 说明 |
|---|---|
| value | 设置文本框的默认值，即默认情况下文本框显示的文字。 |
| size | 设置文本框的长度。 |
| maxlength | 设置文本框中最多可以输入的字符数。 |
密码文本框这些常用属性和单行文本框一样，就不做示例。
3.密码文本框的好处
密码文本框仅仅使周围的人看不见你输入的内容是什么，实际上它并不能保证数据的安全了保证数据安全，我们需要在浏览器与服务器之间建立一个安全连接，不过这个是属于后端做的事情，这里了解一下就行。
网友评论