Usually a HTML Form is created to enable people who visit a webpage to enter information or select from a set of predefined options.


HTML forms are used to pass data to a server, to be processed by a programming language (like PHP, ASP). HTML forms can also be used with script languages, like JavaScript.
The <form> ... </form> tag is used to create a HTML form.
  ... form elements

The <form> tag uses the following attributes:
A form can contain input elements like text fields, checkboxes, submit buttons; and select lists, textarea, fieldset, and more.
- All form elements are added inside <form> ... </form> tag.

Form - Input Elements

The input element is the most important form element. It is used to select user information, and can vary in many ways, depending on the type attribute.

Attributes of the <input /> tag:

Text field

Defines a one-line input field that a user can enter text into (the default width of a text field is 20 characters).
<input type="text" name="a_name" />
How it looks in a browser:  

Password field

type="password" creates a text input element, but the characters are masked (shown as asterisks or circles).
<input type="password" name="a_name" />
How it looks in a browser:  


Checkboxes let a user select one or more options of a limited number of choices.
<input type="checkbox" name="a_name" value="value" />
How it looks in a browser:  


Radio buttons let a user select only one of a limited number of choices, which have the same "name" attribute.
<input type="radio" name="a_name" value="value" />
How it looks in a browser:  


Allows users to submit external files to the server. It is used for file uploads.
- This field is accompanied by a "Browse" button, used to choose which document to be transferred to server.
<input type="file" name="a_name" />
How it looks in a browser:  

Simple button

type="button" defines a clickable button, that does not do anything. The button type is most often used to activate a JavaScript function when a user clicks on the button.
<input type="button" value="Click here" />
How it looks in a browser:  

Submit button

A submit button is used to send form data to a server. The data is sent to the page specified in the form's "action" attribute.
<input type="submit" value="Send" />
How it looks in a browser:  

Image for the Submit button

type="image" defines an image as a submit button. If a type="image" button is pressed, the form is submitted. The "src" and "alt" attribute are required.
<input type="image" src="image.jpg" alt="Submit" />
How it looks in a browser:  

Reset button

A reset button resets all form fields to their initial values.
<input type="reset" value="Start Over" />
How it looks in a browser:  


A hidden field is not visible for the user. Hidden controls can be used to pass some data to the server that the user cannot see or alter.
<input type="hidden" name="a_name" value="hidden_value" />

Other form elements

Textarea field

The <textarea> tag defines a multi-line text input control which can hold an unlimited number of characters.
The size of a textarea can be specified by the cols and rows attributes, or through CSS, with height and width properties.
<textarea name="a_name" cols="20" rows="3"> Text content </textarea>
How it looks in a browser:  
    Attributes for textarea:

Select list

The <select> </select> tag is used to create a select list (drop-down list).
This element should contain one ore more <option>...</option> tags. This tag defines an option within the select item.
<select name="a_name">
 <option value="val1">Option 1</option>
 <option value="val2">Option 2</option>
 <option value="val3">Option 3</option>
- If the "value" attribute is not added in the <option> tag, its content will be the value that is sent to the server.
How it looks in a browser:  
    Attributes for <select>:
    Attributes for <option>:

<label> tag

The <label> tag defines a label for an input element.
Each label element is associated with one form control. The label element may contain the form control, or it may use the "for" attribute to identify the control by its "id" value.
  - Syntax:
<label>Text <input type="the_type" name="a_name" /></label>
Or with the "for" attribute:
<label for="input_id">Text</label> <input type="the_type" name="a_name" id="input_id" />
If the user clicks on the text within the label element, it toggles the control.
<form action="script.php" method="post">
 <label>Text: <input type="text" name="text1" /></label>
 <label for="idc">Check:</label> <input type="checkbox" name="a_name" id="idc" /><br />
 <input type="submit" value="Submit" />
This code will display:

<fieldset> and <legend> tags

The <fieldset> tag is used to logically group together elements in a form. It draws a box around the related form elements.
The <legend> tag defines a caption for the fieldset element.
<form action="script.php" method="post">
 <fieldset> <legend style="margin-left:90%;">Log in</legend>
   <label>Name: <input type="text" name="user" /></label><br />
   <label>Password: <input type="password" name="pass" size="16" /></label>
 <input type="submit" value="Submit" />
This code will display:
Log in

<optgroup> tag

The <optgroup> tag is used to group together related options in a select list. It uses two attributes: Example:
<form action="script.php" method="post">
 <p>What is your favorite fruit or vegetable?</p>
 <select name="fv" size="6">
 <optgroup label="Fruits">
 <optgroup label="Vegetables">
How the HTML code above looks in a browser:

What is your favorite fruit or vegetable?

Daily Test with Code Example

Which tag defines the clickable areas inside the image map?
<map> <img> <area>
<img src="image.jpg" usemap="#map1">
<map name="map1">
  <area shape="rect" coords="9, 120, 56, 149" href="#">
  <area shape="rect" coords="100, 200, 156, 249" href="#">
Which CSS property defines what is done if the content in a box is too big for its defined space?
display overflow position
#id {
  overflow: auto;
Click on the event which is triggered when the mouse is positioned over an object.
onclick onmouseover onmouseout
document.getElementById("id").onmouseover = function(){
  document.write("Have Good Life");
Indicate the PHP variable that contains data added in URL address after the "?" character.
if(isset($_GET["id"])) {
  echo $_GET["id"];
Forms and Input

Last accessed pages

  1. List with All the Games (9764)
  2. The Fifth Agreement (13403)
  3. Action Games (7212)
  4. Qwop (39975)
  5. Drag Racer V3 (14799)

Popular pages this month

  1. Qwop (7150)
  2. Drag Racer V3 (4904)
  3. Bubbles3 (1994)
  4. List with All the Games (1670)
  5. Butterfly Kyodai (1590)