html inputs

HTML

<h1>HTML Input Types Demo</h1>

  <section>
    <h2>Text Inputs</h2>
    <label>Text: <input type="text" placeholder="Enter text"></label>
    <label>Prefileld Text: <input type="text" value="Hello"></label>
    <label>Password: <input type="password" value="secret"></label>
    <label>Email: <input type="email" value="test@example.com"></label>
    <label>URL: <input type="url" value="https://example.com"></label>
    <label>Search: <input type="search" placeholder="Search term"></label>
  </section>

  <section>
    <h2>Numeric Inputs</h2>
    <label>Number: <input type="number" value="5" min="0" max="10"></label>
    <label>Range: <input type="range" min="0" max="100" value="40"></label>
  </section>

  <section>
    <h2>Checkboxes</h2>
    <label><input type="checkbox" checked> Option A</label>
    <label><input type="checkbox"> Option B</label>
    <label><input type="checkbox" disabled> Option C</label>
  </section>

  <section>
    <h2>Radio Buttons</h2>
    <label><input type="radio" name="color" value="red" checked> Red</label>
    <label><input type="radio" name="color" value="green"> Green</label>
    <label><input type="radio" name="color" value="blue"> Blue</label>
  </section>

  <section>
    <h2>Select Menus</h2>
    <label>
      Single Select:
      <select>
        <option>Apple</option>
        <option selected>Banana</option>
        <option>Cherry</option>
      </select>
    </label>
    <label>
      Multi-select:
      <select multiple size="4">
        <option selected>Linux</option>
        <option>macOS</option>
        <option selected>Windows</option>
        <option>BSD</option>
      </select>
    </label>
  </section>

  <section>
    <h2>Date & Time</h2>
    <label>Date: <input type="date" value="2025-10-21"></label>
    <label>Time: <input type="time" value="12:30"></label>
    <label>Date & Time: <input type="datetime-local" value="2025-10-21T12:30"></label>
   ...

CSS

body { font-family: sans-serif; margin: 2rem; line-height: 1.6; }
    section { margin-bottom: 2rem; }
    h2 { border-bottom: 1px solid #ccc; margin-bottom: 0.5rem; }
    label { display: block; margin: 0.25rem 0; }
    input, select, textarea, button { margin-top: 0.25rem; }