Complete form — all input types + validation

Every input type in one form: text, email, password, number, range, date, checkbox, radio, select, textarea, file.

index.html v3.1

<form action="/submit" method="post">
  <h2>Train a New Model</h2>

  <!-- Text -->
  <label>Model Name:
    <input type="text" name="model_name" placeholder="My RandomForest" required minlength="3">
  </label>

  <!-- Email -->
  <label>Email (for notifications):
    <input type="email" name="email" required>
  </label>

  <!-- Select dropdown -->
  <label>Algorithm:
    <select name="algorithm">
      <option value="rf">Random Forest</option>
      <option value="xgb">XGBoost</option>
      <option value="lr">Linear Regression</option>
      <option value="nn">Neural Network</option>
    </select>
  </label>

  <!-- Number with min/max/step -->
  <label>Max Depth:
    <input type="number" name="max_depth" value="10" min="1" max="100" step="1">
  </label>

  <!-- Range slider -->
  <label>Learning Rate: <span id="lr-val">0.01</span>
    <input type="range" name="learning_rate" min="0.001" max="1.0" step="0.001" value="0.01">
  </label>

  <!-- Radio buttons -->
  <fieldset>
    <legend>Task Type:</legend>
    <label><input type="radio" name="task" value="classification" checked> Classification</label>
    <label><input type="radio" name="task" value="regression"> Regression</label>
  </fieldset>

  <!-- Checkboxes -->
  <fieldset>
    <legend>Features to use:</legend>
    <label><input type="checkbox" name="features" value="age" checked> Age</label>
    <label><input type="checkbox" name="features" value="income" checked> Income</label>
    <label><input type="checkbox" name="features" value="education"> Education</label>
  </fieldset>

  <!-- Date -->
  <label>Train until date:
    <input type="date" name="train_until">
  </label>

  <!-- Textarea -->
  <label>Notes:
    <textarea name="notes" rows="3" placeholder="Any special instructions..."></textarea>
  </label>

  <!-- File upload -->
  <label>Upload dataset (CSV):
    <input type="file" name="dataset" accept=".csv">
  </label>

  <!-- Hidden field -->
  <input type="hidden" name="user_id" value="42">

  <!-- Submit + Reset -->
  <button type="submit">Start Training</button>
  <button type="reset">Reset Form</button>
</form>

Live preview updates as you type

🧠 How it works

Every input type serves a different purpose: text — single-line text. email — validates email format, shows @ on mobile keyboards. password — masks characters. number — spinner, min/max/step validation. range — slider. Pair with <span> to show the value (needs JS to update). date — native date picker. checkbox — multiple selections (same name, different values). radio — single selection (same name, different values). Always one selected. select — dropdown. <option> for each choice. textarea — multi-line text. rows = height. file — file upload. accept='.csv' filters the file picker. hidden — data you want in the form submission but not visible to the user. fieldset + legend — groups related inputs (like radio buttons) with a label. required — browser won't submit without a value. minlength/maxlength — text length validation.

✏️ Try these changes

Change type="text" to type="password" for model_name
→ text becomes masked dots
Add 'multiple' to the file input
→ allows uploading multiple files
Add 'disabled' to the select
→ dropdown becomes greyed out
Change type="number" to type="range" for max_depth
→ number becomes a slider
Add <option value="" selected disabled>Select...</option> as the first option in the select
→ adds a placeholder

← Previous lab

Complete dashboard page — sidebar + KPIs + charts + table

Next lab →

Complete data table — caption, thead, tbody, colspan