HTML5構文チートシート

# 経緯
HTML構文を記載するときのざっくりメモが欲しいのでチートシートを起こしました。
<font color="red">※未完です。下書き管理が面倒なので公開してますが...</font>

# 基本となるhtml

## DOCTYPE宣言
html5で記述されたhtml文書としてブラウザが処理するためにDOCTYPE宣言が必要です。
DOCTYPE宣言を怠るとCSSが意図しない動きをします。

```html:
<!DOCTYPE html> 
```

## HTML

|属性|説明|HTML5 new|
|:-:|:-:|:-:|
|lang|言語を指定する。日本語はja、英語はen。|◯|
|manifest|manifestファイルのURLを指定|◯|

### マニフェストファイル(キャッシュマニフェスト)
ユーザがオフライン状態でもウェブアプリケーションを利用できるように、キャッシュとして必要なファイルをローカル環境に保存するよう指定するために用いるもの。

## head
HTML文書のヘッダ情報。文書タイトル(\<title\>)、メタデータ要素指定(\<meta\>)、外部ファイルの読み込み指定(\<link\>)、javascript記述(\<script\>)、スタイル指定(\<style\>)、ベースURL指定(\<base\>)などが含まれる。



## とりあえずテンプレート
```html:
<!DOCTYPE html> 
<html>
 <head>
 　<meta charset="UTF-8">
 　<title>HTML5サンプル</title>
 </head>
 <body>
 　<p>HTML5で作成しました！</p>
 </body>
</html>
```

# テーブル\<table\>
テーブルタグは表形式で情報をまとめて表示する手法として、非常に、簡単に実装できる手法である。

テーブル(表)をヘッダ部(列のカラム名を表示するグループ)、ボディ部(データを複数行にわたって表示するグループ)、フッタ部(ボディに対して補足的な情報を表示するグループ)の3つに分けられる。
<font color="red">実践的にはヘッダ部とボディ部の2つで構成することが多いと思われる</font>

## テーブル(表)の基本構造
``<table>～</table>``で括られた文節の行として処理されるように定義された句がテーブル(表)として処理される。

- ``<tr>～</tr>``で括られた区間は1行として処理される。
- 行の中で、見出しとして見せたい枠(セル)は``<th>～</th>``で括る。
- 行の中で、データ行として見せたい枠(セル)は``<td>～</td>``で括る。



# フォーム\<form\>


## セレクトボックス \<select\>

|属性|説明|HTML5 new|
|:-:|:-:|:-:|
|autofocus|自動フォーカスを指定する|◯|
|disabled|操作を無効にする||
|form|どのフォームと関連付けるか、formのID名で指定|◯|
|multiple|セレクトボックスに表示される要素を複数選択できるようにする||
|name|セレクトボックスの名前を指定||
|size|表示する項目数を指定(1以上の整数)||

■ 使用例

```html:
<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|選択肢の値を指定||

■ 使用例

```html:
<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||
|email||
|password||
|datetime||
|date||
|month||
|week||
|time||
|datetime-local||
|number||
|range||
|color||
|chekbox||
|radio||
|file||
|submit||
|image||
|reset||
|button||

### 隠し情報 \<iput type="hidden" \>
hiddenは埋め込み情報を引き渡したいときに使用するhtml。

#### hiddenで配列を引き渡す

```html:
<input type="hidden" name="name[]" value="1" />
<input type="hidden" name="name[]" value="2" />
<input type="hidden" name="name[]" value="3" />
```

```php:hiddenを受け取ったphp
var_dump($name);

// ---- 結果 ----
array(2) { [0]=> string(1) "1" [1]=> string(1) "2" [2]=> string(1) "3" }
```

### チェックボックス \<input type="checkbox"\>


#### はじめからチェックが有効なチェックボックスを作る

```html:
<input type="checkbox" name="" value="" checked>valuename
```

#### checkboxの中身を配列として引き渡すには
name句の最後に[]を入力すると変数ではなく、配列になる。

```html: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>
```

```php:color.phpで受け取る
<?php
var_dump($_POST['color']);
?>
```

```console:結果

```


# 参考

- HTMLタグリファレンス http://www.htmq.com/