前端html小技巧—input标签详解

今天分享下前端html小技巧—input标签详解 ，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。 定义和用法

input 用于收集用户信息的标签。

根据不同的 type 属性值，输入字段有多种形式。输入字段可以是文本字段、复选框、文本控件、单选按钮、按钮等。

HTML 与 XHTML 两者的区别在于 HTML 中，input 标签没有结束。

在 XHTML 中，input 标签必须正确关闭。

一个简单的实例 HTML 表单包括两个文本输入框和一个提交按钮：

XML/HTML Code复制内容到剪贴板

<form action="form_action.asp" method="get">  
  First name: <input type="text" name="fname" />  
  Last name: <input type="text" name="lname" />  
  <input type="submit" value="Submit" />  
</form>  

其中disabled 属性规定属性 input 元素。

被禁用的 input 元素既不能用，也不能点击。 disabled 属性，直到满足其他一些条件(如选择复选框等)。).然后，需要通过 JavaScript 来删除 disabled 值，将 input 可用的元素值切换。

以下三种写法都可以禁用 input

XML/HTML Code复制内容到剪贴板

<input type="text" disabled="disabled" value="已禁用" />  
<input type="text" disabled="disabled" value="已禁用" />  
<input type="text" disabled="disabled" value="已禁用" />  

被禁用的 input 默认显示灰色，可以通过CSS修改样式。注：IE9及以下无法改变字体颜色

1. 利用CSS3 :disabled 伪元素定义

CSS Code复制内容到剪贴板

//Chrome Firefox Opera Safari
input:disabled{
border: 1px solid #DDD;
background-color: #F5F5F5;
color:#ACA899;
}
2. 利用属性选择符定义

CSS Code复制内容到剪贴板

//IE6 failed
input[disabled]{
border: 1px solid #DDD;
background-color: #F5F5F5;
color:#ACA899;
}
3. 利用class来定义,为要禁用的input增加一个class

CSS Code复制内容到剪贴板

input.disabled{
border: 1px solid #DDD;
background-color: #F5F5F5;
color:#ACA899（http://www.qlyl1688.com）;
}
最终结果：

CSS Code复制内容到剪贴板

//Chrome Firefox Opera Safari IE9+
input:disabled{
border: 1px solid #DDD;
background-color: #F5F5F5;
color:#ACA899;
}
//IE8-
input[disabled]{
border: 1px solid #DDD;
background-color: #F5F5F5;
color:#ACA899;
}
//IE6 Using Javascript to add CSS class “disabled”

• html input.disabled{
  border: 1px solid #DDD;
  background-color: #F5F5F5;
  color:#ACA899;
  }
  注意：IE8 bug

由于IE8 不识别 :disabled 导致input[disabled],input:disabled风格样式失效，可以单独考虑或直接使用input[disabled]。;IE9及以下不能改变字体颜色。以上是云南仟龙Mark给大家介绍的所有内容,希望对大家有所帮助，如果大家有任何疑问请在脚本之家留言，如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！