今日の教材：Lesson-7 テーブルを活用しましょう
　　　　　　Lesson-2 HTML での記述を始めましょう後半

L2.10 フォームタグ

買い物カート、とか問い合わせフォーム、とか入力・送信フォームをHTMLで作るには

L2.10.1 form 要素（フォーム）

<form action="URL" name="フォームの名前" method="転送方法" enctype="データ型式">
	フォーム要素（部品）
</form>

入力フォームの作成を指定します。フォーム要素にフォームを構成するフォーム要素（部品）を配置します。
action属性：送信先（サーバーのどこどこのプログラムに送る）の URL を指定します。form actionで送信先のファイル名を入れたりする。mail.phpとか。送信先の色々はPHPで作る？
name属性： フォームの名前を指定します。問い合わせフォーム、とか
method属性： 送信データの転送方法（HTTP メソッド）を指定します。サーバー担当の人に聞く。get（初期値）を指定すると URL の型式で転送します。post を指定すると本文にデータを配置して転送します。
enctype属性：送信データの型式（MIME タイプ）を指定します。サーバー担当の人に聞く。application/x-www-form-urlencoded（初期値）を指定すると URL エンコード型式になります。multipart/form-data を指定するとマルチパート型式になります。text/plain を指定するとプレーンテキスト型式になります。


☆まとめ：form要素で全体を囲う。method属性で指定した転送方法とenctype属性で指定したデータ形式でサーバへ送信され、action属性で指定したアクションを呼び出す＝親。
親を<form></form>で囲い、その中で以下labelとかinputとか使う。

L2.10.2 label 要素（ラベル）

<label form="form 要素" for="部品要素">
	ラベル要素
</label>

入力フォームのフォーム部品とラベル（ex.お名前、電話番号、アドレス）を関連付けます。一般的には、関連付けを行うことでラベルをクリックしてもフォーム部品をクリックしたのと同じ効果を出すことができます。
form 属性：↑form 要素との関連付けを行います。form 属性の値と form 要素の id 属性の値を一致させることで離れた場所に配置した form 要素のフォーム部品と関連付けを行うことができます。親を指定する。フォーム外の離れたところにラベルを作るとき、親がわかるようにする。（お問い合わせフォーム1なのか2なのか）このラベルを押したらこの親のフォーム（お問い合わせ1）に飛んでね。親と子の紐づけ。あまり使わない。
for 属性：フォーム部品との関連付けを行います。for 属性の値とフォーム部品の id 属性の値を一致させることでフォーム部品との関連付けを行うことができます。子を指定する。ラベルに対して入力する項目のこと。（お名前：ラベル　小栁美里：for属性）よく使う。

L2.10.3 input 要素（インプット）

<input type="形状" name="名前" form="form 要素" value="初期値" size="幅" maxlength="最大文字数" minlength="最小文字数" placeholder="凡例" checked disabled readonly required>

テキスト入力欄やボタンなどのフォーム部品を作成します。本要素には、終了タグがありません。1行のとき。
L2.10.8各部品の形状のサンプルを見ながら以下読む。
type 属性：作成するフォーム部品の形状を指定
　　　　　～以下、”属性値”に入れるもの～
　　　　　hidden：画面上には表示されない隠しデータを作成します。
　　　　　text：1行のテキストボックスを作成します。（初期値）
　　　　　search：検索テキストの入力欄を作成します。
　　　　　tel：電話番号の入力欄を作成します。
　　　　　url：URL の入力欄を作成します。
　　　　　email：メールアドレスの入力欄を作成します。
　　　　　password：パスワードの入力欄を作成します。
　　　　　datetime：UTC の日時の入力欄を作成します。
　　　　　date：日付の入力欄を作成します。
　　　　　month：月の入力欄を作成します。
　　　　　week：週の入力欄を作成します。
　　　　　time：時刻の入力欄を作成します。
　　　　　datetime-local：UTC によらないローカル日時の入力欄を作成。
　　　　　number：数値の入力欄を作成します。
　　　　　range：レンジの入力欄を作成します。
　　　　　color：色の入力欄を作成します。
　　　　　checkbox：チェックボックスを作成します。
　　　　　radio：ラジオボタンを作成します。
　　　　　file：サーバーｈげファイルを送信します。
　　　　　submit：送信ボタンを作成します。
　　　　　image：画像ボタンを作成します。src 属性を使用して表示する画　　　　
像ファイルを指定、alt 属性を使用して代替テキストを指定、width 属性と height 属性を使用して画像の大きさを指定します。
　　　　　reset：リセットボタンを作成します。
　　　　　button：汎用ボタンを作成します。

