输入和选择框组合 - HTML

在Web开发中，输入和选择框（input and select）是非常基础的组件。它们用来让用户输入数据或者选择数据。

HTML提供了多种类型的输入框和选择框，可以根据实际需求选择适合的组件。

输入框

输入框用来让用户输入文本、数字等数据，常见的输入框类型包括文本框、密码框、数字框、邮箱框等等。

文本框

文本框（text）是最常用的输入框，可以用来输入任意文本。以下是一个简单的文本框的例子：

<input type="text" name="username" placeholder="请输入用户名">

其中，type属性为text，name属性用来指定元素的名称，placeholder属性用来在输入框空白时显示的提示文本。

密码框

密码框（password）用来输入密码等敏感信息，输入的内容会被隐藏。以下是一个简单的密码框的例子：

<input type="password" name="password" placeholder="请输入密码">

其中，type属性为password。

数字框

数字框（number）用来输入数字。以下是一个简单的数字框的例子：

<input type="number" name="age" placeholder="请输入年龄">

其中，type属性为number。

邮箱框

邮箱框（email）用来输入邮箱地址。以下是一个简单的邮箱框的例子：

<input type="email" name="email" placeholder="请输入邮箱">

其中，type属性为email。

选择框

选择框用来让用户从一些固定的选项中选择一个。常见的选择框包括单选框、复选框、下拉框等等。

单选框

单选框（radio）用来让用户从几个互斥的选项中选择一个。以下是一个简单的单选框的例子：

<input type="radio" id="male" name="gender" value="male">
<label for="male">男</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女</label>

其中，type属性为radio，name属性相同的单选框会形成一组选项，互斥。id属性和for属性用来关联文本标签和单选框，点击标签即可选中对应的单选框。

复选框

复选框（checkbox）用来让用户从多个选项中选择一个或多个。以下是一个简单的复选框的例子：

<input type="checkbox" id="apple" name="fruit" value="apple">
<label for="apple">苹果</label>
<input type="checkbox" id="banana" name="fruit" value="banana">
<label for="banana">香蕉</label>
<input type="checkbox" id="orange" name="fruit" value="orange">
<label for="orange">橙子</label>

其中，type属性为checkbox，name属性相同的复选框会形成一组选项，互不影响。id属性和for属性用来关联文本标签和复选框，点击标签即可选中对应的复选框。

下拉框

下拉框（select）用来让用户从多个选项中选择一个。以下是一个简单的下拉框的例子：

<select name="city">
  <option value="beijing">北京</option>
  <option value="shanghai">上海</option>
  <option value="guangzhou">广州</option>
  <option value="shenzhen">深圳</option>
</select>

其中，name属性用来指定元素的名称，option标签用来定义选项，value属性用来指定选项的值，可用来提交表单。默认情况下，下拉框只会显示第一个选项，用户需要点击展开才能看到所有选项。

以上就是输入和选择框组合的相关介绍，HTML中提供多种类型的输入框和选择框，可以根据实际需求选择适合的组件。