Form(フォーム)

by kachibito

HTML

<h2 class="clear">:input</h2>
<div id="input">
<form>
  <input type="button" value="Input Button">Button<br>
  <input type="checkbox" checked="checked"><label>checkbox</label><br>
  <input type="file" disabled="disabled">file<br>
  <input type="hidden">hidden<br>
  <input type="image">image<br>
  <input type="password">password<br>
  <input type="radio"><label>radio</label><br>
  <input type="reset">reset<br><br>
  <input type="submit" disabled="disabled">submit
  <input type="text">text<br>
  <select><option>Option</option></select><br>
  <textarea>textarea</textarea><br>
  <button>Button</button><br>
</form>
</div>

<h2 class="clear">:button</h2>
<div id="button">
<form>
  <input type="button" value="Input Button">Button<br>
  <input type="checkbox" checked="checked"><label>checkbox</label><br>
  <input type="file" disabled="disabled">file<br>
  <input type="hidden">hidden<br>
  <input type="image">image<br>
  <input type="password">password<br>
  <input type="radio"><label>radio</label><br>
  <input type="reset">reset<br><br>
  <input type="submit" disabled="disabled">submit
  <input type="text">text<br>
  <select><option>Option</option></select><br>
  <textarea>textarea</textarea><br>
  <button>Button</button><br>
</form>
</div>
<h2 class="clear">:checkbox</h2>
<div id="checkbox">
<form>
  <input type="button" value="Input Button">Button<br>
  <input type="checkbox" checked="checked"><label>checkbox</label><br>
  <input type="file" disabled="disabled">file<br>
  <input type="hidden">hidden<br>
  <input type="image">image<br>
  <input type="password">password<br>
  <input type="radio"><label>radio</label><br>
  <input type="reset">reset<br><br>
  <input type="submit" disabled="disabled">submit
  <input type="text">text<br>
  <select><option>Option</option></select><br>
  <textarea>textarea</textarea><br>
  <button>Button</button><br>
</form>
</div>

<h2 class="clear">:checked</h2>
<div id="checked">
<form>
  <input type="button" value="Input...

CSS

.clear{clear:both;}
h2{padding:15px 0 5px 10px;
   font-size:20px;
    color:blue;
    border-top:1px solid #eee;
}

form{
    margin:15px;
    width:300px;
}
form input{
    padding:2px;
    margin: 2px 0 ;
    line-height:18px;
}

span{padding:2px;}

JavaScript

$(function(){
    

/* :input */
//input要素の背景を黄色にする
$("#input :input").wrap('<span></span>').parent().css("background", "yellow");


/* :button */
//button要素の背景を黄色にする
$("#button :button").wrap('<span></span>').parent().css("background", "yellow");
    
    
/* :checkbox */
//checkbox要素の背景を黄色にする
$("#checkbox :checkbox").wrap('<span></span>').parent().css("background", "yellow");
    
    
/* :checked */
//最初からチェックが入っているcheckbox要素の背景を黄色にする
$("#checked :checked").wrap('<span></span>').parent().css("background", "yellow");
    
    
/* :disabled */
//disabled="disabled"で選択不能になっている要素の背景を黄色にする
$("#disabled :disabled").wrap('<span></span>').parent().css("background", "yellow");
    
    
/* :enabled */
//disabled="disabled"で選択不能になっていない要素の背景を黄色にする
$("#enabled :enabled").wrap('<span></span>').parent().css("background", "yellow");
   
   
/* :file */
//type="file"のinput要素の背景を黄色にする
$("#file :file").wrap('<span></span>').parent().css("background", "yellow"); 


/* :image */
//type="image"のinput要素の背景を黄色にする
$("#image :image").wrap('<span></span>').parent().css("background", "yellow");

    
/* :password */
//type="password"のinput要素の背景を黄色にする
$("#password :password").wrap('<span></span>').parent().css("background", "yellow");
    
    
/* :radio */
//type="radio"のinput要素の背景を黄色にする
$("#radio :radio").wrap('<span></span>').parent().css("background", "yellow");    

    
/* :reset */
//type="reset"のinput要素の背景を黄色にする
$("#reset :reset").wrap('<span></span>').parent().css("background", "yellow"); 
    
    
/* :selected */
// selected="selected"の付いたselect要素の背景を黄色にする
$("#selected option:selected").css("background", "yellow");     

    
/* :submit */
//type="submit"のinput要素の背景を黄色にする
$("#submit input:submit").wrap('<span></span>').parent().css("background", "yellow"); 
    

/* :text */
//text要素の背景を黄色にする
$("#text :text").css("background", "yellow"); 
    
//end    
});