-
Hajipur, Bihar, 844101
HTML Form Elements
HTML forms rely on a variety of elements that help users enter and submit information. These elements work together to collect text, numbers, choices, files and other types of inputs. Understanding each form element is important when you design any interactive page like login forms, signup forms or feedback pages. In this chapter, you will learn how these elements work and how they are used in real pages.
What Are Form Elements
Form elements are the building blocks inside a <form> tag. Each element collects a specific type of input. For example, text fields collect words, radio buttons collect single choices, checkboxes collect multiple choices and so on. When a user submits a form, the browser sends the values of these elements to the server.
The <input> Element
The <input> element is the most commonly used form element. It can create text fields, passwords, numbers, radio buttons, checkboxes and many other input types. The behaviour of an input field changes according to its type attribute.
Text Field Example
<form>
<label>Full Name:</label>
<input type="text" name="fullname">
</form>
Password Field Example
<input type="password" name="userpassword">
Number Field Example
<input type="number" name="age">
The <label> Element
Labels help users understand what each input field is for. They also improve accessibility. When a label’s for attribute matches the input’s id, clicking the label will focus the input.
Example
<label for="email">Email:</label>
<input type="email" id="email">
The <textarea> Element
If you want users to write longer text, such as comments or messages, use <textarea>. It can be resized and supports multiple lines.
Example
<textarea name="message" rows="5" cols="40"></textarea>
The <select> Element
The <select> element creates a dropdown list. Inside it, you use <option> to define the available choices.
Dropdown Example
<select name="city">
<option value="delhi">Delhi</option>
<option value="mumbai">Mumbai</option>
<option value="kolkata">Kolkata</option>
</select>
You can also allow users to select multiple options using the multiple attribute.
Radio Buttons
Radio buttons allow users to pick one option from a list. All radio buttons in the same group must have the same name.
Example
<p>Gender:</p>
<input type="radio" name="gender" value="female"> Female
<input type="radio" name="gender" value="male"> Male
Checkboxes
Checkboxes let users choose more than one option. They are useful for interests, skills, hobbies and similar fields.
Example
<p>Select your hobbies:</p>
<input type="checkbox" name="hobby" value="reading"> Reading
<input type="checkbox" name="hobby" value="travel"> Travel
<input type="checkbox" name="hobby" value="music"> Music
The <button> Element
The <button> element creates clickable buttons. You can set its type as submit, reset or button.
Example
<button type="submit">Submit Form</button>
A submit button sends the form to the server. A reset button clears all fields. A plain button does nothing unless you add JavaScript to it.
File Upload Field
To let users upload files, such as photos or documents, use input type="file".
Example
<input type="file" name="profilephoto">
If the form contains file uploads, the <form> tag must include enctype="multipart/form-data".
The <fieldset> Element
Fieldsets group related form controls together. They give a visual boundary around similar elements.
Example
<fieldset>
<legend>Personal Details</legend>
<input type="text" placeholder="Your Name">
<input type="number" placeholder="Age">
</fieldset>
The <legend> Element
The <legend> element provides a title for the group created by <fieldset>. This improves clarity and helps users understand the section.
The <datalist> Element
A datalist provides a list of suggestions for an input field. It is not a dropdown but a suggestion list users see while typing.
Example
<input list="languages" name="language">
<datalist id="languages">
<option value="Hindi">
<option value="English">
<option value="Spanish">
</datalist>
The <output> Element
The output element displays calculated values. It is often used with JavaScript.
Example
<form oninput="sum.value = parseInt(a.value) + parseInt(b.value)">
<input type="number" id="a">
+
<input type="number" id="b">
=
<output name="sum"></output>
</form>
Hidden Fields
Hidden inputs store information that users do not see. They are useful for saving IDs, tokens or other backend data.
Example
<input type="hidden" name="userid" value="12345">
Submit and Reset Buttons
Submit Button
<input type="submit" value="Send">
Reset Button
<input type="reset" value="Clear">
Putting Everything Together
Here is a small form that uses many elements together.
<form action="" method="post">
<label>Full Name:</label>
<input type="text">
<label>Message:</label>
<textarea></textarea>
<label>Select City:</label>
<select>
<option>Delhi</option>
<option>Mumbai</option>
<option>Kolkata</option>
</select>
<p>Choose Gender:</p>
<input type="radio" name="gender"> Female
<input type="radio" name="gender"> Male
<p>Hobbies:</p>
<input type="checkbox"> Reading
<input type="checkbox"> Travel
<button type="submit">Submit</button>
</form>
Summary of HTML Form Elements
Form elements give structure to your forms and make it possible to collect many different types of data from users. You learned about text fields, labels, textareas, selects, radio buttons, checkboxes, buttons, file uploads, fieldsets, datalists, outputs and hidden fields. Once you understand how each element works, you can build strong and clear forms for any type of website.
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>.
