Beautification of form appearance
Many times, we use forms only to achieve the function of data acquisition, and the forms that are often seen are "thousand-man" and lifeless, and this topic tries to change the phenomenon, trying to give the form a colorful appearance.
The appearance of the form, but also the most direct pattern, you can change it to achieve special effects, this article is divided into two starting points to tell: CSS Magic and image magic.
1. CSS Magic
CSS, is known as a cascading style sheet, it can define the appearance of the page elements, including font style, background color and image style, border style, filler style, border style, and so on, starting from these several aspects, discuss how to apply CSS to the form, to beautify it thoroughly!
1.1 Application of font style
Font styles include: Font family section (font-family), font style (Font-style), font morphing (font-variant), Font Bold (font-weight), font size (font-size), font, The concrete definition method, here does not elaborate, may refer to its material.
You may have noticed that the text on the button is not beautiful, but it can be solved by CSS font style, as well as several other form items involving text, for example, text boxes, multi-line text boxes, password boxes, drop-down selection boxes can be applied to the font style.
In order to fully demonstrate these applications, the following examples specifically design several styles, in practical applications, not so messy, flexible use:
Sample:Font style display of form elements
Yesky.comRedidea.net
Underline CSS Style
Analysis:
- The text in the box is bold, the size is 9pt, the font is Arial, code:
- Password box text is red, code:
- Dropdown box text color is red, font is Verdana, size is 9pt, code:
yesky.com redidea.net
- The font for multiline text boxes is Verdana, underlined, 9pt in size, code:
underline CSS style
- Send 1 and send 2 buttons of the text is different, because the 1 button to send the use of 9pt text, so more beautiful, send 1 button code:
Summary: As long as we are familiar with the style of the font, you can be flexible, not necessarily in the label using style to define, can be defined in the
1.2 Application of background color and image style
There are many times, the Web page because of color collocation, have to design the background color and image style of the form, the background color utilizes the Background-color attribute, the background image utilizes the Background-image attribute, the color and the image also can obtain the unexpected effect.
Sample:Background display of form elements
Check Radio Yesky.comRedidea.comChinabyte.comSina.comSohu.com
Analysis:
- The text box background is black, the font is white, and the code:
>
- The Password box background is gray, and the code:
- The background of the radio and check buttons is red, code:
- The options for the Drop-down selection box are colorful backgrounds, code:
yesky.com redidea.com chinabyte.com sina.com sohu.com
- The background of a multiline text box is an image, code:
- The background of the Submit1 button is yellow, code:
- The background of the Submit2 button is an image, code:
Summary:With good Background-color properties and Background-image properties, you can design a "color" form.
1.3 Application of border style
Maybe you think the borders of the form are too rigid, can we design a single line, or some other border style? Of course!
The properties related to the border are: Border style border-style, top border border-top, right frame border-right, bottom border Border-bottom, left border border-left, borders color border-colr, border width Border-width, top Border width border-top-width, right box width border-right-width, bottom border width border-bottom-width, left border width border-left-width, borders Border, please refer to the relevant information for details not described here.
Sample:8 Display of Border forms
Check Radio
Analysis:
- The text box has 8 types of border styles, that is, Border-style, shown in this example,
The border width setting has a rule:
Border-width: [Thin | medium | thick | length >]{1,4}
The border width sets the border width of the elements by one to four values, which are applied to the top, right, bottom, and left border widths respectively. If only one value is given, it is applied to all border widths. If two or three values are given, the omitted values are equal to the edges
For example:
The border color setting has a rule:
BORDER-COLR: Color >{1,4}
The border color sets the border color of an element with one to four values. If four values are given, they are applied to the top, right, bottom, and left border colors respectively. If only one value is given, it is applied to all border colors. If two or three values are given, the omitted values are equal to the edges.
- For multiline text boxes and buttons, the method of setting the border is the same as the text box, no longer stated;
- Because the Drop-down selection box select does not support the setting of borders, it is futile to set it;
- radio button and check button border, set the effect is not very coordinated, so it is recommended not to set them, otherwise there is "superfluous" feeling;
Sample:Special design display for borders
Smart readers will think that if the design of a single border, must be more beautiful, yes! Here we try to set the effect of the following partial borders, this example only shows solid and dotted two types of borders, and other types of border principles are the same:
Code: style= "Background-color: #FFFFFF; Border-color: #000099; Border-style:solid; border-width:0px 0px 1px "
Code: style= "Background-color: #FFFFFF; Border-color: #CCCCCC black #FF0000; Border-style:solid; border-width:1px 0px "
Code: style= "Background-color: #FFFFFF; border-left:1px dotted #ff0000; border-right:1px dotted #ff0000; border-top:1px dotted #ff0000; border-bottom:1px Solid #000000 "
Note:The appearance of the border type is as follows:
- None: No border. Independent of any specified border-width value;
- Dotted: Dot line;
- Dashed: dotted line;
- Solid: Solid line border;
- Double: a two-line border. Two single line and its interval and equal to the specified Border-width value;
- Groove:3d Groove;
- Ridge: Border raised;
- Inset:3d concave Edge;
- Outset:3d Convex edge;
2. Image Magic
Image, is an important element of the Web page, can be applied to the form? Next, we use the image to transform the rigid form, divided into two parts to explore: the use of images instead of buttons, using a background image to beautify the form elements.
2.1 Using the image instead of the button
Because the default form button is too ugly, most of the Web site uses the image button, then we have two examples to see how to achieve:
Sample: Use the image instead of the submit button:
When there is only one submit button, you can simply implement, without adding an event function, the code is:
<input type= "image" "name=" ... "src=" url "width=" "height=" ... "border=" ... "
In addition to the label changed to input type= "image", other properties are the same as the properties of the label, for example:
Is it possible to replace all the buttons with a picture? Yes, however, it is not as simple as this, you have to add an event function, otherwise, the picture is a submit button, can not complete the reset function, see the following example to know:
Sample: Replace all the form buttons with a picture:
Note:
- The picture code format instead of the Submit button is
- The code picture format instead of the reset button is
<a href= "Javascript:document.formName.reset ();" ></a>
Note: The formname here is the Name property value of the form.
2.2 to beautify the form elements with a background image
In fact, as mentioned previously, using the Background-image:url () attribute to define the background of the form elements, here just one example, you can see that, in addition to the no effect of the Select, the other can match the background of the Web page to set them.
Sample: Setting the background chart Www.yesky.comRedidea.comWww.chinabyte.com
