HTML Menu

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".

Post Method Get Method
Information sent along with body Information sent along with URL
Data is invisible while sending Data is visible in site address
It provides security No Security
It can send any number of characters It sends limited characters
  • 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>
Example : "Lform.html"
<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>

Output:
image
Example : "RegistrationForm.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>

Output:
image
Next Topic :Frames in HTML