Loading Please Wait...
HTML from provides different types of elements to take user input such as single line text, multiline text, selection list, checkbox, radio, etc.
HTML <form> have the following elements:
<label> Element defines the label for different form elements.
<label> Elements are helpful where user face difficulty on click form element.
The browser and screen reader also give importance to <label> Elements and read it loudly.
Always use for attribute with <label> Elements to attach it with form elements.
<form>
<!-- Try clicking Name. It will focus on input field -->
<label for="name">Name</label><br>
<input type="text" id="name">
</form>
<input> Element defines user input field. It is used in different ways as per the type attribute such as text field, password, checkbox, radio, etc.
<form>
Name: <input type="text"><br>
Password: <input type="password"><br>
</form>
<textarea> Element allow user to enter multiline text input like address.
<form>
<label for="address">Address</label><br>
<textarea id="address"></textarea>
</form>
<select> Element defines a dropdown list for a set of options.
<option> Element defines an option for <select> element.
Use this if you have many options.
<form>
<label for="language">Language</label><br>
<select id="language">
<option value="HTML">HTML</option>
<option value="CSS">CSS</option>
<option value="JavaScript">JavaScript</option>
<option value="PHP">PHP</option>
<option value="Python">Python</option>
<option value="ASPNET">ASP.NET</option>
</select>
</form>
Use multiple attribute with <select> Element to allow multiple selections.
<form>
<label for="languages">Languages (Use CTRL to select multiple)</label><br>
<select id="languages" multiple>
<option value="HTML">HTML</option>
<option value="CSS">CSS</option>
<option value="JavaScript">JavaScript</option>
<option value="PHP">PHP</option>
<option value="Python">Python</option>
<option value="ASPNET">ASP.NET</option>
</select>
</form>
<optgroup> element allow us to group similar options. Use label attribute to give name to group
<form>
<label for="language">Language</label><br>
<select id="language">
<optgroup label="Front End">
<option value="HTML">HTML</option>
<option value="CSS">CSS</option>
<option value="JavaScript">JavaScript</option>
</optgroup>
<optgroup label="Back End">
<option value="PHP">PHP</option>
<option value="Python">Python</option>
<option value="ASPNET">ASP.NET</option>
</optgroup>
</select>
</form>
<button> Element define a clickable button for handling form action like submit form, reset form, etc.
<form>
<label for="email">Email</label><br>
<input type="email" id="email"><br>
<label for="password">Password</label><br>
<input type="password" id="password"><br><br>
<button type="submit">Login</button>
</form>
<fieldset> Element defines a group of similar type of data in the form.
<legend> Element defines the name or caption for the <fieldset> element.
<form>
<fieldset>
<legend>Personal Details</legend>
<label for="email">Name</label><br>
<input type="email" id="email"><br>
<label for="email">Email</label><br>
<input type="email" id="email"><br>
</fieldset>
<br>
<fieldset>
<legend>Contact Details</legend>
<label for="phonee">Phone</label><br>
<input type="tel" id="phone"><br>
<label for="address">Address</label><br>
<textarea id="address"></textarea><br>
</fieldset>
<br>
<button type="submit">Login</button>
</form>
<datalist> element defines predefined set of options for <input> element which is visible as a dropdown list.
Use list attribute with <input> element to attach a datalist with it. Where value of the list attribute is the id of <datalist> element.
<form>
<!-- Try clicking Name. It will focus on input field -->
<label for="language">Language</label><br>
<input type="text" id="language" list="language-list">
<datalist id="language-list">
<option value="HTML">HTML</option>
<option value="CSS">CSS</option>
<option value="JavaScript">JavaScript</option>
<option value="PHP">PHP</option>
<option value="Python">Python</option>
<option value="ASPNET">ASP.NET</option>
</datalist >
</form>
<output> element defines the result of a calculation.
<form 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">
</form>
How you feel about this blog:
Share this blog on:
If you find any error in the turtorials, or want to share your suggestion/feedback, feel free to send us email at: info@lynxsia.com
Contact Us
We are concern with various development process like website design & development, E-commerce development, Software development, Application development, SMS & Bulk SMS Provider, PWA Development, and many more..
Copyright © , Lynxsia IT Solutions, All rights reserved