0Pricing
HTML Academy · 课时

输入类型：text、password、email、number 与 tel

为每个数据字段使用正确的输入类型。

输入类型：text、password、email、number 与 tel 是 CoddyKit 上的免费 HTML Academy 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 HTML Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML Academy 课程共包含 4 节课。

input 元素

<input> 元素可以创建各种表单控件。type 属性决定控件的类型：

<input type="text">      <!-- single-line text -->
<input type="password"> <!-- masked text -->
<input type="email">    <!-- email address -->
<input type="number">   <!-- numeric -->
<input type="tel">      <!-- phone number -->

type=text

默认的 input 类型——单行文本字段：

<label for="username">Username</label>
<input
  type="text"
  id="username"
  name="username"
  placeholder="e.g. jane_doe"
  maxlength="50"
  autocomplete="username"
>

type=password

password 输入框会在用户输入时遮盖字符：

<label for="pwd">Password</label>
<input
  type="password"
  id="pwd"
  name="password"
  minlength="8"
  autocomplete="current-password"
  required
>
<!-- Browser may offer to save/fill the password -->
<!-- autocomplete="new-password" for registration forms -->

type=email

email 输入框会在移动设备和桌面设备上验证电子邮件格式：

<label for="email">Email</label>
<input
  type="email"
  id="email"
  name="email"
  placeholder="you@example.com"
  autocomplete="email"
  required
>
<!-- Mobile: shows @ on keyboard -->
<!-- Browser validates basic email format on submit -->

type=number

number 输入框接受数值，并带有微调控件：

<label for="qty">Quantity</label>
<input
  type="number"
  id="qty"
  name="quantity"
  min="1"
  max="100"
  step="1"
  value="1"
>
<!-- min, max, step control allowed values -->
<!-- Mobile: shows numeric keypad -->
<!-- Note: only integers with step=1; decimals need step="0.01" -->

type=tel

tel 输入框接受电话号码，但不会验证其格式：

<label for="phone">Phone number</label>
<input
  type="tel"
  id="phone"
  name="phone"
  placeholder="+1 (555) 555-0100"
  pattern="[+][0-9 ()-]{7,20}"
  autocomplete="tel"
>
<!-- Mobile: shows phone keypad -->
<!-- No built-in validation — phone formats vary globally -->
<!-- Use pattern attribute for format validation -->

name 属性至关重要

服务器通过 name 属性识别每个字段：

<form action="/search">
  <!-- Without name, the field is NOT sent with the form -->
  <input type="text" name="q" placeholder="Search">
  <button type="submit">Search</button>
</form>
<!-- Submits: /search?q=your+search+term -->
<!-- name="q" → the key in the submitted data -->

placeholder 与 label 的对比

placeholder 属性提供示例文本——但绝不要用它代替 label：

<!-- BAD: placeholder as label -->
<input type="text" placeholder="Enter your name">

<!-- GOOD: label + helpful placeholder -->
<label for="name">Full name</label>
<input type="text" id="name" name="name" placeholder="e.g. Jane Smith">
<!-- Placeholder disappears on typing — screen readers often skip it -->

value 与 defaultValue

使用 value 属性预填充输入框：

<input type="text" name="country" value="United States">
<!-- Renders with 'United States' pre-filled -->

<input type="number" name="qty" value="1" min="1" max="10">
<!-- Default quantity of 1 -->

disabled 与 readonly

有两种方式可以让输入框不可编辑：

<input type="text" value="Fixed value" readonly>
<!-- readonly: user can see and select text, but not edit it -->
<!-- Value IS submitted with the form -->

<input type="text" value="Disabled" disabled>
<!-- disabled: user cannot interact with it at all -->
<!-- Value is NOT submitted with the form -->
<!-- NOT in tab order -->

输入框自动填充值

具体的 autocomplete 值可以提高浏览器自动填充的准确性：

<input type="text" name="name" autocomplete="name">
<input type="email" name="email" autocomplete="email">
<input type="tel" name="phone" autocomplete="tel">
<input type="text" name="street" autocomplete="address-line1">
<input type="text" name="city" autocomplete="address-level2">
<input type="text" name="zip" autocomplete="postal-code">
<input type="password" autocomplete="new-password">

快速检查

电话号码字段应该使用哪种 input 类型？

回顾：input 类型

常见的 input 类型：

  • type="text" — 通用文本（默认）
  • type="password" — 遮盖文本；请使用 autocomplete="new-password"
  • type="email" — 电子邮件，移动设备提供 @ 按键
  • type="number" — 数值，可设置 min/max/step
  • type="tel" — 电话号码，显示电话键盘
  • 始终包含 name 和对应的 <label>

常见问题解答

「输入类型：text、password、email、number 与 tel」课时是免费的吗？

是的 — 「输入类型：text、password、email、number 与 tel」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML Academy 课程的其余内容，请升级到 CoddyKit PRO。 HTML Academy 课程共包含 4 节课。

「输入类型：text、password、email、number 与 tel」这节课中我会学到什么？

为每个数据字段使用正确的输入类型。 你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 HTML Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 HTML Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。

「输入类型：text、password、email、number 与 tel」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 HTML Academy 课中编写并运行代码吗？

能。每节 HTML Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. form 元素：action、method 与 enctype
  2. 输入类型：text、password、email、number 与 tel
  3. label 元素与无障碍
  4. button 元素：submit、reset 与 button
← 返回 HTML Academy