- Introduction To HTML
- HTML Editors
- HTML Basic Examples
- HTML Elements
- HTML Attributes
- HTML Headings
- HTML Paragraphs
- HTML Styles
- HTML Formatting Elements
- HTML Quotation
- HTML Comments
- HTML Colors
- HTML Styles - CSS
- HTML Links
- HTML Images
- HTML Tables
- HTML Lists
- HTML Block And Inline
- HTML Class
- HTML Id
- HTML Iframes
- HTML JavaScript
- HTML File Paths
- HTML Head
- HTML Layout
- HTML Responsive
- HTML Computer Code
- HTML Semantic
- HTML Forms
- HTML Form Attributes
- HTML Form Elements
- HTML Input Types
- HTML Input Attributes
- HTML Input Form Attributes
- HTML Canvas
- HTML SVG
- HTML Media
- HTML Video
- HTML Audio
- HTML YouTube
HTML Form Elements
The HTML Form Elements
The HTML <form>
element may contain one or more of the following form elements: input, select, and submit.
<input>
<label>
<select>
<textarea>
<button>
<fieldset>
<legend>
<datalist>
<output>
<option>
The Input Element
<input>
is one of the most frequently used form elements.
Depending on the type attribute, the <input>
element can be displayed in a variety of ways.
<!DOCTYPE html>
<html>
<body>
<h2>The input Element</h2>
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
The Label Element
The <label>
element defines a label for several form elements.
The <label>
element is advantageous for screen-reader users, as the screen-reader will read the label aloud when the user focuses on an input element.
The <label>
element also aids users who have trouble clicking on very small regions (such as radio buttons or checkboxes), as clicking the text within the <label>
element toggles the radio button/checkbox.
The for attribute of the <label>
tag must equal the id attribute of the <input>
element in order to bind the two elements together.
The Select Element
The <select>
element defines a drop-down list:
<!DOCTYPE html>
<html>
<body>
<h2>The select Element</h2>
<p>The select element defines a drop-down list:</p>
<form action="/action_page.php">
<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
<option value="volvo">Maruti</option>
<option value="saab">TATA</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<input type="submit">
</form>
</body>
</html>
Visible Values
Size attribute is used to specify the number of visible values:
<html>
<body>
<h2>Visible Option Values</h2>
<p>Use the size attribute to specify the number of visible values.</p>
<form action="/action_page.php">
<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="3">
<option value="maruti">maruti</option>
<option value="tata">TATA</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select><br><br>
<input type="submit">
</form>
</body>
</html>
Allow Multiple Selections
Utilize the multiple attribute to permit the user to select multiple values.
<html>
<body>
<h2>Allow Multiple Selections</h2>
<p>Use the multiple attribute to allow the user to select more than one value.</p>
<form action="/action_page.php">
<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="4" multiple>
<option value="mariti">Maruti</option>
<option value="tata">TATA</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select><br><br>
<input type="submit">
</form>
<p>Hold down the Ctrl (windows) / Command (Mac) button to select multiple options.</p>
</body>
</html>
The Textarea Element
The <textarea>
element defines a multi-line input field (a text area):
The cat was playing in the garden.
</textarea>
The Button Element
The <button>
element defines a button that can be clicked:
<html>
<body>
<h2>The button Element</h2>
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
</body>
</html>
The Fieldset And Legend Elements
The <fieldset>
element is used to organise related form data.
The <legend>
element specifies a label for the <fieldset>
element.
<html>
<body>
<h2>Grouping Form Data with Fieldset</h2>
<p>The fieldset element is used to group related data in a form, and the legend element defines a caption for the fieldset element.</p>
<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>
</body>
</html>
The Datalist Element
The <datalist>
element defines a set of predefined options for an <input> element.
As users enter data, a drop-down menu of pre-defined options will appear.
The <input> element's list attribute must refer to the id attribute of the <datalist>
element.
<html>
<body>
<h2>The datalist Element</h2>
<p>The datalist element specifies a list of pre-defined options for an input element.</p>
<form action="/action_page.php">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>
<p><b>Note:</b> The datalist tag is not supported in Safari prior version 12.1.</p>
</body>
</html>
The Output Element
The <output>
element indicates the outcome of a calculation (like one performed by a script).
<html>
<body>
<h2>The output Element</h2>
<p>The output element represents the result of a calculation.</p>
<form action="/action_page.php"
oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0
<input type="range" id="a" name="a" value="50">
100 +
<input type="number" id="b" name="b" value="50">
=
<output name="x" for="a b"></output>
<br><br>
<input type="submit">
</form>
<p><strong>Note:</strong> The output element is not supported in Edge prior version 13.</p>
</body>
</html>
Products
Partner
Copyright © RVR Innovations LLP 2024 | All rights reserved - Mytat.co is the venture of RVR Innovations LLP