HTML5でサイトを作ってみる。

■ フォーム用タグ

form要素内のnovaliadate属性

HTML5から、テキスト入力欄に"tel"、"url"や"email"などを指定できるようになりました。 これはブラウザ側でチェックする機能なので、これを外したいときに使用します。

form属性

label要素内のform属性は、離れた場所にあるform要素をid値を利用して関連付けることができます。

またinput要素内にもform属性を使うことで、離れたform要素と関連付けることができます。 Webアプリケーションの開発時に役立つ属性です。

input要素

これまで、テキスト入力はすべて「text値」だけでまかなわれていました。
しかし実際に入力するテキスト要素はそれほど多岐に及ばず、ある程度決まった内容です。 したがってこれらの入力自動補完機能をブラウザ側が搭載するようになりました。

HTML5ではこの入力補完機能に対応すべく、単なるテキストフィールドに、さらに意味を加えました。 すなわち、"type属性"として、電話番号には"tel"、メールアドレスには"email"、数値入力には"number"など、入力内容に合わせたtype属性値を仕様に盛り込んだのです。

placeholder属性

input要素のテキストフィールドに、プレースフォルダを実現します。 これまでも、javasriptなどを併用することでテキストフィールドに文字を予め表示させることはできましたが、 HTML5ではHTMLのみで可能です。
※ユーザー様にご指摘を受けまして、input type="mail" を input type="email" に変更しております。 inputやform関連の記述に関しましては、当方詳しくはないので別途ご確認をお願いします。

placeholderの例

<form>
	<label><input type="email" placeholder="メールアドレス"></label>
</form>

autocomplete属性

以前入力した情報をブラウザ側で既往しており、この情報が自動的に入力されます。 指定する場合は"on"、指定しない場合は"off"を選択します。

<form>
	<label><input type="text" autocomplete="off"></label>
</form>

list属性

autocomplete属性と似ていますが、その入力補完値をweb制作者が用意するという点で違います。

<form>
	<p><input type="text" list="fruits"></p>
	<datalist id="fruits">
		<option value="Apple"></option>
		<option value="Orange"></option>
		<option value="Banana"></option>
	</datalist>

</form>

step属性

input要素内の日付け関連の入力を補助します。

<form>
	<input type="date" step="7" min="2011-07-01" max="2011-07-31">
</form>

datalist要素

Googleなどのサーチエンジンフィールドで、何らかの文字を入力すると半自動的に入力補完する機能と同じような動きをします。
また、label要素をつけることで補助的な内容が表示できます。

<form>
<input type="search" list="officesuite">
<datalist id="officesuite">
	<option value="word" label="office"></option>
	<option value="excel" label="office"></option>
	<option value="pwer point" label="office"></option>
	<option value="pages" label="office"></option>
	<option value="numbers" label="office"></option>
	<option value="keynote" label="office"></option>
</datalist>
</form>

keygen要素

鍵ペアを生成するための要素です。 もともとNetscapeの独自要素でしたが、HTML5で採用されました。

<form>
	<p>
		<keygen name="keygenerator" keytype="rsa" >
	</p>
</form>

output要素

form要素の計算結果を表します。
主としてWebアプリケーションの開発に役だちます。

<form>
	<input name="math" id="math">
	<output for="math"></output>
</form>

meter要素

何らかの計算値を表すのに利用します。 最小値と最大値を指定して、ひとつのゲージとして表示されます。

<meter value="6" min="0" max="10"></meter>

progress要素

作業の進捗を表します。 Flashサイトなどを表示させる際、ファイル読み込み時にまずプログレスが表示されますが、 これと同じことがHTMLだけで実現できるようになるでしょう。

<progress value="1" max="10">読み込み中...</progress>

details要素とsummary要素

現在の状況の詳細を表す時に利用します。
detail要素は最初にsummary要素を用いて、最初に表示されるべき情報を掲載します。

menu要素

Webアプリケーションにおけるメニューを表します。

最近のWebアプリケーションでは、メニューバーが表示され、そこからURLのリンクを貼ったり、YouTubeの動画を貼ることができます。 このような各メニュー項目全体をまとめて括るための要素と言えます。

menu要素内には、"command"要素だけでなく、"button"、"select"要素も利用することができます。

command要素

"menu"要素の子要素として使用します。