HTML5のフォームの俺的スニペット


たぶんちょこちょこ追加していくんだぜ。

`pattern`属性に正規表現を用いることで入力可能な値を制限できます。

ちなみにバリデーションをお手軽にテストできるサイトがこちら。[HTML5Pattern](http://html5pattern.com/)


## tel

表示例：
<input id="tel" name="tel" type="tel" pattern="\d{2,4}-\d{2,4}-\d{4}" placeholder="03-1234-5678">


	<input id="tel" name="tel" type="tel" pattern="\d{2,4}-\d{2,4}-\d{4}" placeholder="03-1234-5678">


国番号付き　表示例：<input id="tel" name="tel" type="tel" pattern="[\+]\d{2}[\(]\d{2}[\)]\d{4}[\-]\d{4}" placeholder="+81(3)1234-5678">


	<input id="tel" name="tel" type="tel" pattern="[\+]\d{2}[\(]\d{2}[\)]\d{4}[\-]\d{4}" placeholder="+81(3)1234-5678">


## 郵便番号

表示例：
<input id="zipcode" name="zipcode" type="text" maxlength="8" pattern="^[0-9]{3}\-[0-9]{4}$" placeholder="123-4567">

	<input id="zipcode" name="zipcode" type="text" maxlength="8" pattern="\d{3}-\d{4}}$" placeholder="123-4567">

## 都道府県


表示例：
<select name="Prefectures" id="Prefectures" size="1">
                                            <option value="">▼都道府県を選択</option>
                                            <optgroup label="北海道・東北">
                                                <option value="1">北海道</option>
                                                <option value="2">青森県</option>
                                                <option value="3">岩手県</option>
                                                <option value="4">宮城県</option>
                                                <option value="5">秋田県</option>
                                                <option value="6">山形県</option>
                                                <option value="7">福島県</option>
                                            </optgroup>
                                            <optgroup label="関東">
                                                <option value="8">茨城県</option>
                                                <option value="9">栃木県</option>
                                                <option value="10">群馬県</option>
                                                <option value="11">埼玉県</option>
                                                <option value="12">千葉県</option>
                                                <option value="13">東京都</option>
                                                <option value="14">神奈川県</option>
                                            </optgroup>
                                            <optgroup label="甲信越・北陸">
                                                <option value="15">新潟県</option>
                                                <option value="16">富山県</option>
                                                <option value="17">石川県</option>
                                                <option value="18">福井県</option>
                                                <option value="19">山梨県</option>
                                                <option value="20">長野県</option>
                                            </optgroup>
                                            <optgroup label="東海">
                                                <option value="21">岐阜県</option>
                                                <option value="22">静岡県</option>
                                                <option value="23">愛知県</option>
                                                <option value="24">三重県</option>
                                            </optgroup>
                                            <optgroup label="関西">
                                                <option value="25">滋賀県</option>
                                                <option value="26">京都府</option>
                                                <option value="27">大阪府</option>
                                                <option value="28">兵庫県</option>
                                                <option value="29">奈良県</option>
                                                <option value="30">和歌山県</option>
                                            </optgroup>
                                            <optgroup label="中国">
                                                <option value="31">鳥取県</option>
                                                <option value="32">島根県</option>
                                                <option value="33">岡山県</option>
                                                <option value="34">広島県</option>
                                                <option value="35">山口県</option>
                                            </optgroup>
                                            <optgroup label="四国">
                                                <option value="36">徳島県</option>
                                                <option value="37">香川県</option>
                                                <option value="38">愛媛県</option>
                                                <option value="39">高知県</option>
                                            </optgroup>
                                            <optgroup label="九州・沖縄">
                                                <option value="40">福岡県</option>
                                                <option value="41">佐賀県</option>
                                                <option value="42">長崎県</option>
                                                <option value="43">熊本県</option>
                                                <option value="44">大分県</option>
                                                <option value="45">宮崎県</option>
                                                <option value="46">鹿児島県</option>
                                                <option value="47">沖縄県</option>
                                            </optgroup>
                                                <option value="48">海外</option>
                                            </select>

	
                                            <select name="Prefectures" id="Prefectures" size="1">
                                            <option value="">▼都道府県を選択</option>
                                            <optgroup label="北海道・東北">
                                                <option value="1">北海道</option>
                                                <option value="2">青森県</option>
                                                <option value="3">岩手県</option>
                                                <option value="4">宮城県</option>
                                                <option value="5">秋田県</option>
                                                <option value="6">山形県</option>
                                                <option value="7">福島県</option>
                                            </optgroup>
                                            <optgroup label="関東">
                                                <option value="8">茨城県</option>
                                                <option value="9">栃木県</option>
                                                <option value="10">群馬県</option>
                                                <option value="11">埼玉県</option>
                                                <option value="12">千葉県</option>
                                                <option value="13">東京都</option>
                                                <option value="14">神奈川県</option>
                                            </optgroup>
                                            <optgroup label="甲信越・北陸">
                                                <option value="15">新潟県</option>
                                                <option value="16">富山県</option>
                                                <option value="17">石川県</option>
                                                <option value="18">福井県</option>
                                                <option value="19">山梨県</option>
                                                <option value="20">長野県</option>
                                            </optgroup>
                                            <optgroup label="東海">
                                                <option value="21">岐阜県</option>
                                                <option value="22">静岡県</option>
                                                <option value="23">愛知県</option>
                                                <option value="24">三重県</option>
                                            </optgroup>
                                            <optgroup label="関西">
                                                <option value="25">滋賀県</option>
                                                <option value="26">京都府</option>
                                                <option value="27">大阪府</option>
                                                <option value="28">兵庫県</option>
                                                <option value="29">奈良県</option>
                                                <option value="30">和歌山県</option>
                                            </optgroup>
                                            <optgroup label="中国">
                                                <option value="31">鳥取県</option>
                                                <option value="32">島根県</option>
                                                <option value="33">岡山県</option>
                                                <option value="34">広島県</option>
                                                <option value="35">山口県</option>
                                            </optgroup>
                                            <optgroup label="四国">
                                                <option value="36">徳島県</option>
                                                <option value="37">香川県</option>
                                                <option value="38">愛媛県</option>
                                                <option value="39">高知県</option>
                                            </optgroup>
                                            <optgroup label="九州・沖縄">
                                                <option value="40">福岡県</option>
                                                <option value="41">佐賀県</option>
                                                <option value="42">長崎県</option>
                                                <option value="43">熊本県</option>
                                                <option value="44">大分県</option>
                                                <option value="45">宮崎県</option>
                                                <option value="46">鹿児島県</option>
                                                <option value="47">沖縄県</option>
                                            </optgroup>
                                                <option value="48">海外</option>
                                            </select>


## placeholderの色を変える

	::-webkit-input-placeholder { /* WebKit browsers */
    	color:    #999;
	}
	:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    	color:    #999;
	}
	::-moz-placeholder { /* Mozilla Firefox 19+ */
    	color:    #999;
	}
	:-ms-input-placeholder { /* Internet Explorer 10+ */
    	color:    #999;
	}

http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css