Jump to content
xisto Community
Sign in to follow this  
Matt139

Html Code For Submit Buttons

Recommended Posts

I am making a form, to put on a website, but I need to know how to make a submit button that makes the form go into a page. Can someone please tell me the html code? I tried to Google it, but it didn't work. Thanks.

Share this post


Link to post
Share on other sites

this is too easy, usually the code for a submit button is like this:

<input type="submit" value="send">

and the value field could be anything, like send, go, submit. or anything you wanted to appear on the submit button.

but to make the information to be sent to a specific page, it should be written in the form tags, in the action tag, in the action tag you can write the name of the page you are sending the information to. just like this:

<form method="post" action="yourpage.php">

so the overall code, for a form that contains a textarea for example should be something like this:

<form method="post" action="yourpage.php">	 	test form:	 	<br/>	 	<textarea name="data" cols="50" rows="5">	 	1-	2-	 	3-	 	</textarea>	 	<br />	 	<input type="submit" value="send">	 	</form>

that's all, and don't forget to make all the pages you are working on with the php extension not html, and of course you will need a local server to work on localyto test them. good luck.

Share this post


Link to post
Share on other sites

That was a great response Web_designer!

I just thought it might be useful to Matt also if we showed him how to use an image as a submit button.

In Web_designer's example he showed you how to create a standard submit button like this:

<input type="submit" value="Send">

To use your own custom image as the submit button, you could try the following:

<input type="image" src="yourimage.gif" alt="Submit button">

Replace yourimage.gif with the path to the image you would like to use on your server. Also make sure the alt tag contains text that describes the use of the button so that users who have image loading turned off in their browser can still tell that this is the submit button for the form. ;)
Edited by NateP (see edit history)

Share this post


Link to post
Share on other sites

i should say the same, great response NateP :) . so i will add more, you can customize your submit button using CSS. just by adding an id tag to the submit button code and add the desired properties to it in CSS file (here i am talking about using an external CSS file, my favorite way of dealing with things :) ). so your submit code will be something like this:

<input type="submit" id="submit" value="sendGO" />

and the CSS code will be something like this for example:

#submit {	border:1px solid #000;	color:#000;	margin:0;	padding:2px;	font-family: Tahoma, Arial, Helvetica, sans-serif;	font-size:11px;	background:url(images/button.gif);}

here you will have a submit button but with different shape and border and with an image as a background instead of the usual gray color.
Edited by web_designer (see edit history)

Share this post


Link to post
Share on other sites

i should say the same, great response NateP Posted Image . so i will add more, you can customize your submit button using CSS. just by adding an id tag to the submit button code and add the desired properties to it in CSS file (here i am talking about using an external CSS file, my favorite way of dealing with things Posted Image ). so your submit code will be something like this:

 

<input type="submit" id="submit" value="sendGO" />

and the CSS code will be something like this for example:

 

#submit {	border:1px solid #000;	color:#000;	margin:0;	padding:2px;	font-family: Tahoma, Arial, Helvetica, sans-serif;	font-size:11px;	background:url(images/button.gif);}

here you will have a submit button but with different shape and border and with an image as a background instead of the usual gray color.

 


This is actually a pretty awesome guide. I'm going to adapt it as well as I assume it's also the same way we'd customize text inputs and stuff (to alter the height and whatnot).

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.