Selector input

De selector :input selecteert formulierelementen - inputvelden, tekstgebieden, dropdownlijsten en knoppen. Zie de tags: input, textarea, button, select. Aangezien :input niet tot de CSS-specificatie behoort, is het voor betere prestaties in moderne browsers beter om eerst elementen te filteren met behulp van een pure css-selector, en vervolgens .filter(':input') toe te passen.

Syntaxis

Zo selecteren we formulierelementen:

javascript$(':input');

Voorbeeld

Laten we, volgens de bovenstaande theorie, alle formulierelementen selecteren en het aantal ervan in de console uitvoeren, met behulp van de eigenschap length. We zullen zien dat alle 13 tags zijn geselecteerd:

html<form>
  <input type="button" value="button">
  <input type="checkbox">
  <input type="file">
  <input type="hidden">
  <input type="image">
  <input type="password">
  <input type="radio">
  <input type="reset">
  <input type="submit">
  <input type="text">
  <select>
    <option>option</option>
  </select>
  <textarea></textarea>
  <button>button</button>
</form>

csstextarea {
  height: 25px;
}

javascriptlet allInputs = $(':input');
console.log('Aantal tags: ' + allInputs.length);

$('form').submit(function(event) {
  event.preventDefault(); // voorkomt het verzenden van het formulier
});

Zie ook