Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
499 views

Forms and Frames in HTML Notes

Uploaded by

Broader
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
499 views

Forms and Frames in HTML Notes

Uploaded by

Broader
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 17

HTML Form

An HTML form is a section of a document which contains controls such as text fields, password
fields, checkboxes, radio buttons, submit button, menus etc.

An HTML form facilitates the user to enter data that is to be sent to the server for processing such
as name, email address, password, phone number, etc. .

Why use HTML Form


HTML forms are required if you want to collect some data from of the site visitor.

For example: If a user want to purchase some items on internet, he/she must fill the form such as
shipping address and credit/debit card details so that item can be sent to the given address.

HTML Forms
Processing is done on the passes data at the back-end. There are various forms available like text
fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.

Syntax:

<form action = “Script URL” method = “GET|POST”>


form elements like input, textarea, etc.
</form>

HTML FORMS ATTRIBUTES

Following is the list of commonly used form attributes:

Tags Description
action Process your passed data.
method GET and POST methods are used to upload data.
Specifies the target window where the result of the script will be
target
displayed.
To specify how the browser encodes the data before it sends it to
enctype
the server.
HTML FORM CONTROLS

There are different types of form controls to collect data. They are:

● Text Input Controls


● Checkboxes Controls
● Radio Box Controls
● Select Box Controls
● File Select boxes
● Hidden Controls
● Clickable Buttons
● Submit and Reset Button

TEXT INPUT CONTROLS

There are three types of text input controls. They are:

1. Single-line text input controls

It is used for items that require only one line of user input, such as search boxes or names. They
are created using HTML <input> tag.

2. Password input controls

This is also a single-line text input but it masks the character as soon as a user enters it. They are
also created using HTML <input> tag.

3. Multi-line text input controls

It is used when the user is required to give details that may be longer than a single sentence.
Multi-line input controls are created using HTML <textarea> tag.
SINGLE-LINE TEXT INPUT CONTROL ATTRIBUTES
Single-line text input controls are required at only one line of user input(such as search boxes or
names). They can be created using HTML <input> tag.

Following is the list of attributes for <input> tag for creating a text field.

Attributes Description
type indicates the type of input control
name gives a name to the control
value provides an initial value inside the control

size specifies the width of the text-input control in terms of characters

specifies a maximum number of characters a user can enter into


maxlength
the text box.

Example:

<html>
<head>
<title>Text Input Control</title>
</head>
<body>
<form >
Address: <input type = "text" name = "address" />
</form>
</body>
</html>
HTML PASSWORD INPUT CONTROL ATTRIBUTES
This is also a single-line text input but it masks the character as soon as a user enters it. They are
also created using HTML <input>tag but type attribute is set to password.

Following are the list of attributes for <input> tag for creating a text field.

Attributes Description
type indicates the type of input control
name gives a name to the control
value provides an initial value inside the control
size specifies the width of the text-input control in terms of characters

specifies a maximum number of characters a user can enter into


maxlength
the text box.

Example:

<html>
<head>
<title>Password Input Control</title>
</head>
<body>
<form >
user name : <input type = "text" name = "user_name" />
<br>
Password: <input type = "password" name = "password" />
</form>
</body>
</html>
MULTIPLE-LINE TEXT INPUT CONTROLS ATTRIBUTES
Multiple-Line text input controls are used when the user needs to give details that may be
longer. Multi-line input controls are created using HTML <textarea> tag.

Following are the list of attributes for <textarea> tag:

Attributes Description
name gives a name to the control
rows indicates the number of rows
size specifies the width of the text-input control in terms of characters
Example:
<html>
<body>
<form>
<textarea rows = "7" cols = "30" name = "description">
Enter the information
</textarea>
</form>
</body>
</html>
CHECK-BOX CONTROL ATTRIBUTES
Check-boxes are used when a user wants to select more than one option. They are created using
HTML <input> tag and the type attribute is set to a checkbox.

Following are the attributes for <checkbox> tag

Attributes Description

type indicates the type of input control

name gives a name to the control

value the value that is used if the checkbox is selected

if you want to select it by default then it is set to


checked
checked
Example:

<html>
<body>
<form>
<input type = "checkbox" name = "HTML" value = "on"> HTML
<input type = "checkbox" name = "CSS" value = "on"> CSS
</form>
</body>
</html>
RADIO BUTTON CONTROL ATTRIBUTES
Radio buttons are used when a user wants to select only one option out of many options. They
are also created using HTML <input> tag and the attribute type is set to the radio.

Following are the list of attributes for radio buttons

Attributes Description
type indicates the type of input control

name gives a name to the control

value the value that is used if the checkbox is selected

checked if you want to select it by default then it is set to checked

Example:

<html>
<head>
<title>Radio Box Control</title>
</head>
<body>
<form>
<input type = "radio" name = "Gender" value = "Male"> Male
<input type = "radio" name = "Gender" value = "Female"> Female
</form>
</body>
</html>
BUTTON CONTROLS ATTRIBUTES
You can create a clickable button using <input>tag by setting its type attribute to button.
Following are the list of attributes for button controls

