Last Updated on July 16, 2021 by Roshan Parihar
To make required input field, you have to use required attribute with true as its value. You can make all the form fields compulsory to fill to get user input data for all form fields.
Let’s find out with the examples given below:-
How To Make Required Input Field Using Bootstrap
To create the required input fields, you have to put the attribute required="true" with the HTML input text field.
See the example below to find out this:-
|
1 2 3 4 5 6 |
<form method="post"> <div class="form-group"> <input type="text" class="form-control" name="username" placeholder="Username" required="true"> </div> <button type="submit" class="btn btn-primary">Login</button> </form> |
Output
The above example showing the input field using Bootstrap that is required to fill.
Create Bootstrap Form With Compulsory To Fill Textbox
If you want to get the above example working, you have to put the above input field inside the HTML form.
In addition to the above all, you also have to put the submit button in the form. So, when the user clicks the submit button, they will get the required message to fill the field first. If you also put the password input field, the form can work as a login form.
See the below example to create a login form with the required username and password using Bootstrap.
|
1 2 3 4 5 6 7 8 9 10 11 |
<form method="post"> <div class="form-group"> <label for="Username">Username</label> <input type="text" class="form-control" name="username" placeholder="Username" required="true"> </div> <div class="form-group"> <label for="Password">Password</label> <input type="password" class="form-control" name="password" placeholder="Password" required="true"> </div> <button type="submit" class="btn btn-primary">Login</button> </form> |
Output
The above example contains the form which contains the input fields. There are two input fields for username and password. To check the field if compulsory to fill, you have to leave them blank and click the submit button. Each time you leave them blank, you will get a required to fill message.
DOWNLOAD Free Bootstrap CHEAT SHEET
Related Posts