フォーム回りで使える HTML5 タグ

Posted
2012-07-29

HTML5で使用できるようになったinputタグの属性などを復習を兼ねてまとめてみました。HTML5になるとJavsScriptを使ったような表現ができるようになったりしています。

入力フォームに関するHTML5はまだIEだと9でも対応していません。その他のモダンブラウザでも対応してないものが多々あります。解釈できないType属性は「type=”text”」と認識されるので、プログレッシブ・エンハンスメントな考えで実装するか、対応していないものはJavaScriptで対応することになります。

こちらの対応表”HTML5 &amp CSS3 Support, Web Design Tools &amp Support – FindMeByIP – CSS3 &amp HTML5 Browser Support”でどのブラウザが対応しているか確認できます。

表示例で使用した画像のブラウザはOpera（とiPhone）です

1. フォーム内に入力例を表示する

placeholder属性を使うとフォーム内に薄い文字で入力例などを表示する事ができます。

HTML使用例

<form> 
<input type="text" size="50" placeholder="'placeholder'を入力するとこのように表示されます"> 
</form>

表示のされ方

↓のように表示されます
placeholder を使った表示のされ方

2. URLなど入力する種類に応じた表示

type=”tel”・type=”url”を使用するとiPhoneなどの対応機種でそれぞれの入力する種類に応じたキーパッドが表示されます。スマートフォンサイト制作時のユーザビリティによいですね。type=”sarch”を使用すると自動的にフォームが角丸になります。

使用例

<form> 
<ul> 
	<li> <input type="tel"> </li> 
	<li> <input type="url"> </li> 
	<li> <input type="sarch"> <input type="submit"> </li> 	
</ul> 
</form>

表示のされ方

↓のように表示されます
type=”tel”
type:tel にした時の表示例
type=”url”
type:url にした時の表示例

type=”sarch”は以下のように表示されます。
type:sarch にした時の表示例

iOSの入力フォームの属性

ちなみにiPhoneではアルファベットを入力した際に最初の文字が大文字になるようになっています。アドレスの入力時などには不要な機能です。”autocapitalize”属性で”off”とすると大文字にする機能をオフにする事ができます。

使用例

<input type="text" autocapitalize="off">

3. メールアドレスのチェック

type属性をemailとすると、@を含むメールアドレスの形式になってないものは送信時にエラーを出してくれます。

使用例

<form> 
	<input type="email"> <input type="sarch"> 
</form>

表示のされ方

↓のように表示されます
type属性をemailとした時の表示例

4. フォーカスを当てる

autofocus属性を使用すると、ロードした最初にフォーカスをが当てる事ができます。

使用例

<form> 
	<input type="text" autofocus> 
</form>

表示のされ方

↓のように表示されます
autofocus属性を使用した時の表示例

5. 必須項目を示す

required属性を使用すると、required属性を入れたフォームが未入力の場合エラーメッセージを出すことができます。

使用例

<form> 
	<input type="text" required> 
</form>

表示のされ方

↓のように表示されます
required属性を使用した時の表示例

6. カラーピッカーを表示

type属性にcolorを指定するとカラーピッカーを表示する事ができます。

使用例

<form> 
	<input type="color"> 
</form>

表示のされ方

↓のように表示されます
type属性にcolorを指定してカラーピッカーを表示させた時の表示例

7. スライダーで数字入力する

type属性にrangeを指定するとスライダーを表示し、数字の入力ができます。
min で入力する最小の数字、max で最大の数字、step で数字が変化する間隔、valueでデフォルトの数字を指定する事ができます。

使用例

<form>
	<input type="range" min="1" max="30" step="2" value="1">
</form>

表示のされ方

↓のように表示されます
type属性にrangeを指定してスライダーを表示させた時の表示例

8. スピンボックスで数字入力する

type属性にnumberを指定し、min=” ” max=” ” step=” ” を指定するとスピンボックスを表示して数字の入力ができます。

使用例

<form>
        <input type="number" min="0" max="31" step="2" value="1">
</form>

表示のされ方

↓のように表示されます

9. 入力を補完

autocomplete属性をonにすると、入力するときに入力候補を表示する事ができます。
autocompleteをonにし、datalistタグで候補を入力します。

使用例

<form method="post" action="example.php">
	<fieldset>
	ペットの種類：
		<input type="text" name="yourarea" autocomplete="on" list="animal">
		<datalist id="animal">
			<option value="犬">
			<option value="猫">
			<option value="うさぎ">
			<option value="フェレット">
			<option value="ハムスター">
		</datalist>
		<input type="submit" value="送信">
	</fieldset>
</form>

表示のされ方

↓のように表示されます
autocomplete属性をonにして入力補完を表示した例

サンプルページ

表示のされ方に使用したサンプルページもアップしました。

フォーム回りのHTML5サンプルページ

サンプルページのHTMLコードは以下のようになっています。

<body>
<div id="container">

<header id="header">
<h1>フォーム回りのHTML5サンプルページ</h1>
</header><!-- fin_header -->

<section> 
<h1>1. 入力例を表示</h1>
	<form> 
	<input type="text" size="50" placeholder="'placeholder'を入力するとこのように表示されます">
	</form>
</section>

<section id="form">
<h1>2. 入力する種類に応じたキーパッドを表示する</h1>
<form method="post" action="exapmle.php">
<dl>
	<dt>type="tel"</dt>
	<dd><input type="tel" placeholder="type='000-0000-0000'"></dd>	
	<dt>type="url"</dt>
	<dd><input type="url" placeholder="www.0000.com"></dd>	
	<br><br>
	<dd><input type="search" placeholder="search"><input type="submit"></dd>
</dl>
</form>
</section>

<section>
<h1>3. フォーカスを当てる</h1>
	ロードした最初にフォーカスが当たります
	<form>
	<input type="text" autofocus>
	</form>	
</section> 

<section> 
<h1> 4. 必須項目を示す</h1> 
	未入力の場合エラーメッセージが自動的にでます
	<form> 
	<input type="text" required> 
	<input type="submit" value="未入力でクリックしてね"> 
	</form> 
</section> 

<section> 
<h1> 5. カラーピッカーを表示</h1> 
	<form> 
	<input type="color"> 
	</form> 
</section> 

<section> 
<h1> 6. スライダで数字入力</h1> 
	<form> 
	<input type="range" min="1" max="30" step="2" value="1"> 
	<input type="submit"> 
	</form> 
</section> 

<section> 
<h1> 7. スピンボックスで数字入力</h1> 
	<form> 
	<input type="number" min="0" max="31" step="2" value="1"> 
	<input type="submit"> 
	</form> 
</section> 

<h1> 8. 入力を補完</h1> 
<form action="example.php" method="post"> 
	<fieldset> 
	ペットの種類：
		<input type="text" name="yourarea" autocomplete="on" list="animal"> 
		<datalist id="animal"> 
			<option value="犬"> 
			<option value="猫"> 
			<option value="うさぎ"> 
			<option value="フェレット"> 
			<option value="ハムスター"> 
		</datalist> 
		<input type="submit" value="送信"> 
	</fieldset> 
</form> 

<footer id="footer"> 
		<small> Copyright&amp copy 2012 memocarilog.All Right Reserved</small> 

</footer> <!-- footer --> 

</div> <!--container--> 
</body>

PNGファイルを軽量化してくれるWebサービス-TinyPNG

WordPressのログイン画面にBasic認証をかけて二重ロックする

memocarilog