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>
