HTML中的表单输入类型详解

翻滚的胖子
2023-06-06 12:14:32
前端技术
HTML CSS JavaScript

HTML中的表单是网页中非常重要的一部分，其中的输入类型也是使用频率非常高的一部分。下面将为大家详细介绍HTML表单中的各种输入类型，包括：

文本框

文本框是表单中最基本的输入类型，用于输入单行文本信息。可以通过以下代码创建一个文本框：

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

其中，type属性值为text，name属性用于服务器端接收数据，id属性用于在JavaScript中操作文本框。

文本框还支持以下属性：

value：设置文本框的默认值
maxlength：限制文本框输入的最大长度
size：设置文本框的宽度

密码框

密码框与文本框的使用方法类似，只是输入的内容会被隐藏。可以通过以下代码创建一个密码框：

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

密码框的type属性值为password，其他属性与文本框相同。

单选框

单选框用于多个选项中选择一个。可以通过以下代码创建一个单选框：

<input type="radio" name="sex" value="male">男
<input type="radio" name="sex" value="female">女

其中，name属性值相同的多个单选框会被视为一组，只能选择其中一个。value属性用于服务器端接收数据。

复选框

复选框用于多个选项中选择多个。可以通过以下代码创建一个复选框：

<input type="checkbox" name="hobby" value="reading">阅读
<input type="checkbox" name="hobby" value="music">听音乐
<input type="checkbox" name="hobby" value="sport">运动

其中，name属性值相同的多个复选框会被视为一组，可以选择其中多个。value属性用于服务器端接收数据。

下拉框

下拉框用于从多个选项中选择一个。可以通过以下代码创建一个下拉框：

<select name="province">
    <option value="beijing">北京</option>
    <option value="shanghai">上海</option>
    <option value="guangzhou">广州</option>
</select>

其中，name属性用于服务器端接收数据，option标签用于定义选项，value属性用于服务器端接收数据，文本内容用于显示选项名称。