Break patterns easily form (b) In the form
Related Tags:
Very often, we only data collection in order to achieve this function to use the form, often see the form are "a thousand", there is no angry, the topic attempt to change this phenomenon in an attempt to give a rich form colorful look.
The appearance of the form is the most direct tricks, it can be changed to achieve special effects, the paper points to two points of departure on: css magic and magical images.
1, CSS magic
CSS, we all know that the Cascading style alone, it can define the appearance of page elements, including Font style, Background Color and image format, and frame style, white-style, Border styles, and so on, on the following aspects of this, discussions What will be applied to the CSS form, complete landscaping!
Application of 1.1 font style
Font styles include: Font Family Branch (font-family), Font Style (font-style), font deformation (font-variant), bold font (font-weight), font size (font-size), the font (font) , a specific definition, is not described in detail here, it can refer to the information.
Perhaps you have already noticed that the text on the button is not beautiful, in fact CSS Font style can be resolved Similarly, the other characters involved several individual table, for example, a text box, multi-line text box, password box, the next Rafah selection box can be applied font style.
In order to fully demonstrate the application of the special design of several forms, in practical application, not so messy, flexibility in the use of:
Example 12: form elements font style display
Analysis:
- The text box is bold text, size is 9 pt, font is 10 lines, code:
<Input type = "text" name = "formExam" size = "10" maxlength = "10" style = "font-family: 10 lines; font-size: 12px; font-weight: bold" value = "bold" > - Password text box is red, code:
<input Type="password" name="formExam3" style="font-size: 9pt; color: #FF0000" size="8" maxlength="8"> - The drop-down box text color is red, the Verdana font, size 9 pt, code:
<select Name="select" size="1" style="font-family:Verdana,Arial; font-size: 9pt; color: #FF0000">
<option Value="2" selected> yesky.com </ option>
<option Value="1"> redidea.net </ option>
</ Select> - Multi-line text box is the Verdana font, underlined, size is 9 pt, code:
<TEXTAREA Name="formExam2" cols="30" rows="3" style="font-family:Verdana, Arial; font-size: 9pt; color: #000099; text-decoration: underline" align=right> underline css style </ TEXTAREA> - Send a button and the letter sent two different, because sent a button to use the 10 lines of the 9 pt text, would be more attractive, sending a button code:
<input Type="submit" name="Submit" value="发送1" style="font-family:宋体; font-size: 9pt;">
Summary: As long as we are familiar with the style of the font, can be flexible, not necessarily in style to use labels inside definition, and can fully In "head> in the definition, or use external CSS document, the time used to be invoked achieve the desired results.
1.2 Background colors and images of the pattern of
There are many, as color page with, had no choice but to form the Background Color and image design pattern, background color of background-color attributes, background images using background-image attributes, the same colours and images can be unexpected results.
Example 13: form the background of Display elements
Analysis:
- Background text box is black, white font code:
<input Type="text" name="RedFld" size="10" maxlength="10" style="color: #FFFFFF; background-color: #000000"> - Password box background is gray, code:
<input Type="password" name="RedFld3" size="10" maxlength="10" style="background-color: #999999"> - Radio buttons and check the background of red, code:
<input Type="checkbox" name="checkbox" value="checkbox" style="background-color: #FF0000">
<input Type="radio" name="radiobutton" value="radiobutton" style="background-color: #FF0000"> - Drop-down selection box option is a rich and colorful background, code:
<select Name="select2" size="1">
<option Selected style="background-color: #FF0000"> yesky.com </ option>
<option Style="background-color: #0000CC"> redidea.com </ option>
<option Style="background-color: #009900"> chinabyte.com </ option>
<option Style="background-color: #ff33cc"> sina.com </ option>
<option Style="background-color: #999999"> sohu.com </ option>
</ Select> - Multi-line text box in the background is an image, code:
<TEXTAREA Name="RedFld2" cols="25" rows="3" wrap="VIRTUAL" style="background-image: url(back.gif)"> </ TEXTAREA> - Submit1 button background is yellow, code:
<input Type="submit" name="Submit3" value="Submit1" style="background-color: #FF9900"> - Submit2 button is the background image, code:
<input Type="submit" name="Submit22" value="Submit2" style="background-image: url(back.gif)">
Summary: A good background-color attributes and background-image attributes, we can design is the "color" of the form.
1.3 Application forms borders
Perhaps you feel that the borders are too rigid form, we can design single lines, or other forms of borders? Of course!
And borders of the attributes include: frame-style pattern border, the border-top frame, the right frame border-right, under the rim border-bottom, left-left frame border, border color-colr border, the border-width frame width, the bezel Width of border-top-width, the right frame width of border-right-width, the width of the frame width border-bottom-left frame width of border-left-width, border border, there is no detail about, please refer to the relevant information.
Example 14: 8 frame forms of display
Analysis:
- Box 8 types of frame styles, border-style, were on display in this case,
Borders set up a width of the law:
Border-width: [thin | medium | thick | <length>] (1,4)
Bezel width by 1-4 to set up elements of the frame width, they were being used, right and left frame width and under. If a value is given, it was applied to all border width. If two or three value is given, and the value has been omitted on the same side, for example: <input type = "text" name = "RedF" style = "border-color: # 006600; border-style: dotted; border - width: 1px ">
Border Color settings there is a law:
Border-colr: <color> (1,4)
Border color to 1-4 to set up elements of the border color. If the four values are given, they were being used, right, and left under the border color. If a value is given, it was applied to all border color. If two or three value is given, and the value has been omitted on the same side. - For multi-line text boxes and buttons, borders set of methods and a text box, no longer statement;
- As the drop-down selection box Select does not support frame settings, so it set up is futile;
- Radio button and check the button frame, the result is not set up very coordinated, it is proposed not to set them, or "superfluous" flu;
Example 15: frame the special design display
Clever readers will think, if the single-frame design, and will certainly have more beautiful, right! Below we try to set the borders of the following effect, the case of Solid and dotted with only two types of frames for the demonstration, other types of borders the same principle: Note: the appearance of frame types are as follows:
- None: no borders. And any designated border-width values unrelated;
- Dotted: point;
- Dashed: the dashed line;
- Solid: solid line borders;
- Double: two-frame. Two single-spacing and its equivalent to the designated border-width value;
- Groove: 3D groove;
- Ridge: Borders processes;
- Inset: 3D concave edges;
- Outset: 3D convex edge;
2, Magical Image
Images, the website is an important element, whether applied to the form? Next, we use images to reform rigid form, in two parts to explore: Image button instead of using background landscaping form elements.
2.1 by image instead of button
Since the default button too ugly form, the vast majority of web sites which use the Image button, and then, we have to look at two examples of how to achieve:
Example 16: The images replace the submit button:
When only one to the button, they can be simply achieved, and the incident not function, the code is:
<input Type="image" name="..." src="url" width="" height="..." border="...">
Apart from the labels to input type = "image", and other attributes <img> labels attribute is the same, such as:
Is not simply a picture can replace all the buttons? Yes, but not as simple as the above must be added the incident function, otherwise, pictures are the submit button, can not be completed reset, and other functions, look at the following example will know:
Example 17: The picture instead of all forms button: NOTE:
- Instead submit button code format is the picture <input type = "image" name ="..." src ="..." onClick = "document.formName.submit ()">
- Replace the reset button picture format is the code
<a Href="javascript:document.formName.reset();"> <img border=0 src="..."> </ a>
Note: This form is the formName the name attribute value.
In fact, as already mentioned, with background-image: url () attributes to define the form elements background, here cite just one example, we can see that, in addition to select no effect, other pages can be with the background set them.
Example 18: background settings
- W3C XHTML code norms
- Language browser detection, suitable for multi-language version of the site
- Dreamweaver MX 2004 new features: browser detection
- On layout of a new form - the form and principles
- W3c technical architecture introduced
- Form (Table)
- W3c validator: CSS/HTML4.01/XHTML1.0 XiaoZhu.com have passed smoothly:)
- W3C's HTML Working Group Chairman Steven pemberton XHTML answer on the basis of the common problems
- Form CSS
- Flash production skills: ball and a straight Collision Detection
- Mp3 players, as well as for the automatic detection can play, and can play the preservation of the results
- XHTML + CSS + JavaScript Learning Resources (major sites, W3C School)
- Affinity with the form
- GMail view from the W3C Web standards and Ajax
- Blog.csdn.net support of the W3C CSS problems
- HTML form the primary form guide
- 4 website detection method
- Web standards: XHTML + CSS (W3C)
- W3C school HTML help guide CHM
- Using fieldset, label production form labels form
Application of Advanced HTML skills (12) is the interaction between the window frame skills
More points in the window frame page, the sub-window of information between the interaction is often matter. In the navigation window midpoint of the hyperlink, then how in another window open links page? In this window, I pressed the button, and another window in t...
The trim achieve javascript
<script> String.prototype.trim = function () ( / / Regular expression will be used before and after space / / Alternative with an empty string. Return this.replace (/ (^ \ s *) | (\ s * $) / g, ""); ) ...
Jscript internal targets
Microsoft Jscript internal targets provided 11 internal (or "built-in") object. They are Array, Boolean, Date, Function, Global, Math, Number, Object, RegExp, Error and the String object. Each object is related to methods and properties, which in the langu...
Search engine keywords for analysis tools
AdWords Keywords tools: for a specific keyword expansion of the common enquiries and matching Https: / / adwords.google.com / select / KeywordSandbox Baidu Keywords tools: common for specific keywords, and match for heat expansion Please do not Daolia...
Page layout design basis
As you can see, the layout of the website is becoming increasingly important. Unwilling to see visitors only on the content site. While content is important, but only when the page layout and web content successful engagement, this web site or by the people is like....