Techcss
Untitled Document

HTML Forms

HTML form elements are great elements of HTML to interact with users/viewers/visitors


HTML FORM element

HTML <form> tag is used to pass data to the web server.

The HTML form elements are:


Text Field

This is an <input> element.

The syntax is like <input type="text">

Code:

<form>
Name: <input type="text" /><br />
Age: <input type="text" size="3" maxlength="3" />
</form>

Output:
Name:
Age:

Password Field

Password fields are used for viewing protection in a webpage or log-in page. Instead of showing the original character input by user it shows asterisk(*) or any other special character on screen during form input.

Code:

<form>
Password: <input type="password" />
</form>

Password:

Submit Button

The submit button is used to send the form input data to the server. The submit button follow the instruction as the form's action attribute is defined.

The tag is <input type="submit" />

Example:

<form action="examples/result.php" method="post">
Name: <input type="text" name="name" />
Age: <input type="text" name="age" size="3" maxlength="3" />
Password: <input type="password" name="pwd" />
<input type="submit" value="Submit"/>
</form>

Output:
Name:

Age:

Password:


Checkboxes

The check box input is used to provide the facility to users to select a single or multiple options from the limited options given in the web page.

The tag is <input type="checkbox"/>

Code:
<form>
What dish do you like?
<input type="checkbox"/> Mutton <br /> <input type="checkbox"/> Chicken <br /> <input type="checkbox"/> Pork <br /> <input type="checkbox"/> Beaf <br /> <input type="checkbox"/> Fish <br /> <input type="checkbox"/> Prawn <br /> <input type="checkbox"/> Crab <br /> </form>
Output:
What dish do you like?
Mutton
Chicken
Pork
Beaf
Fish
Prawn
Crab

Radio Button

This is a type of input which facilitate the user choose only one item from more than one options

The tag is <input type="radio">

Example:
<form>
You are: <br />
<input type="radio"/ name="food"> Vegetarian<br />
<input type="radio"/ name="food"> Non-Vegetarian<br />
</form>
Output:
You are:
Vegetarian
Non-Vegetarian

Image button

It defines an image as a submit button.

The tag is as <input type="image" />

Example:

<form>
Search Web: <input type="text" /><br />
<input type="image" src="image/ip.png" border="0" alt="submit"/>
</form>

Output:
Search Web:

File

This is used to define file select option with browse button

The input tag is <input type="file" />

<form>
Select File to upload: <input type="file" />
</form>

Output:
Select File to upload: