ExpertRating - Online Certification and Employment Testing ExpertRating - Online Certification and Employment Testing ExpertRating - Online Certification and Employment Testing

ExpertRating Home
ExpertRating Benefits
Recommend ExpertRating
Suggest More Tests
Privacy Policy
FAQ
Login
 
HTML Tutorial - Index
HTML Tutorial - Introduction
HTML Tutorial - Formatting
HTML Tutorial - Links
HTML Tutorial - Images
HTML Tutorial - Forms
HTML Tutorial - Tables
HTML Tutorial - Frames
HTML Tutorial - Style Sheets
HTML Tutorial - Advance Tags
     

 
Online Personal Trainer Certification
Personal Trainer Certification (Spanish)
Six Sigma Certification
Find a Personal Trainer
Project Management Certification
Six Sigma Certification
Six Sigma Black Belt Certification
Master Black Belt Certification
Six Sigma Green Belt Certification
Life Coach Certification
Lean Management Certification
Lean Six Sigma Certification
First Aid Certification
CPR Certification
Yoga Certification
Aerobics Certification
Pilates Certification
Business Analyst Certification
SEO Certification
Online Business Writing Course & Certification
Makeup Artist Certification
Baby Sitting Course & Certification
Time Management Certification
Health Club Management Certification
Medical Coding Certification
Medical Billing Certification
Business Analysis Course
Master Trainer Certification
Total Quality Management Certification
Kaizen Certification
Creative Writing Certification
Event Management Certification
Test Search by Job Title
Administrative Assistant Certification
Virtual Assistant Certification
  All Online Courses
   

   
   
   
   
   
   

   
  Home > Courses, Tutorials & eBooks > HTML Tutorial > Forms
 
Previous Next

HTML Tutorial - Forms

 
                                                                                                                     Page 3 of 3
 

 

Some more tags used in forms are discussed below.

Option Tag

The option tag is used with the <select> tag (which has been discussed later) to create select lists. It indicates the start of a new option in the list. It is used with the value attribute, which indicates what is sent to the server. The text that follows the option tag is the text that is displayed in the browser.

Attribute of Option Tag

Value

It indicates the value that is sent to the server if that option is selected. The user does not see the value encrypted in the value attribute on the browser.

Example:

<select name=”jokenumber”>
 
<option value=”001”> Cricket jokes </option>
<option value=”002”> Golf jokes </option>
<option value=”003”> Tennis jokes </option>

</select>

Select Tag

The select tag creates a list of options, one or more of which can be selected. This tag in its simplest form has a <select> tag, one or more <option> tags and a </select> tag.

Example:

<select name=”jokenumber”>
<option value=”001”> Cricket jokes </option>
<option value=”002”> Golf jokes </option>
<option value=”003”> Tennis jokes </option>
</select>

Attributes of Select Tag

Name

The Name attribute names the select field for use in the server. It works similarly as it works with the input tag.

Example:

<select name=”jokenumber”>
 

</select>

Size

The size attribute indicates how many rows of the list should be displayed. It indicates the number of items that are shown in the drop down list. The default size is one.

Example:

<select name=”jokenumber” size=4 >
 

</select>

Multiple

The Multiple attribute assigns more than one option from the list that can be selected. The size attribute is particularly useful while creating multiple lists.

Example:

<select name=”jokenumber” multiple size=4>

</select>

Optgroup Tag

The optgroup tag defines an option group. Various choices can be grouped with the help of this tag. When there is a long list of options, groups of related choices are easier to handle. These groups are user friendly and time saving.

Attribute of Optgroup Tag

Label

The label attribute defines a label for the option field. A label is a name for that particular option group.

Example:

 
<select name=”jokenumber”>
<optgroup label=”Game jokes”>
<option value=”001”> Cricket jokes </option>
<option value=”002”> Golf jokes </option>
<body background ="myimage.jpg" text = “blue”>
</optgroup>
 
