HTML5 Interactive Forms with Code Display

1. Date Input

Birthday:

Code:

<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">

2. Range Input

Volume:

Code:

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

3. Color Picker

Choose a color:

Code:

<label for="color">Choose a color:</label>
<input type="color" id="color" name="color" value="#ff0000">

4. Email Input

Email:

Code:

<label for="email">Email:</label>
<input type="email" id="email" name="email" required>

5. Number Input

Age:

Code:

<label for="age">Age:</label>
<input type="number" id="age" name="age" min="18" max="100" required>

6. Telephone Input

Phone Number:

Code:

<label for="phone">Phone Number:</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required>

7. URL Input

Website:

Code:

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

8. File Upload

Choose a file:

Code:

<label for="file">Choose a file:</label>
<input type="file" id="file" name="file" accept="image/*">

9. Checkbox and Radio Buttons

Subscribe to newsletter:

Choose a plan:

Basic
Premium

Code:

<label for="subscribe">Subscribe to newsletter:</label>
<input type="checkbox" id="subscribe" name="subscribe">

<fieldset>
    <legend>Choose a plan:</legend>
    <input type="radio" id="basic" name="plan" value="basic" checked>
    <label for="basic">Basic</label><br>
    <input type="radio" id="premium" name="plan" value="premium">
    <label for="premium">Premium</label>
</fieldset>

10. Search Input

Search:

Code:

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

11. Time Input

Select a time:

Code:

<label for="appt">Select a time:</label>
<input type="time" id="appt" name="appt">

12. Textarea with Auto Resize

Message:

Code:

<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" cols="50"></textarea>

13. Placeholder Text

Username:

Code:

<label for="username">Username:</label>
<input type="text" id="username" name="username" placeholder="Enter your username" required>

14. Multiple File Uploads

Choose multiple files:

Code:

<label for="files">Choose multiple files:</label>
<input type="file" id="files" name="files" multiple>

15. Number Spinner

Quantity:

Code:

<label for="quantity">Quantity:</label>
<input type="number" id="quantity" name="quantity" min="1" max="10">