HTML Forms

HTML Forms are required when you want to collect some data from the site visitor. For example during user registration you would like to collect information such as name, email address, credit card, etc.

HTML enables us to create forms. This is where our websites can become more than just a nice advertising brochure. Forms allow us to build more dynamic websites that allow our users to interact with it.

In HTML, a form is defined using the <form> </form> tags. The actual form elements are defined between these two tags.

Like this:

<form>
...
(form elements go here)
...
</form>

The <input> Tag

This is the most commonly used tag within HTML forms. It allows you to specify various types of user input fields such as text, radio buttons, checkboxes etc.

Input Type Text

Text fields are used for when you want the user to type short amounts of text into the form.

<form>
First name:
<input type="text" name="firstname"> Last name:
<input type="text" name="lastname"> </form>
Try it with the Editor

Input Type Password

Displays an obfuscated password entry field.

<form>
name:
<input type="text" name="username"> password:
<input type="password" name="psw"> </form>
Try it with the Editor

Radio Buttons

Radio buttons are used for when you want the user to select only one option from a pre-determined set of options.

Radio buttons are used when out of many options, just one option is required to be selected. They are also created using HTML <input> tag but type attribute is set to radio.

<form>
Male  :<input type="radio" name="gender" value="male">
Female:<input type="radio" name="gender" value="female">
</form>
Try it with the Editor

Checkboxes

Checkboxes should be used when you want to allow the users to make more than one selection.

Checkboxes are similar to radio buttons, but they enable the user to make multiple selections.

<form>
Cricket :<input type="checkbox" name="sports" value="Cricket">
Hockey  :<input type="checkbox" name="sports" value="Hockey">
Football:<input type="checkbox" name="sports" value="Football">
</form>
Try it with the Editor

Select Lists

The select list is created using the <select> element in conjunction with the <option> element.

A select list is a dropdown list with options. This allows the user to select one option from a list of pre-defined options.

The <select> element defines a drop-down list

<form>
    <select>
        <option value="BMW">BMW<option>
        <option value="Fiat">Fiat<option>
        <option value="Audi">Audi<option>
    </select>
</form>
Try it with the Editor

Textarea

You can use the </textarea> element to enable users to enter larger blocks of text than with the </input> tag. It's often a good idea to use the maxlength attribute to restrict the user's input to a certain number of characters. You can also use the cols and rows attributes to adjust the width and height.

<form>
<textarea maxlength="100" rows="5" cols="30">Enter message here.<textarea>
</form>
Try it with the Editor

Submit

The submit button allows the user to actually submit the form.

<form  action="action_page.php">
First name:
<input type="text" name="firstname"> Last name:
<input type="text" name="lastname"> <input type="submit" value="Submit"> </form>
Try it with the Editor

Form Method

You may have noticed the above example uses a method attribute. This attribute specifies the HTTP method to use when the form is submitted.

Possible values are:

Get

The form data is appended to the URL when submitted. This means you can actually see the form variables in your browser's address bar when the form is submitted. This can be handy for non-sensitive data such as a search engine's results page. It also allows you to bookmark the page and even link to it from another web page.

Post

The form data is not appended to the URL.

Providing this attribute is optional. If you don't provide it, the method will be post.