Skip to content
Related Articles
Open in App
Not now

Related Articles

Bootstrap 5 Form Controls File Input

Improve Article
Save Article
  • Last Updated : 09 Dec, 2022
Improve Article
Save Article

Bootstrap5 Form controls File input provides customized ways to take the input of the files, i.e., the file input can accept as default, or can accept multiple files at once, or can be disabled the file input. This can also be done for any file input size, which varies from small size to large. This can be done by using the .form-control class that helps to control file input. To control the different sizes of the file input, we can simply specify the .form-control class followed by the form-control-sm or form-control-lg attribute. By default, form controls have a width of 100%.

Form controls File input Classes:

  • form-control-sm: This class helps to reduce the size to small for the file input.
  • form-control-lg: This class helps to increase the size to large for the file input.

Form controls File input Attributes:

  • default: This attribute does not require to specify explicitly.
  • multiple: This attribute enables the acceptance of multiple files for input at once.
  • disabled: This attribute disables or inactivates the input field to accept any file.

 

Syntax:

<input class="form-control" 
       type="file" multiple>

Example 1: This example describes the basic usage of the Form controls File input in Bootstrap5 by implementing the default & multiple file input.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, 
                         initial-scale=1">
    <link href=
          rel="stylesheet">
</head>
  
<body class="text-center">
    <h1 class="text-success">
        GeeksforGeeks
    </h1>
    <h3>Form controls File input</h3>
    <div class="mb-3">
        <label for="DefaultFile" 
               class="form-label">
               Default file input
        </label>
        <input class="form-control" 
               type="file" 
               id="DefaultFile">
    </div>
    <div class="mb-3">
        <label for="MultipleFile" 
               class="form-label">
               Multiple file input
        </label>
        <input class="form-control" 
               type="file" 
               id="MultipleFile" multiple>
    </div>
</body>
  
</html>


Output:

 

Example 2: This example describes the basic usage of the Form controls File input in Bootstrap5 by implementing the small file input with multiple attribute & large file input with the disabled attribute.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, 
                         initial-scale=1">
    <link href=
          rel="stylesheet">
</head>
  
<body class="text-center">
    <h1 class="text-success">
        GeeksforGeeks
    </h1>
    <h3>Form controls File input</h3>
    <div class="mb-3">
        <label for="SmallFile" 
               class="form-label">
            Small file with multiple input 
        </label>
        <input class="form-control 
                      form-control-sm" 
               id="SmallFile"
               type="file" multiple>
    </div>
    <div>
        <label for="largeFile" 
               class="form-label">
               Large file with disabled input
        </label>
        <input class="form-control 
                      form-control-lg" 
               id="largeFile" 
               type="file" disabled>
    </div>
</body>
  
</html>


Output:

 

Reference: https://getbootstrap.com/docs/5.0/forms/form-control/#file-input


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!