HTML 文本框其实是一个输入框，它的作用是为了获取用户输入的内容，然后提交给服务器处理。HTML 文本框可以分为以下 3 种。
- 单行文本框。
- 密码文本框。
- 多行文本框。
其中，单行文本框和密码文本框使用 input 标签来实现的，而多行文本框使用 textarea 标签来实现的。
HTML 单行文本框
在 HTML 中，单行文本框用于用户输入单行文本。它通常用于收集用户的姓名、邮件地址、电话号码等。
1. 单行文本框语法
在 HTML 中，单行文本框是使用 input 标签来实现的，其 type 属性取值为 "text"。
语法：
<input type="text" name="字段名">说明：
如果是纯前端交互，则 name 属性不需要写。如果想要提交数据给后端，则 name 属性必须要写，否则后端收不到数据。
示例 1：HTML 创建单行文本框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form method="post" action="/">
姓名：<input type="text">
</form>
</body>
</html>页面效果如下图所示。
2. 单行文本框属性
在 HTML 中，单行文本框常用属性如下表所示。
| 属性 | 说明 |
|---|---|
| value | 设置文本框的默认值（一般供给 JavaScript 或后端使用） |
| maxlength | 设置文本框中最多可以输入的字符数 |
| placeholder | 设置文本框的提示文本 |
| readonly | 设置文本框是否为 “只读” |
| disabled | 设置文本框是否为 “禁用” |
对于元素属性的定义，是没有先后顺序的，你可以将 value 定义在前面，也可以定义在后面，都无所谓。
readonly 和 disabled 这两个属性看着很像，但它们有着本质上的区别：
readonly：内容不可修改，但 “会” 提交给服务器。disabled：内容不可修改，但 “不会” 提交给服务器（变灰）。
示例 2：单行文本框的 maxlength 属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form method="post" action="/">
姓名：<input type="text"><br>
姓名：<input type="text" maxlength="5">
</form>
</body>
</html>页面效果如下图所示。
分析：
从外观上看不出 maxlength 加上与不加上有什么区别。不过当我们输入内容后，会发现设置 maxlength="5" 的单行文本框最多只能输入 5 个字符，如下图所示。
示例 3：单行文本框的 placeholder 属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form method="post" action="/">
姓名：<input type="text"><br>
姓名：<input type="text" placeholder="绿叶儿">
</form>
</body>
</html>页面效果如下图所示。
分析：
placeholder 用于设置单行文本框的提示文字，该提示文字的内容不会影响其 value 值。
示例 4：单行文本框的 readonly 和 disabled 属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form method="post" action="/">
只读：<input type="text" readonly value="绿叶网"><br>
禁用：<input type="text" disabled value="绿叶网">
</form>
</body>
</html>页面效果如下图所示。
分析：
不管文本框是设置了 readonly 还是 disabled，文本框的内容都不允许被修改。
HTML 密码文本框
在 HTML 中，密码文本框在外观上与单行文本框相似，两者拥有相同的属性（如 value、maxlength、placeholder 等）。但它们是有着本质上的区别的：单行文本框中输入的字符是可见的，而密码文本框中输入的字符不可见。
我们可以把密码文本框看成是一种特殊的单行文本框。对于两者的区别，从下图就可以很清晰地看出来了。
1. 密码文本框语法
在 HTML 中，密码文本框是使用 input 标签来实现的，其 type 属性取值为 "password"。
语法：
<input type="password" name="字段名">示例 5：HTML 创建密码文本框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form method="post" action="/">
账号：<input type="text"><br>
密码：<input type="password">
</form>
</body>
</html>页面效果如下图所示。
分析：
密码文本框与单行文本框在外观上是一样的，但当我们输入内容后，就会看出两者的区别，如下图所示。
注意: 密码框只是在视觉上防止偷窥，但如果要保证密码传输的安全，我们的网站必须使用 HTTPS 协议加密数据才行。
2. 密码文本框属性
在 HTML 中，密码文本框可以看成是一种特殊的单行文本框，它拥有和单行文本框一样的属性，如下表所示。
| 属性 | 说明 |
|---|---|
| value | 设置文本框的默认值（一般供给 JavaScript 或后端使用） |
| maxlength | 设置文本框中最多可以输入的字符数 |
| placeholder | 设置文本框的提示文本 |
| readonly | 设置文本框是否为 “只读” |
| disabled | 设置文本框是否为 “禁用” |
示例 6：密码文本框的属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form method="post" action="/">
账号：<input type="text" maxlength="10"><br>
密码：<input type="password" maxlength="10">
</form>
</body>
</html>页面效果如下图所示。
分析：
这个例子的预览效果跟前一个例子的差不多。不过事实上，文本框的可输入字符数（maxlength）已经改变了。当我们输入内容后，效果如下图所示。
密码文本框仅仅能使得周围的人看不见你输入的内容是什么，但它并不能保证数据的安全。为了保证数据安全，我们需要在浏览器与服务器之间建立一个安全连接，不过这属于后端技术，这里了解一下就行。
HTML 多行文本框
如果需要输入大量文本（比如个人简介、发表评论等），单行文本框就显然不够用了，此时应该使用多行文本框。
提示: 单行文本框只能输入一行文本，而多行文本框却可以输入多行文本。
在 HTML 中，多行文本框使用的是 textarea 标签，而不是 input 标签。
语法：
<textarea rows="行数" cols="列数">默认内容</textarea>说明：
对于 textarea 标签来说，它常用的属性如下表所示。
| 属性 | 说明 |
|---|---|
| rows | 设置文本框的行数 |
| cols | 设置文本框的列数 |
| readonly | 设置文本框是否 “只读” |
| disabled | 设置文本框是否 “禁用” |
| placeholder | 设置文本框的提示文字 |
textarea 是双标签，这一点与 input 不一样。此外特别注意一点，textarea的默认值是放在 <textarea> 与 </textarea>，而不是放在 value 属性中。
<!--正确-->
<textarea>这是默认值</textarea>
<!--错误-->
<textarea value="这是默认值"></textarea>虽然我们可以通过 rows和 cols 来控制 textarea 的大小，但为了更精准地进行布局，我们更建议直接用 CSS 的 width 和 height 来设置。
示例 7：HTML 创建多行文本框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form method="post" action="/">
个人简介：<br>
<textarea rows="5" cols="20" placeholder="请介绍一下你自己"></textarea>
</form>
</body>
</html>页面效果如下图所示。
