:input【各種入力要素】

メモ

構文

jQuery( ":input" ) 1.0

関連

例

<div id="id1">
  <p>
    <button>&lt;button&gt;</button>
    <button type="button">&lt;button type="button"&gt;</button>
    <button type="submit">&lt;button type="submit"&gt;</button>
    <button type="reset">&lt;button type="reset"&gt;</button>
  </p>

  <hr>
  <p><input value='<input>'></p>
  <p><input type="button" value='<input type="button">'></p>
  <p><label><input type="checkbox">&lt;input type="checkbox"&gt;</label></p>
  <p>&lt;input type="file"&gt;：<input type="file"></p>
  <p><input type="image" value='<input type="image">' alt='<input type="image">'></p>
  <p><input type="password" placeholder='<input type="password">'></p>
  <p>
    <label><input type="radio" name="radio1">&lt;input type="radio" name="radio1"&gt;</label>
    <label><input type="radio" name="radio1" checked>&lt;input type="radio" name="radio1"&gt;</label>
  </p>
  <p><input type="reset" value='<input type="reset">'> <input type="submit" value='<input type="submit">'></p>
  <p><input type="text" value='<input type="text">'></p>

  <hr>
  <p>&lt;input type="color"&gt;：<input type="color"></p>
  <p>&lt;input type="date"&gt;：<input type="date"></p>
  <p>&lt;input type="datetime-local"&gt;：<input type="datetime-local"></p>
  <p><input type="email" placeholder='<input type="email">'></p>
  <p>&lt;input type="month"&gt;：<input type="month"></p>
  <p><input type="number" placeholder='<input type="number">'></p>
  <p>&lt;input type="range"&gt;：<input type="range"></p>
  <p><input type="search" value='<input type="search">'></p>
  <p><input type="tel" placeholder='<input type="tel>"'></p>
  <p>&lt;input type="time"&gt;：<input type="time"></p>
  <p>&lt;input type="week"&gt;：<input type="week"></p>
  <p><input type="url" placeholder='<input type="url">'></p>

  <hr>
  &lt;select&gt;：
  <select>
    <option>&lt;option&gt;
    <option>&lt;option&gt;
    <option>&lt;option&gt;
  </select>
  <select size="5">
    <option>&lt;option&gt;
    <option selected>&lt;option selected&gt;
    <option>&lt;option&gt;
  </select>

  <hr>
  <p><textarea>&lt;textarea&gt;</textarea></p>
</div>

<style>
.style11 { border:2px red dashed; }
.style12 { border:2px blue dashed; }
</style>

<script>
$( "#id1 :input" ).addClass("style11");
$( "#id1 :input[type='checkbox']" ).wrap( "<span></span>" ).parent().addClass("style12");
$( "#id1 :input[type='radio']" ).wrap( "<span></span>" ).parent().addClass("style12");
$( "#id1 :input[type='range']" ).wrap( "<span></span>" ).parent().addClass("style12");
</script>

<input type="file">：

<input type="color">：

<input type="date">：

<input type="datetime-local">：

<input type="month">：

<input type="range">：

<input type="time">：

<input type="week">：

<select>： 

<div id="id2">
  【同上】
  <p>
    <label><input type="radio" name="radio2">&lt;input type="radio" name="radio2"&gt;</label>
    <label><input type="radio" name="radio2" checked>&lt;input type="radio" name="radio2"&gt;</label>
  </p>
  【同上】
</div>

<style>
.style21 { border:2px blue dashed; }
.style22 { border:2px red dashed; }
</style>

<script>
$( "#id2 *" ).filter( ":input" ).addClass("style21");
$( "#id2 *" ).filter( ":input[type='checkbox']" ).wrap( "<span></span>" ).parent().addClass("style22");
$( "#id2 *" ).filter( ":input[type='radio']" ).wrap( "<span></span>" ).parent().addClass("style22");
$( "#id2 *" ).filter( ":input[type='range']" ).wrap( "<span></span>" ).parent().addClass("style22");
</script>

<input type="file">：

<input type="color">：

<input type="date">：

<input type="datetime-local">：

<input type="month">：

<input type="range">：

<input type="time">：

<input type="week">：

<select>：