Forms in HTML

• Form is the most common way for a user to communicate the information from a web browser to server.
• <form> tag is used to create a HTML form. This tag has several attributes and important among them are "method" and "action".
  
  
  • action: This attribute specifies the URL of the application, which is to be called when the user clicks the submit button (or) submitting the form.
  • method: This attribute specifies how the entered data in form is sent to destination. There are two methods of sending information, one is "post" and other is "get".

• An HTML form is a section of a document which contains controls such as text fields, password fields, checkboxes, radio buttons, submit button, menus etc.
• An HTML form facilitates the user to enter data that is to be sent to the server for processing.
• HTML forms are required if you want to collect some data from of the site visitor.

User Interface elements in Forms:

• Label:

  This is used to display the text on the screen
  
  format:
  

  <lable> Some Text </lable>

• Text Field:

  It is an rectangular box.It is used to take the input from the user.This can be created using <input> tag.
  
  format:
  

  <input type="text" [ size= n ] [ name = "text" ] [ maxlength=n ] ></input>

• Button:

  HTML supports three types of buttons,those are
  
  • Button creates a simple button.
    
    format:
    

    <input type="button" [ value ="text" ]></input>

  • Submit button creates a button and it invokes the form action i.e submits the form.
    
    format:
    

    <input type="submit" [ value ="text" ]></input>

  • Reset button creates a button and it clears the entites,which are entered by user in the form.
    
    format:
    

    <input type="reset" [ value ="text" ]></input>

• Password Field:

  It is an rectangular box.It is used to enter the password.i.e it doesn't display charcters instead of those characters diaplay symbols.
  
  format:
  

  <input type="password" [ size = n ] [ name = "text" ]></input>

• Radio Button:

  This is used to select only one value at a time.
  
  format:
  

  <input type="radio" [ name = "text" ] [ value = "text" ]>text </input>

• Checkbox:

  This is used to select multiple values at a time.
  
  format:
  

  <input type="checkbox" [ name = "text" ] [ value = "text" ]>text </input>

• Combo Box:

  It is used to select one value from multiple values.
  
  format:
  

  <select [ name="text" ]>
  <option> ....</option>
  <option> ....</option>
  </select>
  

• List Box:

  It is used to select one (or) more values from multiple values.
  
  format:
  

  <select [ name="text" ]  [ size= n ]>
  <option [selected] > ....</option>
  <option> ....</option>
  </select>
  

• Text Area:

  This is just like a text field but it has multiple rows and columns.
  
  format:
  

  <textarea [ name="text" ] [ rows=n ] [ cols=n ]></textarea>
  

<html>
<head><title>login</title></head>
<body>
<form name="frm1">
<table align="center">
<caption><h3>Login</h3></caption>
<tr>
<td>UserName :</td>
<td><input type="text" name="uname"></input></td>
</tr>
<tr>
<td>Password :</td>
<td><input type="password" name="pwd"></input></td>
</tr>
<tr><td></td>
<td><input type="button" name="login" value="Login"></input></td>
</tr>
</table>
</form>
</body>
</html>

<html>
<head><title>Registration- Form</title></head>
<body><br/><br/><br/>
<form name="frm1">
<table align="center">
<caption> <font color="red">REGISTRATION</font> </caption>
<tr><td>Name :</td>
<td><input type="text" name="name"></input></td>
</tr>
<tr><td>Password :</td>
<td><input type="password" name="pwd"></input></td>
</tr>
<tr><td>E-Mail :</td>
<td><input type="text" name="email"></input></td>
</tr>
<tr><td>Phone No :</td>
<td><input type="text" name="phno"></input></td>
</tr>
<tr><td>Sex :</td>
<td>
<input type="radio" name="sex">Male</input>&nbsp<input type="radio" name="sex">Female</input>
</td></tr>
<tr><td>D.O.B:</td>
<td>
<select name="day">
<option>1</option><option>2</option>
<option>3</option><option>4</option>
<option>5</option><option>6</option>
<option>7</option><option>8</option>
<option>.....</option>
</select>&nbsp
<select name="month">
<option>1</option><option>2</option>
<option>3</option><option>4</option>
<option>5</option><option>6</option>
<option>7</option><option>8</option>
<option>9</option><option>10</option>
<option>11</option><option>12</option>
</select>&nbsp
<select name="year">
<option>1990</option><option>1991</option>
<option>1992</option><option>1993</option>
<option>1994</option><option>1995</option>
<option>1996</option><option>1997</option>
<option>1998</option><option>1999</option>
</select>
</td>
</tr>
<tr><td>Languages Known :</td>
<td>
<input type="checkbox" name="tel">Telugu</input>&nbsp
<input type="checkbox" name="eng">English</input>&nbsp
<input type="checkbox" name="tam">Tamil</input>&nbsp
<input type="checkbox" name="hin">Hindi</input>&nbsp
</td></tr>
<tr>
<td valign=top>Address :</td>
<td>
<textarea rows=4 cols=30 name="ads"></textarea>
</td></tr>
<tr>
<td align="right">
<input type="button" name="login" value="Submit"></input>
</td>
<td align="center">
<input type="button" name="reset" value="Reset"></input>
</td>
</tr>
</table>
</form>
</body>
</html>