Scribd
Upload
15 views6 pages

3 4 2024 (Notes)

The document discusses HTML form elements like <input>, <label>, <select>, <textarea>, and <button>. It explains what each element is used for and provides examples of how to use them in forms.

Uploaded by

minakshisutar98
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
15 views6 pages

3 4 2024 (Notes)

The document discusses HTML form elements like <input>, <label>, <select>, <textarea>, and <button>. It explains what each element is used for and provides examples of how to use them in forms.

Uploaded by

minakshisutar98
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

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
<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="3">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
Allow Multiple Selections:
Use the multiple attribute to allow the user to select more than one value:
Example
<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="4" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</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>

You might also like