{ LearnWebSiteDesign.com }

HTML, HTML5, XHTML, CSS and CSS3 Tutorials

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.

Video Tutorials:
View our video tutorials to learn how to create HTML forms, text-fields, password fields, submit buttons and textareas.

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.

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.

To insert a text-field within a form you must include the <input> tag with a type attribute and the attribute must have a value of "text".

The name attribute must also be included within the <input> tag so that the script or application that will process the data has a way of identifying 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 insert a password-field within a form you must include the <input> tag with a type attribute and the attribute must have a value of "password".

The name attribute must also be included within the <input> tag so that the script or application that will process the data has a way of identifying 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"> <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

The default text that appears on a submit button depends on the web browser, for example, Internet Explorer and Firefox display the default text as "Submit Query" and Chrome displays the default text as "Submit".

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 Textareas

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.

The name attribute must also included within the openning <textarea> tag so that the script or application that will process the data has a way of identifying the data.

<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

A drop-down menu gives allows your users to select one option from a list of options. The default (or pre-selected) option is shown with an arrow pointing down. When that arrow is clicked on, the list of options appears in a drop-down format.

Two sets of openning and closing tags are used to create a drop-down menu. The first set of tags are the openning <select> and closing </select> tags. Enclosed within the <select> tags are the openning <option> and closing </option> tags. Each selection will have its own set of <option> tags.

The openning <select> tag must contain the name attribute so that the script or application that will process the submitted data will be able to identify the information. Each individual openning <option> tag must contain a value attribute with a unique value so the script or application can know which of the options was selected.

<form action="form_script.php" method="post"> <select name="numbers"> <option value="one">Option One</option> <option value="two">Option Two</option> <option value="three">Option Three</option> </select> <br> <br> <input type="submit"> </form>

The HTML code above creates the form below.



Tutorials

Templates

References

Sponsors

You can get your website online using Velnet, a leading UK web hosting provider. They provide free template and installation for WordPress blogs. Discuss webmaster related topics at Webmaster Serve, a Webmaster SEO forum

SouthernWebGroup.com provides high quality website design in Atlanta, GA as well as around the world.

Find low cost cheap website hosting and domain registration.

Browser our free no ads web hosting directory and find the free web hosting that's right for you and your budget.

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

Recommended

Download free css web hosting templates that are easy to edit at FreeWebHostingTemplates.com.

Friends