{ LearnWebSiteDesign.com }

HTML, XHTML CSS Tutorials and Free Website Templates

HTML Form Tutorials

An HTML form by itself does nothing. An HTML form by itself is simply a container for form elements. Form elements are HTML elements that allow users to enter information into the form. Some examples of HTML elements that allow the user to enter information are: text fields, textarea fields, drop-down menus, radio buttons, checkboxex, etc.

How To Create Forms

HTML forms are created with a starting <form> tag an ending </form> tag.

<form> </form>

The <form> tag takes 2 main attributes: action and method.

<form> action Attribute

The value of the action attribute is the name and location of the script or application that the form data will be sent to when the user submits the information. The form data will be processed by the named script or application.

<form> method Attribute

The method attribute specifies how the form data is sent to the script or application. The method attribute has 2 possible values: post and get, with the post method being the most commonly used and recommended method.

<form action="form_script.php" method="post"> </form>

An HTML form must contain HTML form elements for the form to be of any real use.

Input Fields

An <input> tag is used to insert an input field into a form. <input> tags do not have an ending tag. <input> tags must be nested within the starting <form> tag and the ending </form> tag.

<form action="form_script.php" method="post"> <input> <br /> <input> </form>

Form Text-Fields

A text-field, also called a text box, allows users to enter a small amount of text into an input field. Text-fields are typically used for information such as email adresses or names. Include the type attribute with a value of text within an <input> tag.

Data that is input into an <input> field must be given a name so that the script or application that processes the data will know how to handle the data. To do this, include the name attribute within the <input> tag. The value of the name attribute will be whatever name you give that particular data.

<form action="form_script.php" method="post"> First Name: <input type="text" name="first_name"> <br> Last Name: <input type="text" name="last_name"> </form>

The HTML code above creates the form below.

First Name:
Last Name:

How To Specify the Size of a Text-Field

The size of a text-field can be specified by including the size attribute with a number value.

<form action="form_script.php" method="post"> First Name: <input type="text" name="first_name" size="10"> <br> Last Name: <input type="text" name="last_name" size="50"> </form>

The HTML code above creates the form below.

First Name:
Last Name:

How To Pre-Include Text within a Text-Field

To pre-include text within text-fields, include the value attribute with whatever text you want to be pre-included within the text-field.

<form action="form_script.php" method="post"> First Name: <input type="text" name="first_name" size="10" value="some text"> <br> Last Name: <input type="text" name="last_name" size="10" value="some text"> </form>

The HTML code above creates the form below.

First Name:
Last Name:

Form Password-Fields

Forms can include password-fields. A password-field is similar to a text-field, except that the data entered into a password-field is replaced by either asterisks or black colored circles.

To include a password-field into a form, use an <input>, and include the type attribute with the value of password.

<form action="form_script.php" method="post"> First Name: <input type="text" name="first_name"> <br> Last Name: <input type="text" name="last_name"> <br> Password: <input type="password" name="password"> </form>

The HTML code above creates the form below.

First Name:
Last Name:
Password:

How To Specify the Size of a Password-Field

The size of a password-field can be specified by including the size attribute with a number value.

<form action="form_script.php" method="post"> First Name: <input type="text" name="first_name"> <br> Last Name: <input type="text" name="last_name"> <br> Password: <input type="password" name="password" size="50"> </form>

The HTML code above creates the form below.

First Name:
Last Name:
Password:

Submit Buttons

A form must have a submit button in order for users to be able to submit the data that they have entered into the form. This is done by adding a submit button to the form.

To add a submit button to a form, include an <input> tag within the form and give the tag a type attribute with a value of submit.

<form action="form_script.php" method="post"> First Name: <input type="text" name="first_name"> <br> Last Name: <input type="text" name="last_name"> <br> <br> <input type="submit"> <br> </form>

The HTML code above creates the form below.

First Name:
Last Name:

How To Specify the Text on Submit Buttons

