Forms can be used to enable webpage users to send information to you or to a web application that can process the data; for example, a user might submit information such as a name, address and credit card information when making a purchase online.
The code below 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>Web Development Tutorials.com</title>
</head>
<body>
<form action="formscript.php" method="post">
</form>
</body>
</html>
The openning <form> tag and closing </form> tag define a form.
The action attribute contains the name of the web application or program that will process the information that is submited in the form by the user. The value of the action attribute is the file name of the web application or program that will process the information.
The method attribute specifies how to send the information to the web server that hosts the web page that the form is on. There are 2 possible values for the method attribute: get and post, with post being the most common and unless specified otherwise is recommended over using the get value.
Text boxes can be used to enable a user to enter a small amount of text, such as a name or e-mail address.
The code below shows you how to create a form with a text box.
<!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>Web Development Tutorials.com</title>
</head>
<body>
<form action="formscript.php" method="post">
Name:
<input type="text"
name="firstname" />
</form>
</body>
</html>
The code above creates the text box below.
The <input> tag is used to insert a text box into a form. The <input> tag must be placed between the openning <form> tag and the closing </form> tag.
The type attribute of the <input> tag must have a value of text to create the textfield.
Information that is typed into the text box and submited to the web application or program must be identified. The name attribute of the <input> tag is the name of the information contained in the text box.
Use the text editor below to practice what you have learned.
The code below shows you how to create a password 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>Web Development Tutorials.com</title>
</head>
<body>
<form action="formscript.php" method="post">
<input type="text" name="firstname" />
<input type="password" name="password" />
</form>
</body>
</html>
The input tag is used to insert a password field into a form. The <input> tag must be placed between the openning <form> tag and the closing </form> tag.
The type attribute must have a value of password to create the password field.
Information that is typed into the password field and submited to the web application or program must be identified. The value of the name attribute is the name of information that is contained in the password field.
The code below shows you how to add a submit button 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>Web Development Tutorials.com</title>
</head>
<body>
<form action="formscript.php" method="post">
Name:
<input type="text" name="firstname" />
<input type="submit" value="Submit" />
</form>
</body>
</html>
The code above creates the form with a submit button below.
Radio buttons allow users to select one option from a limited number options.
The 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>Web Development Tutorials.com</title>
</head>
<body>
<form action="formscript.php" method="post">
<input type="radio" name="tutorial" value="html" /> radio
<br />
<input type="radio" name="tutorial" value="css" /> button
</form>
</body>
</html>
The code above creates the radio buttons below.
Checkboxes allow users to select one or more options from a limited number of options.
The code below shows you how to create check boxes.
<!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>Web Development Tutorials.com</title>
</head>
<body>
<form action="formscript.php" method="post">
1: <input type="checkbox" name="tutorial" value="HTML" />
<br />
2: <input type="checkbox" name="tutorial" value="CSS" />
</form>
</body>
</html>
The code below shows you how to create checkboxes.
A drop-down box is a drop-down list that allows users to select one item.
The code below shows you how to create a drop-down list and add it 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>Web Development Tutorials.com</title>
</head>
<body>
<form action="formscript.php" method="post">
<select name="tutorials">
<br />
<option value="html">HTML tutorials
</option>
<br />
<option value="css">CSS tutorials
</option>
<br />
<option value="javascript">javascript tutorials
</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 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>Web Development Tutorials.com</title>
</head>
<body>
<form action="formscript.php" method="post">
<select name="tutorials">
<br />
<option value="html">HTML tutorials</option>
<br />
<option value="css">CSS tutorials</option>
<br />
<option value="javascript" selected="selected">javascript
tutorials</option>
</select>
</form>
</body>
</html>
The HTML code above makes the form with a pre-selected example below.
Notice that the "javascript tutorials" option is pre-selected.
The code below shows you how to add a border around form data.
<!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>Web Development Tutorials.com</title>
</head>
<body>
<fieldset>
<form action="">
username: <input type="text" name="login" size="5" />
password: <input type="password" name="password" size="5" />
</form>
</fieldset>
</body>
</html>
The code above makes the form below with a border around it.
The code below shows you how to add a caption to the form border.
<!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>Web Development Tutorials.com</title>
</head>
<body>
<fieldset>
<legend>
Web tutorials:
</legend>
<form action="">
username: <input type="text" name="login" size="5" />
password: <input type="password" name="password" size="5" />
</form>
</fieldset>
</body>
</html>
The code below makes the form with a caption below.
