DHTML instance parsing: use HTC to customize a unified form style

When creating a form, we often use CSS to redefine the style of form elements (such as input boxes and buttons) to make it look more beautiful. Many different elements in the form (such as the Input box, submit button, and single sheet) use a tag -- Input, which means that, in CSS, we cannot define only the Input tag to define the styles separately. Generally, several classes are defined. When writing a form, different elements use different classes. However, when there are many forms, this is still not very convenient.

Is there any way to save effort? The answer is yes. A simple HTC can solve this problem.

Example:

Htc code:

<Script language = javascript>
Switch (type)
{
Case ''text '':
Case ''password'': // text input box and passWord input box style
Style. border = "1px solid #000000 ";
Style. backgroundColor = "# FFFFFF ";
Style. height = "18px ";
Style. font = "normal 12px ";
Style. color = "#000000 ";
Break;

Case ''submit '':
Case ''reset '':
Case ''button '': // the style of the button class (excluding the image button)
Style. border = "1px solid #000000 ";
Style. backgroundColor = "# CCCCCC ";
Style. height = "18px ";
Style. font = "normal 12px ";
Style. color = "#000000 ";
Break;

Default:; // we use the default style for elements that have not been shown in a single-choice box.
}
</Script>

Save the above code as an HTC file, for example, input. htc.

A brief analysis of the code: in fact, this is just a piece of JS. It determines the style to use by judging the type (the Input uses the type attribute to determine which form field is used, and pay attention to the use of the switch statement here. Is it easy?

After the HTC file is written, we will use the CSS behavior (behavior) to call the HTC file. The CSS statement called is as follows:

Input {behavior: url (''input. htc '')}/* assume that input. htc is in the same directory as the webpage */

We can see that now we define the style of the entire Input tag, and the specific form element uses what style, it is determined and defined in the HTC file through JS.