html, css, jQuery, PHP, mySQL

« | »

HTML From Scratch. 9:1 Forms

form

Forms allow users to interact with your website.

It can be very useful to have a form on your website. Forms allow users to send feedback, contact information for newsletters, or buy products. Some forms allow users to upload content to the website: for example, an avatar on a social networking website. Most web forms are processed by scripts on the server written in a language such as PHP or Perl. Server-side scripts which process forms are known as CGI (Common Gateway Interface) Scripts, and if you want to you can learn how to write your own. For now, you will learn how to create a web form which is submitted by email. This only requires HTML, but you can use CSS to style your form.

Form

The <form> tag is the foundation of your web form. This wraps around all of the content of your form, including all the buttons, boxes, selection fields and any labels or text. Its closing tag is </form>. The <form> tag takes various attributes, the most important of which are method and action.

Method takes two possible values: post and get. These refer to the method by which form data is returned to the processing script. Get passes all of the data as a single string, and is limited in size to 256 characters (more on some systems). The data is also passed in the url of the web page: making get a poor choice for any applications where security is a consideration. The data can be bookmarked or accessed through browser history, and manually altered by the user. The limited size is also another problem. Post passes data as a set of strings, each containing the information from one form field. It is also not visible to the user, and has no limit on the size of the data. This makes method=”post” the best choice in most situations.

Action usually takes as its value the url of the CGI Script which will process the form data, but for your email form you need the special command mailto: followed by your email address. This means that when the submit button is pressed, the user’s email program will open, with a pre-written email addressed to the email provided. Use enctype=”text/plain” for passing values UNCHECKED directly into an email program, and enctype=”multipart/form-data” for passing data to a CGI script using post.

Example:

<form method=”POST” action=”mailto:me@example.com” enctype=”text/plain”> …. </form>

 Input

The <input> tag nests inside the form tag, and represents a form field. Input takes many attributes, but the most important one is type. Type can take many values:

Other attributes that input can take, and their values, include:

Example:
<input type=”radio” name=”favourite_color” value=”blue”>blue
<input type=”image” name=”map” src=”map.jpg” align=”top”>
<input type=”text” name=”my_name” value=”Fred” size=”10″ maxlength=”15″>
<input type=”submit” name=”submit” value=”go!”>

Textarea

The textarea tag is used inside a form to give a square box which can be filled with multiple lines of text. Its attributes and the values they take are:

Example:
<textarea name=”address” rows=”8″ cols=”40″> 

Select and Option

The select tag gives a pulldown menu, whose items are given by the option tags nested inside. Select takes the attributes:

Example:
<select name=”menu” size=”3″>
<option value=”1″>Burger</option>
<option value=”2″>Hot Dog</option>
<option value=”3″>Chips</option>
</select>

Submit

The form is submitted by clicking on the submit button, or by clicking on an active map (which immediately returns data for processing), or or by pressing enter on the text box of a textarea.

 Extra Tags

There are a few extra tags which are not required but add to the semantic nature of your markup and aid accessibility.

Example:
<label for=”myColor”>blue</label>
<input type=”radio” id=”myColor” value=”blue”>

Example:
<fieldset>
<legend>Address</legend>
<input type=”text”> …

</fieldset>

Example

live example

HTML5 has added many new input types to the specification. Some of these may not yet be fully implemented in all browsers, but you can experiment with them as you please:
W3.org html5 markup: input

Tags: , , , , , , , , , , , , , , ,

This entry was posted on Saturday, August 13th, 2011 at 9:47 am and is filed under Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Leave a Reply