<!-- Basic Input Types -->
            <div class="mb-3">
            <label for="textInput" class="form-label">Text Input</label>
            <input type="text" class="form-control" id="textInput" placeholder="Enter text">
            </div>

            <div class="mb-3">
            <label for="emailInput" class="form-label">Email Input</label>
            <input type="email" class="form-control" id="emailInput" placeholder="name@example.com">
            </div>

            <div class="mb-3">
            <label for="passwordInput" class="form-label">Password Input</label>
            <input type="password" class="form-control" id="passwordInput" placeholder="Enter password">
            </div>

            <div class="mb-3">
            <label for="searchInput" class="form-label">Search Input</label>
            <input type="search" class="form-control" id="searchInput" placeholder="Search...">
            </div>

<!-- Number Input -->
            <div class="mb-3">
            <label for="numberInput" class="form-label">Number Input</label>
            <input 
                type="number" 
                class="form-control" 
                id="numberInput" 
                min="0"
                max="100"
                step="1"
            >
            </div>

            <!-- Range Slider -->
            <div class="mb-3">
            <label for="rangeInput" class="form-label">Range Slider</label>
            <input 
                type="range" 
                class="form-range" 
                id="rangeInput" 
                min="0"
                max="100"
                value="50"
            >
            </div>

            <!-- Telephone Input -->
            <div class="mb-3">
            <label for="telInput" class="form-label">Telephone</label>
            <input 
                type="tel" 
                class="form-control" 
                id="telInput" 
                pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
            >
            </div>

            <!-- URL Input -->
            <div class="mb-3">
            <label for="urlInput" class="form-label">URL</label>
            <input type="url" class="form-control" id="urlInput">
            </div>

<!-- Date and Time Inputs -->
            <div class="mb-3">
            <label for="dateInput" class="form-label">Date</label>
            <input type="date" class="form-control" id="dateInput">
            </div>

            <div class="mb-3">
            <label for="timeInput" class="form-label">Time</label>
            <input type="time" class="form-control" id="timeInput">
            </div>

            <div class="mb-3">
            <label for="datetimeInput" class="form-label">Date & Time</label>
            <input type="datetime-local" class="form-control" id="datetimeInput">
            </div>

            <div class="mb-3">
            <label for="monthInput" class="form-label">Month</label>
            <input type="month" class="form-control" id="monthInput">
            </div>

            <div class="mb-3">
            <label for="weekInput" class="form-label">Week</label>
            <input type="week" class="form-control" id="weekInput">
            </div>

            <!-- Color Picker (Note: Use .form-control-color) -->
            <div class="mb-3">
            <label for="colorInput" class="form-label">Color</label>
            <input 
                type="color" 
                class="form-control form-control-color" 
                id="colorInput" 
                value="#563d7c"
                title="Choose your color"
            >
            </div>

<!-- File Upload Inputs -->
            <div class="mb-3">
            <label for="singleFile" class="form-label">Single File</label>
            <input type="file" class="form-control" id="singleFile">
            </div>

            <div class="mb-3">
            <label for="multipleFiles" class="form-label">Multiple Files</label>
            <input type="file" class="form-control" id="multipleFiles" multiple>
            </div>

            <div class="mb-3">
            <label for="fileWithAccept" class="form-label">Images Only</label>
            <input 
                type="file" 
                class="form-control" 
                id="fileWithAccept" 
                accept="image/*"
            >
            </div>

            <div class="mb-3">
            <label for="pdfFile" class="form-label">PDF Only</label>
            <input 
                type="file" 
                class="form-control" 
                id="pdfFile" 
                accept=".pdf"
            >
            </div>

<!-- Specialized Input Types -->
            <!-- Hidden Input -->
            <input type="hidden" id="hiddenInput" value="secret-data">

            <!-- Readonly Input -->
            <input 
            type="text" 
            class="form-control" 
            value="Cannot be changed"
            readonly
            >

            <!-- Disabled Input -->
            <input 
            type="text" 
            class="form-control" 
            placeholder="Cannot interact"
            disabled
            >

            <!-- Required Input -->
            <input 
            type="text" 
            class="form-control" 
            placeholder="Required field"
            required
            >

            <!-- Pattern Validation -->
            <input 
            type="text" 
            class="form-control" 
            pattern="^d{5}(-d{4})?$"
            title="Enter valid ZIP code"
            >

            <!-- Maxlength -->
            <input 
            type="text" 
            class="form-control" 
            maxlength="10"
            >