プログラマーな日々

プログラマーです。AWS認定ソリューションアーキテクト–アソシエイト。好きなものは、C#, TaskChute Cloud, WorkFlowy, Backlog, AWSです。

HTML5

input要素 multiple属性

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>

input要素 required属性

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>

input要素 list属性

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>

input要素 autocomplete属性

オートコンプリート機能を有効にするか無効にするかを指定します。 使用例 <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>

input要素(type属性 = file)

ファイルアップロード用の入力フィールドを表します。 使用例 <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>

input要素(type属性 = color)

色を指定するための入力フィールドを表します。 使用例 <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>

input要素(type属性 = range)

範囲を制限された数値用の入力フィールドを表します。 使用例 <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>

input要素(type属性 = number)

数値用の入力フィールドを表します。 使用例 <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>

input要素(type属性 = datetime-local)

タイムゾーンなしの日時用の入力フィールドを表します。 使用例 <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>

input要素(type属性 = time)

時刻用の入力フィールドを表します。 使用例 <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>

input要素(type属性 = week)

週用の入力フィールドを表します。 使用例 <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>

input要素(type属性 = month)

年月用の入力フィールドを表します。 使用例 <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>

input要素(type属性 = date)

日付用の入力フィールドを表します。 使用例 <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>

input要素(type属性 = datetime)

タイムゾーンが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>

input要素(type属性 = email)

メールアドレス用の入力フィールドを表します。 使用例 <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>

input要素(type属性 = url)

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>

input要素(type属性 = tel)

電話番号用の入力フィールドを表します。 使用例 <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>

input要素(type属性 = search)

検索用のテキスト入力フィールドを表します。 使用例 <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>

source要素

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>

audio要素

オーディオを表します。 使用例 <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>

video要素

動画を表します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5 Video></title> <meta charset="UTF-8"> </head> <body> <p>HTML5 Video</p> </body></html>

wbr要素

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要素

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要素

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要素

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>…

i要素

i要素は、質の異なるテキストを表します。 HTML4では、イタリック体を表していました。 使用例 <html lang="ja"> <head> <title>Hello! HTML5></title> <meta charset="UTF-8"> </head> <body> <h1>HTML5について</h1> <p> WikipediaのHTML5のページより引用する。<q><i>HTML5</i> (エイチティーエムエル・ファイブ)とは HTML の 5 回目に当たる大幅な改定</q></p></body></html>…

b要素

b要素は、他と区別するテキストを表します。 HTML4では、太字を表していました。 使用例 <html lang="ja"> <head> <title>Hello! HTML5></title> <meta charset="UTF-8"> </head> <body> <h1>HTML5について</h1> <p> WikipediaのHTML5のページより引用する。<q><b>HTML5</b> (エイチティーエムエル・ファイブ)とは HTML の 5 回目に当たる大幅な改定版であ</q></p></body></html>…

mark要素

mark要素はハイライトされるテキストを表します。mark要素でマークアップされたテキストは、他の箇所から参照されることが想定されます。 使用例 <html lang="ja"> <head> <title>Hello! HTML5></title> <meta charset="UTF-8"> <style> th, td { border: 1px Black solid; } </style> </head> <body> <table> <thead> <tr> <th>MHK</th> <th>富士テレビ</th> </tr> </thead> </table></body></html>

cite要素 q要素

cite要素は、引用元のタイトルや作品名を表します。 q要素は、引用文を表します。cite属性は、引用元の参照ページを表します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5></title> <meta charset="UTF-8"> </head> <body> <h1>HTML5について</h1> <p> Wikipediaの<cite>HTML5</cite>のページより引用する。 <q cite="http://ja.wikipedia.org/wiki/HTML5">HTML5 (エイチティーエムエ…</q></p></body></html>

s要素

s要素は既に正確ではなくなった、既に関係なくなったとことを表します。HTML4では取り消し線を引くために用いられていました。 使用例 <html lang="ja"> <head> <title>Hello! HTML5></title> <meta charset="UTF-8"> </head> <body> <h1>大見出し</h1> <p>こんにちは!HTML5</p> <footer> <address>このサイトの連絡先: new@example.jp<s>old@example.jp</s></address> </footer> </body> …</html>