HTML forms contains:

1. <form> tag

<form> tag represents a form that is used to collect user input. <fieldset> tag is used to group related information in a form. <legend> tag represents caption for the <fieldset> tag.

2. <input> tag

<input> tag is the most important in HTML forms. <input> tag can be displayed in different ways, depending on the type attribute.

  • <input type="text">represents a input field for text input.
  • e.g.


  • <input type="password">represents a password field.
  • e.g.


  • <input type="reset">represents a reset button.
  • e.g.


  • <input type="radio">represents a radio button. User can select only one choice from number of choices.
  • e.g. A B


  • <input type="checkbox">represents a checkbox list. User can select multiple choices from number of choices.
  • e.g. A B


  • <input type="submit">represents a submit button.
  • e.g.

<input> tag Attributes are:


  • value attribute
  • displays the initial value for the input field.


  • readonly attribute
  • displays textbox with a value that cannot be changed.


  • disabled attribute
  • represents that the input field is disabled i.e. it is un-clickable.


  • size attribute
  • represents the size which is in characters for the input field.


  • maxlength attribute
  • represents the maximum length for the input field.

3. <select> tag

<select> tag represents a drop-down list. <option> tag represents an option that will be selected. By default, first item is selected in the drop-down list . To define a pre-selected option, add selected attribute to the option. size attribute is used to specify the number of visible values. multiple attribute is used to allow the user to select multiple values.


4. <textarea> tag

<textarea> tag represents a textarea. rows attribute represents number of rows in a textarea. cols attribute represents number of cols in a textarea.


Example


<html>
   <head>
      <title>Form Example</title>
   </head>
   <body>
      <form >
         User_Name: 
            <input type = "text" name = "user_name" />
     <br/><br/>
         Password: 
            <input type = "password" name = "password" />
     <br/><br/>
	     <textarea rows = "5" cols = "50" name="description">
	     Enter Description here...
	     </textarea>
     <br/><br/>
	     Activities: 
	        <input type = "checkbox" name = "reading" value = "on"> Reading
                <input type = "checkbox" name = "writing" value = "on"> Writing
	        <input type = "checkbox" name = "surfing" value = "on"> Surfing
     <br/><br/>
	    Gender:   
	        <input type = "radio" name = "gender" value = "male" checked> Male
         	<input type = "radio" name = "gender" value = "female"> Female
     <br/><br/>
         Country: 
         <select name = "dropdown">
		   <option value = "India" selected>India</option>
                   <option value = "Pakistan">Pakistan</option>
		    <option value = "China">China</option>
            <option value = "SriLanka">SriLanka</option>
        </select>
     <br/><br/>
             <input type = "submit" name = "submit" value = "Submit" />
	     <input type = "reset" name = "reset"  value = "Reset" />
      </form>
   </body>
</html>


Output

User_Name:

Password:



Activities: Reading Writing Surfing

Gender: Male Female

Country:

Subscribe & Get Regular Updates On Your E-mail