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

Source: Internet
Author: User
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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.