Back to: HTML Tutorials
Form Elements in HTML with Examples
In this article, I am going to discuss Form Elements in HTML with Examples. Please read our previous article where we discussed Form Attributes in HTML with Examples.
HTML Form Elements
In Html forms we can have various elements useful in taking inputs, giving labels to input boxes, adding submit buttons, etc.
The <input> Form Element in HTML
In Html forms, the input element is used to take input from the user and input can be anything like name, email, address, etc. Input elements are of different types such as type=”text” is used for name and type=”email” is used for an email address. In the example below we have a form with input elements that takes the name and email address as input from the users.
<!DOCTYPE html> <html> <head> <style> body{ display:flex; justify-content:center; align-items:center; height:100vh; flex-direction:column; font-family:arial;} form{ border:2px solid transparent; padding:25px 20px; border-radius:8px; background-color:lightpink;} input{ border:1px solid transparent; border-radius:8px; padding:10px; background-color:aliceblue; outline:none;} </style> </head> <body> <h2>The input Element</h2> <form action="demo.html"> <label for="fname">Full Name:</label><br> <input type="text" id="fname" name="fname"><br> <label for="email">Email Address:</label><br> <input type="email" id="email" name="email"><br><br> <input type="submit" value="Submit"> </form> </body> </html>
When you run the above HTML Code, you will get the following output in the browser.
The <label> Form Element in HTML
The form label element is used to define a label for an input element. When a user will click on the label element the browser will bring the cursor to the input element. To connect label and input element together name attribute is defined inside the input element and for attribute is defined inside the label element. The value of for and name attribute must be the same then only it will work otherwise it will not work. For Example
<label for=”fname”>Full Name</label>
<input type=”text” name=”fname”>
The <select> Form Element in HTML
The select element is used to define a drop-down list. Dropdowns are useful when you want the user to select a value from a list of values.
By default, the first value in the dropdown list gets selected; we can also change the default values by defining the selected attribute inside the option element.
By default, the select element displays one value but we can change the size of the dropdown by defining the size attribute to display multiple values inside the dropdown.
Default Size
<select id=”players” name=”favourite_player” size=”4″>
We can also define multiple attributes inside the select element if we want the user to submit multiple values at a time. To submit multiple values, press control and click on the values which you want to submit.
<select id=”players” name=”favourite_player” multiple>
In the example below we will create a dropdown in which users will select and submit their favourite cricket player.
<!DOCTYPE html> <html> <head> <style> body{ display:flex; justify-content:center; align-items:center; height:100vh; flex-direction:column; font-family:arial;} form{ border:2px solid transparent; padding:25px 20px; border-radius:8px; background-color:lightblue;} input{ border:1px solid transparent; border-radius:8px; padding:10px; background-color:aliceblue; outline:none;} </style> </head> <body> <h2>The select Element</h2> <form action="demo.html"> <label for="players">Choose Your Favourite Player:</label> <select id="players" name="favourite_player"> <option value="MS Dhoni">MS Dhoni</option> <option value="Shikhar Dhawan">Shikhar Dhawan</option> <option value="Rohit Sharma">Rohit Sharma</option> <option value="KL Rahul">KL Rahul</option> </select><br><br> <input type="submit"> </form> </body> </html>
When you run the above HTML Code, you will get the following output in the browser.
The <textarea> Element
The text area is used to define a multiline text input field. text inputs are useful if we want to take multiline inputs from a user. In the below example we will create a text input field to take feedback from the user.
<!DOCTYPE html> <html> <head> <style> body{ display:flex; justify-content:center; align-items:center; height:100vh; flex-direction:column; font-family:arial;} form{ border:2px solid transparent; padding:25px 20px; border-radius:8px; background-color:lightyellow;} input{ border:1px solid transparent; border-radius:8px; padding:10px; background-color:aliceblue; outline:none;} </style> </head> <body> <h2>The Textarea Element</h2> <form action="demo.html"> <label>Enter your feedback</label> <br><br> <textarea name="message" rows="10" cols="30"></textarea> <br><br> <input type="submit"> </form> </body> </html>
When you run the above HTML code, you will get the following output in the browser.
The HTML <button> Element
In HTML forms, the <button> element is used to define a button. for example, a submit button. In the example below we will create a button that will prompt the message on the screen when a user clicks on the button.
<!DOCTYPE html> <html> <head> <style> body{ display:flex; justify-content:center; align-items:center; height:100vh; flex-direction:column; font-family:arial;} form{ border:2px solid transparent; padding:25px 20px; border-radius:8px; background-color:lightyellow;} button{ border:1px solid transparent; border-radius:8px; padding:10px; background-color:aliceblue; outline:none;} </style> </head> <body> <h2>The button Element</h2> <form action="demo.html"> <button type="button" onclick="alert('Welcome to Dot Net Tutorials')">Prompt</button> </form> </body> </html>
When you run the above HTML code, you will get the following output in the browser.
The <fieldset> and <legend> Elements in HTML
The fieldset element is used to group different input tags under one category together and the legend element is used to define the caption for the fieldset element. In the example below we have created two fieldsets with captions name and contact info respectively.
<!DOCTYPE html> <html> <head> <style> body{ display:flex; justify-content:center; align-items:center; height:100vh; flex-direction:column; font-family:arial;} form{ border:2px solid transparent; padding:25px 20px; border-radius:8px; background-color:lightyellow;} input{ border:1px solid transparent; border-radius:8px; padding:10px; background-color:aliceblue; outline:none;} </style> </head> <body> <h2>The fieldset and legend Element</h2> <form action="demo.html"> <fieldset> <legend>Name</legend> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname"><br><br> </fieldset> <br> <fieldset> <legend>Contact Info</legend> <label for="cno">Contact No</label><br> <input type="tel" id="cno" name="cno"><br> <label for="email">Email</label><br> <input type="email" id="email" name="email"><br><br> </fieldset> <input type="submit" value="Submit"> </form> </body> </html>
When you run the above HTML code, you will get the following output in the browser.
The HTML <datalist> Element
The datalist> element defines a set of predefined options for an <input> element. When a user clicks on the input element, users will see a drop-down list of pre-defined alternatives. The list attribute value of the <input> element must be similar to the <datalist> element’s id attribute value then only the user will be able to see the input data.
<!DOCTYPE html> <html> <head> <style> body{ display:flex; justify-content:center; align-items:center; height:100vh; flex-direction:column; font-family:arial;} form{ border:2px solid transparent; padding:25px 20px; border-radius:8px; background-color:lightyellow;} input{ border:1px solid transparent; border-radius:8px; padding:10px; background-color:aliceblue; outline:none;} </style> </head> <body> <h2>The datalist Element</h2> <form action="demo.html"> <label for="cars">Select Your favourite Car </label> <br><br> <input list="cars" name="cars"> <datalist id="cars"> <option value="Lamborghini"> <option value="Ferrari"> <option value="Bugatti"> <option value="Mclaren"> <option value="Porsche"> </datalist> <br><br> <input type="submit"> </form> </body> </html>
When you run the above HTML code, you will get the following output in the browser.
The <output> Element in HTML
The output element is used to specify the result of a calculation in the browser. In the example below we will take two inputs from the user, add them and display the output on the browser. To display the output we will use the <output> element.
<!DOCTYPE html> <html> <head> <style> body{ display:flex; justify-content:center; align-items:center; height:100vh; flex-direction:column; font-family:arial;} form{ border:2px solid transparent; padding:25px 20px; border-radius:8px; background-color:lightyellow;} input{ border:1px solid transparent; border-radius:8px; padding:10px; background-color:aliceblue; outline:none;} </style> </head> <body> <h2>The output Element</h2> <form action="/action_page.php" oninput="x.value=parseInt(a.value)+parseInt(b.value)"> <input type="number" id="a" name="a"> + <input type="number" id="b" name="b" ><br><br> = <output name="x" for="a b"></output> <br><br> <input type="submit"> </form> </body> </html>
When you run the above HTML code, you will get the following output in the browser.
In the next article, I am going to discuss Input Type Elements in HTML with Examples. Here, in this article, I try to explain HTML Form Elements with Examples and I hope you enjoy this article.