Introduction to Form Controls

Form controls are the interactive elements that allow users to input data. HTML provides various types of form controls, each designed for specific types of data input, making forms more user-friendly and functional.

Input Element and Types

The <input> element is the most versatile form control, with different type attributes for various data types.

Text-based Inputs

html

<!-- Basic text input -->
<label for="username">Username:</label>
<input type="text" id="username" name="username" placeholder="Enter username">

<!-- Email input with validation -->
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="user@example.com" required>

<!-- Password input -->
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>

<!-- Search input -->
<label for="search">Search:</label>
<input type="search" id="search" name="search" placeholder="Search...">

<!-- URL input -->
<label for="website">Website:</label>
<input type="url" id="website" name="website" placeholder="https://example.com">

<!-- Telephone input -->
<label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone" placeholder="(555) 123-4567">

Numeric Inputs

html

<!-- Number input with min/max -->
<label for="age">Age:</label>
<input type="number" id="age" name="age" min="18" max="100" step="1">

<!-- Range slider -->
<label for="volume">Volume:</label>
<input type="range" id="volume" name="volume" min="0" max="100" value="50">

<!-- Price input with decimals -->
<label for="price">Price:</label>
<input type="number" id="price" name="price" min="0" step="0.01" placeholder="0.00">

Date and Time Inputs

html

<!-- Date picker -->
<label for="birthdate">Birth Date:</label>
<input type="date" id="birthdate" name="birthdate">

<!-- Time picker -->
<label for="meeting-time">Meeting Time:</label>
<input type="time" id="meeting-time" name="meeting-time">

<!-- Date and time combined -->
<label for="appointment">Appointment:</label>
<input type="datetime-local" id="appointment" name="appointment">

<!-- Month picker -->
<label for="start-month">Start Month:</label>
<input type="month" id="start-month" name="start-month">

<!-- Week picker -->
<label for="project-week">Project Week:</label>
<input type="week" id="project-week" name="project-week">

Choice Inputs

html

<!-- Radio buttons (single choice) -->
<fieldset>
  <legend>Preferred Contact Method:</legend>
  <input type="radio" id="contact-email" name="contact-method" value="email">
  <label for="contact-email">Email</label>
  
  <input type="radio" id="contact-phone" name="contact-method" value="phone">
  <label for="contact-phone">Phone</label>
  
  <input type="radio" id="contact-mail" name="contact-method" value="mail">
  <label for="contact-mail">Mail</label>
</fieldset>

<!-- Checkboxes (multiple choices) -->
<fieldset>
  <legend>Interests:</legend>
  <input type="checkbox" id="sports" name="interests" value="sports">
  <label for="sports">Sports</label>
  
  <input type="checkbox" id="music" name="interests" value="music">
  <label for="music">Music</label>
  
  <input type="checkbox" id="technology" name="interests" value="technology">
  <label for="technology">Technology</label>
</fieldset>

Other Input Types

html

<!-- Color picker -->
<label for="favorite-color">Favorite Color:</label>
<input type="color" id="favorite-color" name="favorite-color" value="#ff0000">

<!-- Hidden input -->
<input type="hidden" name="csrf-token" value="abc123">

<!-- File upload (covered in detail in another tutorial) -->
<label for="resume">Upload Resume:</label>
<input type="file" id="resume" name="resume" accept=".pdf,.doc,.docx">

Textarea Element

The <textarea> element creates a multi-line text input area, perfect for longer content like comments or descriptions.

html

<label for="bio">Biography:</label>
<textarea id="bio" 
          name="bio" 
          rows="5" 
          cols="50" 
          placeholder="Tell us about yourself..."
          maxlength="500"></textarea>

<!-- Resizable textarea with CSS -->
<style>
  .resizable-textarea {
    resize: both;
    min-height: 100px;
    min-width: 200px;
  }
</style>

<label for="feedback">Feedback:</label>
<textarea id="feedback" 
          name="feedback" 
          class="resizable-textarea" 
          placeholder="Your feedback here..."></textarea>

Select Elements (Dropdowns)

Select elements create dropdown menus for choosing from predefined options.

Basic Select

html

<label for="country">Country:</label>
<select id="country" name="country" required>
  <option value="">Select a country</option>
  <option value="us">United States</option>
  <option value="ca">Canada</option>
  <option value="uk">United Kingdom</option>
  <option value="au">Australia</option>
</select>

Multiple Selection

html

<label for="skills">Skills (hold Ctrl/Cmd for multiple):</label>
<select id="skills" name="skills" multiple>
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="javascript">JavaScript</option>
  <option value="python">Python</option>
  <option value="react">React</option>
</select>

Grouped Options

html

