← 返回文章列表 html中关于文本框样式的总结大全(收藏)
3

html中关于文本框样式的总结大全(收藏…

基本属性
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>

最后修改: 2025/8/19 18:22:15

读者评论
【免登录留言】
验证码

相关文章推荐

菜鸟云网络科技简介
活动方案
菜鸟云网络科技简介

菜鸟云网络学院开学了!菜鸟云自己开发的网站CMS!快来学习吧……

菜鸟云网络科技个性化定制中心
5
菜鸟云网络科技个性化定制中心

菜鸟云网络科技个性化定制中心欢迎您

Bootstrap5 教程
10
Bootstrap5 教程

Bootstrap 是全球最受欢迎的前端组件库,用于开发响应……

探索ISBN查询接口:为图书管理系统赋能
3
探索ISBN查询接口:为图书管理系统赋能

在开发图书管理应用时,ISBN(国际标准书号)查询接口是获取……

菜鸟网络学院简介
5
菜鸟网络学院简介

菜鸟网络学院是一家个人创建的学习网站,属于日志文章分享,开源……

《文化苦旅》散文集
3
《文化苦旅》散文集

《文化苦旅》一书于1992年首次出版,是余秋雨先生1980年……

CSS3 圆角
12
CSS3 圆角

CSS3 圆角

谢谢你曾来过我的世界
3
谢谢你曾来过我的世界

少年读《射雕英雄传》,最想化身的人物是陈玄风,脸色焦黄,有如……

Bootstrap5 安装使用
10
Bootstrap5 安装使用

我们可以通过以下两种方式来安装 Bootstrap5: 使……

Excel中生成序号技巧
1
Excel中生成序号技巧

在Excel中生成序号是日常操作,以下介绍几种常用方法,可根……