This is the Sixth part of the HTML course for front-end web development. Starting with HTML is like making a skeleton of a website. and today we will learn, HTML Forms How To Create Forms In HTML. Login forms, different attributes and tags
Join us on Telegram (NEW)
HTML Forms
An HTML Forms is used to collect user input data. These user input is most often sent to a server for processing and collecting the user data.
<body>
<form action ="backend.php">
<div>
First Name : <input type ="text">
  Last Name : <input type ="text">
</div>
<br>
<div>
Role : <br><input type ="text">
</div>
<br>
<div>
Email : <br><input type ="email" name ="myemail">
</div>
<br>
<div>
<input type="submit" value ="SUBMIT">
</div>
</form>
</body>
<Autocomplete> attribute in html
<form action ="backend.php" autocomplete="on">
Adding autocomplete attribute it will automatically takes the previous input which is very impressive to users when filling large forms.
Radio button, Calendar, Check Box, Reset button
Here we will see the example of calendar, radio buttons which helps in choose any one from the given options.
Check box : we use this in more then one option correct MCQs.
Reset button will reset or clear all input data from form.
<body>
<form action ="backend.php">
<div>
Date : <input type ="date" name ="mydate">
</div>
<br>
<dev>
Bonus : <br><input type="number" name ="Count">
<br>Gender<br>
male <input type ="radio" name="mygender">
Female <input type ="radio" name="mygender">
Other <input type ="radio" name="mygender">
</div>
<br>Terms & condition <input type="checkbox">
<div>
<input type="Submit" value="Submit now"
style="background-color:yellow;" >
<input type="Reset" value="Reset now">
</div>
</body>
Terms & condition
<TextArea>
<textarea> tag provide area for users to write some comments in it.
<div>write here : <textarea name="mytext" cols="30" rows="10"></textarea></div>
<div>check box : <input type ="checkbox" name ="my checklist" checked></div>
check box :
Label and selected tag in Form
A label for numerous form elements is defined via the <label> element.
When the user focuses on the input element, the screen-reader will read out loud the label, which is useful for screen-reader users.
The <label> element also aids users who have trouble clicking on small regions (such as radio buttons or checkboxes) since it toggles the radio button/checkbox when the user clicks the text within the <label> element.
To connect them, the for property of the <label> tag should be equal to the id attribute of the <input> element.
<body>
<label for ="car"> car </label>
<div>
<select name="mycar" id="car" >
<option value = "BMW">BMW car</option>
<option value = "Ferrari" selected > Ferrari car</option>
<option value = "Swift"> Swift desire</option>
</select>
</div>
</body>
The<select>element defines a drop-down list in html and <option> tag helps to create options to be chosen:
Button
<button type="button" onclick="alert('Have a good day!')">Click Me!</button>
<fieldset> and <legend>
The <fieldset> element is used to group related data in a form.
The <legend> element defines a caption for the <fieldset>element in HTML.