<label for="food">Favorite Food:</label>
<select id="food" name="food">
  <option value="">Choose a category</option>
  
  <optgroup label="Italian">
    <option value="pizza">Pizza</option>
    <option value="pasta">Pasta</option>
    <option value="lasagna">Lasagna</option>
  </optgroup>
  
  <optgroup label="Mexican">
    <option value="tacos">Tacos</option>
    <option value="burritos">Burritos</option>
    <option value="enchiladas">Enchiladas</option>
  </optgroup>
  
  <optgroup label="Asian">
    <option value="sushi">Sushi</option>
    <option value="ramen">Ramen</option>
    <option value="pad-thai">Pad Thai</option>
  </optgroup>
</select>

Comprehensive Form Example

Here's a complete example combining various form controls:

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>User Registration Form</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      max-width: 600px;
      margin: 20px auto;
      padding: 20px;
    }
    
    .form-group {
      margin-bottom: 15px;
    }
    
    label {
      display: block;
      margin-bottom: 5px;
      font-weight: bold;
    }
    
    input, textarea, select {
      width: 100%;
      padding: 8px;
      border: 1px solid #ddd;
      border-radius: 4px;
      box-sizing: border-box;
    }
    
    fieldset {
      border: 1px solid #ddd;
      border-radius: 4px;
      padding: 10px;
      margin-bottom: 15px;
    }
    
    legend {
      font-weight: bold;
      padding: 0 10px;
    }
    
    .checkbox-group, .radio-group {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
    }
    
    .checkbox-group input, .radio-group input {
      width: auto;
      margin-right: 5px;
    }
    
    button {
      background-color: #007bff;
      color: white;
      padding: 12px 24px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 16px;
    }
    
    button:hover {
      background-color: #0056b3;
    }
  </style>
</head>
<body>
  <form action="/register" method="POST">
    <h1>User Registration</h1>
    
    <!-- Personal Information -->
    <div class="form-group">
      <label for="full-name">Full Name:</label>
      <input type="text" id="full-name" name="full-name" required>
    </div>
    
    <div class="form-group">
      <label for="email">Email Address:</label>
      <input type="email" id="email" name="email" required>
    </div>
    
    <div class="form-group">
      <label for="phone">Phone Number:</label>
      <input type="tel" id="phone" name="phone">
    </div>
    
    <div class="form-group">
      <label for="birthdate">Date of Birth:</label>
      <input type="date" id="birthdate" name="birthdate">
    </div>
    
    <div class="form-group">
      <label for="age">Age:</label>
      <input type="number" id="age" name="age" min="13" max="120">
    </div>
    
    <!-- Preferences -->
    <fieldset>
      <legend>Gender</legend>
      <div class="radio-group">
        <div>
          <input type="radio" id="male" name="gender" value="male">
          <label for="male">Male</label>
        </div>
        <div>
          <input type="radio" id="female" name="gender" value="female">
          <label for="female">Female</label>
        </div>
        <div>
          <input type="radio" id="other" name="gender" value="other">
          <label for="other">Other</label>
        </div>
      </div>
    </fieldset>
    
    <fieldset>
      <legend>Interests</legend>
      <div class="checkbox-group">
        <div>
          <input type="checkbox" id="sports" name="interests" value="sports">
          <label for="sports">Sports</label>
        </div>
        <div>
          <input type="checkbox" id="music" name="interests" value="music">
          <label for="music">Music</label>
        </div>
        <div>
          <input type="checkbox" id="technology" name="interests" value="technology">
          <label for="technology">Technology</label>
        </div>
        <div>
          <input type="checkbox" id="travel" name="interests" value="travel">
          <label for="travel">Travel</label>
        </div>
      </div>
    </fieldset>
    
    <div class="form-group">
      <label for="country">Country:</label>
      <select id="country" name="country" required>
        <option value="">Select your country</option>
        <option value="us">United States</option>
        <option value="ca">Canada</option>
        <option value="uk">United Kingdom</option>
        <option value="au">Australia</option>
        <option value="de">Germany</option>
        <option value="fr">France</option>
      </select>
    </div>
    
    <div class="form-group">
      <label for="experience">Experience Level:</label>
      <select id="experience" name="experience">
        <option value="beginner">Beginner</option>
        <option value="intermediate">Intermediate</option>
        <option value="advanced">Advanced</option>
        <option value="expert">Expert</option>
      </select>
    </div>
    
    <div class="form-group">
      <label for="bio">Biography:</label>
      <textarea id="bio" 
                name="bio" 
                rows="4" 
                placeholder="Tell us about yourself..."></textarea>
    </div>
    
    <div class="form-group">
      <label for="favorite-color">Favorite Color:</label>
      <input type="color" id="favorite-color" name="favorite-color" value="#3498db">
    </div>
    
    <button type="submit">Register</button>
  </form>
</body>
</html>

Form Control Attributes

Common Attributes

• required - Makes the field mandatory
• placeholder - Shows hint text
• disabled - Disables the control
• readonly - Makes the control read-only
• maxlength - Limits text length
• pattern - Specifies a regex pattern for validation

Input-Specific Attributes

• min, max - For numeric and date inputs
• step - Increment value for numeric inputs
• accept - File types for file inputs
• multiple - Allows multiple selections