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 rows=4></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>

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 to our mailing list

* indicates required
Subscribe to plus2net
Visitors Rating
Your Rating


Google+

Post Comment This is for short comments only. Use the forum for more discussions.




Subscribe to our mailing list

* indicates required
Subscribe to plus2net



Most Popular JQuery Scripts

1

Two dependant list boxes

2

Calendar with Date Selection

3

Data change by Slider

4

Show & Hide element
HTML . MySQL. PHP. JavaScript. ASP. Photoshop. Articles. FORUM Contact us
©2000-2018 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer