2012-01-01から1年間の記事一覧
placeholder属性は、その入力フィールドのウォーターマークを表します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5></title> <meta charset="UTF-8"> </head> <body> <form action="hoge.cgi" method="post"> <p> 書籍検索:<input type="search" id="booktitle" placeholder="書籍名" /> <input type="submit" value="検索" /> </p> </form></body></html>
step属性は、その入力フィールドの入力単位を表します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5></title> <meta charset="UTF-8"> </head> <body> <form action="hoge.cgi" method="post"> <p> 日時:<input type="datetime" id="datetime" step="1800" /> <input type="submit" value="送信" /> </p> </form> </body> レンダリング…</html>
min属性、max属性は、その入力フィールドに入力可能な値の範囲を表します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5></title> <meta charset="UTF-8"> </head> <body> <form action="hoge.cgi" method="post"> <p> 時刻:<input type="time" id="time" min="10:10:20" max="11:10:20" step="1" /> </p></form></body></html>
pattern属性は、その入力フィールドに入力可能な値の正規表現を表します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5></title> <meta charset="UTF-8"> </head> <body> <form action="hoge.cgi" method="post"> <p> TEL:<input type="text" id="tel" pattern="\d{2,4}-\d{2,4}-\d{4}" title="[半角数字２〜４桁]-[半角数字２〜４桁]-[半角数字４桁]" /> <…</p></form></body></html>
multiple属性は、その入力フィールドに複数の値を入力できることを表します。type属性の値がemail、fileの場合に指定できます。 使用例 <html lang="ja"> <head> <title>Hello! HTML5></title> <meta charset="UTF-8"> </head> <body> <form action="hoge.cgi" method="post"> <p> Mail:<input type="email" id="email" size="30" multiple="multiple" /> </p></form></body></html>
required属性は、その入力フィールドに値が必須であることを表します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5></title> <meta charset="UTF-8"> </head> <body> <form action="hoge.cgi" method="post"> <p> 名前:<input type="text" id="text" required="required" /> <input type="submit" value="送信" /> </p> </form> </body></html>
list属性は、datalistでマークアップされた要素を入力候補として表示します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5></title> <meta charset="UTF-8"> </head> <body> <form action="hoge.cgi" method="post"> <p> 名前:<input type="text" id="text" list="namelist" /> <input type="submit" value="送信" /> </p> </form></body></html>
オートコンプリート機能を有効にするか無効にするかを指定します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5></title> <meta charset="UTF-8"> </head> <body> <form action="hoge.cgi" method="post"> <p> 名前:<input type="text" id="text" autocomplete="on" /> <input type="submit" value="送信" /> </p> </form> </body> レンダリン…</html>
ファイルアップロード用の入力フィールドを表します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5></title> <meta charset="UTF-8"> </head> <body> <form action="hoge.cgi" method="post"> <p> ファイル:<input type="file" id="file" multiple="multiple" size="50" /> <input type="submit" value="送信" /> </p> </form> </body></html>
色を指定するための入力フィールドを表します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5></title> <meta charset="UTF-8"> </head> <body> <form action="hoge.cgi" method="post"> <p> 色:<input type="color" id="color" /> <input type="submit" value="送信" /> </p> </form> </body> レンダリング 初期表示 クリックでカラーピッカー表示 カラーピ…</html>
Expression Blendでアニメーションをグラフィカルに作成する方法を紹介します。 検証環境 Expression Blend 3 手順 [オブジェクトとタイムライン]ビューの[＋]ボタンをクリックします。 Storyboardを作成します。 アニメーションさせるオブジェクトを選択し…
範囲を制限された数値用の入力フィールドを表します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5></title> <meta charset="UTF-8"> </head> <body> <form action="hoge.cgi" method="post"> <p> 範囲:<input type="range" id="range" min="20" max="80" step="10" oninput="this.form.elements.output.value = this.value;" />…</p></form></body></html>
数値用の入力フィールドを表します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5></title> <meta charset="UTF-8"> </head> <body> <form action="hoge.cgi" method="post"> <p> 数値:<input type="number" id="number" step="0.1" /> <input type="submit" value="送信" /> </p> </form> </body> レンダリング 初期表示 上（下）ボタンクリッ…</html>
タイムゾーンなしの日時用の入力フィールドを表します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5></title> <meta charset="UTF-8"> </head> <body> <form action="hoge.cgi" method="post"> <p> 日時:<input type="datetime-local" id="datetime" step="1800" /> <input type="submit" value="送信" /> </p> </form> </body> レン…</html>
時刻用の入力フィールドを表します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5></title> <meta charset="UTF-8"> </head> <body> <form action="hoge.cgi" method="post"> <p> 時刻:<input type="time" id="time" min="10:10:20" max="11:10:20" step="1" /> <input type="submit" value="送信" /> </p> </form> </body></html>
週用の入力フィールドを表します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5></title> <meta charset="UTF-8"> </head> <body> <form action="hoge.cgi" method="post"> <p> 週:<input type="week" id="week" min="2012-W2" max="2012-W20" step="2" /> <input type="submit" value="送信" /> </p> </form> </body> レ…</html>
年月用の入力フィールドを表します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5></title> <meta charset="UTF-8"> </head> <body> <form action="hoge.cgi" method="post"> <p> 年月:<input type="month" id="month" min="2011-04" max="2013-04" step="12" /> <input type="submit" value="送信" /> </p> </form> </body></html>
日付用の入力フィールドを表します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5></title> <meta charset="UTF-8"> </head> <body> <form action="hoge.cgi" method="post"> <p> 日付:<input type="date" id="date" min="2012-07-05" max="2012-07-25" step="7" /> <input type="submit" value="送信" /> </p> </form> </body></html>
タイムゾーンがUTCの日時用の入力フィールドを表します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5></title> <meta charset="UTF-8"> </head> <body> <form action="hoge.cgi" method="post"> <p> 日時:<input type="datetime" id="datetime" step="1800" /> <input type="submit" value="送信" /> </p> </form> </body> レンダリング…</html>
メールアドレス用の入力フィールドを表します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5></title> <meta charset="UTF-8"> </head> <body> <form action="hoge.cgi" method="post"> <p> Mail:<input type="email" id="email" /> <input type="submit" value="送信" /> </p> </form> </body> レンダリング メールアドレス以外を送信しようとすると、検…</html>
URL用の入力フィールドを表します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5></title> <meta charset="UTF-8"> </head> <body> <form action="hoge.cgi" method="post"> <p> url:<input type="url" id="url" /> <input type="submit" value="送信" /> </p> </form> </body> レンダリング 絶対URL以外を送信しようとすると、検証エラーになります。 …</html>
電話番号用の入力フィールドを表します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5></title> <meta charset="UTF-8"> </head> <body> <form action="hoge.cgi" method="post"> <p> 電話番号:<input type="tel" id="tel" /> <input type="submit" value="送信" /> </p> </form> </body> レンダリング レンダリングも機能上もtextタイプのinput要素と変…</html>
検索用のテキスト入力フィールドを表します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5></title> <meta charset="UTF-8"> </head> <body> <form action="hoge.cgi" method="post"> <p> 検索:<input type="search" id="word" /> <input type="submit" value="検索" /> </p> </form> </body> レンダリング Safariの例です。入力するとクリアボタンが表…</html>
video要素やaudio要素で再生するメディアファイルを表します。source要素を使うことで複数のメディアファイルを指定できます。 使用例 <html lang="ja"> <head> <title>Hello! HTML5 Audio></title> <meta charset="UTF-8"> </head> <body> <p>HTML5 Audio</p> <audio controls="controls"> </audio></body></html>
オーディオを表します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5 Audio></title> <meta charset="UTF-8"> </head> <body> <p>HTML5 Audio</p> <audio src="http://gitarrenmanufaktur.com/images/blogkonzert/asturias.mp3" controls="controls" autoplay="autoplay" loop="loop" muted="muted"> <p>ご使用のブラウ…</p></audio></body></html>
動画を表します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5 Video></title> <meta charset="UTF-8"> </head> <body> <p>HTML5 Video</p> </body></html>
wbr要素は、折り返し表示可能なテキストを表します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5></title> <meta charset="UTF-8"> </head> <body> <p>1_1234567890_2_1234567890_3_1234567890_4_1234567890_<wbr>5_1234567890</wbr>_6_1234567890_7_1234567890</p> </body> レンダリング wbr要素なし wbr要素あり 関連エントリー HTML5エントリーの</html>…
rp要素は、rupy要素非対応のブラウザ用に表示する括弧を表します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5></title> <meta charset="UTF-8"> </head> <body> <p> 私は <ruby> 山田<rp>(</rp><rt>やまだ</rt><rp>)</rp> 太郎<rp>(</rp><rt>たろう</rt><rp>)</rp> </ruby> です。 </p> </body> レンダリング Firefox Chrome 関連エントリー 2012-07-18 - プロ…</html>
ruby要素はルビを伴うテキストを表します。 rt要素はルビを表します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5></title> <meta charset="UTF-8"> </head> <body> <p> 私は <ruby> 山田<rt>やまだ</rt> 太郎<rt>たろう</rt> </ruby> です。 </p> </body> レンダリング 関連エントリー HTML5エントリーのまとめ - プログラマーな日々</html>
u要素は、はっきりと伝わりにくいテキストの範囲を表します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5></title> <meta charset="UTF-8"> </head> <body> <h1>HTML5について</h1> <p>WikipediaのHTML5のページからの引用に間違いがありました。</p> <p>誤:<q>HTML5 は WHATWG によって<u>2003</u>年に定められた Web Applications 1.0 に Web Forms 2.0</q></p></body></html>…
