Interactive

Text Input:
Email Input:
Password Input:
Textarea:
Select Input:
Gender:
Man
Woman
Checkbox:
Color Picker:
Date Picker:
Range Slider:
Click to see more details
This is additional content hidden inside a <details>
element. Click on the summary to toggle visibility.
              
                <form>
                <div class="form-group">
                    <label for="textInput">Text Input:</label>
                    <input type="text" id="textInput" class="form-control" placeholder="Enter some text">
                </div>
                
                <div class="form-group">
                    <label for="emailInput">Email Input:</label>
                    <input type="email" id="emailInput" class="form-control" placeholder="Enter your email">
                </div>
                
                <div class="form-group">
                    <label for="passwordInput">Password Input:</label>
                    <input type="password" id="passwordInput" class="form-control" placeholder="Enter your password">
                </div>
                
                <div class="form-group">
                    <label for="textareaInput">Textarea:</label>
                    <textarea id="textareaInput" class="form-control" rows="4" placeholder="Enter your message here"></textarea>
                </div>
                
                <div class="form-group select-wrapper">
                    <label for="selectInput">Select Input:</label>
                    <select id="selectInput" class="form-control">
                        <option value="1">Option 1</option>
                        <option value="2">Option 2</option>
                        <option value="3">Option 3</option>
                    </select>
                </div>
                
                <div class="form-group">
                    <label>Gender:</label><br>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="gender" id="man" value="man">
                        <label class="form-check-label" for="man">Man</label>
                    </div>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="gender" id="woman" value="woman">
                        <label class="form-check-label" for="woman">Woman</label>
                    </div>
                </div>
                
                <div class="form-group">
                    <label>Checkbox:</label><br>
                    <input type="checkbox" id="check1" value="1">                   
                </div>
                
                <div class="form-group">
                    <label for="colorInput">Color Picker:</label>
                    <input type="color" id="colorInput" class="form-control">
                </div>
                
                <div class="form-group">
                    <label for="dateInput">Date Picker:</label>
                    <input type="date" id="dateInput" class="form-control">
                </div>
                
                <div class="form-group">
                    <label for="rangeInput">Range Slider:</label>
                    <input type="range" id="rangeInput" min="0" max="100" class="form-control">
                </div>
               
                <button type="submit" class="btn btn-primary">Submit</button>
            </form>
            
            <details>
                <summary>Click to see more details</summary>
                <p>This is additional content hidden inside a &lt;details&gt; <br/>
                element. Click on the summary to toggle visibility.</p>
            </details>