HTML Form Elements

HTML Form Elements

22 Jul 2023
Intermediate
1.3K Views
19 min read
Learn via Video Course & by Doing Hands-on Labs

HTML For Beginners Free Course

HTML Form Elements

Form elements in HTML are used to create interactive web pages that allow users to input data and interact with the website and if you want to go more deeper then with the help of HTML Online training will help you a lot

These are the following form elements in HTML

  1. <label>: <label> defines the label for <form> elements.
  2. <input>: <input> is used to get input data from the form in various types such as text, password, email, etc by changing its type.
  3. <button>: <button> defines a clickable button to control other elements or execute a function.
  4. <select>: <select> creates a drop-down list.
  5. <textarea>: <textarea> is used to get input long text content.
  6. <fieldset>: <fieldset> draws a box around other form elements and groups the related data.
  7. <legend>: <legend> defines a caption for fieldset elements.
  8. <datalist>: <datalist> is used to specify pre-defined list options for input controls.
  9. <output>: <output> is the output of performed calculations.
  10.  <option>: <option> defines options in a drop-down list.
  11. <optgroup>: <optgroup> is used to define group-related options in a drop-down list.

HTML <label> Element

HTML label element defines a label for the selected form elements. <label> element is used to describe what the user is expected to input in a text box. HTML label element also helps users who have difficulty clicking on small regions (such as radio buttons or checkboxes) - because when the user clicks the text within the <label> tag, it toggles the radio button/checkbox.

The attribute of the <label> tag should be equal to the id attribute of the <input> tag to bind them together.

Example

<form>
  <label for="fname">Scholar name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Father's name:</label><br>
  <input type="text" id="lname" name="lname">
</form> 

Output

<button> element in HTML

The button element in HTML is used to create a clickable button in a web form. Whenever a user clicks the button, an action is triggered, such as submitting a form or performing another function. This button element in HTML can contain text or images, or both, and it can be styled using CSS to match the website's design

Example

<form action="/submit-form" method="POST">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name"><br><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email"><br><br>
  <button type="submit">Submit</button>
</form>

Output

HTML<select> element

The HTML select element is used to create a dropdown list in an HTML form. It allows users to select one option from a list of given options. The <option> element is used in conjunction with <select>tag elements to define the list of available options.

Example

<label for="cars">Choose a car:</label><select id="cars" name="cars">
  <option value="volvo">Volvo</option>
  <option value="maruti">Maruti</option>
  <option value="Mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

Output

HTML <textarea> element

  • HTML textarea element defines a multiple-line text input.
  • HTML textarea element is used in a form, to collect user inputs like comments or feedback.
  • This element can hold unlimited characters, and the text renders in a fixed-width font (usually Courier).
  • The size of a text area can be specified by the cols and rows attributes (or with CSS).
  • The id attribute is needed to associate the text area with a label.

Example:

<!DOCTYPE html> 
<html> 
<head> 
    <title>HTML Forms</title> 
</head> 
<body> 
  <form> 
        Enter your Username:<br> 
      <textarea rows="2" cols="20"></textarea> 
  </form> 
</body> 
</html> 

Output:

HTML <fieldset> element:

The related information of a form can be grouped with the help of the HTML fieldset element. This element is used with <legend>, providing a caption for the grouped elements.

Example:

 <form> 
     <fieldset> 
      <legend>User Information:</legend> 
    <label for="name">Enter Email</label><br> 
<input type="text" id="name" name="name"><br> 
<label for="pass">Enter Password</label><br> 
<input type="Password" id="pass" name="pass"><br> 
<input type="submit" value="submit"> 
</fieldset> 
</form> 

Output:

HTML<legend> Element

HTML legend element defines the title for the child contents. The HTML legend element is the parent element. This tag is used to define the caption for the <fieldset> element.

Example

<!DOCTYPE html>
<html>
 <head>
 </head>
 <body>
  <h1>ScholarHat</h1>
  <strong>HTML Legend Element</strong>
  <form>
   <fieldset>
    <!-- Legend tag using -->
    <legend>Scholar:</legend>
    <label>Name:</label>
    <input type="text">
    <br><br>
    <label>Email:</label>
    <input type="text">
    <br><br>
    <label>Date of birth:</label>
    <input type="text">
    <br><br>
   </fieldset>
  </form>
 </body>
</html>

Output:

HTML <datalist>Element

The HTML datalist element is used to specify a given list of options for an input value in an HTML form. It allows users to choose from a list of suggested values as they type into an input field. HTML datalist element is used in conjunction with the <input> element, where the list attribute is set to the ID of the <datalist> tag.

Example:

<label for="browser">Choose your browser from the list:</label>
<input list="browsers" name="browser" id="browser">

<datalist id="browsers">
 <option value=" Microsoft Edge">
 <option value="Internet Explorer">
 <option value="Chrome">
 <option value="Opera">
 <option value="Brave">
</datalist>

Output:

 

HTML <Output> Element

HTML output element is used to show the result of a calculation or the output of a script. HTML output element is used in conjunction with other form elements, such as <input>, <select>, or <textarea>, to show the result of a user's interaction with the form. <output> element can contain any type of content, including text, images, and HTML elements. It can also be styled using CSS to control its appearance.

<outgroup> in HTML

In HTML forms, the <optgroup> element is used to group related options within an <select> element. The <optgroup> element is used to make it easier for users to find the options they are looking for by organizing them into logical groups.

Example

<label for="Course">Choose a Course:</label>
<select id="Course" name="Course">
  <optgroup label="Frontend">
    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="javascript">JavaScript</option>
  </optgroup>
  <optgroup label="Backend"> <option value="python">Python</option>
  <option value="php">PHP</option>
  <option value="java">Java</option>
  </optgroup>
</select>

Output:

Summary

 In this article, we have learned about various HTML form elements. Each form element plays a specific role to provide better performance. There is one more part left which is related to HTML Forms, and that is Input elements in HTML. We will be learning about it in our next article. If you are interested in learning more about HTML Forms and Input elements, you can look into an HTML Certification Training course.

Take our free html skill challenge to evaluate your skill

In less than 5 minutes, with our skill challenge, you can identify your knowledge gaps and strengths in a given skill.

GET CHALLENGE

Share Article
Batches Schedule
About Author
Sakshi Dhameja (Author and Mentor)

She is passionate about different technologies like JavaScript, React, HTML, CSS, Node.js etc. and likes to share knowledge with the developer community. She holds strong learning skills in keeping herself updated with the changing technologies in her area as well as other technologies like Core Java, Python and Cloud.

Self-paced Membership
  • 22+ Courses
  • 750+ Hands-On Labs
  • 300+ Quick Notes
  • 55+ Skill Tests
  • 45+ Interview Q&A
  • 10+ Real-world Projects
  • Career Coaching
  • Email Support
Upto 66% OFF
KNOW MORE..

To get full access to all courses

Accept cookies & close this