Input from the user is collected using form. It can be utilized for a variety of purposes, including website registration, login, profile creation, etc. There are many different kinds of information that can be gathered from a form. The backend manages the form data. We can utilize a variety of form elements, such as text fields, text areas, drop-down lists, choose boxes, radio buttons, etc.
Syntax
Following is the syntax for <form> tag in HTML
<form action="" method="">
// different form element used of user wish
</form>HTML <input> element
The foundational form element in HTML is the <input> element. It is used to construct form fields and collect user input. We can use several input fields to obtain various pieces of information from users.
Syntax
Following is the syntax for HTML <input> element
<form>
<input type=" …. " name="….">
</form>Example
Following is an example where we are going to use the <input> element and create a user input field.
<!DOCTYPE html>
<html>
<body style="background-color:#D2B4DE;">
<form style="text-align:center;"> Enter E-Mail: <input type="text" name="e-mail">
</form>
</body>
</html>On running the above program, the output window will pop up, displaying the user input field to allow the user to enter input on the webpage.
HTML <label> element
It is used to specify the label for the field that we defined. When the user makes an effort to concentrate on the input element, it is helpful. We use the <label> element with the input element, if the ‘for’ attribute of the label element is equal to the ‘id’ attribute of the input element.
Syntax
Following is the syntax for HTML <label> element
<form>
<label>……</label>
</form>Example
In the following example we are going to create the simple sig-in form.
<!DOCTYPE html>
<html>
<body style="background-color:#ABEBC6;">
<form>
<label for="uname">UserName: </label>
<input type="text" id="uname" name="uname">
<br/>
<label for="password">Password: </label>
<input type="password" id="password" name="password">
</form>
</body>
</html>When the above code gets executed, it will generate an output consisting of the simple webpage displayed on the webpage.
HTML <select> element
It’s employed to produce a drop-down menu. Users are able to choose as many options as they wish. When we use this element to construct a drop-down list, the attribute’s behavior can be altered depending on the circumstances. Let’s have a look at such attributes.
Syntax
Following is the syntax for HTML <select> element
<form>
<select>
<option>…</option>
</select>
</form>Example
Considering the following example, where we are going to use the <select> element with no attributes
<!DOCTYPE html>
<html>
<body>
<form style="text-align:center;"> Choose The Car:
<select>
<option>RS7</option>
<option>AUDI</option>
<option>BMW</option>
</select>
</form>
</body>
</html>HTML <button> element
This is done to provide a clickable button. It has one attribute, the ‘type’ attribute. This attribute is used to provide the button that will be used on the page depending on the circumstance. The button’s default styling in various browsers may vary.
Syntax
Following is the syntax for HTML <button> element
<form>
<button>….</button>
</form>Example
Following is an example where we are going to create a clickable button on the webpage using the <button> element.
<!DOCTYPE html>
<html>
<body>
<h2 style="color:#6C3483;">Clickable Button</h2>
<button type="submit">Click</button>
</body>
</html>On running the above code, the output window will pop up, displaying the click button on the webpage.
