HTML Forms

Creating HTML forms allows you to collect information from your visitors. Whether it's their name, email address or credit card number, you can use forms to take in information and do a variety of things with it. You can store this information in a file or a database, you can use a scripting language, such as PHP,  to help validate the information the user submits or you can just email the information the visitor entered without actually saving the data.

Using The <form> Element

In order to create an actual form we need to create the tags to start and end the form:

<form method="post" action="mailto:do-not-reply@newbtopro.com">
</form>

This creates the boundaries of the form. As you can see, there is an opening and closing tag. There are two attributes that have not been mentioned, the "method" and "action" attributes.

The "method" attribute can contain two values, "get" and "post". These are the two main methods to send data from the visitors browser back to the web server.

• GET - Sends data to the web server via the URL. An example of this would be search results at Google. When you type in "pizza" into the search, you will get a URL similar to: http://www.google.com/search?q=pizza. The ?q=pizza is at the end because Google transmitted the data using the GET method.
• POST - Sends data behind the scenes. This method is more secure and less prone to tampering. While it may make sense for Google to use the GET method for it's search engine, you wouldn't want your Google Account information to show up in the URL. Using POST hides this information from prying eyes.

Note: There are other differences, but the example above is the main difference. If you are unsure of what method to use, you should default to the POST method.

The "action" attribute tells the form where to send this information. We are transmitting it via the POST method, but where are we sending this data? The "action" attribute can contain things like: mailto: addresses, PHP scripts, etc... We can  simply email this data to someone, we can have a script validate the information or we can store this data in a file or database.

Text Fields

Text fields allow you to create an area on the screen to allow users to type in what you are requesting. It can be a name, a password or a credit card number. A basic text field looks like:

<input type="text" name="firstname" size="20" maxlength="20" />

Below is the breakdown of the major attributes of the input element:

• type - Sets the type of input. Possible choices: text, submit, hidden and password.
• name - Assigns a name to the field so you can reference it later or through a script.
• size - Sets the horizontal width of the field. Using the value of  "20" will create a text area 20 spaces long.
• maxlength - Sets up the maximum number of characters that can be entered.

HTML:

<form method="post" action="mailto:do-not-reply@newbtopro.com">
Your Name: <input type="text" name="yourname" size="20" maxlength="30" /> <br />
Password: <input type="password" name="password" size="10" maxlength="10" />
</form>

HTML Output:

Your Name:  
 Password: 

Text Areas

What if you wanted to create an area on the screen where a visitor could enter information, just on multiple lines? Text fields are great at providing single line input areas but you may want to allow a visitor to use a larger area. The <textarea> tag allows just that.

<form method="post" action="mailto:do-not-reply@newbtopro.com">
<textarea rows="5" cols="50" wrap="physical" name="contact-message">
Enter your comments here and they will be sent to our admins for consideration.
Thank You
</textarea>
<input type="submit" value="Submit">
</form>

HTML Output:

Enter your comments here and they will be sent to our admins for consideration. Thank You  

Radio Buttons

You see radio buttons on quizzes, questionnaires and any other time someone is asking "This OR that" type questions.

<form method="post" action="mailto:do-not-reply@newbtopro.com">
What is your favorite color?<br />
<input type="radio" name="color" value="Black" />Black
<input type="radio" name="color" value="White" />White
<br />
What is your favorite Matrix movie?<br />
<input type="radio" name="movie" value="matrix" />The Matrix
<input type="radio" name="movie" value="matrix-reload" />The Matrix Reloaded
<input type="radio" name="movie" value="matrix-rev" />The Matrix Revolutions<br />
</form>

HTML Output:

What is your favorite color?
BlackWhite
 What is your favorite Matrix movie?
The MatrixThe Matrix ReloadedThe Matrix Revolutions

If you look at the code, you will see that if you change the name attribute, you can create an entirely new group of radio buttons.

Checkboxes

Unlike the radio buttons, checkboxes allow you to select multiple options within the same group name.

<form method="post" action="mailto:do-not-reply@newbtopro.com">
Select your favorite pizza toppings.<br />
<input type="checkbox" name="topping" value="Cheese">Cheese
<input type="checkbox" name="topping" value="Pepperoni">Pepperoni
<input type="checkbox" name="topping" value="Sausage">Sausage
<input type="checkbox" name="topping" value="Onion">Onions
<br />
<input type="submit" value="Submit">
</form>

HTML Output:

Select your favorite pizza toppings.
CheesePepperoniSausageOnions

Dropdowns

Dropdowns allow you to select one option from a list. In order to create a dropdown, we deviate from the <input> tag and use the <select> tag. The reason for this change is because the webmaster is giving the visitor all available options and not allowing a visitor to input their own response.

<form method="post" action="mailto:do-not-reply@newbtopro.com">
Highest level of education obtained?
<select name="education">
<option>Choose One</option>
<option>Still In High School</option>
<option>High School Degree</option>
<option>Some College</option>
<option>Associates Degree</option>
<option>Bachelor's Degree</option>
<option>Doctorate</option>
<input type="submit" value="Submit">
</select>
</form>

HTML Output:

Highest level of education obtained?Choose OneStill In High SchoolHigh School DegreeSome College Associates DegreeBachelor's Degree Doctorate 

Multiple Selection Form

What if you wanted to give users a list of options they could select, but allow them to select multiple options? With adding one word to our code, we can allow users to select as many options as you give them.

<form method="post" action="mailto:do-not-reply@newbtopro.com">
Select your favorite music genre's.
<select multiple name="genre" size="5">
<option value="metal" selected>Metal</option>
<option value="hard-rock" >Hard Rock</option>
<option value="rap" >Rap</option>
<option value="RandB" >R&B</option>
<option value="jazz" >Jazz</option>
<option value="country" >Country</option>
<option value="classical" >Classical</option>
<option value="Industrial" >Industrial</option>
<option value="New Wave" >New Wave</option>
<option value="techno" >Techno</option>
</select>
<input type="submit" value="Submit">
</form>

HTML Output:

Select your favorite music genre's.  Metal Hard Rock Rap R&B Jazz Country Classical Industrial New Wave Techno  

The only things that changed were the two lines from the opening <select> tag:

<select multiple name="genre" size="5">
<option value="metal" selected>Metal</option>

• The "multiple" option sets up the multiple selection list, as opposed to the single dropdown.
• The "size" attribute sets how long the selection list will be. A "5" value means five options will show.
• In the <option> tag, you will see "selected". You can have multiple options selected as the default.

Permalink