HTML Forms

Definition

  • HTML Forms is most important future in HTML. HTML Forms use to get a users information. It is user interactive. HTML Forms is a information tools to get information from the web surfer, such as: name, email address, address, phone number etc.

  • A form use to get information about user and information store that data into a web server.

HTML Form Tag

Tag Description
<form> Defines a form for user input.
<input> Defines an input field data.
<button> Defines a push button
<textarea> Defines a text-area (a multi-line text input box).
<label> Defines a label to the description.
<fieldset> Defines a border to the input data.
<legend> Defines a caption name write into fieldset.
<select> Defines a drop-down select list box.
<option> Defines an option value in the drop-down box.

HTML <input> Tag

The most used form tag is the <input> tag. This is the most commonly used tag within HTML forms. It give you to specify various types of user information fields such as text, checkboxes, radio buttons, Select Lists, Submit etc.

Attributes Value Description
type "text"
"button"
"password"
"file"
"checkbox"
"radio"
"reset"
"submit" 		use input text value.
use to input button
use to text is convert password type.
use to browse file.
use to select option checkbox.
use to select in radio type.
use to input reset data.
use to input submit data.
value "value" Specify the default value of element.
name "value" Specify unique name for the input element.
size "number" Define width of numbered(character) size input box.
maxlength "number" Define maximum number(character) allow to enter input box.
checked   Specify input element to be checked when it is first time loaded.
alt "text" Define input name to identify.
align "left"
"right"
"center" 		Define input type align in HTML document.
src "URL" Define image open to mouse down submit.
Form Fields Example
Form Action
Text Fileds
Password Fields
Radio Fields
Checkbox Fields
Button Fields
<textarea> Tag
Selection List Fields

<form> tag Action 

Form Tag use to send the all form contain data (include text field, password field, radio button etc..) send to the defined server or Page or Database.

<html>
<body>
  <form action="form_submit.php" method="post">
    Your Feedback:
    <textarea cols="65" rows="4" name="Feedback" >
    I realy like your Web Service because....
    </textarea/>
    <input type="submit" value="Submit" name="Submit" />
  </form>
</body>
</html>

Your Feedback:

<form> Tag Attributes

Attributes Value Description
action "sender address"
"Page"
"Database_page"		 Form all contain send to the defined link.
method "get"
"post"		 Form send Get Method to Get Form Contains.
Form send Post Method to Post Form Contains.

Textbox field  

<html>
<body>
  <form action="form_submit.php" method="post">
    First name:
    <input type="text" name="FirstName:" size="10" maxlength="15" />
    <br />
    Last name:
    <input type="text" name="LastName:" size="10" maxlength="15" />
  </form>
</body>
</html>

First name:

Last name:

Password field  

<html>
<body>
  <form action="form_submit.php" method="post">
    Password:
    <input type="password" name="Password" size="15" maxlength="15"/>
  </form>
</body>
</html>

Password:

Radio field  

<html>
<body>
  <form action="form_submit.php" method="post">
    Que. What is your favourites Web browser.
    <input type="radio" name="browser" value="IE8" /> Internet Explorer 8 <br />
    <input type="radio" name="browser" value="GC" /> Google Crome <br />
    <input type="radio" name="browser" value="FX"  /> Mozila Firefox
  </form>
</body>
</html>

Que. What is your favourites Web browser
Internet Explorer 8
Google Crome
Mozila Firefox

Checkbox field  

<html>
<body>
  <form action="form_submit.php" method="post">
    Que. Select your hobby.
      <input type="checkbox" name="cricket" value="cricket" /> Cricket <br />
      <input type="checkbox" name="watchtv" value="watchtv" /> Watch Tv <br />
      <input type="checkbox" name="playgame" value="playgame" /> Play Game <br />
      <input type="checkbox" name="inserf" value="inserf" /> Internet Surfing
  </form>
</body>
</html>

Que. Select your hobby
Cricket
Watch TV
Play Game
Reading
Internet Surfing

Button field  

<html>
<body>
  <form action="form_submit.php" method="post">
    Name:
    <input type="text" name="name" size="15" maxlength="15" />
    <br />
    <input type="submit" value="submit" name="Submit" />
    <input type="reset" value="reset" name="Reset" />
  </form>
</body>
</html>

Name:

<textarea> tag  

It is used to specify a texts are or multi line textbox. In a textarea you can write an unlimited character. It is mostly use in user feedback, home address etc.

<html>
<body>
  <form action="form_submit.php" method="post">
    Your Feedback: <br />
    <textarea cols="65" rows="4" name="Feedback" >
      I realy like your Web Service because....
    </textarea/>
  </form>
</body>
</html>

Your Feedback:

<textarea> Tag Attributes

Attributes Value Description
cols "specify_number" Define the Specify number of character visible in one line of text area.
rows "specify_number" Define the Specify number of line visible in text area.
name "unique_name" Specify unique name for the input element.

Selection list fields 

<html>
<body>
  <form action="form_submit.php" method="post">
    Select Your Hobby: <br />
    <select name="hobby" >
      <option value="cricket">Cricket</option>
      <option value="WatchTV">Watch Tv</option>
      <option value="PlayGame">Play Game</option>
      <option value="Reading">Reading</option>
      <option value="Int">Internet Surfing</option>
    </select>
  </form>
</body>
</html>

Select Your Hobby:

<selection> Tag Attributes

Attributes Value Description
multiple "space" Define the Multiple select.
name "Specify_Name" Define the Specify name to select list description.
size "Specify_Number" Define the Specify number of item list size.