编辑“︁HTML文本输入”︁（章节）

= HTML文本输入 =

'''HTML文本输入'''是HTML表单中最基础且最常用的元素之一，允许用户在网页上输入单行或多行文本。它广泛应用于登录表单、搜索框、评论框等交互场景。本文将详细介绍文本输入的基本语法、属性、类型及其实际应用。

== 基本语法 ==
HTML文本输入通过{{tag|input|open}}元素实现，默认类型为`type="text"`。其基本结构如下：

<syntaxhighlight lang="html">
<input type="text" name="username" id="username" placeholder="请输入用户名">
</syntaxhighlight>

'''属性说明：'''
* '''type'''：指定输入类型（如`text`、`password`、`email`等）。
* '''name'''：标识输入字段的名称，用于表单提交。
* '''id'''：唯一标识符，通常与{{tag|label}}配合使用。
* '''placeholder'''：显示提示文本，输入时消失。

== 输入类型 ==
HTML5扩展了多种文本输入类型，以优化用户体验和设备兼容性：

{| class="wikitable"
|+ 常见文本输入类型
! 类型 !! 描述 !! 示例
|-
| `text` || 普通单行文本 || <code><input type="text"></code>
|-
| `password` || 密码输入（掩码显示） || <code><input type="password"></code>
|-
| `email` || 邮箱验证（自动校验格式） || <code><input type="email"></code>
|-
| `search` || 搜索框（部分浏览器有清除按钮） || <code><input type="search"></code>
|-
| `tel` || 电话号码输入（移动端触发数字键盘） || <code><input type="tel"></code>
|}

== 多行文本输入 ==
使用{{tag|textarea}}元素实现多行文本输入：

<syntaxhighlight lang="html">
<textarea name="comment" rows="4" cols="50" placeholder="请输入评论..."></textarea>
</syntaxhighlight>

'''属性说明：'''
* '''rows'''：可见行数。
* '''cols'''：可见列数（字符宽度）。

== 实际案例 ==
=== 登录表单 ===
<syntaxhighlight lang="html">
<form action="/login" method="post">
  <label for="email">邮箱：</label>
  <input type="email" id="email" name="email" required>
  
  <label for="pwd">密码：</label>
  <input type="password" id="pwd" name="password" minlength="8" required>
  
  <input type="submit" value="登录">
</form>
</syntaxhighlight>

'''效果说明：'''
* `required`：强制字段必填。
* `minlength="8"`：密码至少8个字符。

=== 搜索框 ===
<syntaxhighlight lang="html">
<form action="/search">
  <input type="search" name="q" placeholder="搜索...">
  <button type="submit">搜索</button>
</form>
</syntaxhighlight>

== 高级特性 ==
=== 数据绑定与JavaScript ===
通过JavaScript动态控制文本输入的值和事件：

<syntaxhighlight lang="html">
<input type="text" id="dynamicInput" value="初始值">
<script>
  document.getElementById('dynamicInput').addEventListener('input', function(e) {
    console.log('当前输入值：', e.target.value);
  });
</script>
</syntaxhighlight>

=== 输入验证 ===
HTML5内置验证（无需JavaScript）：

<syntaxhighlight lang="html">
<input type="text" pattern="[A-Za-z]{3}" title="请输入3个字母">
</syntaxhighlight>

* `pattern`：正则表达式验证规则。
* `title`：验证失败时的提示文本。

== 流程图：文本输入处理 ==
<mermaid>
flowchart TD
  A[用户输入文本] --> B{是否合法?}
  B -->|是| C[提交表单]
  B -->|否| D[显示错误提示]
</mermaid>

== 数学公式示例 ==
若需计算输入字符长度限制（如密码强度），可使用公式：
<math>
\text{强度} = \frac{\text{实际长度}}{\text{最小长度}} \times 100\%
</math>

== 总结 ==
HTML文本输入是构建交互式网页的基石，通过合理使用类型和属性，可以显著提升用户体验和数据准确性。初学者应掌握基础语法，而高级用户可深入探索JavaScript集成和验证逻辑。

[[Category:编程语言]]
[[Category:HTML]]
[[Category:HTML表单]]