Forms

HTML forms are created to send information to a server based on what the user inputs. Forms can be created using a number of html tags that all perform a different task. Forms allow you to collect information from a user and upload it automatically to the database or receive it through email. In this lesson we will go over these tags and their functions, it is expected that you understand basic html tags and properties.

<form>

The <form> tag is used to create an html form.

<fieldset>

The <fieldset> tag is used to define a border around the elements in a form

<legend>

The <legend> tag is used to make a caption for a fieldset element.

<label>

The <label> tag is used to create a label for an input box. This tag allows for some functionality we will discuss later.

<input>

The <input> tag creates an input box

Here’s an example of how these can be used:

Please fill in your information

First Name:
Last Name:

Here’s what the HTML looks like:

<form>
<fieldset><legend>Please fill in your information</legend>
<label for="firstname">First Name:</label>
<input type="text" size="25" />
<br />
<label for="lastname">Last Name:</label>
<input type="text" size="25" /></fieldset>
</form>

 

Input Types

text

The input type text is used for collect text data

textarea

Same as the text input except is used for multiple lines if you want your users to input paragraphs.

password

Similar to the text type except words type show as asterisks (*) for added security

radio

The radio type is used for selections where only one option is needed.

checkbox

The checkbox type is used also for selection but more than one can be selected.

Here’s some examples of the input types:

Text:

Textarea:

Password:

Radio:
One
Two
Three
Checkbox:
Checkbox 1
Checkbox 2
Checkbox 3

Here’s what the HTML looks like:

<form><br />
Text:<br />
<input type="text" /><br />
Textarea:<br />
<textarea rows="8" cols="40">
</textarea><br />
Password:<br />
<input type="password" /><br />
Radio:<br />
<input type="radio" name="options" value="one" id="one" /> One<br />
<input type="radio" name="options" value="two" id="two" /> Two<br />
<input type="radio" name="options" value="three" id="three" /> Three<br />
Checkbox:<br />
<input type="checkbox" /> Checkbox 1<br/>
<input type="checkbox" /> Checkbox 2<br/>
<input type="checkbox" /> Checkbox 3<br/>
</form>

Take the quiz »