Customizing form styles with HTC

Source: Internet
Author: User
Tags define
When HTC makes a form, we tend to use CSS to redefine the style of form elements such as input boxes, buttons, and so on to look more beautiful. Many of the different elements in the form, such as the input box, the Submit button, and the Radio box, use a tag--input, which means that we can't define a style by just defining the input tag in the CSS. The general practice is to define several classes, and when writing a form, different elements are used in a different class. However, when the form is more, this is still not very convenient. So, is there a more energy-saving approach? The answer is yes, a simple HTC can solve this problem.

Examples are as follows: 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 song body";
Style.color= "#000000";
Break

Case ' Submit ':
Case ' Reset ':
Case ' button '://Button class style (excluding picture buttons)
Style.border= "1px solid #000000";
Style.backgroundcolor= "#CCCCCC";
Style.height= "18px";
Style.font= "normal 12px song body";
Style.color= "#000000";
Break

Default:;//For elements that have not been shown above, such as the marquee marquee, and so on.
}
</script> Save the above code as an HTC file, such as INPUT.HTC. A simple analysis of the code: in fact, this is only a paragraph of JS, by judging the type (input is through the type attribute to determine what form field, note the use of the switch statement here) to decide what style to use. Is it simple? After the HTC file is written, the next step is to use the CSS behavior (behavior) to invoke the HTC file, and the CSS statements called are as follows: input {behavior:url (' INPUT.HTC ')}/* This assumes that INPUT.HTC is in the same directory as the Web page we see, now we are defining the entire input tag style, and what form elements use what style, it is through JS in the HTC file to determine and define. How, we have been through such a simple example of the initial taste of HTC Charm it?

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.