Bootstrap Inputs

In bootstrap differet classes in for form are used to make a form's input fields responsive on different devices.
There are follow form controls are defined
1) Input
2) Textarea
3) Checkboxes
4) Radio Buttons
5) Inline Checkboxes
6) Select list

Example of input types

<h3>Webtags.com</h3>
<p>
This form has four input fields, first name, second field is is for password,
third field is for number and fourth field is for submit.
</p>
<form> 
  <div class="form-group">
  <label for="usr">Name:</label>
  <input type="text" class="form-control" id="usr" name="username"> 
  </div> 
  <div class="form-group">
  <label for="pwd">Password:</label>
  <input type="password" class="form-control" id="pwd" name="password">
  </div>
  <div class="form-group" style="width:100px;">
  <label for="number">Number:</label>
  <input type="number" class="form-control" id="number">
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Output of above code

Webtags.com

This form has four input fields, first name, second field is is for password, third field is for number and fourth field is for submit.

Time,Date, Date & time, Week and month

This form consists different input types like time,date, datetime and month. 

<h3>Webtags.com</h3>
<form> 
  <div class="form-group"> 
    <div class="st_row"> 
    <label for="time"> Current time:</label> 
    <input type="time" class="form-control" id="time"> 
        
    <label for="dt"> Current date:</label> 
    <input type="date" class="form-control" id="dt"> 
    </div> 
    <div class="nd_row"> 
    <label for="datetime-local">Current date and time: </label> 
    <input type="datetime-local" class="form-control" id="datetime-local"> 
  
    <label for="week"> Current week:</label> 

    <input type="week" class="form-control" id="week"> 
    </div> 
    <div class="rd_row"> 
    <label for="month"> Current month :</label> 

    <input type="month" class="form-control" id="month"> 
    </div> 
  </div> 
    <button type="submit" class="btn btn-primary"> Submit</button> 
  </form>

Output of above code

Webtags.com


Example of Checkboxes

Explanation here... 


<h3>Webtags.com</h3>
<p>
This form has four checkboxes. In the second checkbox field disabled attribute
is used to make it disable.
</p>
<form>
  <div class="form-check">
      <label class="form-check-label" for="check1">
      <input type="checkbox" class="form-check-input" id="check1" name="option2" value="something" checked>
      Option 1 
      </label>
  </div>

  <div class="form-check">
    <label class="form-check-label" for="check2">
    <input type="checkbox" class="form-check-input" id="check2" disabled>
  Option 2 
  </label>
  </div>
  <div class="form-check">
    <label class="form-check-label">
    <input type="checkbox" class="form-check-input" name="option2" value="something">
    Option 3 
    </label>
  </div>
  <div class="form-check">
    <label class="form-check-label">
    <input type="checkbox" class="form-check-input" name="option2" value="something">
      Option 4 
    </label>
  </div>

  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Output of above code

Webtags.com

This form has four checkboxes. In the second checkbox field disabled attribute is used to make it disable.

Example of Inline Checkboxes


<h3>Webtags.com</h3>
<p>
In this example there are three input field and all the input fields are inline.
The form-check-inline class is used to make fields label inline.
</p>
<form>
  <div class="form-check">
      <label class="form-check-inline" for="check1">
      <input type="checkbox" class="form-check-input" id="check1" name="option2" value="something" checked>
      Option 1 
      </label>

    <label class="form-check-inline" for="check2">
    <input type="checkbox" class="form-check-input" id="check2" disabled>
  Option 2 
  </label>

    <label class="form-check-inline">
    <input type="checkbox" class="form-check-input" name="option2" value="something">
    Option 3 
    </label>
  </div>

  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Output of above code

Webtags.com

In this example there are three input field and all the input fields are inline. The form-check-inline class is used to make fields label inline.







The Best

Comment here

If you have any query, if you want to know something about any of technical course related to computer science field, if you have any suggestion about relevant to uploaded content or if you anything wrong here (any mistake in content) than please contact us. Keep in mind, comment should be according to community guidelines.


Categories

Latest Posts

blog-image
New Courses
 March 18, 2020
blog-image
A great way to start
 March 21, 2020
blog-image
New Courses for you
 March 26, 2020
blog image
Start your training
 March 28, 2020