• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

HTML Form Elements

← Previous Next →

🔹 What Are HTML Form Elements?

HTML form elements are the building blocks used to collect user input. These elements appear inside the <form> tag and allow users to enter text, choose options, upload files, and more.

🔹 Commonly Used Form Elements

Element Description
<input> Basic element for text, numbers, password, etc.
<textarea> Multi-line text input
<select> Drop-down list
<option> Options in a drop-down list
<label> Label for input field
<button> Button to submit or reset or custom actions
<fieldset> Groups related fields
<legend> Caption for <fieldset>
<datalist> Provides autocomplete options for <input>
<output> Shows result of a calculation or script

🔹 The <input> Element – Multiple Types

<input type="text">
<input type="email">
<input type="number">
<input type="radio">
<input type="checkbox">
<input type="file">
<input type="submit">
<input type="reset">

🔹 <textarea> – Multi-line Input

<textarea rows="4" cols="40">Your message here...</textarea>

🔹 <select> and <option> – Dropdown List

<select name="cars">
  <option value="maruti">Maruti</option>
  <option value="tata">Tata</option>
  <option value="hyundai">Hyundai</option>
</select>

🔹 <label> – Accessible Labels

<label for="email">Email:</label>
<input type="email" id="email" name="email">

🔹 <fieldset> and <legend> – Grouping Inputs

<fieldset>
  <legend>Login Info</legend>
  <label>Username: <input type="text" name="user"></label>
</fieldset>

🔹 <datalist> – Suggestion Dropdown

<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Edge">
</datalist>

🔹 <output> – Output Element

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
  <input type="number" id="a" value="10"> +
  <input type="number" id="b" value="5"> =
  <output name="result"></output>
</form>

Practice Questions

Q1. Create a form using input types: text, email, and number.

Q2. Use a <textarea> for message input.

Q3. Add a dropdown with three car brands.

Q4. Use <label> tags properly for each input.

Q5. Create a radio group for gender selection.

Q6. Add checkboxes for selecting hobbies.

Q7. Group fields using <fieldset> and name it with <legend>.

Q8. Use <datalist> to suggest programming languages.

Q9. Add a file upload option.

Q10. Create a simple calculator using <output>.

← Previous Next →

HTML

online coding class codepractice

HTML5 Basics

HTML Styling and Design

HTML Links and Media

HTML Layout and Structure

HTML Forms

HTML Graphics

HTML APIs

HTML Advanced Topics

codepractice logo
Login
Go Back Top