Form Inputs

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

Selection of one out of many choices.
Use class='radio'
<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>
class= 'radio-inline' can be used for showing horizontally ( in one line )
<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>
For Bootstrap 4 , use class="form-check-inline"
<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

More than one choice can be selected
Use class='checkbox'
<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>
We have given different names to checkboxs here. At backend script ( PHP, ASP , JSP etc ) while collecting the data we will get only value for checked options. If we don't know how many choices we can display then we can use array for all names like this ( name=chc[] ) . You can read more on how to handle checkbox array here.

class='checkbox-inline' for displaying in one line ( horizontally )
<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>

We can add other classes like secondary ( bootstrap 4 ) , success, info, warning, danger, link to our button.

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



Subscribe

* indicates required
Subscribe to plus2net

    plus2net.com



    Post your comments , suggestion , error , requirements etc here .







    Most Popular JQuery Scripts

    1

    Two dependant list boxes

    2

    Calendar with Date Selection

    3

    Data change by Slider

    4

    Show & Hide element


    JQuery Video Tutorials




    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2024 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer