This tag defines an input area within a form. It asks the user to input information in one of several ways. The different ways of input are specified by “type attribute. This attribute can accept text, radio, checkbox, passwords submit, reset, image, hidden, etc. as its value. Each of them will be discussed separately in the coming sections.
We’ll be covering the following topics in this tutorial:
Text fields
The most common “type” of form <INPUT> is text. It presents the user with a prompt for a single line of text. These fields are commonly used for a name address, email address, country, postal code etc. It is a blank area within a form and is the place for visitor-supplied information.
Syntax: <INPUT type = "text" name= "text-id" value= "default-text" size= "n" maxlength = "m" read only>
Name: To label the content. This name is not visible to the user and must be unique within the form.
Value: To supply initial text to the text field and is optional. The content of this attribute will be shown on the text field, unless the user changes it.
Size: To specify the physical size of the text input box. The default value is usually a length of 20 characters.
Maxlength: To set the number of characters a user can input. This value should not be less than the value of the size attribute otherwise user won’t be able to type to the end of the box and might get confused. The default value of max length is unlimited.
Readonly: To lock the predefined content within the text field and the content won’t be editable further.
The following code shows the use of above-mentioned attributes:
<html>
<head><title> text fields</title></head>
<body bgcolor=“pink”>
<p align =“center”><b>admission form</b>
<form>
<p>
<input type =“text” name=“name” value=“enter your name:” size=“25”maxlength=“30”> name<br><br>
<input type =“text” name=“address” size=“25” maxlength=“30”> address<br><br>
</form>
</body>
</html>
In the above example, two text fields are included. Each of these fields has a unique name. First field has an initial value, which appears inside the input box. The two text fields are assigned descriptive labels that appeal’ on the right of them. If you want the label to come to the left then it should be given before the input tag.
Passwords
Password fields are similar to text fields, except the contents of the field are not visible on the screen. It displays * * * * (asterisks) instead or the actual input.
These fields are mainly used for confidential contents, To establish a password field just set type = “password” in the <INPUT> tag
Syntax :
<INPUT type = “password” name = “password-id” Value = “default-text” size = “n” Maxlength = “m” readonly >
All the attributes have same meaning as in the text field except that type is “password”. The code for password field is as shown below:
<html> <head> <title> text fields</title> </head> <body bgcolor="pink"> <p align ="center"><b>admission form</b> <form> <p> <input type ="text" name="name" value="enter your name:" size="25"maxlength="30"> name<br><br> <input type ="password" name="passwd" size="25" maxlength="30"><br><br> <input type ="text" name="address" size="25" maxlength="30"> address<br><br> </form> </body> </html>
Radio Buttons
Radio buttons are mutually exclusive i.e. they allow the user to choose one of the several options. Selecting one turns the other options off. These buttons are viewed in the browser as small circles with a prompt and the selected one appears with a solid dot in it.
Syntax: <INPUT type = "radio" name = "radio-id" Value = "choice-id" checked>
Name: Applies to the collection of buttons, not just to a particular item. Browsers use the name attribute to decide which buttons belong to the same group and therefore which ones are to set and unset as a group.
Value: It is the value assigned by the user. These are predefined and they do not accept other input. Each radio button must be assigned a value.
Checked: It causes the radio button to be on when the form is first created. It is the default selection.
The code for Radio buttons is as shown below:
<html> <head> <title> text fields</title></head> <body bgcolor="pink"> <p align ="center"> <b>admission form</b> <form> <p> <input type ="text" name="name" value="enter your name:" size="25" maxlength="30"> name<br><br> <input type ="password" name="passwd" size="25" maxlength="30"><br><br> <input type ="text" name="address" size="25" maxlength="30"> address<br><br> <input type="radio" name="sex" value="male" checked>male<br> <input type="radio" name="sex" value="female" >female<br> </form> </body> </html>
In the above example two radio buttons are added in our form and one is checked by default. Notice that related radio buttons share the same “name” but different values. The data sent by the group of radio buttons when the form is submitted is the value attribute of the selected radio buttons. These values are not seen by the user and are used at the time of form processing.
Checkboxes
An INPUT tag with attribute type =”checkbox” offers the user an “on” or “off” switch. Each check box works independently from the others, visitors can select or deselect any combination of checkboxes use of these boxes is appropriate for open questions or questions that have more than one “right” answer. Checkboxes appear as square boxes and contain a checkmark when act as a checkbox is switch on when the form is submitted its value attribute is submitted as the form data for the named form component.
Syntax : <INPUT type = "Checkbox" name ="box -id" Value = "choice-id" checked>
Name: To specify separate name for each checkbox. Unlike radio buttons, each item has a separate label. Although the checkboxes visually appear as a set, logically the items are completely separate.
Value: To provide a descriptive value for each checkbox.
Checked: To specify default selection.
<html> <head><title> text fields</title></head> <body bgcolor="pink"> <p align ="center"><b>admission form</b> <form> <p> <input type ="text" name="name" value="enter your name:" size="25" maxlength="30"> name<br><br> <input type ="password" name="passwd" size="25" maxlength="30"><br><br> <input type ="text" name="address" size="25" maxlength="30"> address<br><br> <input type="radio" name="sex" value="male" checked>male<br> <input type="radio" name="sex" value="female" >female<br> <input type="checkbox" name="vehical" value=" vehical" checked>own vehical<br> <input type="checkbox" name="hostel" value=" hostel" >hostel required<br> </form> </body> </html>
Pull Down Lists
A pull down menu lets the user select one choice out of many possible choices. One nice aspect of pull-down menus is that all choices do not have to be seen on the screen and are normally hidden. They occupy minimal amount of space as it displays only on item of the list. In this kind of input field you use <SELECT>instead of <INPUT> and it has a closing tag.
Syntax : <SELECT name = "text-id" size="n" multiple > <OPTION Value = "Choice-id" selected> Text Label -1 </OPTION> ............. ............. <OPTION Value = "Choice id m" selected> TEXT LABEL. - m </OPTION> </SELECT>
Name: To establish a name for the select field and is used for form processing.
Size: The number of options you want to show in the window. By default its value is one, specifying size value greater than one turns the pull down list into a scrolling list. In the SELECT field, by default, the user can select only one field.
Multiple: To set the SELECT field to accept any number of options. To select multiple options press ctrl key and click on the options.
<OPTION> Tag: To include the list items. For each list item there must be an <option> tag “The closing” tag is optional.
Value: Whenever a form is submitted, the options in the pull down list are passed to the form handles using the “Value” attribute. If the “Value” attribute is omitted the contents of the option are used instead.
Selected: This attribute is used to specify the default other than the first option. More than the first option- More than one option can be made default by using this attribute but in that case you just include the multiple attribute, otherwise the last option having selected attribute will be considered as default. The defaults will appear when the form is loaded or reset. The following lines of code will add a pull down list to our sample form.
<html>
<head><title> text fields</title></head>
<body bgcolor=“pink”>
<p align =“center”><b>admission form</b>
<form>
<p>
<input type =“text” name=“name” value=“enter your name:” size=“25” maxlength=“30”> name<br><br>
<input type =“password” name=“passwd” size=“25” maxlength=“30”><br><br>
<input type =“text” name=“address” size=“25” maxlength=“30”> address<br><br>
<input type=“radio” name=“sex” value=“male” checked>male<br>
<input type=“radio” name=“sex” value=“female” >female<br>
<select name =“country”><option value = “india”>india
<option value = “america”> america
<option value = “australia”> australia
<option value = “new zealand”> new zealand
<option value = “china”> china
</select><b>country</b>
</form>
</body>
</html>
But if the “multiple” attribute is included, the list will become a scrolling list. This attribute is added in the <SELECT> tag as shown below:
<select name="country" multiple> <option value="india">india <option value=" america" selected>america <option value="australia">australia <option value="new zealand">new zealand <option value="china">china </select><b>country</b>
The TEXTAREA tag
This tag is used to set an area within a form in which the user can type a large amount of text. The textarea’s are basically used for giving comments and free form feedback from visitors.
Syntax : <TEXTAREA name = "text-id" rows = "n" Cols = "m" Wrap= "Virtual physically off" read only> Initial content </TEXT AREA>
TEXTAREA: Sets an area in a form for lengthy visitor input. Initial content for the text area goes between the opening & closing tags. Rows: This attribute specifies the height of the text area. Cols: This attribute specifies the width of the text area.
Wrap: If you turn wrap off the text is handled as one long sequence of text without line breaks. If you set it to virtual the text appears on your page as if it recognized line breaks but when the form is submitted the line breaks are turned off. If you set it to physical the text is submitted exactly as it appears on the screen line breaks included.
Readonly: It prevents the user to alter the initial content.
The following lines of code will add a TEXTAREA in our sample form.
<html>
<head>
<title> text fields</title></head>
<body bgcolor=“pink”>
<p align =“center”><b>admission form</b>
<form><p>
<input type =“text” name=“name” value=“enter your name:” size=“25” maxlength=“30”> name<br><br>
<input type =“password” name=“passwd” size=“25” maxlength=“30”><br><br>
<input type =“text” name=“address” size=“25” maxlength=“30”> address<br><br>
<input type=“radio” name=“sex” value=“male” checked>male<br>
<input type=“radio” name=“sex” value=“female” >female<br>
<select name =“country”>
<option value = “india”>india
<option value = “america”> america
<option value = “australia”> australia
<option value = “new zealand”> new zealand
<option value = “china”> china
</select><b>country</b>
<textarea name=“comments” rows=2 cols=20 wrap=“virtual:”> place your comments here: </textarea>
<b> comments </b>
</form>
</body>
</html>
Reset And Submit Buttons
SUBMIT- After filling up the form, the user needs to submit the information. An <INPUT> tag with type = submit provides a button that submits the information in the completed form to the URL, given as the action attribute of the FORM tag.
The information is submitted using the HTTP request type specified by Form’s method attribute discussed in details in topic entitled (“Processing Forms”)
Syntax <INPUT type = "submit" Value = "button label text" >
Value: This attribute will change the text mentioned on the button just substitute your text in the value attribute. By default “submit” as written over the button. The button size will be controlled directly by the text length.
RESET: The reset value of the type attribute clears all form entries to the default one or leaves them blank if no defaults are specified Not al HTML forms will use this feature, but it can help users to start afresh or if they want to reconsider the default options.
Syntax <INPUT type = "submit" Value = "button label text" >
The “Value” attribute again is used to specify the text on the button. These buttons can be placed anywhere in the form. But the best place for them is below all the other input fields. The following lines of code will add these buttons to our sample form.
<html>
<head><title> text fields</title></head>
<body bgcolor=“pink”>
<p align =“center”><b>admission form</b>
<form><p>
<input type =“text” name=“name” value=“enter your name:” size=“25” maxlength=“30”> name<br><br>
<input type =“password” name=“passwd” size=“25” maxlength=“30”><br><br>
<input type =“text” name=“address” size=“25” maxlength=“30”> address<br><br>
<input type=“radio” name=“sex” value=“male” checked>male<br>
<input type=“radio” name=“sex” value=“female” >female<br>
<select name =“country”>
<option value = “india”>india
<option value = “america”> america
<option value = “australia”> australia
<option value = “new zealand”> new zealand
<option value = “china”> china
</select><b>country</b>
<textarea name=“comments” rows=2 cols=20 wrap=“virtual:”> place your comments here: </textarea> <b> comments </b>
<p align=center>
<input type=“submit” value=“submit”><input type=“reset” value=“reset”>
</form>
</body>
</html>
An image can also be used for submit button. The image value of the “type” attribute provides a graphical submit button. It works exactly same as the submit button.
Syntax
<INPUT type = “image” src = “image_url” height = “n” width = “m”alt = “alternative text “ “border = 0” >
src: This attribute gives the URL of the image source file.
Width: To specify the width of image.
Height: To specify the height of image.
Alt: On rolling mouse over the image, the text mentioned is displayed. If someone is running without images they can still submit the form.
Border: To specify border for the image. In the syntax it turns off the border. The image value is by default for a submit button only. It cannot make a reset image button. The following code adds an image submit button to our sample form.
<html>
<head><title> text fields</title></head>
<body bgcolor=“pink”>
<p align =“center”><b>admission form</b>
<form>
<p>
<input type =“text” name=“name” value=“enter your name:” size=“25” maxlength=“30”> name<br><br>
<input type =“password” name=“passwd” size=“25” maxlength=“30”><br><br>
<input type =“text” name=“address” size=“25” maxlength=“30”> address<br><br>
<input type=“radio” name=“sex” value=“male” checked>male<br>
<input type=“radio” name=“sex” value=“female” >female<br>
<select name =“country”>
<option value = “india”>india
<option value = “america”> america
<option value = “australia”> australia
<option value = “new zealand”> new zealand
<option value = “china”> china
</select><b>country</b>
<textarea name=“comments” rows=2 cols=20 wrap=“virtual:”> place your comments here: </textarea> <b> comments </b>
<p align=center>
<input type=“image” src=“c:\windows\hlpglobe.gif” alt=“submit” width = 55 height = 40>
<input type=“reset” value=“reset”>
</form>
</body>
</html>
Dinesh Thakur holds an B.C.A, MCDBA, MCSD certifications. Dinesh authors the hugely popular