Both Firefox and Internet Explorer will display the text "Submit Query" as the default text on submit buttons. To specify the text that you want to be displayed on submit buttons, include the value attribute and have the value of the attribute be whatever text that you want to be displayed.

<form action="form_script.php" method="post"> First Name: <input type="text" name="first_name"> <br> Last Name: <input type="text" name="last_name"> <br> <br> <input type="submit" value="Submit Button Text"> <br> </form>

The HTML code above creates the form below.

First Name:
Last Name:

Reset Buttons

A reset button can be included in a form to allow the user to set all of the form fields back to their original values.

To include a reset button, use the <input> tag and include the type attribute with a value of reset.

<form action="form_script.php" method="post"> <br> First Name: <input type="text" name="first_name" value="your first name"> <br> Last Name: <input type="text" name="last_name" value="your last name"> <br> <br> <input type="reset"> </form>

The HTML code above creates the form below.

First Name:
Last Name:

How To Specify the Text on a Reset Button

Firefox and Internet Explorer both use the text "Reset" as the default text. You can specify the text that is displayed on the reset button with the value attribute and have the value of the attribute be whatever text you want displayed on the reset button.

<form action="form_script.php" method="post"> <br> First Name: <input type="text" name="first_name" value="your first name"> <br> Last Name: <input type="text" name="last_name" value="your last name"> <br> <br> <input type="reset" value="Reset Button"> </form>

The HTML code above creates the form below.

First Name:
Last Name:

Form Text-Areas

Forms can contain a textarea. A textarea is similar to a text-field, however, a textarea spans multiple rows and columns.

A textarea is defined by a starting <textarea> tag and an ending </textarea> tag. The dimensions of a textarea is defined by the rows attribute and the cols (columns) attribute with the value of each attribute being a number.

<form action="form_script.php" method="post"> Textarea: <br> <textarea name="message" rows="5" cols="50"></textarea> <br> <input type="submit"> <br> </form>

The HTML code above creates the form below.

Textarea:

Form Check-Boxes

Check-boxes allow users to select one or more options in a form. A check mark will appear next to each item that the user has selected.

To include check-boxes in a form, include a type attribute with a value of of checkbox within an <input> tag.

<form action="form_script.php" method="post"> <input type="checkbox"> Option #1 <br> <input type="checkbox"> Option #2 <br> <br> <input type="submit"> </form>

The HTML code above creates the form below.

Option #1
Option #2

How To Pre-Select Check-Boxes

You can have check-boxes pre-selected by including a checked attribute with a value of checked.

<form action="form_script.php" method="post"> <input type="checkbox" checked="checked"> Option #1 <br> <input type="checkbox" checked="checked"> Option #2 <br> <input type="checkbox"> Option #3 <br> <br> <input type="submit"> </form>

The HTML code above creates the form below.

Option #1
Option #2
Option #3

Form Radio Buttons

Radio buttons allow the user to select only one of a small number of options.

To include check-boxes in a form, include a type attribute with a value of radio within an <input> tag.

<form action="form_script.php" method="post"> <input type="radio" name="options" value="option_one"> Option #1 <br> <input type="radio" name="options" value="option_two"> Option #2 <br> <input type="radio" name="options" value="option_three"> Option #3 <br> <br> <input type="submit"> </form>

The HTML code above creates the form below.

Option #1
Option #2
Option #3

How To Pre-Select Radio Buttons

You can pre-select one radio button at a time by including the checked attribute with a value of checked to the <input> tag of the radio button that you choose to pre-select.

<form action="form_script.php" method="post"> <input type="radio" name="options" value="option_one"> Option #1 <br> <input type="radio" name="options" value="option_two" checked="checked"> Option #2 <br> <input type="radio" name="options" value="option_three"> Option #3 <br> <br> <input type="submit"> </form>

The HTML code above creates the form below.

Option #1
Option #2
Option #3

Tutorials

References

Templates

Sponsors

Advertise your web design and web development related products and services here.