Forms can be created to enable users of your web pages to enter and send information to an email or to an application or script that will process that information. A form by itself is pretty useless in most cases.
Forms are most often used as contact forms.
After creating a form, you can then add elements such as text boxes and buttons. The openning <form> and ending </form> tags define a form on your web page. The attributes of the <form> tag configure how the data in the form is to be handled.
The action attribute is required for the form to work. The value of the action attribute is the file name of the application or script that will process the information that is sent by the form.
The method attribute is used to tell the form how to transfer the information and is optional, however, you should specify how the information is sent.
There are 2 possible values for the method attribute: get and post. The get value is the default value. The most common method used is the post value because it hides the information that is sent while the get value attaches the information to the URL string, which is visible in the url box.
The below HTML code example shows you how to create a form.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>this is the title of the web page</title>
</head>
<body>
<form action="formscript.php" method="post">
</form>
</body>
</html>
Text fields, a.k.a. text boxes, can be used to enter a small amount of text such as names and e-mail addresses. A user can type directly into the text field, copy and paste information into it or edit any text that may already be in the text field.
The <input> tag inserts a text field into a form. The <input> tag must be placed between the openning and ending <form> tags.
The type attribute must be included in the <input tag with a value of text to indicate that a text field will be displayed in the form.
The name attribute of the <input> tag is the name of the information that is in the text field. The reason for naming the information within the text field is that the script or application that is going to process the information needs to know the name that you specify for the text field so that it will know how to handle the information.
A submit button is needed in order for the form to send the information within the text field. A submit button can be added to a form by adding an <input> tag, with the "type" attribute and the value of submit.
It is typically best to add the submit button as the last element in the form so that users do not enter and submit the information before filling out all of the desired information.
The following HTML code example shows you how to make a text field and a submit button.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>this is the title of the web page</title>
</head>
<body>
<form action="formscript.php" method="post">
<input type="text" name="firstname" />
<input type="submit" />
</form>
</body>
</html>
The above HTML code example makes the following form.
note: most web browsers will display a text-field of 20 characters by default.
Make a form by entering the HTML code in the textbox below.
The HTML code example below shows you how to add a password-field to form.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>this is the title of the web page</title>
</head>
<body>
<form action="">
Username:
<input type="text" name="user" />
<br />
Password:
<input type="password" name="password" />
</form>
</body>
</html>
The above HTML code example makes the text-field and password-field below.
note: when text is typed into a password field, the web browsers will display asterisks or bullets instead of characters.
Radio buttons are used when you want the user to select one of a limited number of choices.
The HTML code below shows you how to add radio buttons to an HTML form.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>this is the title of the web page</title>
</head>
<body>
<form action="">
<input type="radio" name="tutorial" value="html"> HTML tutorial
<br />
<input type="radio" name="tutorial" value="css"> CSS tutorial
</form>
</body>
</html>
note: only one option can be chosen.
Checkboxes are added to a form when you want users to select one or more options of a limited number of options.
The HTML code below shows you how to add checkboxes to a form.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>this is the title of the web page</title>
</head>
<body>
<form action="">
HTML tutorial:
<input type="checkbox" name="tutorial" value="HTML" />
<br />
CSS tutorial:
<input type="checkbox" name="tutorial" value="CSS" />
<br />
other tutorial:
<input type="checkbox" name="tutorial" value="other" />
</form>
</body>
</html>
The HTML code above makes the form with checkboxes below.
note: you can choose more than one option.
A drop-down box is a drop-down list that allows users to select one item.
The HTML code below shows you how to add a drop-down list to a form.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>this is the title of the web page</title>
</head>
<body>
<form action="">
<select name="tutorials">
<br />
<option value="html">HTML tutorial</option>
<br />
<option value="css">CSS tutorial</option>
<br />
<option value="other">other tutorial</option>
</select>
</form>
</body>
</html>
The above HTML code makes the form with a drop-down box below.
A drop-down box can have a pre-selected value. To do so you add the selected attribute to the beginning <option> tag.
The HTML code below shows you how to add a drop-down box with a pre-selected value.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>this is the title of the web page</title>
</head>
<body>
<form action="">
<select name="tutorials">
<br />
<option value="html">HTML tutorial</option>
<br />
<option value="css" selected="selected">CSS tutorial</option>
<br />
<option value="other">other tutorial</option>
</select>
</form>
</body>
</html>
The HTML code above makes the form with a pre-selected example below.
note: the "CSS tutorial" option is pre-selected.
The HTML code example shows you how to add a border around a text-field.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>this is the title of the web page</title>
</head>
<body>
<fieldset>
<form action="">
HTML tutorial <input type="text" size="5">
CSS tutorial <input type="text" size="5">
</form>
</fieldset>
</body>
</html>
The above HTML code makes the form below with a border around it.
A caption can also be added to a form.
The HTML code example below shows you how to add a caption to form with a border around it.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>this is the title of the web page</title>
</head>
<body>
<fieldset>
<legend>
Web tutorials:
</legend>
<form action="">
HTML tutorial <input type="text" size="5">
CSS tutorial <input type="text" size="5">
</form>
</fieldset>
</body>
</html>
The above HTML code makes the form with a caption below.