HTML Advanced Application Tips (10) Use a button with a form

Buttons | tips

For an interactive form, buttons are essential. Buttons are generally divided into two categories, the class itself has a specific function, called a special button, such as Submit button-for the transmission of information filled by the user to the server, Reset (Restore button)-to clear the information to fill in to fill in, another kind of itself does not have special functions, called as ordinary buttons. Special buttons can be used only for forms to perform special functions. In addition to the normal button can be used in the form, in the other parts of the Web page is also very convenient to use.

First, make the general button

Making the button is very simple, set the type parameter in the <input> tag to: type= "submit" to get a submit button, such as the "submit" button in this example; Set the type parameter to: type= "reset" in the <input> tag Gets a undo button, such as the rewrite button in this example, and the type parameter in the <input> tag to: type= "button" to get a normal button. The button source code for this example is as follows:

<input type= "Submit" name= "Submission" value= "submitted" >
<input type= "reset" name= "reset" value= "rewrite" >
<input type= "button" Name= "butto11" value= "dot I try" >

Although the button is simple, but when making the button to pay attention to two points:

1, for special buttons, generally do not need additional action, when the button is pressed when the action occurs, and for ordinary buttons, must add the specified action and the event to trigger the incident, will be triggered when the event occurs, otherwise press the normal button, nothing happens. On the normal button in this example, add a pop-up prompt window action: alert (' Thank you for clicking! and triggers with the onclick event, so when you click on that button, a window pops up and says "Thank you for clicking!" "That remark.

2. The text on the button is implemented by setting the value parameter, and the default value is the English name.

Second, change the appearance of the button

HTML provides rich color settings for text, but the default for the form button is the Windows system color, is a bit rigid, and does not provide the button color setting parameters, so to change the appearance of the form button, can only use the CSS. Take a look at the following example:

You see! Is this button changed and much fresher? Let's take a look at its source code for those changes. Button Source code:

<input type= "Submit" name= "Submit" value= "submitted" style= "FONT-SIZE:12PX; Background: #CCCCFF; Border-width:thin thin thin thin; Border-color: #CCCCFF #CCCCCC #CCCCCC #CCCCFF ">

From the source code can be seen, the basic parameters of the button settings have not changed, just added a section of CSS code, it is this CSS code changes the style of the button's appearance. In this CSS code, not only do you reset the background color and size of the form buttons, it also sets the border line of the button, sets the top border, the left border to a lighter color, and the bottom and right borders to a darker color to make the form buttons have a stereo effect. Of course, you can change the color of the CSS code so that the color of the button is in harmony with the color of the page.

If you want to make the form button to change the old face of the rigid board, like other navigation menus in the Web page with the effect of dynamic transformation style and still have its special surface single button function, make it more attractive charm, the introduction of this article of the production method is a good idea. Take a look at the example shown below.

One, dynamic Transform text button
The mouse is not on the button
The mouse is on the button

You see! Is this button good?! The idea of making this effect is this, the use of CSS properties can dynamically change the characteristics of the first button to define two appearance style, and then add two events in the <input> tag, namely Onmuseover (mouse on the button) and onmuseout (mouse left button), We use these two events to call different CSS defined button appearance style, so as to achieve the effect of dynamic transformation. In order to improve the utilization of CSS (if there are more than one button, you can reuse), put the CSS between

<style type= "Text/css" >
<!--
. style1 {font-size:12px background: #CCCCFF; border-width:thin thin thin thin; Border-color: #CCCCFF #CCCCCC #CCCCCC CCCCFF}
. style2 {font-size:12px; Font-weight:bold background: #CCFFCC; Border-width:thin medium medium thin; Border-color: #C CFF99 #999999 #999999 #CCFF99}
-->
</style>

The code for this example button is as follows:

<input type= "Submit" name= "Submission" value= "submitted" class= "Style1" >

As you can see from the above code, when you move the mouse over the button, that is, the Onmuseover event occurs, the button will use the Style2 definition of the appearance style; When the mouse moves the button, that is, the Onmuseout event occurs, then the button takes a style1-defined appearance style, Thus the purpose of dynamic change is realized. The role of the class= "Style1" in the back is to keep the consistency of the button appearance when the onmouseover, onmouseout, and the two events do not occur, using the style defined by Style1.

Two, dynamic Transform image button

The mouse is not on the button
The mouse is on the button

This example and the previous example in the production of ideas and production methods are not much different, but the use of two pictures to make the button background, but the effect is unusual. Be aware of two points when making a button for this effect:

1, as a button background pictures of the best tool transparent background gif pictures, so you can make a variety of shapes of buttons, will have a strong personality;

2, the size of the background picture to be consistent with the size of the button, otherwise, because the background tile fill, will make the button unrecognizable.

The following is the CSS code for this example between

<style type= "Text/css" >
<!--
. style3 {font-size:12px; Background:url (image/buttonbg1.gif); border:0px; width:60px; height:22px}
. style4 {font-size:12px; Font-weight:bold background:url (image/buttonbg2.gif); border:0px 0; width:60px; height:22 px
-->
</style>

The button code for this example is as follows:

<input type= "Submit" Name= "Submit2" value= "Submit" class= "Style3" >

You can see from the button code that it is exactly the same as the button code for example one, however, the CSS code in this example has a big difference, here to note: The URL behind the parentheses is the button background image address, which contains the path of the picture file name, you are in the actual production to change it to the actual location of the picture.

Let me say one more word, if you use graphical web-making tools (such as Dreamweaver), then the effects of CSS, usually in the editing window is not visible, such as the button effect of this article, only in the preview to see, in the editing window is still the form of default look like.