HTML (XHTML) Form Tutorials

Forms enable users of your web page(s) to send information to you or a specified applications or scripts that can process the submitted data. Some examples are contact forms and shopping cart order forms.

This tutorial will only show you how to create forms and form elements, not how to process the information that is submitted in the form.

The starting <form> and ending </form> tags define a form on your web pages. A form by itself does nothing at all, you must elements to a form for the form to be of any use. Some examples of these elements are text fields, password fields and submit buttons.

Attributes of the <form> tag determine how the form data should be handled. The value of the "action" attribute is the location (file name) of the application or script that will process the submitted form data.

The "method" attribute of the <form> tag specifies how the submitted form data transfers the data to the web server. There are 2 possible values for the method attribute: "post" and "get". I recommend that you use the post, unless there is a specific reason for using get.

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> <body> <form action="contactform.php" method="post"> </form> </body> </html>

The code above creates a blank form, which does nothing at this point.

How To Add a Text-Field to a Form

A text-field, also known as a text box, in a form allows users to enter a small amount of text, such as an email address, into an input field.

The <input> tags a text-field into a form. The <input> tag must be placed between the starting <form> and closing </form> tags.

The "type" attribute of the <input> tag must have a value of "text" to tell the web browser that the input field will be a text-field.

The data that is entered into an input field must be identified so that the application or script that will process the data so that it knows what to do with the submitted form data. This is done with the "name" attribute within the <input> tag.

The size of an input field can be specified using the "size" attribute within the <input> field. The value of the size attribute can only be a number.

The <img> tag is a self-enclosing tag because it does not have a closing tag. The tag must end with blank space followed by a forward slash (/) preceding the ending bracket (>).

The code below shows you how to create a form with a text-field.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <body> <form action="contactform.php" method="post"> First Name: <input type="text" name="firstname" size="20" /> </form> </body> </html>

The code above creates the form with an input field below.

First Name:

How To Add a Submit Button to a Form

Forms require a submit button to submit the submitted form data to the specified application or script. To define a submit button, within the <input> tag, include the "type" attribute with a value of "submit".

You can specify the text that appears on a submit button with the use of the "value" attribute within the <input> tag. The value of the value attribute is the text that you want to appear on the submit button.

The code below creates a form with an input field and a submit with the text "Click Here".

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <body> <form action="contactform.php" method="post"> First Name: <input type="text" name="firstname" size="20" /> <br /> <input type="submit" value="Click Here" /> </form> </body> </html>

The code above creates the form below with an input field and a submit with the text "Click Here".

First Name:

How To a Password Field to a Form

Forms can also include password fields, which are similar to text fields, except that the data entered is denoted by either asterisks or black circles.

The "type" attribute" of the <input> tag must have a value of "password" te tell the web browser that the input field will a password field.

The code below creates 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> <body> <form action="contactform.php" method="post"> First Name: <input type="text" name="firstname" size="20" /> <br /> Password: <input type="password" name="password" size="20" /> <br /> <input type="submit" value="Click Here" /> </form> </body> </html>

The code above creates the form below with a password field.

First Name:
Password:

How To Add a Text-Area to a Form

Forms can also include text-areas, which are similar to text-fields, except they span a larger area.

A text-area is defined with the starting <textarea> tag and the closing </textarea> tag.

The dimensions of the text-area are specified with the "rows" attribute and the "cols" attribute.

The rows attribute specifies the height of the text-area in character rows. For example, text-area with a rows attribute with a value of 5 will create a text-area that contains 5 lines of text.

The cols attribute specifies the number of columns that will appear in the text-area. For example, a cols attribute with a value of 20 will display only 20 characters per line of text.

The code below creates a 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> <body> <form action="contactform.php" method="post"> First Name: <input type="text" name="firstname" size="20" /> <br /> Password: <input type="password" name="password" size="20" /> <br /> Your Message: <br /> <textarea rows="5" cols="20"> </textarea> <br /> <input type="submit" value="Click Here" /> </form> </body> </html>

The code above creates the form below with a text-area.

First Name:
Password:
Your Message:

Web Hosting Resources

Free Website Templates