HTML Forms

General Inputs

This section covers basic input fields, including text,
email, and password, with client-side validation.

It also demonstrates special attributes like readonly
and disabled, and a standard dropdown with <select>.

<!-- Text input with validation -->
<label for="name">Name</label>
<input
  type="text"
  id="name"
  name="name"
  required
  minlength="3"
  maxlength="50"
  placeholder="Your full name">

<!-- Email input -->
<label for="email">E-Mail</label>
<input
  type="email"
  id="email"
  name="email"
  required
  placeholder="example@domain.com">

<!-- Password input with pattern -->
<label for="password">Password</label>
<input
  type="password"
  id="password"
  name="password"
  required
  minlength="8"
  pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
  title="Must contain at least one number, one uppercase
         and lowercase letter, and at least 8 characters">

<!-- Readonly field -->
<label for="readonly-field">Username (auto-generated)</label>
<input
  type="text"
  id="readonly-field"
  value="user_2025"
  readonly>

<!-- Disabled field -->
<label for="disabled-field">Current Plan</label>
<input
  type="text"
  id="disabled-field"
  value="Premium Plan"
  disabled>

<!-- Country dropdown -->
<label for="country">Country</label>
<select id="country" name="country">
  <option value="" disabled selected>Select your country</option>
  <option value="switzerland">Switzerland</option>
  <option value="germany">Germany</option>
  <option value="france">France</option>
  <option value="other">Other</option>
</select>

General

Name

E-Mail

Password

Username (auto-generated) This field is read-only and cannot be edited

Current Plan This field is disabled and cannot be submitted

Country

User Choices

This section includes radio buttons for single-choice selections,
a textarea with a character counter, and a checkbox for binary options.

<!-- Radio buttons for single choice -->
<p>Please select your gender:</p>
<input
  type="radio"
  id="male-ex"
  name="gender-ex"
  value="male">
<label for="male-ex">Male</label>
<input
  type="radio"
  id="female-ex"
  name="gender-ex"
  value="female">
<label for="female-ex">Female</label>
<input
  type="radio"
  id="other-ex"
  name="gender-ex"
  value="other">
<label for="other-ex">Other</label>

<!-- Textarea with character counter -->
<label for="message-ex">Message</label>
<textarea
  id="message-ex"
  name="message"
  rows="4"
  maxlength="500"
  required>
</textarea>
<small><span id="char-count-ex">0</span>/500</small>
<script>
  document.getElementById('message-ex').addEventListener('input', function() {
    document.getElementById('char-count-ex').textContent = this.value.length;
  });
</script>

<!-- Checkbox for a binary option -->
<input
  type="checkbox"
  id="newsletter-ex"
  name="newsletter"
  value="yes">
<label for="newsletter-ex">Subscribe to newsletter</label>

Feedback

Male

Female

Other

Message 0/500 characters

Subscribe to newsletter

Advanced Inputs

This section features more advanced input types, such as date pickers,
telephone numbers with validation patterns, file uploads, and URL fields.

<!-- Date input with min/max validation -->
<label for="birthdate">Date of Birth</label>
<input
  type="date"
  id="birthdate"
  name="birthdate"
  min="1950-01-01"
  max="2023-12-31"
  required>

<!-- Phone input with pattern -->
<label for="phone">Phone Number</label>
<input
  type="tel"
  id="phone"
  name="phone"
  pattern="[+][0-9]{2} [0-9]{2} [0-9]{3} [0-9]{2} [0-9]{2}">

<!-- File upload -->
<label for="profile-picture">Profile Picture</label>
<input
  type="file"
  id="profile-picture"
  name="profile-picture"
  accept="image/*">

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

Additional Information

Date of Birth Date must be between 1950 and 2023

Phone Number

Profile Picture

Website

Special Input Types

Explore a variety of special input types, including styled checkboxes,
multi-select dropdowns, range sliders, and inputs for time, numbers, and colors.

Also included is a datalist for providing input suggestions.

<!-- Styled checkboxes -->
<p>Favorite Colors:</p>
<input
  type="checkbox"
  id="color-red-ex"
  name="colors-ex"
  value="red"
  style="accent-color: #FF7075;">
<label for="color-red-ex">Red</label>
<input
  type="checkbox"
  id="color-green-ex"
  name="colors-ex"
  value="green"
  style="accent-color: #70FF75;">
<label for="color-green-ex">Green</label>
<input
  type="checkbox"
  id="color-blue-ex"
  name="colors-ex"
  value="blue"
  style="accent-color: #7075FF;">
<label for="color-blue-ex">Blue</label>

<!-- Multi-select dropdown -->
<label for="frameworks-ex">Frameworks (multi-select):</label>
<select id="frameworks-ex" name="frameworks-ex" multiple size="3">
  <option value="react">React</option>
  <option value="vue">Vue</option>
  <option value="angular">Angular</option>
</select>

<!-- Range slider with output -->
<label for="experience-ex">Years of Experience</label>
<input
  type="range"
  id="experience-ex"
  name="experience-ex"
  min="0"
  max="20"
  value="10"
  oninput="this.nextElementSibling.value = this.value">
<output>10</output>

<!-- Time input -->
<label for="favorite-time-ex">Favorite Time of Day</label>
<input
  type="time"
  id="favorite-time-ex"
  name="favorite-time-ex">

<!-- Number input -->
<label for="favorite-number-ex">Favorite Number</label>
<input
  type="number"
  id="favorite-number-ex"
  name="favorite-number-ex"
  min="1"
  max="100"
  step="1"
  value="42">

<!-- Color picker -->
<label for="color-picker-ex">Favorite Color</label>
<input
  type="color"
  id="color-picker-ex"
  name="color-picker-ex"
  value="#6065FF">

<!-- Datalist for suggestions -->
<label for="browser-ex">Favorite Browser</label>
<input
  list="browsers-ex"
  id="browser-ex"
  name="browser-ex">
<datalist id="browsers-ex">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
</datalist>