html中关于文本框样式的总结大全（收藏）
发布时间： 2025/1/19 12:11:29
分布者： 前端浅学
阅读次数： 171
最后更新： 2025/8/19 18:22:15
基本属性
1、type：定义输入类型，如text、password、email等。
2、name：定义输入字段的名称，用于表单提交时的数据传输。
3、value：定义输入字段的默认值。
4、placeholder：定义输入字段的提示信息，当用户未输入时显示。
5、required：定义输入字段是否必填。
6、disabled：定义输入字段是否禁用。
7、readonly：定义输入字段是否只读。
8、maxlength：定义输入字段的最大长度。
9、size：定义输入字段的宽度。
10、pattern：定义输入字段的正则表达式，用于验证输入内容。
样式属性
1、style：定义输入字段的内联样式，如颜色、边框等。
2、class：定义输入字段的类名，用于外部样式表的样式应用。
事件属性
1、onfocus：定义输入字段获得焦点时触发的事件。
2、onblur：定义输入字段失去焦点时触发的事件。
3、oninput：定义输入字段内容发生变化时触发的事件。
4、onchange：定义输入字段值改变且失去焦点时触发的事件。
CSS样式示例代码
/* 内联样式 */
<input type="text" style="color: red; border: 1px solid blue;">
/* 外部样式表 */
.inputstyle {
color: red;
border: 1px solid blue;
}HTML示例代码
<form> <label for="username">用户名：</label> <input type="text" id="username" name="username" placeholder="请输入用户名" required> <br> <label for="password">密码：</label> <input type="password" id="password" name="password" maxlength="16" required> <br> <label for="email">邮箱：</label> <input type="email" id="email" name="email" placeholder="请输入邮箱" required> <br> <input type="submit" value="提交"> </form>