<optgroup label=”Other jokes”>

<option value=”111”> Classic jokes </option>

<option value=”112”> Short jokes </option>
</optgroup>
</select>

Button Tag

The button tag creates a push button. Regular HTML contents, like text and images, can be put in a button. This is the difference between the buttons created by this tag and the buttons created by input tag.

Attributes of Button Tag

Name

This sets the name of the button tag. The name attribute works with the button tag similarly as with other tags.

Example:

<button name=”new” > New! </button>

Type

The button tag creates one of the three types of buttons described below:

Button (as default) creates a normal button as a button created with the input tag.

Submit creates a submit button like a submit button created with the input tag.

Reset creates a reset button like a reset button created with the input tag.

Example:

<button type=button> Hello! </button>
<button type=submit> Send It! </button>
<button type=reset> Reset This! </button>

Label Tag

The label tag defines a label to a control. When the text within the label is clicked, it will toggle the control.

Attribute of Label Tag

For

The for attribute defines the form element with which the label is associated. The text within the for attribute in the label should be the same as the text in the id attribute of the control.

Example:

<label for=”moreinfo”> Do you want more information? </label>
<input type=checkbox name=”moreinfo” id=”moreinfo” />

Textarea Tag

The textarea tag indicates a form field wherein the user can enter large amounts of text. An unlimited number of characters can be written in the text-area. The default font of the text area is fixed pitch.

Attributes of Textarea Tag

Name

The name attribute sets the name of the form field. It works in a similar way as in the input field.

Example:

<textarea name=”comments” > </textarea>

Cols and Rows

Cols indicate how many characters wide the textarea should be. Rows indicate how many rows should be there in the textarea. This attribute sets just the visible area of the text.

Example:

<textarea name=”comments” cols=40 rows=6 > </textarea>

Wrap

The wrap attribute describes how the text wraps at the end of lines. This attribute is given with some values, which can be:

Soft

Soft wraps long lines in the text area for easy editing. It does not send the carriage return to the server.

Hard

Hard looks similar to soft, but it sends the carriage returns to the server.

Off

Off does not wrap at all. It just displays and sends the text exactly as typed.

Example:

<textarea name=”comments” wrap=soft> </textarea>

These attributes can be illustrated with the help of an example:

Example:

 
<html>
<head>
<title> My list of jokes </title>
</head>
<body background ="myimage.jpg" text = “blue”>
 
<h1 align=center> My Registration Page </h1>
 
<form name="registration" action="http://expertrating.com/registration.html">

First name: <input type=text name="realname" /> <br/>

Last name: <input type=text name="sirname" /> <br/>
Password: <input type=password name="pass"/> <br/>
Re-Type Password: <input type=password name="repass"/>
<h2 align=center>Additional Information </h2>
 
SEX<br/>
 
<select name="sex">
<option value="001"> Male </option>
<option value="002"> Female </option>
</select><br/>
SELECTION OF JOKES<br/>
<select name=”jokenumber”>
<optgroup label=”Game jokes”>
<option value=”001”> Cricket jokes </option>
<option value=”002”> Golf jokes </option>
</optgroup>
 
<optgroup label=”Other jokes”>
<option value=”111”> Classic jokes </option>
<option value=”112”> Short jokes </option>
</optgroup>
</select><br/>
 
<label for=”moreinfo”> Do you want more information on jokes? </label>
<input type=checkbox name=”moreinfo” id=”moreinfo” /><br/><br/>
 
Enter your comments:
<textarea name=”comments” cols=40 rows=3 wrap=soft>
</textarea><br/><br/>
 
<button type=reset> Reset </button><br/>
<button type=submit>Send This </button>
 
</form>
</body>
</html>
 

This is how the web page looks:

           

 

 
     
Home  |  About Us  |  Privacy Policy  |  Site Map  |  FAQs  |  Contact Us
 
© ExpertRating 2015. All Rights Reserved.