Contents
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. html form action contact form html, form tag in html dropdown form, html form elements html form example
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.
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>
<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>
Learn full front end web development course.
By default checked check box
With this code we can keep items pre checked.
<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.
<form action="/backend.php">
<fieldset>
<legend>Tech Info:</legend>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="Rohan"><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>
7 best cryptocurrency to start investing in 2021-22
Login Form
Lets create a simple login form using html
<form>
<label for="username">Username:</label><br>
<input type="text" id="username" name="username" required><br>
<label for="pwd">Password:</label><br>
<input type="password" id="pwd" name="pwd">
<br>
<input type="submit" value = "Login">
</form>
IPhone 13 pro features, display, price is not better ?
Topic Covered Previously
- Boilerplate of HTML used for web development
- HTML head and tag?
- How to add and link image to other page in HTML
- How to create tables in HTML | Web Development
- To create list in HTML, Ordered and unordered