name 属性：フォーム部品の名前を指定します。ここで指定された名前は、フォームと一緒に送信されます。
form 属性：form 要素との関連付けを行います。form 属性の値と form 要素の id 属性の値を一致させることで離れた場所に配置した form 要素のフォーム部品と関連付けを行うことができます。
value 属性：フォーム部品が保有する値の初期値を指定します。値の現在値は、名前と一緒に送信されます。
size 属性：コントロールの大きさ（文字数）を指定します。
maxlength 属性：value 属性が保有する値の最大長（文字数）を指定します。
minlength 属性：value 属性が保有する値の最小長（文字数）を指定します。placeholder 属性：何を入力するかの助言を指定します。
checked 属性：チェックボックスやラジオボタンがチェック状態であることを指定します。
disabled 属性：コントロールが無効であることを指定します。
readonly 属性：値の修正ができないことを指定します。
required 属性：フォームが送信するための必須項目であることを指定します。

L2.10.4 textarea 要素（テキストエリア）

<textarea name="名前" form="form 要素" cols="幅" rows="行数" maxlength="最大文字数" minlength="最小文字数" placeholder="助言" disabled readonly required>初期値</textarea>

複数行のテキスト入力ボックスを作成します。↔１行はinput要素のtext。本要素には、終了タグがありません。

  • name属性：フォーム部品の名前を指定します。ここで指定された名前は、フォームと一緒に送信されます。
  • form属性：form 要素との関連付けを行います。form 属性の値と form 要素の id 属性の値を一致させることで離れた場所に配置した form 要素のフォーム部品と関連付けを行うことができます。
  • cols属性：コントロールの横幅（文字数）を指定します。省略時は、20 です。
  • rows属性：コントロールの行数を指定します。
  • maxlength属性：入力可能な最大文字数を指定します。省略すると無制限に入力することができます。
  • minlength属性：入力しなければいけない最小文字数を指定します。
  • placeholder属性：何を入力するかの助言を指定します。
  • disabled属性：コントロールが無効であることを指定します。
  • readonly属性：値の修正ができないことを指定します。
  • required属性：フォームが送信するための必須項目であることを指定します。

L2.10.5 select/option 要素（セレクト／オプション）

<select name="名前" form="form 要素" multiple size="行数" disabled required>
	<option value="値" disabled selected>選択肢</option>
	<option value="値" disabled selected>選択肢</option>
	<option value="値" disabled selected>選択肢</option>
</select>

select 要素は、option 要素で指定されたリストからの選択ボックスを作成します。↓押すと選択肢（＝option）が出てくる形式。

  • name属性：フォーム部品の名前を指定します。ここで指定された名前は、フォームと一緒に送信されます。
  • form属性：form 要素との関連付けを行います。form 属性の値と form 要素の id 属性の値を一致させることで離れた場所に配置した form 要素のフォーム部品と関連付けを行うことができます。
  • multiple属性：複数の選択肢を選択できることを指定します。省略時は、選択できる選択肢は、1つです。
  • disabled属性：コントロールが無効であることを指定します。
  • required属性：フォームが送信するための必須項目であることを指定します。

option 要素は、select 要素の選択肢を作成します。

  • value属性：フォームで送信する値を指定します。省略すると option 要素の中の文字列が使用されます。
  • disabled属性コントロールが無効であることを指定します。
  • selected属性：初期状態で選択状態にすることを指定します。

L2.10.6 button 要素（ボタン）

<button type="型式" name="名前" form="form 要素" disabled>ボタン内容</button>

