LCWD LogoLCWD
H

HTML Handbook

Clean • Professional

Form Elements in HTML

2 minute

Form Elements in HTML

Forms consist of various elements that collect, organize, and submit user input. This category focuses on elements beyond basic <input> fields.

<textarea> – Multi-line Text Input

  • Used to collect longer text input such as comments, messages, or descriptions.

  • Unlike <input type="text">, it can span multiple lines.

  • Attributes: rows, cols, placeholder, maxlength, required.

Example:

<label for="message">Your Message:</label><br>
<textarea id="message" name="message" rows="5" cols="40" placeholder="Write your message here"></textarea>

Buttons - 

 <button>

  • Can have custom text or HTML content inside.

  • Types: submit, reset, button.

Example:

<button type="submit">Submit Form</button>
<button type="reset">Reset Form</button>
<button type="button" onclick="alert('Hello!')">Click Me</button>

3. Dropdowns & Lists

a) <select> & <option>

  • Creates a dropdown menu to select one or more options.

  • multiple attribute allows selecting multiple items.

Example:

<label for="country">Choose your country:</label>
<select id="country" name="country">
  <option value="usa">USA</option>
  <option value="uk">UK</option>
  <option value="india">India</option>
</select>

b) <datalist>

  • Provides an autocomplete dropdown for an input field.

Example:

<label for="browser">Choose your browser:</label>
<input list="browsers" id="browser" name="browser">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Edge">
  <option value="Safari">
</datalist>

c) <optgroup> – Group Options

  • The <optgroup> tag is used to group related <option> elements within a <select> dropdown.

  • It improves readability and organization of long lists of options.

<select>
  <optgroup label="Asia">
    <option>India</option>
    <option>China</option>
  </optgroup>
  <optgroup label="Europe">
    <option>Germany</option>
    <option>France</option>
  </optgroup>
</select>

d)  Grouping Fields – <fieldset> & <legend>

  • <fieldset> groups related form elements.

  • <legend> provides a title or caption for the group.

  • Improves form organization, accessibility, and readability.

Example:

<fieldset>
  <legend>Personal Info</legend>
  <label for="fname">First Name:</label>
  <input type="text" id="fname" name="fname">
</fieldset>

e)  <output> – Display Calculations

  • The <output> element is used to display the result of a calculation or user action within a form.

  • It is often updated using JavaScript when values from inputs change.

Example:

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

  HTML form example demonstrating all Form Elements we discussed in Category

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Form Elements Example</title>
</head>
<body>

<h2>HTML Form Example</h2>

<form>

  <!-- Personal Info -->
  <fieldset>
    <legend>Personal Info</legend>
    <label for="fname">First Name:</label>
    <input type="text" id="fname" name="fname"><br><br>
    
    <label for="bio">Biography:</label><br>
    <textarea id="bio" name="bio" rows="3" cols="30"></textarea><br><br>
    
    <label for="dob">Date of Birth:</label>
    <input type="date" id="dob" name="dob">
  </fieldset>
  
  <br>

  <!-- Account Info -->
  <fieldset>
    <legend>Account Info</legend>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email"><br><br>
    
    <label>Gender:</label>
    <input type="radio" id="male" name="gender" value="male">
    <label for="male">Male</label>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">Female</label><br><br>
    
    <label>Hobbies:</label>
    <input type="checkbox" id="reading" name="hobby" value="reading">
    <label for="reading">Reading</label>
    <input type="checkbox" id="sports" name="hobby" value="sports">
    <label for="sports">Sports</label><br><br>
    
    <label for="country">Country:</label>
    <select id="country" name="country">
      <optgroup label="Europe">
        <option value="uk">UK</option>
        <option value="france">France</option>
      </optgroup>
      <optgroup label="Asia">
        <option value="india">India</option>
        <option value="china">China</option>
      </optgroup>
    </select><br><br>
  </fieldset>

  <br>

  <!-- Buttons -->
  <input type="submit" value="Submit">
  <input type="reset" value="Reset">

</form>

</body>
</html>

Output :

learn code with durgesh images

Article 0 of 0