HTML - Frames and Input Elements

Frames and Input Elements

Frames and Input Elements

Introduction

HTML Forms are used to select different kinds of user input.

Forms

A form is an area that can contain form elements So simply you will have to irst understand "What is Form". You must have seen the forms on the internet. Now days there is too much craze of the forms on the internet. At least if you have an e-mail ID then Sure you have filled the Form of e-mail registration during the creation of your e-mail account. You fills all the information in the form, like your Name, Registration ID, password, address, Qualification and many more clickable buttons.

So once again take a look on the form:

Now you saw the sample of Yahoo ID Registration form containing some of elements of the form.

Form elements are elements that allow the user to enter information like:

· text fields

· text area fields

· drop-down menus

· radio buttons

· checkboxes, etc. in a form.

Form Tags

Data Type	Description
<Form>	Defines a form for user input.
<input>	Defines an input field.
<textarea>	Defines a text-area (a multi-line text input control).
<label>	Defines a label to a control.
<fieldset>	Defines a field set.
<select>	Defines a selectable list (a drop-down box).
<optgroup>	Defines an option group.
<option>	Defines an option in the drop-down box.
<button>	Defines a push button.

<form> Tag

A form is defined with the <form> tag. Form is the rectangular area in which all the input elements are defined. Its is used inside the body section of HTML file. And it is all done by using the <input> tag. <input> tag is an open tag hence do not need the </input> tag.

Now see how body tag is defined below the body tag.

Format:

The Form's Action Attribute and the Submit Button

name	name attribute defines the name of the form. Because a page can have more than one form.
action	action defines the action of form. (to which this form have to send its values).
method	method defines the type of method used to send the values of the form.
method	method have two types of values. i.e. method="post", method="get".

When the user clicks on the "Submit" button, the content of the form is sent to another file. The form's action attribute defines the name of the file to send the content to. The file defined in the action attribute usually does something with the received input.

example

page in browser will look like

<form name="input" action="forms_regisration.asp"
method="post">
Username:
<input type="text" name="user" size="20"><br>
Password :<input type="password" name="pass" size="20">
<br><input type="submit" value="Submit">
</form>

Username
Password

If you type some characters in the text field above, and click the "Submit" button, you will send your input to a page called "forms_regisration.asp". That page will show you the received input.

<Input>Tag

The most used form tag is the <input> tag. The type of input is specified with the type attribute. There are the various input elements. To use these input elements in form you will have to define the Input element in the "type" attribute in the <input> tag.

Attributes of the <input> tag

type	type attribute defines the type of input element. e.g. <input type="text" or password or checkbox or radio button or Drop-down menu>
name	name defines the name of the input element. To access the value of input elements better he provide names to the elements e.g <input type="checkbox" name="firstname">
value	value attribute defines the default value of input element.

Text Fields

Text fields are used when you want the user to type letters, numbers etc. in a form.

Format:

<form> First name: <input type="text" name="firstname"></form>

example

page in browser will look like

<form>
First name: <input type="text" name="firstname">
<br>
Last name: <input type="text" name="lastname">
</form>

First name
Last name

Note that the form itself is not visible. Also note that in most browsers, the width of the text field is 20 characters by default. You can check them by typing in Text fields.

Password Fields

Text fields are used when you want the user to enter the password in the form of letters, numbers etc. in a form, but you do not want to display the text. Then you should use this field.

Whenever user types in the field the star or dot character appears in the text box.

Format:

<form>Password1: <input type="password" name="Password1"></form>

example

page in browser will look like

<form> Password1 : <input type="password" name="Password1">
<br>
Password2: <input type="Password" name="Password2" value="abc123">
</form>

Password1
Password2

In the example the password2 field has the default value "abc123". You can check them by typing in password fields.

Radio Buttons

Radio Buttons are used when you want the user to select one of a limited number of choices.

Format:

example

page in browser will look like

<form>
<input type="radio" name="sex" value="male"> Male
<br>
<input type="radio" name="sex" value="female"> Female
</form>

	Male
	Female

Note that only one option can be chosen. you can check them by clicking on radio buttons.

Checkboxes

Checkboxes are used when you want the user to select one or more options of a limited number of choices.

Format:

Example

Page in browser will look like

	I have a bike.
	I have a car.

You can check them by clicking on checkboxes.

<textarea> Tag

Textarea tag is used when the user want to give big information in the form like message. <textarea> is the only element used to send large message to other location. It can contain number of lines and columns.

Format:

Example	Page in browser will look like
<form> write your message here<br> <textarea rows="4" name="S1" cols="22"></textarea> </form>	write your message here

Name can given of yours choice. You can check the textarea field by writing in it.

The <label> tag

Defines a label to a control. If you click the text within the label element, it is supposed to toggle the control.

The "for" attribute binds a label to another element. Set the value of the "for" attribute equal to the value of the "id" attribute of the related element.

Format:

Example:

Attributes:

for defines the name of the element for which this label is made.

Example

Page in browser will look like

Name

The <fieldset> tag

The fieldset element draws a box around its containing elements.

Example

Page in browser will look like

<fieldset>
first name <input type="text" size="3">
</input>
last name <input type="text" size="3">
</input>
</fieldset>

First name
Last name

The <select> tag

The select element creates a drop-down list. Use this tag in the form element to accept user input.

Example	Page in browser will look like
<select> <option SELECTED VALUE=" delhi "> delhi </option> <option VALUE=" calcutta "> calcutta </option> <option VALUE="mumbai">mumbai</option> <option VALUE="chennai">chennai</option> </select>

Attribute	Value	Description
disabled	disabled	When set, it disables the drop-down list
multiple	multiple	When set, it specifies that multiple items can be selected at a time
name	unique_name	Defines a unique name for the drop-down list
size	number	Defines the number of visible items in the drop-down list

The <optgroup> tag

Defines an option group. This element allows you to group choices. When you have a long list of options, groups of related choices are easier to handle.

Example	Page in browser will look like
<select> <optgroup label="Computers"> <option value ="BE(CS)">BE(CS)</option> <option value ="MCA">MCA</option> </optgroup> <optgroup label="Electronics"> <option value ="BE(ECE)">BE(ECE)</option> <option value ="MSc(ECE)">MSc(ECE)</option> </optgroup> </select>

The <option> tag

The option element defines an option in the drop-down list. The <option> tag can be used without any attributes, but you usually need the value attribute, which indicates what is sent to the server. Use this tag in conjunction with the select element, elsewhere it is meaningless.

Example	Page in browser will look like
<select> <option value ="BE(CS)">BE(CS)</option> <option value ="MCA">MCA</option> <option value ="BE(ECE)">BE(ECE)</option> <option value ="MSc(ECE)">MSc(ECE)</option> </select>

Optional Attributes

disabled	Specifies that the option should be disabled when it first loads value="disabled"
label	Defines a label to use when using <optgroup> value="text"
selected	Specifies that the option should appear selected (will be displayed first in list) value="selected"
value	Defines the the value of the option to be sent to the server. value="text"

Buttons

Buttons are used in the forms. these are the clickable elements.

Format:

Buttons are of three types:

Reset button

When you click on the reset button the value of all the elements gets clear or you may say elements gets initialized to their default value.

Format:

Submit button

When you click on the submit button the value of all the elements gets submitted to the address mentioned in the <form> tag's "action" attribute.

Format:

Normal button

It is also called as push button. When you click on the push button, it makes a function call to the function defined in the "onclick" attribute.

Format:

Example:

<html>
<head>
<title>New Page 1</title>
</head>
<body>
<form method="POST" action="abc.asp">
<b>
<font color="#FF0000">REGISTRATION  FORM</font></b><br>
<br>
First Name
<input type="text" name="firstname" size="15"><br>
Last Name
<input type="text" name="T2" size="15"><br>
E-mail ID
<input type="text" name="T3" size="15"><br>
Password
<input type="password" name="T4" size="15"></p>
<fieldset> Birthday:
<select name=".bmon">
<option value selected>[Select One]</option>
<option value="0">January</option>
<option value="1">February</option>
<option value="2">March</option>
<option value="3">April</option>
<option value="4">May</option>
<option value="5">June</option>
<option value="6">July</option>
<option value="7">August</option>
<option value="8">September</option>
<option value="9">October</option>
<option value="10">November</option>
<option value="11">December</option>
</select><input maxLength="2" size="2" name=".bday"><input maxLength="4" size="4" name=".byear">,
<font class="content_help"> (Month DD , YYYY)
</font></fieldset> <br>
Address<br>
<textarea rows="5" name="S1" cols="22"></textarea> <br>
<br>
Qualification:
<select>
<optgroup label="Computers">
<option value ="BE(CS)">BE(CS)</option>
<option value ="MCA">MCA</option>
</optgroup>
<optgroup label="Electronics">
<option value ="BE(ECE)">BE(ECE)</option>
<option value ="MSc(ECE)">MSc(ECE)</option>
</optgroup>
</select><br>
Hobbies: <input type="checkbox" name="C1" value="ON"> Reading
<input type="checkbox" name="C2" value="ON"> Painting
<input type="checkbox" name="C3" value="ON">Singing
<input type="checkbox" name="C4" value="ON"> fighting<br>
Sex
<input type="radio" value="v3" name="R1" checked>Male
<input type="radio" name="R1" value="V4">Female<br>
<br>
<input type="submit" value="Submit" name="B1">
<input type="reset" value="Reset" name="B2">
</form>
</body>
</html>

Page in browser will look like:

So now you saw how simple it is to create the form in HTML.

« Previous

SHARE THIS PAGE

HTML - Frames and Input Elements

0 Comments:

Post a Comment