Attributes Description

submit automatically submits a form

reset automatically resets form controls to their initial values

used to trigger a client-side script when the user clicks that


button
button.

creates a clickable button but we can use an image as the


image
background of the button.

Example:
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<input type = "submit" name = "submit" value = "Submit" />
<input type = "reset" name = "reset" value = "Reset" />
<input type = "button" name = "ok" value = "OK" />
<input type = "image" name = "imagebutton" src = "/html/images/image.png" />
</form>
</body>
</html>
HTML CODES

HTML <input> element


The HTML <input> element is fundamental form element. It
is used to create form fields, to take input from user. We can
apply different input filed to gather different information
form user. Following is the example to show the simple text
input.

Example:
<body>
<form>
Enter your name <br>
<input type="text" name="username">
</form>
</body>

Output:
HTML TextField Control
The type="text" attribute of input tag creates textfield
control also known as single line textfield control. The name
attribute is optional, but it is required for the server side
component such as JSP, ASP, PHP etc.

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

Output:
HTML <textarea> tag in form
The <textarea> tag in HTML is used to insert multiple-line
text in a form. The size of <textarea> can be specify either
using "rows" or "cols" attribute or by CSS.

Example:

<html>
<head>
<title>Form in HTML</title>
</head>
<body>
<form>
Enter your address:<br>
<textarea rows="2" cols="20"></textarea>
</form>
</body>
</html>

Output:
Label Tag in Form
It is considered better to have label in form. As it makes the code
parser/browser/user friendly.

If you click on the label tag, it will focus on the text control. To do so, you need to
have for attribute in label tag that must be same as id attribute of input tag.

<form>
<label for="firstname">First Name: </label> <br/>
<input type="text" id="firstname" name="firstname"/>
<br/>
<label for="lastname">Last Name: </label>
<input type="text" id="lastname" name="lastname"/>
<br/>
</form>
Output:
HTML Password Field Control
The password is not visible to the user in password field control.

<form>
<label for="password">Password: </label>
<input type="password" id="password" name="password"/> <br/>
</form>
Output:
HTML frames are used to divide your browser window into multiple sections where
each section can load a separate HTML document. A collection of frames in the
browser window is known as a frameset. The window is divided into frames in a
similar way the tables are organized: into rows and columns.

Disadvantages of Frames

There are few drawbacks with using frames, so it's never recommended to use
frames in your webpages −

• Some smaller devices cannot cope with frames often because their screen is not
big enough to be divided up.
• Sometimes your page will be displayed differently on different computers due
to different screen resolution.
• The browser's back button might not work as the user hopes.
• There are still few browsers that do not support frame technology.

Creating Frames

To use frames on a page we use <frameset> tag instead of <body> tag. The
<frameset> tag defines, how to divide the window into frames. The rows attribute of
<frameset> tag defines horizontal frames and cols attribute defines vertical frames.
Each frame is indicated by <frame> tag and it defines which HTML document shall
open into the frame.

DIFFERENT TYPE OF FRAMES IN HTML


One of the uses of frames has always been to load navigation bars in one frame and
then load main pages into a separate frame. A-frame tag defines one single window
frame within a <frameset>.

<frame> has browser support in Chrome, Internet Explorer, Mozilla, Safari and Opera
Mini.

The different and some commonly used attributes in the frame are attributes such as
border, scrolling, src, name, etc.
TYPES OF FRAME TAG
Following are the different types of frame tags:

The <frameset> Tag Attribute


1. Col: The col attribute gives the vertical frames. The width, however, can be

specified in 4 ways:

• Pixels: absolute values can be mentioned in pixels. If we have to create three

vertical frames, we can give the value: cols=”100,50,100”.

• Percentage: The percentage of the browser window can be mentioned. If we

have to create three vertical frames, we can give the value:

cols=”40%,20%,40%.”

We can also make use of the wildcard here (*) and let the wildcard take the

remaining of the window, which remains un-mentioned.

cols=”30%,*,30%”

2. Rows: The row attribute gives the horizontal frames. It specifies the rows in a

frameset. If we have to create three horizontal frames we use:

Eg: Rows=”10%,80%,10%’.

We can also set the height of each row as we had done in the case of columns

previously.
CREATE VERTICAL FRAMES:
<html>
<head>
<title>Frame tag</title>
</head>
<frameset cols="25%,50%,25%">
<frame src="frame1.html" >
<frame src="frame2.html">
<frame src="frame3.html">
</frameset>
</html>
CREATE HORIZONTAL FRAMES:

<html>

<head>

<title>Frame tag</title>

</head>

<frameset rows="30%, 40%, 30%">

<frame name="top" src="frame1.html" >

<frame name="main" src="frame2.html">

<frame name="bottom" src="frame3.html">

</frameset>

</html>

You might also like