输入字段和提交按钮 - HTML

简介

HTML 提供了多种输入字段和提交按钮，让用户可以以不同的方式对网页进行交互。这些输入字段和提交按钮可以用于各种用途，比如用户输入搜索关键字、注册新用户、提交评论等。

本文将介绍 HTML 中常见的输入字段和提交按钮。

文本输入框

文本输入框是用户可以输入文本的基本输入字段。文本输入框使用 <input> 标签，并设置 type 属性为 "text"。

<input type="text" name="username">

这个例子中，name 属性用于标识这个输入字段，以便在提交表单时能够获取到输入的值。

密码输入框

密码输入框和文本输入框类似，但输入的字符将被隐藏，以保护用户密码的机密性。密码输入框使用 <input> 标签，并设置 type 属性为 "password"。

<input type="password" name="password">

单选框和复选框

单选框和复选框是用于让用户从多个选项中选择一个或多个的输入字段。单选框使用 <input> 标签，并设置 type 属性为 "radio"。复选框使用 <input> 标签，并设置 type 属性为 "checkbox"。

<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>

<input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle" value="Car"> I have a car<br>

在单选框和复选框中，name 属性用于标识这个输入字段组，value 属性用于标识每个选项的值。在提交表单时，只有选中的单选框和复选框的值才会被提交。

下拉框

下拉框是用于让用户从一个下拉列表中选择一个选项的输入字段。下拉框使用 <select> 标签，并包含多个 <option> 标签。每个 <option> 标签代表一个选项。

<select name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

在提交表单时，被选中的 <option> 标签的 value 属性将被提交。

输入按钮

输入按钮可以让用户在表单中点击以进行提交或重置。输入按钮使用 <input> 标签，并设置 type 属性为 "submit" 或 "reset"。

<input type="submit" value="Submit">
<input type="reset" value="Reset">

在提交表单时，点击 "Submit" 按钮将提交表单中所有输入字段的值。点击 "Reset" 按钮将重置表单中所有输入字段的值。

总结

HTML 提供了多种输入字段和提交按钮，让你可以在网页中实现不同的交互方式。了解这些基本输入字段和提交按钮的使用方法，可以帮助你更好地构建交互性强、美观的网站。