Tutorials
Learn web design and programming with our free video and text tutorials.
Web Designer? Design and market your own professional website with easy-to-use tools.
HTML/XHTML Form Tutorials
How To Create HTML Forms
Forms allow your users to send information over the internet to you or to an application that processes that data.
A form is an area that contains form elements. These form elements are HTML elements (text fields, text boxes, password fields, drop-down buttons, check boxes, etc.) that allow users to enter information such as names and numbers in a form.
Forms allow your users to send information over the internet to you or to an application that processes that data.
A form is an area that contains form elements. These form elements are HTML elements (text fields, text boxes, password fields, drop-down buttons, check boxes, etc.) that allow users to enter information such as names and numbers into a form.
A form is created with the starting <form> tag and ending </form> tag.
Attributes of the <form> tag configure how the form data will be handled.
The value of the "action" attribute specifies the name and location of the script or program the form data will be sent to for the data to be processed when it is submitted by the user.
You specify how the information is sent using the "method" attribute, which has 2 possible values: "post" and "get", with post being most commonly the best method.
The HTML code below creates an HTML form.
For a form to be of any real use, it must contain HTML elements such as text fields, text boxes, password fields, drop-down buttons and check boxes that allow users to enter information such as names and numbers into 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WebDevelopmentTutorials.com</title>
</head>
<body>
<form action="script.php" method="post">
</form>
</body>
</html>
How To Add Text-Fields to Forms
A text field (also called a text box) in a form allows users to enter a small amount of text, such as a name or e-mail address.
The <input> tag inserts a text box into a form. The <input> tag must be placed between the openning <form> and the closing </form> tags.
The "type" attribute of the <input> tag must have a value of "text".
Information that is entered into a text-field on a form must be identified to the script or application that will process the data so that it knows how to handle the data. This is done by including the "name" attribute of the <input> tag. The value of the name attribute is the name that you give the data that the user enters into the text-field.
Also, because the <input> tag is a self-enclosing tag, it must have a forward slash (/) preceded by a space right before the ending bracket (>) for the web page to be XHTML standards compliant.
The HTML code below shows you how to add text-fields 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WebDevelopmentTutorials.com</title>
</head>
<body>
<form action="script.php" method="post">
<p>
First Name:
<input type="text" name="firstname" />
<br />
Last Name:
<input type="text" name="lastname" />
</p>
</form>
</body>
</html>
The code above produces the form below.
How To Specify the Size of Text-Fields
You can specify the size of a text-field by including the size attribute within the <input> tag.
The HTML code below shows you how to specify the size of 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WebDevelopmentTutorials.com</title>
</head>
<body>
<form action="script.php" method="post">
<p>
First Name:
<input type="text" name="firstname" size="50" />
<br />
Last Name:
<input type="text" name="lastname" size="20" />
</p>
</form>
</body>
</html>
The code above produces the form below.
How To Add a Submit Button to a Form
A form needs a submit button in order to send the information entered and/or selected to the script or application that will process the information.
To create a submit button, the type attribute with a value of submit is included within a <input> tag.
Also, because the <input> tag is a self-enclosing tag, it must have a forward slash (/) preceded by a space right before the ending bracket (>) for the web page to be XHTML standards compliant.
The HTML code below shows you how to add a submit button 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WebDevelopmentTutorials.com</title>
</head>
<body>
<form action="script.php" method="post">
<p>
First Name:
<input type="text" name="firstname" />
<br />
<input type="submit" />
</p>
</form>
</body>
</html>
The HTML code above produces the HTML form below.
How To Add Text to Submit Buttons
You can specify the text that displays on the submit button by including the value attribute within the <input> tag that includes the type attribute with value of submit for the submit button. The text that you enter as the value of the value attribute is the text that will be displayed on the submit button.
The HTML code below shows you how add text to 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WebDevelopmentTutorials.com</title>
</head>
<body>
<form action="script.php" method="post">
<p>
First Name:
<input type="text" name="firstname" />
<br />
<input type="submit" value="This is some text" />
</p>
</form>
</body>
</html>
The HTML code above creates the HTML form below.
How To Add a Password-Field to a Form
A password-field in an HTML form allows users to enter data into a text-field. The text that is entered into the password-field will not displayed on the web browser screen, instead there will either be asterisks or black colored discs in the place of the text that is entered.
The type attribute with the value of password must be included within a starting <input> tag and an ending <input> tag to create a password-field.
Also, because the <input> tag is a self-enclosing tag, it must have a forward slash (/) preceded by a space right before the ending bracket (>) for the web page to be XHTML standards compliant.
The HTML code below shows you how to create a form with 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WebDevelopmentTutorials.com</title>
</head>
<body>
<form action="script.php" method="post">
<p>
First Name:
<input type="text" name="firstname" />
<br />
<input type="password" />
</p>
</form>
</body>
</html>
The HTML code above produces the HTML form below.
How To Add a Check-Box to a Form
Check boxes allow users to select one or more items in a form. A check mark will appear next to each item that they have clicked on.
The type attribute with a value of checkbox is included within an <input> tag to create a check-box.
The name attribute must also be included within the <input> tag that contains a type attribute with a value of checkbox so that the script or application that will process the information can identify the information that is checked.
When a form is submitted to the script or application, each check box that is selected will return the value that is associated with that check box. If a check box is not selected, neither the field name nor the value associated with that check box is returned to the server. It will be as if that particular check box does not exist at all.
Also, because the <input> tag is a self-enclosing tag, it must have a forward slash (/) preceded by a space right before the ending bracket (>) for the web page to be XHTML standards compliant.
The HTML code below shows you how to create a form with multiple 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WebDevelopmentTutorials.com</title>
</head>
<body>
<form action="script.php" method="post">
<p>
<input type="checkbox" name="newsletter" value="subscribe" />
Subscribe to this newsletter
<br />
<input type="checkbox" name="newsletter" value="unscribe" />
Un-subscribe from this newsletter
<br />
<input type="checkbox" name="newsletter" value="moreinformation" />
Request more information
</p>
</form>
</body>
</html>
The HTML code above produces the HTML form below.
How To Pre-Select Check-Boxes
Check-boxes can also be pre-selected by including the checked attribute with a value of checked to the <input> tag of that particular check-box.
The HTML code below shows you how to pre-select 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WebDevelopmentTutorials.com</title>
</head>
<body>
<form action="script.php" method="post">
<p>
<input type="text" name="lastname" />
<br />
<input type="checkbox" name="newsletter" value="subscribe" checked="checked" />
Subscribe to this newsletter
<br />
<input type="checkbox" name="newsletter" value="unscribe" />
Un-subscribe from this newsletter
<br />
<input type="checkbox" name="newsletter" value="moreinformation" checked="checked" />
Request more information
</p>
</form>
</body>
</html>
The HTML code above produces the HTML form below.
How To Add a Text-Area to an HTML Form
A text-area is basically a text-field with a larger content area to enter information into. It is defined by the starting <textarea> tag and the ending </textarea> tag.
Information that is entered into a text area on a form must be identified to the script or application that will process the data so that it knows how to handle the data. This is done through the name attribute.
The size of the text area can be specified with the cols attribute and rows attribute. The cols attribute specifies the number of columns of text that will appear in the text-area and the rows attribute specifies the height of the text-area in character rows.
The web browser settings of each individual user and the dimensions of the screen will determine the physical height as it appears on a web page. Also, most web browsers will automatically insert a scroll bar on the right-hand side and the bottom of the text area if a user types more text than can fit in the originally specified area.
The HTML code below shows you how to create an HTML form with a text-area.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WebDevelopmentTutorials.com</title>
</head>
<body>
<form action="script.php" method="post">
<p>
Enter some text
<br />
<textarea cols="30" rows="5" name="sometext">
</textarea>
</p>
</form>
</body>
</html>
The HTML code above produces the HTML form below.
How To Add Radio Buttons to HTML Forms
Radio buttons allow the user to select only one of a small number of choices.
The type attribute with a value of radio in included within the <input> tag to create a radio button.
The <input> tag must also include the name attribute to identify the information that is sent to the script or application that will process the information.
When a form is submitted to the script or application, the radio button that is selected will return the value that is associated with that radio button only. If a radio button is not selected, neither the field name nor the value associated with that radio button is returned to the server. It will be as if that particular radio button does not exist at all.
Also, because the <input> tag is a self-enclosing tag, it must have a forward slash (/) preceded by a space right before the ending bracket (>) for the web page to be XHTML standards compliant.
The code below shows you how to create a form with radio buttons.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WebDevelopmentTutorials.com</title>
</head>
<body>
<form action="script.php" method="post">
<p>
Subscribe to the newsletter
<br />
<input type="radio" name="newsletter" />
Cancel my newsletter subscription
<br />
</p>
</form>
</body>
</html>
The HTML code above produces the HTML form below.
How To Pre-Select Radio Buttons
To pre-select radio buttons, you must include the checked attribute with the value of checked to the <input> tag of that particular radio button.
The HTML code below creates the HTML form below.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WebDevelopmentTutorials.com</title>
</head>
<body>
<form action="script.php" method="post">
<p>
<input type="radio" name="newsletter" value="yes" checked="checked" />
Subscribe to the newsletter
<br />
<input type="radio" name="newsletter" value="cancel" />
Cancel my newsletter subscription
</p>
</form>
</body>
</html>
The HTML code above creates the HTML form below.
How To Add a Drop-Down Box to an HTML Form
A drop-down box allows the user to select from a number of options. It first appears as a text field with an arrow to the right side, when the user clicks on the list, a list of options appear.
A drop-down box is made up of 2 tags: the starting and ending <select> tags and the starting and ending <option> tags which are nested within the <select> tags.
The <select> tag creates the element. The <option> tag marks the individual selections.
The <select> tag identifies the information to the script or application that will process the information using the name attribute.
Each item that is to appear in the drop-down menu must be enclosed by the starting <option> and ending </option> tags. The <option> tag uses the value attribute to identify the information to the script or application that will process the information using the value attribute.
The HTML code below creates an HTML form with a drop-down 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WebDevelopmentTutorials.com</title>
</head>
<body>
<form action="script.php" mehthod="post">
<p>
<select name="numbers">
<option value="one">"One</option>
<option value="two">Two</option>
<option value="three">Three</option>
</select>
<br />
<input type="submit" />
</p>
</form>
</body>
</html>
The HTML code above creates the HTML form below.