Detailed example of using CSS to beautify HTML form controls (form beautification)

Detailed example of using CSS to beautify HTML form controls (form beautification)

1. Basic syntax structure of HTML submit and bottom button

1. HTML submit button

Setting type="submit" in the input tag can set this form control as a button.

Submit button code:


Copy code
The code is as follows:

<input name="" type="submit" value="Submit" />

Screenshot of submit button effect

HTML submit button effect screenshot

2. HTML bottom button

Setting type="bottom" in the input tag also sets this form control as a button.

Bottom button code:


Copy code
The code is as follows:

<input name="" type="button" value="Submit" />

Bottom button screenshot:

HTML botton button effect screenshot

2. The difference between HTML submit and bottom button

type=button is simply a button function

type=submit is to send the form

However, people working on WEB UI should note that using submit can improve page usability:

After using submit, the page supports keyboard enter key operation, but many WEB software designers may not notice the uniformity of submit.

After using the button, the page often does not support the enter key. Therefore, the enter key needs to be supported, and a submit must be set. By default, the enter key operates on the first submit of the page.


Copy code
The code is as follows:

<input type="submit" name="b1" value="Submit" onClick="bt_submit_onclick()">

After executing onClick, go to action. Can be submitted automatically without onClick. So onclick is not necessary here.


Copy code
The code is as follows:

<input type="button" name="b1" value="Submit" onClick="bt_submit_onclick()">

After executing onClick, the jump file is controlled in the js file. onClick is required for submit.

for example:

1. onclick="form1.action='a.jsp';form1.submit();" This implements the submit function.

2. Button code


Copy code
The code is as follows:

<form name="form1" method="post" action="<a href="http://www.css.com">http://www.css.com</a>">
<input type="button" name="Button" value="Button" onClick="submit()">
</form>

Button screenshot

3. Button HTML code


Copy code
The code is as follows:

<input type="button" name="Button" value="Button"
onClick="javascript:windows.location.href="your url"">

3. HTML submit and bottom button beautify CSS p layout

First, we prepare the button image for button beautification, and add a class style to the input submit or bottom button control, set the button background to the beautified image, and set the border to zero, width and height.

1. Beautify the HTML bottom button

1) Picture material

You can save the image as

Beautify picture button material

2) Corresponding complete HTML source code:


Copy code
The code is as follows:

<!DOCTYPE html>
<html>
<head>
<title>button beautification online demonstration-www.css.com</title>
<style>
html{width:100%;height:100%;}
body{background:#fff;font-size:18px;font-family:"Arial","Tahoma","Microsoft YaHei","YaHei";
line-height:18px;padding:0px;margin:0px;text-align:center}
div{padding:18px}
img{border:0px;vertical-align:middle;padding:0;margin:0}
input,button{font-family:"Arial","Tahoma","微软雅黑","雅黑";border:0;
vertical-align:middle;margin:8px;line-height:18px;font-size:18px}
.btn{width:140px;height:36px;line-height:18px;font-size:18px;
background:url("bg26.jpg")no-repeatlefttop;color:#FFF;padding-bottom:4px}
</style>
</head>
<body>
<p>
<formid="form1"name="form1"method=""action="<a href="http://www.css.com/"target="_blank">http://www.css.com/"target="_blank</a>">
<div>
<inputtype="button"class="btn"value="button"onmouseover="this.style.backgroundPosition='left-36px'"
onmouseout="this.style.backgroundPosition='lefttop'"/>
</div>
</form>
</p>
</body>
</html>


3) Screenshot of bottom effect

Screenshot of bottom beautification effect

2. Beautify the HTML submit button

1) Picture material

You can save the image as

Button picture material right click save as use

2) Corresponding complete HTML source code:


Copy code
The code is as follows:

<!DOCTYPE html>
<html>
<head>
<title>Submit button beautification online demo-www.css.com</title>
<!-- <a href="http://www.css.com">www.css.com</a> -->
<style>
html { width:100%; height:100%; }
body { background:#fff; font-size:18px; font-family:"Arial", "Tahoma", "微软雅黑", "雅黑";
line-height:18px; padding:0; margin:0; text-align:center; }
div { padding:18px }
img { border:0px; vertical-align:middle; padding:0px; margin:0px; }
input, button { font-family:"Arial", "Tahoma", "微软雅黑", "雅黑"; border:0;
vertical-align:middle; margin:8px; line-height:18px; font-size:18px }
.btns { width:143px; height:40px; background:url("bg11.jpg") no-repeat left top; color:#FFF; }
</style>
</head>
<body>
<p>
<form id="form1" name="form1" method="" action="<a href="http://www.css.com/">http://www.css.com/</a>" target="_blank">
<div>
<input type="submit" class="btns" onmouseover="this.style.backgroundPosition='left -40px'"
onmouseout="this.style.backgroundPosition='left top'" value="Submit" />
</div>
</form>
</p>
</body>
</html>

3) Screenshot of the submit button effect

Screenshot of the beautified HTML submit

<<:  MySQL multi-instance deployment and installation guide under Linux

>>:  Not all pop-ups are rogue. Tips on designing website pop-ups

Recommend

Detailed explanation of Vue's list rendering

Table of contents 1. v-for: traverse array conten...

A detailed summary of HTML tag nesting rules suitable for beginners

I have been relearning HTML recently, which can be...

CSS3 uses transform-origin to achieve dot distribution on a large circle and rotation effects

First, we need to use the transform-origin attrib...

Detailed explanation of the difference between the default value of the CSS attribute width: auto and width: 100%

width: auto The child element (including content+...

Solution to Incorrect string value in MySQL

Many friends will report the following error when...

Summary of SQL query optimization knowledge points for MySQL tens of millions of big data

1. To optimize the query, try to avoid full table...

How to position the header at the top using CSS sticky layout

Application scenarios: One of the new requirement...

Bootstrap 3.0 study notes for beginners

As the first article of this study note, we will ...

The main differences between MySQL 4.1/5.0/5.1/5.5/5.6

Some command differences between versions: show i...

Detailed explanation of CSS3 animation and new features of HTML5

1. CSS3 animation ☺CSS3 animations are much easie...

Summary of various implementation methods of mysql database backup

This article describes various ways to implement ...

Example of fork and mutex lock process in Linux multithreading

Table of contents Question: 1. First attempt 2. R...

How to install Linux flash

How to install flash in Linux 1. Visit the flash ...

Sample code for implementing two-way authentication with Nginx+SSL

First create a directory cd /etc/nginx mkdir ssl ...

Detailed explanation of Vue's simple store

The simplest application of store in Vue is globa...