介绍
在 HTML 中,<input>
标签用于创建各种类型的输入字段。本实验将演示如何使用带有适当 type
属性的 <input>
标签在 HTML 表单中创建不同类型的输入字段。
注意:你可以在
index.html
中练习编码,并学习如何在 Visual Studio Code 中编写 HTML。请点击右下角的 'Go Live' 以在端口 8080 上运行 Web 服务。然后,你可以刷新 Web 8080 标签以预览网页。
在 HTML 中,<input>
标签用于创建各种类型的输入字段。本实验将演示如何使用带有适当 type
属性的 <input>
标签在 HTML 表单中创建不同类型的输入字段。
注意:你可以在
index.html
中练习编码,并学习如何在 Visual Studio Code 中编写 HTML。请点击右下角的 'Go Live' 以在端口 8080 上运行 Web 服务。然后,你可以刷新 Web 8080 标签以预览网页。
创建一个名为 index.html
的新 HTML 文件。该文件将包含输入表单的 HTML 代码。
要创建一个文本输入字段,请使用以下 HTML 代码:
<label for="username">Username:</label><br />
<input type="text" id="username" name="username" /><br />
在代码中,我们为输入字段创建了一个标签,将 type
属性设置为 "text"
,并分配了 id
和 name
属性。此代码将创建一个文本输入字段,供用户输入其用户名。
要创建一个密码输入字段,请使用以下代码:
<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" />
在代码中,我们创建了三个复选框供用户选择。请注意,每个复选框都有不同的 id
、name
和 value
属性。
要创建一个单选按钮输入字段,请使用以下代码:
<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" />
在代码中,我们创建了三个单选按钮供用户选择性别。请注意,每个单选按钮都有不同的 id
、name
和 value
属性。
要创建一个提交按钮,请使用以下代码:
<input type="submit" value="Submit" />
在代码中,我们创建了一个按钮,用户点击该按钮即可提交表单。
在本实验中,我们学习了如何使用 <input>
标签及其相应的 type
属性在 HTML 表单中创建不同类型的输入字段。我们创建了文本输入、密码输入、复选框输入、单选按钮输入以及提交按钮。你可以将这些示例作为起点,创建更复杂的 HTML 表单来收集用户输入。