✅ 1. Basic Text Input
html
<div class="mb-3">
<label for="nameInput" class="form-label">Name</label>
<input type="text" class="form-control" id="nameInput" placeholder="Enter your name">
</div>
✅ 2. Email Input
html
<div class="mb-3">
<label for="emailInput" class="form-label">Email address</label>
<input type="email" class="form-control" id="emailInput" placeholder="name@example.com">
</div>
✅ 3. Password Input
html
<div class="mb-3">
<label for="passwordInput" class="form-label">Password</label>
<input type="password" class="form-control" id="passwordInput" placeholder="Password">
</div>
✅ 4. File Upload Input
html
<div class="mb-3">
<label for="formFile" class="form-label">Upload File</label>
<input class="form-control" type="file" id="formFile">
</div>
✅ 5. Textarea (Multiline Input)
html
<div class="mb-3">
<label for="messageTextarea" class="form-label">Message</label>
<textarea class="form-control" id="messageTextarea" rows="4" placeholder="Type your message..."></textarea>
</div>
✅ 6. Input with Icons (using input groups)
html
<div class="input-group mb-3">
<span class="input-group-text">@</span>
<input type="text" class="form-control" placeholder="Username">
</div>
✅ 7. Checkboxes and Radio Buttons
html
<!-- Checkbox -->
<div class="form-check mb-3">
<input class="form-check-input" type="checkbox" id="checkMeOut">
<label class="form-check-label" for="checkMeOut">
Remember me
</label>
</div>
<!-- Radio -->
<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadio" id="radio1" checked>
<label class="form-check-label" for="radio1">Option 1</label>
</div>
<div class="form-check mb-3">
<input class="form-check-input" type="radio" name="flexRadio" id="radio2">
<label class="form-check-label" for="radio2">Option 2</label>
</div>