ボタンを作成します。

  • type属性：作成するボタンのタイプを指定します。
    • submit：送信ボタンを作成します。（初期値）
    • reset：リセットボタンを作成します。
    • button：汎用ボタンを作成します。
  • name属性：フォーム部品の名前を指定します。ここで指定された名前は、フォームと一緒に送信されます。
  • form属性：form 要素との関連付けを行います。form 属性の値と form 要素の id 属性の値を一致させることで離れた場所に配置した form 要素のフォーム部品と関連付けを行うことができます。
  • disabled属性：コントロールが無効であることを指定します。

L2.10.7 fieldset/legend 要素（フィールドセット／レジェンド）

<fieldset name="名前" form="form 要素" disabled>
	<legend>キャプション</legend>
	フォーム要素（部品）
</fieldset>

fieldset 要素は、フォーム要素をグループ化します。fieldsetはグループ化したフォーム要素の全体。

  • name属性：フォーム部品の名前を指定します。ここで指定された名前は、フォームと一緒に送信されます。
  • form属性：form 要素との関連付けを行います。form 属性の値と form 要素の id 属性の値を一致させることで離れた場所に配置した form 要素のフォーム部品と関連付けを行うことができます。
  • disabled属性：コントロールが無効であることを指定します。

legend 要素は、グループ化した要素群のキャプションを
指定します。legendはfieldset（全体）の中の要素軍のタイトル。

フォームタグサンプルはL2.10.8 表示サンプル参照。
2段目は、送信先の、受けとる側のための情報。受け取る側がわかりやすくするためにいろいろ何回も書いてる。

CSSとの紐付けについて

HTMLのタグとCSSの紐付けを行うためにid属性とclass属性が使用されます。https://it-biz.online/web-design/id-class/
命名した部分だけにCSSを適用できるようになりデザインの幅を広げることが可能になる（ex.H2同士で少しスタイル変えたい）

L2.11.1 CSS との紐付け

(1) id 属性

<要素名 id="id 名">コンテンツ</要素名>

要素に対して id 名を付与します。固有名詞。1 つの Web ページ内で1箇所にしか同一の名前を付けれません。CSS などで id 名を参照する時は、先頭に「ハッシュ（#）」を付与します。id 名は、a タグ（アンカータグ）のリンク先として使用することもできます。

使用例

<p id="text1">サンプルテキスト</p>

(2) class 属性

<要素名 class="class 名">コンテンツ</要素名>

要素に対して class 名を付与します。グループ、仲間。1つの Web ページページ内で何度でもつけることができる。後から要素を追加した場合、今まで使っていたclassをつければ同じ仲間として扱うことができる。class 名には複数の名前をスペースで区切って指定することができます。CSS などで class 名を使用する時は、先頭にピリオド（.）を付与します。

使用例

<p class="size1 color1">サンプルテキスト</p>

2/10の最後にも、記載あり。

特殊文字について

HTMLのコードを記述する時に特別な書き方をする必要のある文字があります。

L2.11.2 特殊文字

HTML のコードを記述する時に特別な書き方をする必要のある特殊文字で主要なものは以下の通りです。実際にWebページに載る、テキスト文字として使う場合の話。「名称記述」で記述。https://zero-plus.io/media/what-are-html-special-characters/
特殊文字変換ツールが大浜先生サイトにあるので使う

文字名称記述10進数記述16進数記述名称
“&quot;&#34;&#x22;ダブルクォーテーション
&&amp;&#38;&#x26;アンパサンド
<&lt;&#60;&#x3C;小なり
>&gt;&#62;&#x3E;大なり
（スペース）&nbsp;&#160;&#xA0;ノーブレークスペース
©&copy;&#169;&#xA9;著作権記号(コピーライト)
®&reg;&#174;&#xAE;登録商標

1つ分のスペースは、普通にスペース打つでOK。何個もスペース入れたいときは、特殊文字繰り返しor全角でスペース。

L2.11.3 インデンテーション（字下げ）

HTMLを記述する時は、可読性を向上させるためにインデンテーション（字下げ）を意識しましょう。tabキーでやる！