Loading Please Wait...
When it comes to take user data in websites, HTML forms play an important role. Forms allow us to take user data like name, email, etc. and send it to server for further processing like storing, authentication, etc.
<form> Element is used to create form for user input.
Form element is the main container for various type of input like text, checkbox, radio, list, buttons, etc.
<form>
form inputs here...
</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>
<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.
<form>
<!-- Try clicking Name. It will focus on input field -->
<label for="name">Name</label><br>
<input type="text" id="name">
</form>
<radio> Element allow user to select single item from a set of given options.
<form>
<input type="radio" name="gender" id="male" value="Male">
<label for="male">Male</label><br>
<input type="radio" name="gender" id="female" value="Female">
<label for="female">Female</label><br>
</form>
<checkbox> Element allow user to select multiple item from a set of given options.
<form>
<input type="checkbox" name="language" id="html" value="HTML">
<label for="html">HTML</label><br>
<input type="checkbox" name="language" id="css" value="CSS">
<label for="css">CSS</label><br>
<input type="checkbox" name="language" id="javascript" value="JavaScript">
<label for="javascript">JavaScript</label><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="country">Country</label><br>
<select id="country">
<option value="India">India</option>
<option value="America">Ameria</option>
<option value="Russia">Russia</option>
<option value="China">China</option>
<option value="Japan">Japan</option>
<option value="Australia">Australia</option>
</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>
<button type="submit">Login</button>
</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