Frontend Academy · 课时

表单控件：input 类型、select、textarea

使用文本、电子邮件、数字、日期、复选框、单选框、范围、文件和颜色输入控件，以及 select 和 textarea 元素。

表单控件：input 类型、select、textarea 是 CoddyKit 上的免费 Frontend Academy 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Frontend Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Frontend Academy 课程共包含 4 节课。

完整的输入类型分类

HTML5 引入了许多文本之外的专用输入类型。每种类型都会告诉浏览器应接收哪类数据，从而启用原生验证、适合移动设备的键盘以及平台原生的用户界面控件。

文本、搜索和 URL 输入

type="text" 是普通文本的回退类型。type="search" 会提示浏览器使用针对搜索优化的键盘，并且通常会显示清除按钮。type="url" 会验证 URL 格式，并在移动设备上显示 URL 键盘。

<input type="text" placeholder="Full name">
<input type="search" placeholder="Search...">
<input type="url" placeholder="https://example.com">

电子邮件和电话

type="email" 会验证电子邮件格式，并显示带有 @ 键、针对电子邮件优化的键盘。type="tel" 会显示电话数字键盘（由于各国的电话号码格式不同，它不会验证格式）。

<input type="email" name="email" autocomplete="email">
<input type="tel" name="phone" autocomplete="tel">

数字、范围和日期类型

type="number" 可配合 min/max/step 处理数值数据。type="range" 用于滑块。type="date"、type="time" 和 type="datetime-local" 用于处理时间数据，并提供原生选择器。

<input type="number" min="0" max="100" step="5" value="50">
<input type="range" min="0" max="100" value="60">
<input type="date" min="2025-01-01">
<input type="time">

复选框和单选按钮

复选框彼此独立，可以分别切换。处于同一组（具有相同 name）的单选按钮只能选择一个。每个控件都需要配套的标签。

<fieldset>
  <legend>Notification preferences</legend>
  <label><input type="checkbox" name="email_notif" value="1"> Email</label>
  <label><input type="checkbox" name="sms_notif" value="1"> SMS</label>
</fieldset>

<fieldset>
  <legend>Plan</legend>
  <label><input type="radio" name="plan" value="free"> Free</label>
  <label><input type="radio" name="plan" value="pro"> Pro</label>
</fieldset>

颜色、文件和隐藏输入

type="color" 会显示原生颜色选择器。type="file" 会打开文件对话框；请使用 accept 属性限制文件类型。type="hidden" 会提交数据，但不会显示用户界面控件。

<input type="color" name="theme_color" value="#3182ce">
<input type="file" accept="image/png, image/jpeg">
<input type="hidden" name="csrf_token" value="abc123">

选择下拉菜单

<select> 元素会创建下拉菜单。使用 multiple 可进行多选（用户体验通常不佳）。对于较长的列表，请使用 <optgroup> 对选项进行分组。

<select name="country">
  <option value="">Select a country...</option>
  <optgroup label="Europe">
    <option value="de">Germany</option>
    <option value="fr">France</option>
  </optgroup>
  <optgroup label="Americas">
    <option value="us">United States</option>
  </optgroup>
</select>

Textarea

<textarea> 会创建多行文本输入框。使用 rows 和 cols 设置初始大小，或使用 CSS 获得更精细的控制。结束标签是必需的，标签之间的任何内容都会成为默认值。

<label for="bio">Bio</label>
<textarea id="bio" name="bio" rows="5" maxlength="500"
  placeholder="Write something about yourself..."></textarea>

Datalist — 自动完成选项

<datalist> 会为输入框提供建议列表，但不会限制用户输入自由文本。请使用 list 和 id 属性将输入框与 datalist 关联起来。

<input type="text" list="languages" name="language" placeholder="Type a language">
<datalist id="languages">
  <option value="JavaScript">
  <option value="TypeScript">
  <option value="Python">
  <option value="Rust">
</datalist>

value 和 name 属性

name 是表单提交时发送的键。value 设置初始值。对于复选框和单选按钮，value 是选中后提交的内容。对于文本输入框，value 是预填充的内容。

输入框大小和占位符

placeholder 会在输入框为空时显示提示文本。输入框获得焦点后提示文本会消失，而且不能替代可见标签。size 以字符数设置可见宽度；调整大小时应优先使用 CSS。

快速检查

哪种输入类型会在移动设备上显示数字键盘，并验证输入值是否为有效数字？

回顾：表单控件

请使用语义化输入类型：电子邮件使用 email，数字使用 number，日期使用 date。固定选项使用 select，建议式自动完成使用 datalist，多行文本使用 textarea。提交表单时始终要包含 name 属性，并在适当情况下设置 value 属性。

常见问题解答

「表单控件：input 类型、select、textarea」课时是免费的吗？

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

「表单控件：input 类型、select、textarea」这节课中我会学到什么？

使用文本、电子邮件、数字、日期、复选框、单选框、范围、文件和颜色输入控件，以及 select 和 textarea 元素。你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Frontend Academy 需要有经验吗？

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

「表单控件：input 类型、select、textarea」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 Frontend Academy