3 4 2024 (Notes)

The HTML <form> Elements
The HTML <form> element can contain one or more of the following form
elements:
1.<input>: textbox,radio,checkbox,button and submit button.

2.<label> : label for the elements.
3.<select>:it is same as the drop down list.
4.<textarea> : big textbox used to enter multiple line of text.
5.<button> : used to add button in the webpage.
6.<fieldset> : used to organise the input elements.
7.<legend> : indicates name for the fieldset.
8.<datalist> : same as <select> tag.
9.<option> : used in the <select> tag.
10.<optgroup>
1.The <input> Element
The HTML <input> element is the most used form element.
An <input> element can be displayed in many ways,

depending on the type attribute.
The <input> tag has type, name, id and value attributes
Here are some examples:
Type Description
<input type="text"> Displays a single-line text input field
<input type="radio"> Displays a radio button (for selecting one of many

choices)
<input type="checkbox"> Displays a checkbox (for selecting zero or more of
many choices)
<input type="submit"> Displays a submit button (for submitting the form)
<input type="button"> Displays a clickable button
2.The <label> Element
Notice the use of the <label> element in the example above.
The <label> tag defines a label for many form elements.
The <label> element is useful for screen-reader users, because the

screen-reader will read out loud the label when the user focuses on the
input element.
The <label> element also helps users who have difficulty clicking on
very small regions (such as radio buttons or checkboxes) - because when
the user clicks the text within the <label> element, it toggles the radio
button/checkbox.
The for attribute of the <label> tag should be equal to the id attribute of
the <input> element to bind them together.
3. The <select> Element
The <select> element defines a drop-down list or combo box.
Example
<label for="cars">Choose a car:</label>

<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
Example
<option value="fiat" selected>Fiat</option>
Visible Values:
Use the size attribute to specify the number of visible values:
Example
<select id="cars" name="cars" size="3">
</select>
Allow Multiple Selections:
Use the multiple attribute to allow the user to select more than one value:
Example
<select id="cars" name="cars" size="4" multiple>
</select>
4.The <textarea> Element
The <textarea> element defines a multi-line input field (a text area):
Example
Address : <textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
The rows attribute specifies the visible number of lines in a text area.
The cols attribute specifies the visible width of a text area
7.The <button> Element

The <button> element defines a clickable button:
Example
<button type="button" onclick="alert('Hello

World!')">Click Me!</button>
Frames
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.
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.
Dividing the frames in rows.

<!DOCTYPE html>
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset rows = "10%,80%,10%">

<frame name = "top" src = "1.html" />
<frame name = "main" src = "2.html" />
<frame name = "bottom" src = ‘3.html" />
</frameset>
</html>
Dividing the frames in to columns
<!DOCTYPE html>
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset cols = "25%,50%,25%">

<frame name = "left" src = "1.html" />
<frame name = "center" src = "2.html" />
<frame name = "right" src = "3.html" />
</frameset>
</html>

3 4 2024 (Notes)

Uploaded by

Copyright:

Available Formats

3 4 2024 (Notes)

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

3 4 2024 (Notes)

Uploaded by

Copyright:

Available Formats

The HTML <form> Elements

1.<input>: textbox,radio,checkbox,button and submit button.

An <input> element can be displayed in many ways,

The <input> tag has type, name, id and value attributes

Here are some examples:

<input type="text"> Displays a single-line text input field

<input type="radio"> Displays a radio button (for selecting one of many

<input type="submit"> Displays a submit button (for submitting the form)

<input type="button"> Displays a clickable button

2.The <label> Element

Notice the use of the <label> element in the example above.

The <label> tag defines a label for many form elements.

The <label> element is useful for screen-reader users, because the

3. The <select> Element

The <select> element defines a drop-down list or combo box.

<label for="cars">Choose a car:</label>

7.The <button> Element

<button type="button" onclick="alert('Hello

The rows attribute of <frameset> tag defines horizontal frames and

cols attribute defines vertical frames.

Dividing the frames in rows.

<frameset rows = "10%,80%,10%">

<frameset cols = "25%,50%,25%">

You might also like