Text Input

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

read data, hide , setting value for a textbox and more

Textarea

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

Dropdown Selectbox

<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>

Multiple Selection Listbox

<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>

Reading selected option, add or remove options, enable or disable, onchange event and more

Radio button

<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>

<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>

<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>

Reading radio button value, disable, on change event, onload event and more

Checkbox control

<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>

<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>

Reading checkbox value, disable, on change event, total clicked and more

Reset Form Inputs

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

$("#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();
});

Buttons

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

Click event, enable or disable, reading value of a button and more