Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Elements of a <form> Tag
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>
Let's dive into the article to learn more about the different types of elements in a <form> tag. We can find a lot of HTML form elements let's discuss few of them.
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.
multiple − This feature allows the user to choose from one or multiple choices. Depending on this specific attribute, we can make comparisons to radio buttons and checkboxes.
size − This attribute is used to display the number of values in the list. For instance, there are more than four options on a list. So, using the size attribute will enable us to make the options visible.
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>
On running the above program, the output window will pop up, displaying the drop-down list and allowing the user to choose the option available in the drop-down list.
Example
In the following example, we are going to use the <select> element with the multiple attribute.
<!DOCTYPE html>
<html>
<body>
<h2 style="text-align:center;"> Choose The Best Cars</h2>
<form style="text-align:center;">
<select id="car" name="car" multiple>
<option>CIAZ</option>
<option>CRUZE</option>
<option>SAIL</option>
<option>I20</option>
</select>
</form>
</body>
</html>
When the above code gets executed, it will generate the output consisting of the drop-down list, allowing the user to select multiple options from the drop-down list.
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.
121 Views
