HTML form button.

What is button?

A button is used for sending from client stage filled all forms to the server. There are three types of buttons. The type attribute is used to switch from one to another type button. You can change the value of the different mode of buttons can change.

Example:

Value Description
Submit The submit button is used to submit input.
Reset All input fields of the form are reset by this value.
Button It does not indicate any specific use.

Submit button

Submit attribute helps you to create submit button which is used to submit of the form. Design the form with a variety of information to submit the form can be created. Notice the examples given below.

Example 1:

HTML Code:

<!doctype html>
<html>
<body>
<style>body{font-family:Verdana;}</style>
<h2>Online Survey</h2>
<form action="http://localhost/submit" method="get">
<p style="background-color:silver; padding: 8px;">
Your name: <input type="text" name="name" value="Ganesh"/></br>
Your Email:<input type="text" name="email" value="ganeshbadc@gmail.com" size="32" maxlength="60"/></br>
<input type="hidden" name="site" value="FYIcenter"/>
<input type="submit" value="submit"/></p>
</form>
</body>
</html>

Display in Browser:

Online Survey

Your name:
Your Email:

 

Example 2:

HTML Code:

<!doctype html>
<html>
<body>
<style>body{font-family:Verdana;}</style>
<h2>Online Survey</h2>
<form>
<p style="background-color: silver; padding: 8px;">
What is your favourites Web browser: </br>
<input type="radio" name="channel" value="google" checked="checked"/> Google search</br>
<input type="radio" name="channel" value="yahoo"/> Yahoo search</br>
<input type="radio" name="channel" value="Mozilla"/> Mozilla firefox</br>
<input type="submit"/>
<input type="submit" value="Save"/>
<input type="submit" name="action" value="Submit"/>
<input type="submit" name="action" value="Cancel"/></p>
</form>
</body>
</html>

Display in Browser:

Online Survey

What is your favourites Web browser:
Google search
Yahoo search
Mozilla firefox



Reset button:

All input field is brought back to the initial stage (When the page is loaded). There is no other attribute of the button.

Example:

HTML Code:

<!doctype html>
<html>
<body>
<style>body{font-family:Verdana;}</style>
<h2>Online Survey</h2>
<form action="http://localhost/submit">
<p style="background-color:silver; padding: 8px;">
Your name: <input type="text" name="name" value="Ganesh"/></br>
What is your Favourites Web browser:</br>
<input type="radio" name="channel" value="google" checked="checked"/> Google search</br>
<input type="radio" name="channel" value="yahoo"/> Yahoo search</br>
<input type="radio" name="channel" value="chrome"/>Google chrome</br>
<input type="reset"/>
<input type="reset" value="Refresh"/></p>
</form>
</body>
</html>

Display in Browser:

Online Survey

Your name:
What is your Favourites Web browser:
Google search
Yahoo search
Google chrome

 

Image button:

Using type=”image” attribute in input attribute to add images in the submit button. This feature will make to your submit button attractive. However, if the image button is more, it can increase the load time of your web pages. Generally are Kept images a folder and save the codes in the same folder.

Example:

HTML Code:

<!doctype html>
<html>
<style>body{font-family:Verdana;}</style>
<body>
<form action="">Which University?
<input type="text" name="university"/> 
<input type="image" src="image.jpg" width="50" height="50"/>
</form> 
</body>
</html>

Display in Browser:

image button

If the mouse pointer is kept in Google image displayed in the browser the pointer will contain the size of fingers.

Create image submit button:

The input field is determined by the Input element. When you will determine the image for type attributes of this element than the image submit button will create. Keep images a folder and save the codes in the same folder.

Syntax: <input type=”image”>

Example:

HTML Code:

<!doctype html>
<html>
<body>
<form method="GET" action="example.cgi">
<p>Example of Image Button: <input type="text" name="name" size="20"/></p>
<p>
<input type="image" src="arrow.jpg" name="Button A"/>
<input type="image" src="arrow.jpg" name="Button B"/>
<input type="image" src="arrow.jpg" name="Button C"/>
</p>
</form> 
</body>
</html>

Display in Browser:

3 thoughts on “HTML form button.

  1. After reading your blog post I browsed your website a bit and noticed you are not ranking nearly as well in Google as you could be. I possess a handful of blogs myself and I think you should take a look at speed rank seo, just search it on google. You will find its a very nice tool that can bring you a lot more visitors. Keep up the quality posts

  2. Hey There !! Get Viral on Twitter, Tweet your message to 1,000,000 real people. If you’re familiar with Twitter you know that you can Tweet to get GREAT exposure for your website, business, product, music, video or cause!

Leave a Reply

Your email address will not be published. Required fields are marked *