Bootstrap Form Inputs

Bootstrap 4 styles common form controls with form-control, form-check and related classes.

Text Input and Textarea Top ↑

<input type="text" class="form-control" name="name">

<textarea class="form-control" rows="4" name="message"></textarea>

Select Control Top ↑

<select class="form-control" name="city">
  <option value="hyd">Hyderabad</option>
  <option value="vizag">Visakhapatnam</option>
</select>

Checkbox and Radio Top ↑

<div class="form-check">
  <input class="form-check-input" type="checkbox" id="terms" name="terms" value="yes">
  <label class="form-check-label" for="terms">I agree</label>
</div>

<div class="form-check">
  <input class="form-check-input" type="radio" id="plan1" name="plan" value="basic">
  <label class="form-check-label" for="plan1">Basic</label>
</div>

File Input Top ↑

<div class="custom-file">
  <input type="file" class="custom-file-input" id="upload" name="upload">
  <label class="custom-file-label" for="upload">Choose file</label>
</div>

jQuery textbox · checkbox · radio button

Original Source Examples Retained for Migration Reference Top ↑

Original example 1

<input type='text' class='form-control' id='t1' name='t1' placeholder='Your Name'>

Original example 2

<textarea class='form-control' rows='3' name=tx1 id=tx1></textarea>

Original example 3

<select class='form-control' name='s1'>
  <option value='One'>Option one </option>
  <option value='Two'>Option two</option>
  <option value='Three'>Option Three</option>
  <option value='Four'>Option Four</option>
</select>

Original example 4

<select class='form-control' name='s1' multiple size='3'>
   <option value='One'>Option one </option>
  <option value='Two'>Option two</option>
  <option value='Three'>Option Three</option>
  <option value='Four'>Option Four</option>
</select>

Original example 5

<div class='radio'>
  <label><input type='radio' name='r1' id='r1' value='option1' checked>Option 1</label>
</div>

<div class='radio'>
  <label><input type='radio' name='r1' id='r2' value='option2' >Option 2</label>
</div>

<div class='radio'>
  <label><input type='radio' name='r1' id='r3' value='option3' >Option 3</label>
</div>

Original example 6

<div class='radio-inline'>
  <label><input type='radio' name='r1' id='r1' value='option1' checked>Option 1</label>
</div>

<div class='radio-inline'>
  <label><input type='radio' name='r1' id='r2' value='option2' >Option 2</label>
</div>

<div class='radio-inline'>
  <label><input type='radio' name='r1' id='r3' value='option3' >Option 3</label>
</div>

Original example 7

<div class='form-check-inline'>
  <label><input type='radio' name='r1' id='r1' value='option1' checked>Option 1</label>
</div>

<div class='form-check-inline'>
  <label><input type='radio' name='r1' id='r2' value='option2' >Option 2</label>
</div>

<div class='form-check-inline'>
  <label><input type='radio' name='r1' id='r3' value='option3' >Option 3</label>
</div>

Original example 8

<div class='checkbox'>
  <label>
    <input type='checkbox' value='opt1' name=c1 id=c1> Choice 1
  </label>
</div>
<div class='checkbox'>
  <label>
    <input type='checkbox' value='opt2' name=c2 id=c2> Choice 2
  </label>
</div>
<div class='checkbox'>
  <label>
    <input type='checkbox' value='opt1' name=c3 id=c1> Choice 1
  </label>
</div>

Original example 9

<div class='checkbox-inline'>
  <label>
    <input type='checkbox' value='opt1' name=c1 id=c1> Choice 1
  </label>
</div>
<div class='checkbox-inline'>
  <label>
    <input type='checkbox' value='opt2' name=c2 id=c2> Choice 2
  </label>
</div>
<div class='checkbox-inline'>
  <label>
    <input type='checkbox' value='opt1' name=c3 id=c1> Choice 1
  </label>
</div>

Original example 10

<input type=button id=reset value=Reset>

Original example 11

$("#reset").click(function() {
//$('#f1')[0].reset(); // Reset form with id f1
//$(this).closest('form').find("input[type=text], textarea").val(""); // reset all text 
//$("#f1 input[type='text']").val("");
//setTimeout(function() { window.location = "index.php"; }, 4000); // reload after some time

location.reload();
});

Original example 12

<button type='button' class='btn btn-primary' id='b1'>Primary</button>

Additional Original Learning Routes Top ↑

• bs-form.php
• listbox.php
• msg-demo/form-code-generator.php
• serialize.php

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: