Detailed explanation of HTML's <input> tag and how to disable it

Detailed explanation of HTML's <input> tag and how to disable it

Definition and Usage
The <input> tag is used to collect user information.
Depending on the value of the type attribute, the input field can have many forms. Input fields can be text fields, check boxes, masked text controls, radio buttons, buttons, and so on.
Differences between HTML and XHTML
In HTML, the <input> tag has no closing tag.
In XHTML, <input> tags must be properly closed.
Examples
A simple HTML form with two text input boxes and a submit button:

XML/HTML CodeCopy content to clipboard
  1. < form   action = "form_action.asp"   method = "get" >   
  2. First name: < input   type = "text"   name = "fname"   />   
  3. Last name: < input   type = "text"   name = "lname"   />   
  4.    < input   type = "submit"   value = "Submit"   />   
  5. </ form >   

The disabled attribute specifies that the input element should be disabled.
A disabled input element is neither usable nor clickable. The disabled property can be set until some other condition is met (such as a checkbox being selected, etc.). Then, you need to use JavaScript to remove the disabled value and switch the value of the input element to enabled.
201585180424922.jpg (205×270)

The following three ways can disable input

XML/HTML CodeCopy content to clipboard
  1. < input   type = "text"   disabled = "disabled"   value = "disabled"   />   
  2. < input   type = "text"   disabled = "disabled"   value = "disabled"   />   
  3. < input   type = "text"   disabled = "disabled"   value = "disabled"   />   

Disabled input is grayed out by default and can be styled using CSS. Note: IE9 and below cannot change the font color
1. Use CSS3 :disabled pseudo-element definition

CSS CodeCopy content to clipboard
  1. //Chrome Firefox Opera Safari
  2. input:disabled{
  3.      border : 1px   solid   #DDD ;
  4.      background-color : #F5F5F5 ;
  5.      color : #ACA899 ;
  6. }

2. Define using attribute selectors

CSS CodeCopy content to clipboard
  1. //IE6 failed
  2. input[disabled]{
  3.      border : 1px   solid   #DDD ;
  4.      background-color : #F5F5F5 ;
  5.      color : #ACA899 ;
  6. }

3. Use class to define and add a class to the input to be disabled

CSS CodeCopy content to clipboard
  1. input.disabled{
  2.      border : 1px   solid   #DDD ;
  3.      background-color : #F5F5F5 ;
  4.      color : #ACA899 ;
  5. }

Final result:

CSS CodeCopy content to clipboard
  1. //Chrome Firefox Opera Safari IE9+
  2. input:disabled{
  3.      border : 1px   solid   #DDD ;
  4.      background-color : #F5F5F5 ;
  5.      color : #ACA899 ;
  6. }
  7. //IE8-
  8. input[disabled]{
  9.      border : 1px   solid   #DDD ;
  10.      background-color : #F5F5F5 ;
  11.      color : #ACA899 ;
  12. }
  13. //IE6 Using Javascript to add CSS class "disabled"   
  14. * html input.disabled{
  15.      border : 1px   solid   #DDD ;
  16.      background-color : #F5F5F5 ;
  17.      color : #ACA899 ;
  18. }

Note: IE8 bug
Since IE8 does not recognize :disabled, the input[disabled] and input:disabled styles are invalid. You can consider writing them separately or using input[disabled] directly. ; IE9 and below cannot change the font color.

Demo

<<:  How to use MySQL binlog to restore accidentally deleted databases

>>:  Floating menu, can achieve up and down scrolling effect

Recommend

Prevent HTML and JSP pages from being cached and re-fetched from the web server

After the user logs out, if the back button on the...

How to add and delete unique indexes for fields in MySQL

1. Add PRIMARY KEY (primary key index) mysql>A...

Example of implementing todo application with Vue

background First of all, I would like to state th...

Play and save WeChat public account recording files (convert amr files to mp3)

Table of contents Audio transcoding tools princip...

How many ports can a Linux server open at most?

Table of contents Port-related concepts: Relation...

Example of implementing grouping and deduplication in MySQL table join query

Table of contents Business Logic Data table struc...

Summary of some small issues about MySQL auto-increment ID

The following questions are all based on the Inno...

Detailed explanation of MySQL combined index method

For any DBMS, indexes are the most important fact...

MySQL 8.0.18 installation and configuration graphic tutorial

Learning objectives: Learn to use Windows system ...

Complete steps to install FFmpeg in CentOS server

Preface The server system environment is: CentOS ...

XHTML Getting Started Tutorial: What is XHTML?

What is HTML? To put it simply: HTML is used to m...

Detailed explanation of Mysql communication protocol

1.Mysql connection method To understand the MySQL...

Bootstrap realizes the effect of carousel

This article shares the specific code of Bootstra...

Implementation of Vue package size optimization (from 1.72M to 94K)

1. Background I recently made a website, uidea, w...