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:
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 script's url. Replace "script-goes-here" with the url of your script.
Next come the tags which make up the various elements of the form such as the text box:
Here is how it is made:
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:
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:
As with the text box, radio buttons also use the input tags but this time it is set to "radio". The value attribute lets you give each button a different name so that you will know which button the person selected. The name attribute lets you give a group of buttons the same name so people will only have the option of selecting one button from that group. For example if your are giving people the option of answering "yes" or "no" to the question "Do you have any pets?", with one button for "yes" and another button for "no", both buttons could be given the name "pets".
Replacing "radio" in the type attribute with "checkbox" will make check boxes allowing people to make multiple choices.
The final element in a form is a submit button:
This is how it is made:
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:
The form is finished by adding the closing form tag:
And there you go, that is how to make a form.
