HTML Input 属性
原创
HTML Input 属性
原创
用户3672714
发布于 2025-08-01 15:34:16
发布于 2025-08-01 15:34:16
HTML <input> 属性
HTML <input> 元素是表单中最常用的控件之一。通过设置不同的属性，可以控制 <input> 元素的行为、外观、验证规则等。以下是一些常见的 <input> 属性及其说明。
1. type
- 说明：指定输入控件的类型，决定了控件的外观和功能。常见类型包括
text、password、email、radio、checkbox等。 - 示例：
<input type="text" name="username" placeholder="请输入用户名"><input type="password" name="password" placeholder="请输入密码">php116 Bytes© 菜鸟-创作你的创作2. name
- 说明：指定控件的名称，表单提交时该值将作为键发送到服务器。
- 示例：
<input type="text" name="username" placeholder="请输入用户名"><input type="password" name="password" placeholder="请输入密码">php116 Bytes© 菜鸟-创作你的创作3. value
- 说明：设置或获取输入控件的默认值。对于文本输入框和按钮，
value指定初始显示内容。对于复选框和单选按钮，value指定提交时提交的值。 - 示例：
<input type="text" name="username" value="john_doe"><input type="submit" value="提交"><input type="radio" name="gender" value="male"> 男<input type="radio" name="gender" value="female"> 女php187 Bytes© 菜鸟-创作你的创作4. placeholder
- 说明：为输入框提供提示文本，通常在输入框为空时显示，用户输入内容后提示文本消失。
- 示例：
<input type="text" name="email" placeholder="请输入邮箱地址"><input type="password" name="password" placeholder="请输入密码">php114 Bytes© 菜鸟-创作你的创作5. id
- 说明：为元素指定唯一的标识符，通常与
<label>元素配合使用，增强可访问性。 - 示例：
<label for="username">用户名:</label><input type="text" id="username" name="username">php84 Bytes© 菜鸟-创作你的创作6. class
- 说明：为元素指定一个或多个类名，通常用于 CSS 样式或 JavaScript 操作。
- 示例：
<input type="text" name="username" class="input-field">php55 Bytes© 菜鸟-创作你的创作7. required
- 说明：指定该输入字段为必填项，表单提交时如果该字段为空，将触发浏览器验证。
- 示例：
<input type="text" name="username" required placeholder="请输入用户名"><input type="email" name="email" required placeholder="请输入邮箱">php128 Bytes© 菜鸟-创作你的创作8. readonly
- 说明：使输入框只读，用户无法修改内容，但可以提交内容。
- 示例：
<input type="text" name="username" value="john_doe" readonly>php61 Bytes© 菜鸟-创作你的创作9. disabled
- 说明：禁用输入框，用户无法与该输入控件进行交互，也无法提交该控件的数据。
- 示例：
<input type="text" name="username" disabled placeholder="该字段已禁用">php65 Bytes© 菜鸟-创作你的创作10. maxlength
- 说明：限制用户在文本框中输入的最大字符数。
- 示例：
<input type="text" name="username" maxlength="20" placeholder="最多输入20个字符">php74 Bytes© 菜鸟-创作你的创作11. minlength
- 说明：限制用户在文本框中输入的最小字符数。
- 示例：
<input type="password" name="password" minlength="8" placeholder="密码至少8个字符">php76 Bytes© 菜鸟-创作你的创作12. min 和 max
- 说明：用于数字、日期、时间等输入类型，指定输入的最小值和最大值。
- 示例：
<input type="number" name="age" min="18" max="100" placeholder="请输入年龄"><input type="date" name="dob" min="1900-01-01" max="2025-12-31">php136 Bytes© 菜鸟-创作你的创作13. step
- 说明：用于数字和日期输入类型，定义允许输入的步长值。常用于调整数字的增量。
- 示例：
<input type="number" name="quantity" min="1" max="10" step="1" value="1"><input type="time" name="meetingTime" step="900">php123 Bytes© 菜鸟-创作你的创作14. autofocus
- 说明：自动聚焦输入框，当页面加载时，输入框会自动获得焦点。
- 示例：
<input type="text" name="username" autofocus placeholder="请输入用户名">php66 Bytes© 菜鸟-创作你的创作15. autocomplete
- 说明：控制浏览器是否启用自动完成。
on表示启用，off表示禁用。 - 示例：
<input type="email" name="email" autocomplete="on" placeholder="请输入邮箱">php71 Bytes© 菜鸟-创作你的创作16. accept
- 说明：用于文件输入框（
type="file"），指定用户可上传的文件类型。 - 示例：
<input type="file" name="file" accept="image/*">php48 Bytes© 菜鸟-创作你的创作- 用途：可以限制上传的文件类型，例如只允许上传图像、视频或文档等。
17. multiple
- 说明：用于文件输入框，允许用户选择多个文件进行上传。
- 示例：
<input type="file" name="files" multiple>php41 Bytes© 菜鸟-创作你的创作- 用途：用户可以选择多个文件进行上传。
18. pattern
- 说明：为输入框指定一个正则表达式，只有匹配该模式的数据才能提交。
- 示例：
<input type="text" name="zipcode" pattern="[0-9]{5}" placeholder="请输入邮政编码">php75 Bytes© 菜鸟-创作你的创作- 用途：常用于输入格式验证，如电话号码、邮政编码等。
19. size
- 说明：指定输入框的可见字符宽度。对于文本框，设置此属性可以控制显示的宽度（以字符为单位）。
- 示例：
<input type="text" name="username" size="20" placeholder="最多显示20个字符">php69 Bytes© 菜鸟-创作你的创作20. form
- 说明：指定该输入控件属于哪个表单。这个属性可以将一个
<input>控件与多个表单关联。 - 示例：
<form id="form1" action="submit_form1.php"> <input type="text" name="username"></form><form id="form2" action="submit_form2.php"> <input type="text" name="username" form="form1"></form>php197 Bytes© 菜鸟-创作你的创作21. target
- 说明：在使用
type="image"的情况下，指定点击图像提交表单后的目标窗口。 - 示例：
<input type="image" src="submit_button.png" alt="Submit" target="_blank">php73 Bytes© 菜鸟-创作你的创作- 用途：通常与
type="image"一起使用。
总结
通过使用不同的 <input> 属性，可以定制表单控件的行为和验证规则。合理利用这些属性，可以提高表单的用户体验、增强表单验证并确保数据的准确性。https://www.52runoob.com/archives/5085
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
