|
HTML HTML5 HTMLタグ スマートフォン |
CSS CSSプロパティ CSS・HTML便利ツール |
HTML色見本 配色組み合わせツール 特殊文字 |
JAVA Android |
PHP Smarty修飾子 EXCEL |
WEB技術の辞書・解説・使用例
input要素の label属性と、datalist要素の id属性で両者を結び付けます。
血液型は？
<input type="text" name="blood" list="blood_list">
<datalist id="blood_list">
<option value="A">
<option value="B">
<option value="AB">
<option value="O">
</datalist>
性別は？
<input type="text" name="gender" list="gender_list">
<datalist id="gender_list">
<option value="男性">
<option value="女性">
</datalist>
<input type="text" name="blood" list="blood_list">
<datalist id="blood_list">
<option value="A">
<option value="B">
<option value="AB">
<option value="O">
</datalist>
性別は？
<input type="text" name="gender" list="gender_list">
<datalist id="gender_list">
<option value="男性">
<option value="女性">
</datalist>
血液型は？
性別は？
HTMLの一般属性
| 属性 | 説明 |
|---|---|
| class="～" | クラス名を指定。使用例 |
| id="～" | IDを指定します。使用例 |
| style="～" | スタイルシートを直接記述。使用例 |
| title="～" | タイトルを指定します。 |
| dir="ltr|rtl" | 文字の表示方向を指定。 ltr(左から右)、rtl(右から左) |
| lang="～" | 言語を指定。日本語の場合は"ja" |
HTML5の一般属性
| 属性 | 説明 |
|---|---|
| accesskey="キー" | アクセスキーを指定。 |
| tabindex="数値" | タブインデックスを指定。 |
| contenteditable="true|false|inherit" | 要素を編集可能に。true(する) false(しない) inherit(既定値、親要素の属性を継承) |
| contextmenu="id" | コンテキストメニューを指定。 |
| draggable="true|false" | ドラッグを可能に。true または false を指定 |
| dropzone="～" | ドロップを可能に。 |
| hidden | 要素を非表示に。 |
| spellcheck="true|false" | 自動スペルチェック機能。true または false を指定 |