• Hajipur, Bihar, 844101

☰
❮
❯

HTML

HTML5 Basics

HTML Styling and Design

HTML Links and Media

HTML Layout and Structure

HTML Forms

HTML Graphics

HTML APIs

HTML Advanced Topics

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>.

HTML Form Elements Quiz

Q1: Which tag is used for multi-line input?

A. <input multiline>
B. <textarea>
C. <textbox>
D. <formtext>

Q2: What tag is used to create a dropdown list?

A. <dropdown>
B. <select>
C. <input type="list">
D. <list>

Q3: Which element is used to group form fields?

A. <group>
B. <fieldset>
C. <block>
D. <container>

Q4: Which element provides suggestions for an <input> field?

A. <select>
B. <option>
C. <datalist>
D. <dropdown>

Q5: What does the <label> tag do?

A. Submits the form
B. Connects text to an input field
C. Resets input
D. Displays output

Q6: Which element is used to display calculated values?

A. <output>
B. <result>
C. <value>
D. <eval>

Q7: What tag is used to define selectable options in a dropdown?

A. <list>
B. <option>
C. <label>
D. <select-option>

Q8: Which attribute connects a <label> to its input?

A. connect
B. id
C. for
D. name

Q9: What is the correct tag to create a button?

A. <submit>
B. <btn>
C. <button>
D. <input type="button">

Q10: Which tag is best to describe the title of grouped form inputs?

A. <title>
B. <caption>
C. <legend>
D. <header>
← Previous Next →
Login
Go Back Top