Scribd
Upload
8 views4 pages

HTML Form

The document provides an overview of various HTML <form> elements including <input>, <label>, <select>, <textarea>, <button>, <fieldset>, <legend>, <datalist>, <output>, <option>, and <optgroup>. Each element is described with its purpose and includes examples of usage. It highlights the importance of these elements for creating interactive and accessible web forms.

Uploaded by

Rishab Kumar
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
8 views4 pages

HTML Form

The document provides an overview of various HTML <form> elements including <input>, <label>, <select>, <textarea>, <button>, <fieldset>, <legend>, <datalist>, <output>, <option>, and <optgroup>. Each element is described with its purpose and includes examples of usage. It highlights the importance of these elements for creating interactive and accessible web forms.

Uploaded by

Rishab Kumar
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/ 4

The HTML <form> Elements

The HTML <form> element can contain one or more of the following form
elements:

• <input>
• <label>
• <select>
• <textarea>
• <button>
• <fieldset>
• <legend>
• <datalist>
• <output>
• <option>
• <optgroup>

The <input> Element


One of the most used form elements is the <input> element.

The <input> element can be displayed in several ways, depending on


the type attribute.

Example
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">

The <label> Element


The <label> element defines a label for several form elements.

The <label> element is useful for screen-reader users, because the screen-
reader will read out loud the label when the user focus on the input element.

The <select> Element


The <select> element defines a drop-down list:

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>

The <textarea> Element


The <textarea> element defines a multi-line input field (a text area):

Example
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

Example 2
<textarea name="message" style="width:200px; height:600px;">
The cat was playing in the garden.
</textarea>

The <button> Element


The <button> element defines a clickable button:

Example
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
The <fieldset> and <legend> Elements
The <fieldset> element is used to group related data in a form.

The <legend> element defines a caption for the <fieldset> element.

Example
<form action="/action_page.php">
<fieldset>
<legend>Personalia:</legend>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>

HTML Form Elements


Tag Description

<form> Defines an HTML form for user input

<input> Defines an input control

<textarea> Defines a multiline input control (text area)


<label> Defines a label for an <input> element

<fieldset> Groups related elements in a form

<legend> Defines a caption for a <fieldset> element

<select> Defines a drop-down list

<optgroup> Defines a group of related options in a drop-down list

<option> Defines an option in a drop-down list

<button> Defines a clickable button

You might also like