VOOZH about

URL: https://www.geeksforgeeks.org/bootstrap/bootstrap-5-input-group-custom-forms/

⇱ Bootstrap 5 Input group Custom forms - GeeksforGeeks


  • Courses
  • Tutorials
  • Interview Prep

Bootstrap 5 Input group Custom forms

Last Updated : 25 Jul, 2024

Bootstrap 5 Input group Custom forms are extended form controls, used to collect specific information from visitors on your website. Custom form limits are placed on the number of unique forms you have created. There are two types of custom forms as follows:

  • Custom select: The custom select menu is a dropdown menu that allows users to select or choose a particular option that is predefined. 
  • Custom file input: Custom file input provides a button to its users that opens up a file that allows the user to choose a file.

Syntax:

<div class="input-group">
<label class="input-group-text" for="gfg">
....
</label>
<input type="..." class="form-control" id="gfg">
</div

Example 1: This example illustrates how to custom-select elements from the options menu on the downside of the text input.

Output:

Example 2: The below example demonstrates the Input group Custom file input by styling the label.

Output:

Reference:https://getbootstrap.com/docs/5.0/forms/input-group/#custom-forms

Comment

Explore