HTML <input> 表单属性

HTML中的 <input> 元素是一种常用的表单元素，它允许用户输入数据并将其提交给服务器来进行处理。除了常见的文本输入，<input> 还具有许多属性，可以定制表单中的各种元素，使其更加灵活、强大。

下面是一些常见的 <input> 表单属性及其用法：

type

type 属性用于指定输入元素的类型。常见的类型包括：

• text：用于输入单行文本
• password：用于输入密码，字符会被隐藏
• checkbox：用于表示多选框，可以选中多个选项
• radio：用于表示单选框，只能选中一个选项
• file：用于上传文件
• submit：用于提交表单
• reset：用于重置表单
• button：用于生成一个普通的按钮

<!-- 示例 -->
<input type="text"> <!-- 单行文本输入 -->
<input type="password"> <!-- 密码输入 -->
<input type="checkbox"> <!-- 多选框 -->
<input type="radio"> <!-- 单选框 -->
<input type="file"> <!-- 上传文件 -->
<input type="submit"> <!-- 提交 -->
<input type="reset"> <!-- 重置 -->
<input type="button"> <!-- 普通按钮 -->

name

name 属性用于指定输入元素的名称。名称将作为表单提交时的参数名，用于标识输入值的含义。

<!-- 示例 -->
<input type="text" name="username"> <!-- 用户名 -->
<input type="password" name="password"> <!-- 密码 -->
<input type="checkbox" name="hobby" value="reading"> 阅读 <!-- 兴趣-阅读 -->
<input type="checkbox" name="hobby" value="sports"> 运动 <!-- 兴趣-运动 -->
<input type="radio" name="gender" value="male"> 男 <!-- 性别-男 -->
<input type="radio" name="gender" value="female"> 女 <!-- 性别-女 -->

value

value 属性用于指定输入元素的默认值。对于一些已选中或已输入的选项，可以将其默认值设置为之前的输入值，以方便用户使用。

<!-- 示例 -->
<input type="text" name="username" value="张三"> <!-- 用户名-默认值为"张三" -->
<input type="password" name="password" value="123456"> <!-- 密码-默认值为"123456" -->
<input type="checkbox" name="hobby" value="reading" checked> 阅读 <!-- 兴趣-阅读-默认选中 -->
<input type="checkbox" name="hobby" value="sports"> 运动 <!-- 兴趣-运动 -->
<input type="radio" name="gender" value="male" checked> 男 <!-- 性别-男-默认选中 -->
<input type="radio" name="gender" value="female"> 女 <!-- 性别-女 -->

checked

checked 属性用于指定输入元素是否被选中，默认情况下未选中。对于多选框和单选框，可以通过设置 checked 属性来选中其中一项。

<!-- 示例 -->
<input type="checkbox" name="hobby" value="reading" checked> 阅读
<input type="checkbox" name="hobby" value="sports"> 运动
<input type="radio" name="gender" value="male" checked> 男
<input type="radio" name="gender" value="female"> 女

disabled

disabled 属性用于指定输入元素是否被禁用。如果将一个输入元素设置为 disabled，那么用户将无法对其进行编辑或选择。

<!-- 示例 -->
<input type="text" name="username" disabled> <!-- 用户名-禁用 -->
<input type="checkbox" name="hobby" value="reading" checked disabled> 阅读 <!-- 兴趣-阅读-默认选中-禁用 -->
<input type="checkbox" name="hobby" value="sports" disabled> 运动 <!-- 兴趣-运动-禁用 -->
<input type="radio" name="gender" value="male" checked disabled> 男 <!-- 性别-男-默认选中-禁用 -->
<input type="radio" name="gender" value="female" disabled> 女 <!-- 性别-女-禁用 -->

readonly

readonly 属性用于指定输入元素是否只读。如果将一个输入元素设置为 readonly，那么用户将无法修改其中的文本或选项，但仍可以查看其内容。

<!-- 示例 -->
<input type="text" name="username" value="张三" readonly> <!-- 用户名-只读 -->