HTML 输入控件

HTMLHTMLBeginner
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

介绍

在 HTML 中,<input> 标签用于创建各种类型的输入字段。本实验将演示如何使用带有适当 type 属性的 <input> 标签在 HTML 表单中创建不同类型的输入字段。

注意:你可以在 index.html 中练习编码,并学习如何在 Visual Studio Code 中编写 HTML。请点击右下角的 'Go Live' 以在端口 8080 上运行 Web 服务。然后,你可以刷新 Web 8080 标签以预览网页。


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/FormsandInputGroup(["`Forms and Input`"]) html(("`HTML`")) -.-> html/AdvancedElementsGroup(["`Advanced Elements`"]) html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/FormsandInputGroup -.-> html/forms("`Form Elements`") html/FormsandInputGroup -.-> html/form_valid("`Form Validation`") html/FormsandInputGroup -.-> html/form_group("`Grouping Form Elements`") html/FormsandInputGroup -.-> html/form_access("`Accessibility in Forms`") html/AdvancedElementsGroup -.-> html/inter_elems("`Interactive and Dynamic Elements`") subgraph Lab Skills html/basic_elems -.-> lab-70779{{"`HTML 输入控件`"}} html/forms -.-> lab-70779{{"`HTML 输入控件`"}} html/form_valid -.-> lab-70779{{"`HTML 输入控件`"}} html/form_group -.-> lab-70779{{"`HTML 输入控件`"}} html/form_access -.-> lab-70779{{"`HTML 输入控件`"}} html/inter_elems -.-> lab-70779{{"`HTML 输入控件`"}} end

创建一个文本输入字段

创建一个名为 index.html 的新 HTML 文件。该文件将包含输入表单的 HTML 代码。

要创建一个文本输入字段,请使用以下 HTML 代码:

<label for="username">Username:</label><br />
<input type="text" id="username" name="username" /><br />

在代码中,我们为输入字段创建了一个标签,将 type 属性设置为 "text",并分配了 idname 属性。此代码将创建一个文本输入字段,供用户输入其用户名。

创建一个密码输入字段

要创建一个密码输入字段,请使用以下代码:

<label for="password">Password:</label><br />
<input type="password" id="password" name="password" /><br />

在代码中,我们将 type 属性设置为 "password",这将隐藏用户输入的密码字符。

创建一个复选框输入字段

要创建一个复选框输入字段,请使用以下代码:

<label for="vehicle1">I have a car</label>
<input type="checkbox" id="vehicle1" name="vehicle1" value="car" />
<br />
<label for="vehicle2">I have a bike</label>
<input type="checkbox" id="vehicle2" name="vehicle2" value="bike" />
<br />
<label for="vehicle3">I have a boat</label>
<input type="checkbox" id="vehicle3" name="vehicle3" value="boat" />

在代码中,我们创建了三个复选框供用户选择。请注意,每个复选框都有不同的 idnamevalue 属性。

创建一个单选按钮输入字段

要创建一个单选按钮输入字段,请使用以下代码:

<label for="male">Male</label>
<input type="radio" id="male" name="gender" value="male" />
<br />
<label for="female">Female</label>
<input type="radio" id="female" name="gender" value="female" />
<br />
<label for="other">Other</label>
<input type="radio" id="other" name="gender" value="other" />

在代码中,我们创建了三个单选按钮供用户选择性别。请注意,每个单选按钮都有不同的 idnamevalue 属性。

创建一个提交按钮

要创建一个提交按钮,请使用以下代码:

<input type="submit" value="Submit" />

在代码中,我们创建了一个按钮,用户点击该按钮即可提交表单。

总结

在本实验中,我们学习了如何使用 <input> 标签及其相应的 type 属性在 HTML 表单中创建不同类型的输入字段。我们创建了文本输入、密码输入、复选框输入、单选按钮输入以及提交按钮。你可以将这些示例作为起点,创建更复杂的 HTML 表单来收集用户输入。

您可能感兴趣的其他 HTML 教程