We may come across a requirement where we need to display an input element as just text, and not as an input element.

We can do this simply by customizing our style sheet, or just by using the .form-control-plaintext class inside the element with the .form-group class.

Take a look at the following code:

<form>
 <div class="form-group">
 <label for="userEmailAddress">Enter email address</label>
 <input type="email" class="form-control-plaintext" id="userEmailAddress" 
   placeholder="Enter email address">
 <small id="userEmailAddressHelp" class="form-text text-danger">
 Email address cannot be blank.
 Email address should be atleast 3 characters
 </small>
 </div>
 <div class="form-group">
 <label for="userPassword">Enter password</label>
 <input type="password" class="form-control" id="userPassword">
 </div>
</form>

In the preceding code, we have added the .form-control-plaintext class to the input element.

The output of the preceding code is as follows:

In this section, we have learned about various classes and attributes that we can use to enhance and make our forms more interactive and powerful, and above all, add to better user design and experience.