HTML for Kids · 课时

表单：收集用户输入

Q: 「表单：收集用户输入」这节课中我会学到什么？

使用文本框、按钮等元素构建简单表单 你通过在浏览器中直接运行的动手代码来练习 HTML for Kids，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用文本框、按钮等元素构建简单表单

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

表单：收集用户输入

欢迎来到下一课！今天，我们将学习如何在 HTML 中创建表单。表单允许用户在网页上输入姓名或电子邮件地址等数据。

什么是表单？

表单用于收集用户信息。例如，注册账户时，您需要填写包含姓名和电子邮件地址等字段的表单。

HTML 中的表单使用 <form> 标签创建。

创建基本表单

表单使用 <form> 标签创建。在此标签内，您可以添加输入字段、按钮等内容。

示例：

<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" />
  <br />
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" />
  <br />
  <button type="submit">Submit</button>
</form>

表单输入类型

HTML 表单支持不同类型的输入字段。以下是一些常见类型：

text：用于输入简短文本
email：用于输入电子邮件地址
password：用于输入密码
number：用于输入数字

示例：

<form>
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" />
  <br />
  <label for="age">Age:</label>
  <input type="number" id="age" name="age" />
</form>

添加单选按钮和复选框

您可以使用单选按钮提供单项选择，使用复选框提供多项选择。

示例：

<form>
  <p>Favorite Color:</p>
  <input type="radio" id="red" name="color" value="red" />
  <label for="red">Red</label>
  <br />
  <input type="radio" id="blue" name="color" value="blue" />
  <label for="blue">Blue</label>
  <br />

  <p>Hobbies:</p>
  <input type="checkbox" id="reading" name="hobby" value="reading" />
  <label for="reading">Reading</label>
  <br />
  <input type="checkbox" id="sports" name="hobby" value="sports" />
  <label for="sports">Sports</label>
</form>

添加下拉菜单

您可以使用 <select> 标签创建下拉菜单，让用户从选项列表中进行选择。

示例：

<form>
  <label for="country">Select your country:</label>
  <select id="country" name="country">
    <option value="usa">United States</option>
    <option value="uk">United Kingdom</option>
    <option value="canada">Canada</option>
  </select>
</form>

表单按钮

按钮允许用户提交或重置表单。通常使用 <button> 标签创建按钮。

示例：

<form>
  <button type="submit">Submit</button>
  <button type="reset">Reset</button>
</form>

设置表单样式

您可以使用 CSS 设置表单样式，让它看起来更美观。例如，您可以调整字段大小或更改字段颜色。

示例：

<style>
  form {
    width: 300px;
    margin: 20px auto;
  }
  input, select, button {
    width: 100%;
    padding: 10px;
    margin: 5px 0;
  }
</style>

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" />
  <button type="submit">Submit</button>
</form>

做得很好！

恭喜您！您已经学会了如何创建表单、使用不同的输入类型并设置表单样式。表单对于收集用户数据以及实现网页互动非常重要。在下一课中，我们将探索如何使用视频和音频等多媒体，让页面更加生动。准备好发挥更多创意吧！

常见问题解答

「表单：收集用户输入」课时是免费的吗？

是的 — 「表单：收集用户输入」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML for Kids 课程的其余内容，请升级到 CoddyKit PRO。 HTML for Kids 课程共包含 4 节课。

「表单：收集用户输入」这节课中我会学到什么？

使用文本框、按钮等元素构建简单表单你通过在浏览器中直接运行的动手代码来练习 HTML for Kids，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 HTML for Kids 需要有经验吗？

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

「表单：收集用户输入」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 HTML for Kids