Buttons with a good form (i)

Buttons are essential for an interactive form. 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.