経緯
HTML構文を記載するときのざっくりメモが欲しいのでチートシートを起こしました。
※未完です。下書き管理が面倒なので公開してますが...
基本となるhtml
DOCTYPE宣言
html5で記述されたhtml文書としてブラウザが処理するためにDOCTYPE宣言が必要です。
DOCTYPE宣言を怠るとCSSが意図しない動きをします。
<!DOCTYPE html>
HTML
| 属性 | 説明 | HTML5 new |
|---|---|---|
| lang | 言語を指定する。日本語はja、英語はen。 | ◯ |
| manifest | manifestファイルのURLを指定 | ◯ |
マニフェストファイル(キャッシュマニフェスト)
ユーザがオフライン状態でもウェブアプリケーションを利用できるように、キャッシュとして必要なファイルをローカル環境に保存するよう指定するために用いるもの。
head
HTML文書のヘッダ情報。文書タイトル(<title>)、メタデータ要素指定(<meta>)、外部ファイルの読み込み指定(<link>)、javascript記述(<script>)、スタイル指定(<style>)、ベースURL指定(<base>)などが含まれる。
とりあえずテンプレート
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5サンプル</title>
</head>
<body>
<p>HTML5で作成しました！</p>
</body>
</html>
テーブル<table>
テーブルタグは表形式で情報をまとめて表示する手法として、非常に、簡単に実装できる手法である。
テーブル(表)をヘッダ部(列のカラム名を表示するグループ)、ボディ部(データを複数行にわたって表示するグループ)、フッタ部(ボディに対して補足的な情報を表示するグループ)の3つに分けられる。
実践的にはヘッダ部とボディ部の2つで構成することが多いと思われる
テーブル(表)の基本構造
<table>～</table>で括られた文節の行として処理されるように定義された句がテーブル(表)として処理される。
-
<tr>～</tr>で括られた区間は1行として処理される。 - 行の中で、見出しとして見せたい枠(セル)は
<th>～</th>で括る。 - 行の中で、データ行として見せたい枠(セル)は
<td>～</td>で括る。
フォーム<form>
セレクトボックス <select>
| 属性 | 説明 | HTML5 new |
|---|---|---|
| autofocus | 自動フォーカスを指定する | ◯ |
| disabled | 操作を無効にする | |
| form | どのフォームと関連付けるか、formのID名で指定 | ◯ |
| multiple | セレクトボックスに表示される要素を複数選択できるようにする | |
| name | セレクトボックスの名前を指定 | |
| size | 表示する項目数を指定(1以上の整数) |
■ 使用例
<select name="blood">
<option value="A">A型</option>
<option value="B">B型</option>
<option value="O">O型</option>
<option value="AB">AB型</option>
</select>
セレクトボックスの選択肢を指定する
| 属性 | 説明 | HTML5 new |
|---|---|---|
| disabled | 操作を無効にする | |
| label | 選択肢にラベル(項目名)を付ける | |
| selected | 選択肢をあらかじめ選択済みにする | |
| value | 選択肢の値を指定 |
■ 使用例
<label for="language">言語を選択してください：</label>
<select id="language" name="language">
<option value="en">英語</option>
<option value="de" disabled>ドイツ語</option>
<option value="fr">フランス語</option>
<option value="ja" selected>日本語</option>
<option value="zh">中国語</option>
</select>
ボタン<button>
ボタンはformタグと連携し、処理を実行させるためのトリガーとして用いられます。
ボタンに使える属性は次の通り。
| 属性 | 説明 | HTML5 new |
|---|---|---|
| type | ボタンの種類を指定する | |
| name | ボタンに名前を付ける際に使用する(スクリプトで操作する際に必要になるコントロール名を付与できる) | |
| autofocus | ボタンへの自動フォーカスを指定する際に使用する | ◯ |
| form | どのフォームと関連付けるかを form の id名 で指定する | ◯ |
| formaction | type=submitのボタンのみ使用可能。送信先URLを指定する | ◯ |
| formenctype | 送信するデータの形式を指定する(application/x-www-form-urlencoded、multipart/form-data、tex/planなど) | ◯ |
| formmethod | 送信方法を指定する(get、post) | ◯ |
| formnovalidate | 入力されたデータの妥当性を確認しない(例えばinputタグの属性にrequiredがあった場合、空入力を防止する為に妥当性チェックを要求できる) | ◯ |
| formtarget | フォーム送信する先のターゲット先を指定(_blank、_self、_parent、_top、任意のターゲット名 など) | ◯ |
| value | ボタン自身に埋め込む値を指定する。 |
type属性
| type | 説明 |
|---|---|
| submit | フォーム入力内容を送信する実行ボタン(初期値) |
| reset | フォーム入力内容をリセットするリセットボタン |
| button | 何もしない汎用的なボタン |
入力部品<input>
type属性
| type | 説明 |
|---|---|
| hidden | フォーム入力内容を送信する実行ボタン(初期値) |
| text | フォーム入力内容をリセットするリセットボタン |
| search | 何もしない汎用的なボタン |
| tel | |
| url | |
| password | |
| datetime | |
| date | |
| month | |
| week | |
| time | |
| datetime-local | |
| number | |
| range | |
| color | |
| chekbox | |
| radio | |
| file | |
| submit | |
| image | |
| reset | |
| button |
隠し情報 <iput type="hidden" >
hiddenは埋め込み情報を引き渡したいときに使用するhtml。
hiddenで配列を引き渡す
<input type="hidden" name="name[]" value="1" />
<input type="hidden" name="name[]" value="2" />
<input type="hidden" name="name[]" value="3" />
hiddenを受け取ったphp
var_dump($name);
// ---- 結果 ----
array(2) { [0]=> string(1) "1" [1]=> string(1) "2" [2]=> string(1) "3" }
チェックボックス <input type="checkbox">
はじめからチェックが有効なチェックボックスを作る
<input type="checkbox" name="" value="" checked>valuename
checkboxの中身を配列として引き渡すには
name句の最後に[]を入力すると変数ではなく、配列になる。
checkboxの結果を配列でPOST/GETするhtml
<form name="" method="POST" action="color.php">
<input type="checkbox" name="color[]" value="赤" />赤
<input type="checkbox" name="color[]" value="青" />青
<input type="checkbox" name="color[]" value="黄色"/>黄色
<input type="submit" value="送付" />
</form>
color.phpで受け取る
<?php
var_dump($_POST['color']);
?>
結果
参考
- HTMLタグリファレンス http://www.htmq.com/