HTML MADE EASY Web Design for Beginners

custom mugs

Tags For Making Contact Forms

How Forms Work
Although forms are easy to make, getting them to work requires a script which passes along the information from the form to you. There are plenty of free scripts available on the web with instructions on how to configure them. There are also paid and free online services that will process your form, even providing you with ready cut and paste code, all you need to do is insert it into your webpage. This tutorial will show you the tags used to make forms.

How To Make A Form
A form begins with the opening form tag:

<form method="post" action="script-url-goes-here">

The form tag lets the browser know that this is going to be a form, method="post" means the information in the form is to be sent to the url in the action attribute which contains the url to the script. Replace "script-goes-here" with the url of your script.

Next come the tags which make up the various element of the form such as the text box:

Here is how it is made:

<input type="text" name="name your box" style="width:250px;">

The input tag is a single tag. The type attribute tells the browser what sort of form element to display,"text" means it is going to be a text box. The attribute name is a name you give to the box so that when the form's content is sent to you, you will know in which form element it was entered. The style attribute holds CSS code, here it's specifying the width of the text box.

For multiple text boxes in a single form repeat the code, but give each text box a different name.

Another element often found in forms is the textarea box. Unlike the text box which only allows a single line of text, the textarea box can have multple lines of text. Go ahead, try it out and see:

Here is how it is made:

<textarea name="name your box" style="width:300px; height:100px;"></textarea>

Notice that the textarea tag requires a closing tag. The name attribute is a name you give to the box so that when the form's content is sent to you, you will know in which form element it was entered. CSS commands can be used to set the width and height of the box.

Some forms have radio buttons which allow folks to make a single selection from multiple options. Go ahead give it a try and you will see you can only select one button:

This is how to make a single button, yes you need to repeat the code for each button:

<input type="radio" name="button group" value="button name">

As with the text box, radio buttons also use the input tags but this time it is set to "radio". The name attribute lets you group the buttons together by giving them the same name, so people will only have the option of selecting one button from the group. The value attribute lets you give each button in the group a different name so that you will know which button the person selected.

Replacing "radio" in the type attribute with "checkbox" will make check boxes allowing multiple choices.

The final element in a form is a submit button:

This is how it is made:

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

The type attribute set to "submit" tells the browser it is a button for sending information, the value attribute contains the text that will appear on the button.

A reset button can also be added to clear the form:

<input type="reset" value="clear">

The form is finished by adding the closing form tag:

</form>

And there you go, that is how to make a form.

Namecheap.com - Cheap domain name registration, renewal and transfers - Free SSL Certificates - Web Hosting

 

New Bag Styles

© 2013 HTML Made Easy | Privacy Statement