Blog > クライアント技術 > HTML5 > HTML5 Touch Talk #3に参加してきました
2010-01-29
HTML5 Touch Talk #3に参加してきました
前回に引き続き、HTML5 Forms、Canvasを利用したアニメーションを紹介して頂きました。
今回はメインだったHTML5 Formsについて紹介します。
概要
- HTML5 Touch Talk #3（主催：HTML5-developers-jp）
- 日時：1月15日（金）19:00 – 21:00 (受付18:30～)
- 会場：Google 東京オフィス 東京都渋谷区桜丘町26-1 セルリアンタワー7F
アジェンダ
- HTML5 Forms（羽田野氏）
- TransformでCanvasアニメーション(羽田野氏)
- HTML5 の記し方 (白石氏)
HTML5 Forms
前回の「HTML5 Touch Talk on November 2009に参加してきました」で紹介したinput要素のtype属性についての紹介もありましたが、この点は過去の記事をご覧ください。
今回はinput要素に新たに追加される以下の属性について紹介がありました。
紹介された属性
- required
- list
- placeholder
- pattern
- form
- formaction
入力チェックを行う「required属性」
入力チェックを行うrequired属性は一部の要素を除いて利用することができます。
<!DOCTYPE html> <html lang="ja"> <meta charset=UTF-8 /> <meta http-equiv=X-UA-Compatible content="chrome=1" /> <title>HTML5 Forms Required</title> <!-- body --> <p>何も入力しないとアラートが表示されます。</p> <form action="#" method="post"> <input type="text" name="text" required /> <input type="submit" value="送信" /> </form> <!-- body --> </html>
input要素に入力候補を表示する「list属性」
データリストはinput要素に入力候補を表示します。
見た目はセレクトボックスに似ていますが、セレクトボックスの場合候補が限定されてしまいます。
データリストであればテキストボックスなのでユーザー自身が入力することもできます。
Datalistは直接input要素に記述するのではなく、セレクトボックスと似たような形でべつの部分に記述します。（詳しくはサンプルソースコード参照）
<!DOCTYPE html>
<html lang="ja">
<meta charset=UTF-8 />
<meta http-equiv=X-UA-Compatible content="chrome=1" />
<title>HTML5 Forms Data List</title>
<!-- body -->
<p>input要素にフォーカスすると、データリストにしていしている項目が表示されます。</p>
<form action="#" method="post">
<input type="text" name="ria" list="ria_technologys" />
<datalist id="ria_technologys">
<option value="Flex"label="2353件">
<option value="AIR"label="1234件">
<option value="Silverlight"label="434件">
<option value="WPF"label="134件">
<option value="HTML5"label="34件">
</datalist>
<input type="submit" value="送信" />
</form>
<!-- body -->
</html>
入力を補助するためのテキストを表示する「placeholder属性」
よく検索フォームなどにグレーで表示されているフォーカスすると消えるテキストです。
Javascriptで実装できますが、HTML5ではplaceholderを使うことで簡単に実現できます。
<!DOCTYPE html> <html lang="ja"> <meta charset=UTF-8 /> <meta http-equiv=X-UA-Compatible content="chrome=1" /> <title>HTML5 Forms Placeholder</title> <!-- body --> <p>グレーの入力補助が表示されます。</p> <form action="#" method="post"> <input type="text" name="ria" placeholder="キーワード" /> </form> <!-- body --> </html>
正規表現で入力チェックが可能になる「pattern属性」
パターン属性を利用することでJavascriptを使わずに正規表現を使った入力値のチェックが可能になります。
HTML5 Formsでは、多くのtype属性が追加され、emailやurlにはデフォルトで定義がされています。
pattern属性を使うことでそれらにもオーバーライドすることが可能です。
<!DOCTYPE html>
<html lang="ja">
<meta charset=UTF-8 />
<meta http-equiv=X-UA-Compatible content="chrome=1" />
<title>HTML5 Forms Placeholder</title>
<!-- body -->
<p>入力内容が郵便番号のフォーマットxxx-xxxxの場合許可されます。</p>
<form action="#" method="post">
<input type="text" name="text" pattern="\d{3}-\d{4}" required />
<input type="submit" value="送信" />
</form>
<!-- body -->
</html>
form要素の外でもフォームを配置できる「form属性」
テキストインプットなどの要素はform要素内に配置しなければいけませんでしたが、form属性を使うことによって、form要素の
外でもテキストインプットなどの要素が配置できるようになりました。
<!DOCTYPE html> <html lang="ja"> <meta charset=UTF-8 /> <meta http-equiv=X-UA-Compatible content="chrome=1" /> <title>HTML5 Forms Placeholder</title> <!-- body --> <p>form要素の外でもテキストインプットなどの要素が配置できます。<br /> フォーム要素の外でも空の状態で送信しようとするとrequiredが効きます。</p> <form action="#" method="post" id="test-form"> <input type="text" name="text" /> <input type="submit" value="送信" /> </form> ↓ここからはフォーム要素の外<br /> <input type="text" name="url" form="test-form" required /> <!-- body --> </html>
form要素のaction属性以外の指定先にデータを飛ばせる「formaction属性」
HTML4ではフォーム要素のaction属性でデータの送信先を指定しますが、別の送り先を指定できるようになります。
<!DOCTYPE html> <html lang="ja"> <meta charset=UTF-8 /> <meta http-equiv=X-UA-Compatible content="chrome=1" /> <title>HTML5 Forms Placeholder</title> <!-- body --> <p>アクション属性を上書きし、プレビューページに移動します。</p> <form action="ok.html" method="post"> <input type="text" name="text" /> <input type="submit" formaction="review.html" value="プレビュー" /> <input type="submit" value="送信" /> </form> <!-- body --> </html>
最後に
今回の内容はより実用的な属性の紹介でした。
現状ではJavascriptを利用して実現するような事ですが、HTML5になることでより簡単に入力チェック等ができるようになります。
Opera以外のブラウザ対応はまだまだこれからですが今後の対応に期待です。
関連記事
「HTML5 Touch Talk」シリーズの記事
Copyright © CLASSMETHOD.
