DevVoltz Academy | HTML Forms (Part 2

Part 13: Advanced Form Controls

Textarea Element

Multi-line Text Input

📝

Textarea Overview

The <textarea> element creates a multi-line text input field.

Used for longer text entries like comments, descriptions, messages
Has opening and closing tags (content goes between them)
Supports attributes like rows, cols, placeholder

⚙️

Key Attributes

rows - Number of visible text lines
cols - Visible width in character columns
placeholder - Hint text that disappears on focus
maxlength - Maximum number of characters allowed
readonly - Makes textarea non-editable
disabled - Disables the textarea

💡

Example Usage

<textarea 
  name="message" 
  rows="4" 
  cols="50"
  placeholder="Enter your message here..."
  maxlength="500">
Default text goes here
</textarea>

Part 13: Advanced Form Controls

Select & Option Elements

Dropdown Menus and Lists

Select Element

The <select> element creates a dropdown list.

Contains one or more <option> elements
Users can select one option from the list
Use multiple attribute for multi-select
size attribute controls visible rows

Option Element

The <option> element defines an option in the dropdown.

value - The value sent when form is submitted
selected - Makes option selected by default
disabled - Makes option non-selectable

Optgroup Element

The <optgroup> groups related options.

Creates visual grouping in dropdown
Has label attribute for group name
Improves usability for long option lists

Complete Example:

<select name="country">
  <optgroup label="North America">
    <option value="us">United States</option>
    <option value="ca">Canada</option>
  </optgroup>
  <optgroup label="Europe">
    <option value="uk">United Kingdom</option>
    <option value="fr">France</option>
  </optgroup>
</select>

Part 13: Advanced Form Controls

Radio Buttons & Checkboxes

Selection Controls

🔘

Radio Buttons

Allow single selection from multiple options
All radio buttons in a group share the same name attribute
Use checked attribute for default selection
Only one option can be selected at a time
Ideal for mutually exclusive choices (gender, payment method)

Example:

<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female" checked> Female
<input type="radio" name="gender" value="other"> Other

☑️

Checkboxes

Allow multiple selections from options
Each checkbox can have unique name or share names
Use checked attribute for default selection
Multiple options can be selected simultaneously
Ideal for non-exclusive choices (interests, features)

Example:

<input type="checkbox" name="interests" value="sports"> Sports
<input type="checkbox" name="interests" value="music" checked> Music
<input type="checkbox" name="interests" value="books"> Books

Best Practices:

Always Use Labels

Associate labels with both radio buttons and checkboxes for accessibility

Group Related Items

Use fieldset and legend to group related controls

Provide Defaults

Use checked attribute for most likely selections

Part 13: Advanced Form Controls

Advanced Attributes

Disabled, Checked, and Multiple

🚫

Disabled Attribute

Makes form controls non-interactive and excludes them from form submission.

Grayed out appearance
Cannot be focused or edited
Value not sent with form data
Use for conditional fields

<input type="text" name="username" disabled>

✅

Checked Attribute

Pre-selects radio buttons or checkboxes.

Boolean attribute (no value needed)
For radio buttons: only one in group can be checked
For checkboxes: multiple can be checked
Use for most common/default choices

<input type="checkbox" name="newsletter" checked>

📋

Multiple Attribute

Allows multiple selections in <select> elements.

Users can select multiple options with Ctrl/Cmd click
Use size attribute to control visible rows
Selected values sent as array
Ideal for categories, tags, preferences

<select name="skills" multiple size="4">

📏

Readonly Attribute

Makes input fields non-editable but included in form submission.

Looks normal (not grayed out)
Can be focused and selected
Value sent with form data
Use for display-only fields that need submission

<input type="text" name="user_id" readonly>

Disabled vs Readonly:

Attribute	Appearance	Focusable	Submitted	Use Case
`disabled`	Grayed out	No	No	Conditional fields
`readonly`	Normal	Yes	Yes	Display-only data

Part 13: Advanced Form Controls

Building a Survey Form

Practical Implementation

survey.html

<!DOCTYPE html>
<html>
<head>
  <title>Customer Survey</title>
</head>
<body>
  <h2>Customer Satisfaction Survey</h2>
  
  <form action="/submit-survey" method="POST">
    <fieldset>
      <legend>Personal Information</legend>
      
      <label for="name">Full Name:</label>
      <input type="text" id="name" name="name" required>
      
      <label for="email">Email:</label>
      <input type="email" id="email" name="email" required>
    </fieldset>

    <fieldset>
      <legend>Product Feedback</legend>
      
      <label>How satisfied are you?</label>
      <input type="radio" name="satisfaction" value="very" required> Very Satisfied
      <input type="radio" name="satisfaction" value="satisfied"> Satisfied
      <input type="radio" name="satisfaction" value="neutral"> Neutral
      <input type="radio" name="satisfaction" value="unsatisfied"> Unsatisfied
      
      <label>Which features do you use? (Select all that apply)</label>
      <input type="checkbox" name="features" value="dashboard"> Dashboard
      <input type="checkbox" name="features" value="reports" checked> Reports
      <input type="checkbox" name="features" value="analytics"> Analytics
    </fieldset>

    <fieldset>
      <legend>Additional Feedback</legend>
      
      <label for="comments">Comments:</label>
      <textarea id="comments" name="comments" 
                rows="4" cols="50"
                placeholder="Please share any additional feedback..."></textarea>
      
      <label for="referral">How did you hear about us?</label>
      <select id="referral" name="referral">
        <option value="">Please select...</option>
        <option value="search">Search Engine</option>
        <option value="social">Social Media</option>
        <option value="friend">Friend Referral</option>
        <option value="ad">Advertisement</option>
      </select>
    </fieldset>

    <button type="submit">Submit Survey</button>
  </form>
</body>
</html>

survey.html

Customer Satisfaction Survey

Personal Information

Full Name:

Email:

Product Feedback

How satisfied are you?

Very Satisfied
Satisfied
Neutral
Unsatisfied

Which features do you use? (Select all that apply)

Dashboard
Reports
Analytics

Additional Feedback

Comments:

How did you hear about us?

Advanced Features Used:

Fieldset & Legend

Groups related form controls with descriptive labels

Radio Button Groups

Mutually exclusive selection for satisfaction rating

Checkbox Groups

Multiple selection for feature usage

Textarea

Multi-line input for detailed comments

Select Dropdown

Single selection from predefined options

Part 13: Advanced Form Controls

Accessibility & Best Practices

Creating Inclusive Forms

Semantic Structure

🏷️

Proper Labeling

Always use <label> elements associated with form controls using for and id

📦

Fieldset & Legend

Group related form controls with <fieldset> and provide context with <legend>

🔤

Logical Tab Order

Ensure form elements follow a logical sequence for keyboard navigation

User Experience

💬

Clear Instructions

Provide helpful placeholder text and instructions for complex inputs

✅

Smart Defaults

Use checked and selected attributes for common choices

📱

Mobile Optimization

Ensure forms work well on touch devices with appropriate input types

Validation & Feedback

🛡️

HTML5 Validation

Use built-in validation attributes like required, pattern, min, max

🎯

Clear Error Messages

Provide specific, helpful error messages near the problematic field

⚡

Progressive Enhancement

Ensure forms work without JavaScript, then enhance with it

COMPLETE

Excellent Work!

You've mastered Advanced HTML Form Controls

What We Covered in Part 13:

📝

Textarea

Multi-line text input fields

📋

Select & Option

Dropdown menus and lists

🔘

Radio Buttons

Single selection controls

☑️

Checkboxes

Multiple selection controls

⚙️

Advanced Attributes

Disabled, checked, multiple

📊

Survey Form

Practical implementation

Practice Exercise:

Create a Job Application Form

Build a comprehensive job application form with:

Personal information section
Education background (select with optgroups)
Work experience (textarea)
Skills checklist (checkboxes)
Employment type (radio buttons)
Availability (select with multiple attribute)
Additional comments (textarea)

Next: Learn about HTML5 input types, validation, and new form attributes

Presenter Notes - Video 13

Intro Slide: Welcome to Advanced HTML Forms. Emphasize that these controls enable complex data collection and improve user experience.

Textarea: Demonstrate how textarea differs from regular input. Show the rows/cols attributes and how they affect sizing.

Select & Option: Show how optgroup improves dropdown organization. Demonstrate multiple attribute with size.

Radio & Checkboxes: Emphasize the importance of same name attribute for radio groups. Show accessibility benefits.

Advanced Attributes: Demonstrate disabled vs readonly differences. Show how checked and multiple work in practice.

Survey Form Demo: Live code the survey form. Emphasize fieldset/legend for grouping and accessibility.

Accessibility: Show how screen readers interpret properly structured forms. Demonstrate keyboard navigation.

Recap: Summarize key advanced controls. Assign the job application exercise. Preview HTML5 form features.

Advanced Forms Complex Inputs Mastery

Simegnew Destew

Textarea Element

Textarea Overview

Key Attributes

Example Usage

Select & Option Elements

Select Element

Option Element

Optgroup Element

Complete Example:

Radio Buttons & Checkboxes

Radio Buttons

Example:

Checkboxes

Example:

Best Practices:

Always Use Labels

Group Related Items

Provide Defaults

Advanced Attributes

Disabled Attribute

Checked Attribute

Multiple Attribute

Readonly Attribute

Disabled vs Readonly:

Building a Survey Form

Customer Satisfaction Survey

Advanced Features Used:

Fieldset & Legend

Radio Button Groups

Checkbox Groups

Textarea

Select Dropdown

Accessibility & Best Practices

Semantic Structure

Proper Labeling

Fieldset & Legend

Logical Tab Order

User Experience

Clear Instructions

Smart Defaults

Mobile Optimization

Validation & Feedback

HTML5 Validation

Clear Error Messages

Progressive Enhancement

Excellent Work!

What We Covered in Part 13:

Textarea

Select & Option

Radio Buttons

Checkboxes

Advanced Attributes

Survey Form

Practice Exercise:

Create a Job Application Form

Presenter Notes - Video 13