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:
<body>
<form>
<input>
<input>
</form>
</body>


<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.



Frames and Input Elements

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:
<form><input type="radio" name="sex" value="male"> Male<br></form>

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:
<form><input type="checkbox" name="Bike">I have a bike.<br></form>

Example
Page in browser will look like
<form>
<input type="checkbox" name="Bike" value="I have a bike."> Male
<br>
<input type="checkbox" name="car" value="I have a car.">I have a car.
</form>
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:
<textarea rows="6" name="S1" cols="27"></textarea>

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:
<label for="element_name">Last Name:</label>

Example:
<label for="name">Last Name</label>

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

Example
Page in browser will look like
<label for="name"> Name</label>
<input type="text" name="name" id="name" />
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

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.

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:
<input type="button_type"" value="value_of_button" name="button_name">

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:
<input type="Reset" value="Reset" name="B1">


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:
<input type="submit" value="Submit" name="B1" >


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:
<input type="button" value="Button" name="B3" onclick="abc()" >

Example:

<html>
<head>
<title>New Page 1</title>
</head>
<body>
<form method="POST" action="abc.asp">
<b>
<font color="#FF0000">REGISTRATION&nbsp; 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.


Comments

Post a Comment

Popular posts from this blog

Multimedia

Multimedia Introduction In multimedia, you will learn how to provide the songs, video and picture (images) in your web page. How it will feel to you that whenever you open your web page it starts singing, playing movie, or display your family picture. You can learn all of these things very easily. Just go on reading the Chapter and learn the Magic of the multimedia elements. Working with Images In this section you will learn about "how the images can be used in HTML". 1. How you can create a page with image as background. 2. How you can make a picture as a hyperlink to another file (any type of file). How to Hyperlink an Image To hyperlink an image first we have to insert the image on the web page. So question is how to insert the image on the web page. In ...
Read more

1.Introduction of HTML

Image
Introduction of HTML What is HTML? HTML is a language made for creating the web pages for the websites. By using HTML language the even a child can make his web pages or even his own website so why not you? Introduction of HTML Why do Need HTML? As the HTML is a very easy language for creating the  web pages. It can be learned in few hours or in few days.  It is the basic format of the HTML file it can be displayed  on mostly operating system which supports the web browser. With the help of HTML you can easily create a webpage. Basics of HTML What is an HTML File? 1. HTML stands for Hyper Text Markup Language. 2. An HTML file is a text file containing small markup tags. 3. The markup tags tell the Web browser how to display the page. 4. An HTML file must have an htm or html file extension. An...
Read more

HTML Lists

Image
HTML Lists Introduction In HTML there are three types of list ordered, unordered and definition lists. With the name itself you might be understanding that what is list. Yes you are thinking in the right way. It is the list of anything e.g. list of items, list of books. Hope now you are clear about the List element of the HTML. Now the question is that, can you create the list of items in the web page? Certainly not, But do not worry with the help of this small chapter you can create any type of lists on the your web page very easily. And it will take few of your minutes to learn. So lets Begain! Unordered Lists An unordered list is a list of items. The list items are marked with bullets (typically small black circles), it does not have numbers in the list. An unordered list starts with the <ul> tag and end with </ul>. list items are def...
Read more