input 标签常见属性

2024-05-18 06:41:16

在 css 中 input 是非常常用的标签，input 标签用于接收用户输入，为行内块元素。他不仅仅是接收文本的输入，可以通过type属性的设置我们还可以接收不同类型值的输入。

input标签的type属性的一些常用可选值：

text 普通文本

search 搜索框

password 密码

radio 单选按钮

checkbox 复选框

file 文件上传

image 定义图像作为提交按钮

button 按钮类型

submit 普通提交按钮

reset 重置按钮

hidden 隐藏输入域

email 用于应该包含“e-mail"地址的输入框

url 用于应该包含“URL"地址的输入框

search 用于应该“搜索内容"的输入框

number 用于应该包含“数值"的输入控件

tel 规定显示的类型为“电话号码"的输入框

range 规定显示的类型为“数值选择范围"选择控件

color规定显示的类型为“颜色"选择控件

input 标签其他属性：

value属性

设置“文本类型"的输入框中默认显示的值内容。

maxlength 属性

规定输入字段中的字符的最大长度。

readonly属性 [不需要赋值]

使元素成为“只读"状态，在这个状态下只能读取元素内容，而不能进行编辑。

disabled属性 [不需要赋值]

使元素成为“禁用"状态，元素将“失效"。

size属性

规定文本框可见宽度，但不同浏览器对此的支持有所不同，不过现在基本都是使用CSS去控制。

placeholder 属性

提示文本

required 属性

要求 input 的值为必填

基本形式如下：

<input type="text"name="username" required =“required " />

或者

<input type="text" name="username" required />

pattern 属性

用于验证 input输入值是否合法

使用形式：

<input type="text" name="test" pattern="[0-9]{6,12}" title="你应该输入6到12位的数字" />

input 标签常见属性相关推荐

html accept属性,input标签accept属性的使用方法及作用
html代码input标签accept属性的使用方法及作用介绍如下: 标签accept属性的定义 accept属性规定了可通过文件上传提交的服务器接受的文件类型. accept属性应该配合type属性 ...
表单input标签type属性详解
目标:详解表单input标签type属性常用的属性值一.input标签和它的type属性 PS:input 元素可以用来生成一个供用户输入数据的简单文本框. 在默认的情况下, 什么样的数据均可以输入 ...
在php中标签input用法,html input标签的属性有哪些？input标签的用法总结（附实例）...
本篇文章主要的向大家介绍了关于html input标签的属性,还有关于html input标签的具体的用法总结.让我们一起来看看html input标签有哪些用法吧首先先来说说html input标 ...
Web学习第三天——HTML中input标签常用属性、框架集、内嵌框架
第三天HTML中input标签常用属性.框架集.内嵌框架一.input标签常用属性表单数据提交特点: (一).文本框(text) (二).密码框(password) (三).单选按钮(radio) ...
html input标签的属性有哪些？input标签的用法总结（附实例）
首先先来说说html input标签的属性: 1.type:该属性是input标签里唯一的必须输入的属性,当然,也可以不填,默认为type = "text".具体它有那些值,我们后 ...
Input标签type属性
撰写日期:2019年02月20日 html中有许多标签有多个属性,input标签就是其中一个. 属性值描述 button 生成按钮 radio 生成单选按钮 submit 生成提交按钮 text 生 ...
JS 选择性修改input标签的属性
HTML代码部分: <input type="button" value="修改文本框的值" id="btn"/><br/ ...
html - meta name=viewport content=XX/ 标签常见属性及说明
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scal ...
input 标签 autofill属性生效导致的输入框背景色变成黄色（或其他色）的解决办法
vue + elementui 登录页输入框autofill属性导致的背景色变色问题(使用原生input也会有) 方法一: 用box-shadow效果遮住:box-shadow:0 0 0px 10 ...

最新文章

热门文章