Contents
◆ソースコードの表示 (Edge)
・ctrl + U
◆エスケープ文字
・「&」 &
・「"」 "
・「'」 ´
・「<」 <
・「>」 >
・「-」 –
◆要素
・<要素名> 要素内容 </要素名>
<title> Y's Cafe </title>
◆属性
・属性名="属性値"
・タグに複数の属性を含めるときは半角スペースで区切る。
<a href="menu.html" > メニュー </a>
属性名 属性値
<img src="logo.png" alt="Y's Cafe">
属性1 ↑Space 属性2
◆HTMLコンテンツモデル
・全てのタグは7つのカテゴリーに分類される。
・フローコンテンツ
・インタラクティブコンテンツ
・フレージングコンテンツ
・エンデディッドコンテンツ
・メタデータコンテンツ
・ヘッディングコンテンツ
・セクショニングコンテンツ
・どの要素の中にどの要素を配置できるかは、「コンテンツモデル」というルールで明確に定められている。
・コンテンツモデルと使用可能タグの確認ツール → 『外部サイト』
◆ページの全体構成
・１行目 <!DOCTYPE html> ←文書型宣言
・２行目以降を<html>タグで全体を囲み、内側に<head>要素（文書情報）と<body>要素（掲載内容）を書く。
<!DOCTYPE html>
<html>
<head>
・・・・
</head>
<body>
・・・・
</body>
</html>
◆<head>の構成
〇構成
・headタグ内には主にmetaタグとlinkタグを入れる。
・metaタグは、文字コードの指定、ブラウザでの表示のさせ方、検索エンジンへのインデックス（掲載）有無の指定。
・linkタグは、CSSファイルの指定、ページ同士の関係性を検索エンジンに伝える。
〇metaタグ
１．文字のエンコード
<meta charset="utf-8" />
２．Internet Explorer用の設定（IEの「互換モード」によるデザイン崩れを防止。常に標準モードで表示させる。）
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
３．viewport設定
・ビューポートとはブラウザの表示領域。
・ビューポートの設定がない場合、スマホの画面ではページが縮小表示される。
・デバイスのビューポートが画面の幅と同じになり、等倍で表示される。
<meta name="viewport" content="width=device-width,initial-scale=1" />
４．タイトルタグ
<title>ページのタイトル</title>
５．メタディスクリプション（推奨）
・ページ内容をあらわす文章を100字以下程度で書く。
・検索結果のタイトル下に表示される。
・メタデスクリプションを書いても直接的な検索順位上昇効果はなく、あくまで検索ユーザーのために書くもの。
<meta name="description" content="ページの内容を表す文章" />
６．meta robots（検索避け。検索エンジンに対して「このページをインデックス（掲載）しない」指示を出す）
<meta name="robots" content="noindex,nofollow" />
<meta name="robots" content="noindex,follow"> ←掲載しないが、巡回はする場合
７．OGPタグ/twitterカード（重要）
８．メールアドレスや電話番号をリンクに変換しない
<meta name="format-detection" content="email=no,telephone=no,address=no">
９．Windows向けのアイコン
・Windows8から登場した「ピン留め機能」のためのメタタグ。ピン留めされたときのタイルの画像や色を指定可能。
<meta name="msapplication-TileImage" content="画像のURL" />
<meta name="msapplication-TileColor" content="カラーコード（例：#F89174）"/>
〇不要なmetaタグ
・メタキーワード Googleは検索順位決定でメタキーワードを一切見ない。検索エンジン次第でスパム判定される。
<meta name="keywords" content="キーワードを,で区切って指定">
・ページ遷移タグ ページ遷移までの秒数とURLを指定することで、他のページへとリダイレクト（転送）できる。
<meta http-equiv="refresh" content="秒数;url=リンク先のURL">
・検索結果に検索ボックスを表示しないようにする
<meta name="google" content="nositelinkssearchbox" />
・他の言語に翻訳しないようにする 翻訳オプションが表示されなくなる。
<meta name="google" content="notranslate" />
・言語の指定 多言語サイトでなければ不要。多言語サイトでも、Googleはコンテンツで言語を判断するため問題ない。
<meta name="language" content="Japanese" />
・著者の明記 SEO的な効果は期待できない。ウソの記述も可能。
<meta name="author" content="著者名" />
・コピーライト フッターに記載する。
<meta name="copyright" content="©著作者" />
・その他の不要なメタタグ SEO効果は全く期待できない。
<meta name="summary" content="ページ概要">
<meta name="subject" content="ページの主題">
<meta name="abstract" content="ページの要約">
<meta http-equiv="content-language" content="ja" />
<meta name="revisit_after" content="クロール再訪問日を指定" />
<meta name="reply-to" content="連絡先" />
〇linkタグ
・参照 → 『外部サイト』
◆CSS（style）の指定方法
〇<style>タグを使用する方法
・<head>タグ内に記述し、開始タグ<style>と終了タグ</style>の間にCSSセレクタを入力する。
・style要素に media="" （メディアクエリ）を追加して、スタイルの対象メディア（どのメディアに対して
適用させるか）を指定できる。
・styleタグをheadの終了タグ手前に記述すると、他のファイルにstyleを上書きされる心配がなくなる。
・「:hover」や「:before」のような、擬似クラスと擬似要素は使えない。
<head>
<meta charset="UTF-8">
<title>Document</title>
<style media="screen and (min-width: 500px)">
h1 {color: red; }
p {background-color: yellow;}
</style>
</head>
〇style属性を使用する方法
・style属性は、<div>や<p>タグの中に、「stye=””」という形で記述する。
・style属性の「””」の中にCSSセレクタを入力することでcssを反映できる。
・style属性で指定したcssプロパティ動詞の間を半角で空けることで複数指定できる。
・「:hover」や「:before」のような、擬似クラスと擬似要素は使えない。
・<style>タグとstyle属性を2つ同時に利用すると、表示結果にはstyle属性が反映される。
<body>
<h1 style="color:green;">緑色</h1>
<p style="background-color: skyblue; color: white;">styleタグ入力テスト</p>
</body>
〇htmlでCSSファイルを指定する方法
・CSSファイルを作成し、linkタグを使ってhtmlファイルとCSSファイルと関連づける。
・CSSファイルの拡張子を「.css」にする。
・htmlファイルの<head>内にある<link>タグを使ってCSSを読み込む。
<link rel="stylesheet" href="CSSファイルの場所">
・2つ以上のCSSファイルを適用する場合、<link>要素を続けて書く。
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="test.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.com/ajax/libs/font/all.min.css">
</head>
◆<body>の構成
・<header> ・ページのヘッダー。
・<main> ・ページン主要な内容。
・<footer> ・ページのフッター。
・<article> ・自己完結したセクション。
・ニュース記事やブログを囲むのに適している。
・<aside> ・本文に関係のある補足的な内容をあらわすセクション。
・本文の脚注や用語説明等に適している。
・<nav> ・他のページやページ内の別の場所にリンクする主要なナビゲーションをあらわす。
・<section> ・article, aside, navに該当しない一般的なセクションをあらわす。
・<div> ・文書構造的に何も特別な意味を持たない範囲をひとまとまりにするタグ。
・<span> ・文書構造的に何も特別な意味を持たない範囲をひとまとまりにするタグ。
・文の一部を囲むときにspanを使う。
◆代表的な要素
・p ・段落を作るときに使用。
・</p>の後ろで必ず改行される（ブロック要素）。
・<p>を使うと、改行 & 1行空白が入る。（<div>に１行空白は入らない）
・h1 ～ ｈ6 ・見出しを作るときに使用。数字が大きくなるほど小さい見出し。
・h1の使い方（１ページに１回だけ使うのが好ましい）
・トップページ：ウェブサイトのタイトルにh1を使う。
・各記事ページ：記事のタイトルにh1を使う。
・h2～6は何回使用しても良い。
・article ・自己完結したセクション。
・aside ・本文に関係のある補足的な内容をあらわすセクション。
・nav ・他のページやページ内の別の場所にリンクする主要なナビゲーションをあらわす。
・nav 要素はリストを格納する必要はなく、他の種類のコンテンツを格納することもできる。
<nav>
<h1>メインメニュー</h1>
<ul>
<li><a href="/menu">メニュー</a>
<li><a href="/about/"> 店舗情報</a>
<li><a href="/contact/">お問い合わせ</a>
</ul>
</nav>
・section ・article, aside, navに該当しない一般的なセクションをあらわす。
・div ・要素をグループでまとめるために使用。
・ブロック要素。前後に改行が入る。
・division(分割)。
・span ・要素をグループでまとめるために使用。
・文章の一部分を指定するときに便利。
・インライン要素。前後に改行が入らない。
・インラインの中にブロックは入れない。
・<span>の中に<div>は入れない。
・<span>の中に入れれるのは、<span>、<a>、<img>などに限られる。
・br ・改行するときに使用。空要素。
・hr ・文章を区切る水平線を作る際に使用。空要素。
・<p>の中に入れれない？<p>と<p>の間で使う。
・属性 ・size ：水平線の太さをピクセル単位で指定（20px）。
・width ：水平線の長さをピクセル単位または％で指定（20px・20％）。
・align ：水平方向の表示位置を指定（left・center・right）
・em ・重要でなくても意味を強調したいときに使う。
・イタリック体で表示される。
・strong ・文章の中で強い重要性を伝えたい範囲を囲む。
・emタグと違い、囲った部分の意味を強調する役目はない。
・太字で表示される。太字にするためにstrongタグを使うのは間違い。
・small ・小文字で表示される。
・著作権やライセンス、免責事項など補足的な文章を囲む。
・address ・サイトの運営会社名や住所電話番号などの連絡先を囲む。
<address>03-9999-9999</address>
・blockquote ・文献や書籍の抜粋を掲載する場合、引用する範囲を囲む。
・スタイルシートでの設定にもよるが、”が付与されたり、背景色が変わったり、左に余白が空いたり、
本文とは明確に見た目が違うように表示される。
・q ・文献や書籍の抜粋を掲載する場合、引用する範囲を囲む。
・改行する必要のない短い引用に使用。
・cite ・内容尾の抜粋ではなく、映画や書籍などのタイトルや作品名を引用するときに使用。
<p>ゴッホの名画「<cite>夜のカフェテラス</cite>」を<br>店内に飾っています。</p>
・引用元のＵＲＬを明示する。
<cite><a href=”https://ja.wikipedia.org/wiki/タラバガニ”>タラバガニ</a></cite>
・citeタグは通常は斜字体になる。
・img ・画像を貼るときに使用。
・終了タグを使用しない（空要素）。
・最後に「/」を書く。終了タグがないことを示す。
・imgも文字と同じと認識されるため、段落と同じように<p>ではさむと良い。
<img src="画像.png" alt="Cafe"/>
・a ・リンク作成に使用。属性で指定したリンク先に移動。
・リンク先を新規タブで開く → 属性「target="_blank"」
<a href="menu.html" target="_blank" > メニュー </a>
・リンクテキストの下線を消すCSS → 「a { text-decoration:none; }」
・リンクテキストの下線をつけるCSS → 「a {text-decoration: underline; }」
・ページ内リンク
・href属性の移動先にidを指定する。
・違うページの途中に飛ぶときは、リンク先を「飛びたいページのURL＃id名」とする。
<a href="https://saruwakakun.com#example">ここをクリック！</a>
・タップすると電話がかかる特殊なリンク
<a href="tel:03-9999-9999">03-9999-9999</a>
・リンクをクリックするとメーラーが起動して、タイトルを自動入力。
<a href="mailto:xxxxx@xxx.xxx?subject=お問い合わせ">Contact</a>
・ul・ol・li ・箇条書きに使用。「ulとli」または「olとli」のセットで使う。
・<ul> 順序なしの箇条書き。Unordered List。
・<ol> 順序ありの箇条書き。Oredered List。
・<li> 項目内容 。
・table・tr・th・td 表の作成に使用。
・<table> ・表全体を挟む。
・属性：border="1"（←罫線あり、0はなし、通常はth,tdへCSSで指定）。
・枠線の隙間をなくして一重線にするには<table>タグへCSSで指定
（border-collapse: collapse;）。
・<tr> ・行全体を挟む。trの数＝表の行数となる。Table Row。
・<th> ・trの中で使い、挟まれた部分は見出しセルとなる。使わなくてもよい。Table Header。
・初期設定で中央寄せ表示。
・<td> ・trの中で使い、表の項目を挟む。Table Date。
・初期設定で左寄せ表示。css text-alignで指定可能。
・css borderプロパティで枠線を指定可能。
・dl・dt・dd ・説明リスト。
・「定義リスト」である辞書的な書き方と「説明リスト」の書き方どちらの役割も持つ。
・<dl> ・description list（説明リスト）。
・リスト全体を<dl>タグで囲むことで、<dt><dd>を使うことでできるようになる。
・<dt> ・description term（説明する言葉）。
・説明リスト内の見出し。
・<dd> ・definition / description（定義文 or 説明文）。
・1つのdtに対して複数の説明をしたい場合はddを複数書くことができる。
・単純なリストはul、リストに説明が必要ならdl。
・dtとddを1行で横並びにしたい場合はdtにのみfloat : left;を適用させる。ddにも適用させてしまうと、
dlリスト内のすべての項目が横並びになるので注意。
・<dt>と<dl>を横並びにする際は、<dt>と<dd>を<div>要素でグループ化して<div>に「display: flex;」。
レスポンシブで縦並びに戻すときは、「flex-dilection: column;」に指定。
・caption・thead・tbody・tfoot 表全体の構造を計画化したいときに使用する。
・<caption> 表全体にタイトルをつける場合、開始タグ<table>の直後に<caption>タグで囲む。
・<thead> 囲んだ行は表全体の見出しをあらわすヘッダーの意味を持つ。
・<tbody> 表全体のデータ部分を囲む。
・<tfoot> 表全体の補助的な内容をあらわすフッターの意味を持つ。
・form ・フォーム作成時に入力欄と送信ボタンを含めた全体を囲む。
・input (空) ・type属性を使い、テキストボックス, ラジオボタン, チェックボックス, 送信ボタン等を作成。
・textarea ・改行できる入力欄。
・終了タグが必要。
・select ・セレクトボックス（プルダウン形式の選択欄）の全体を囲む。
・name属性はselectタグに付ける。
・opsion ・セレクトボックスでひとつひとつの選択肢を囲む（value属性必須）。
・label ・ラベルの文字と入力欄のタグをまとめて囲むと、ラベルに書いた文字をクリックしたときに
入力欄に自動でフォーカスが移る。
・video ・動画を挿入。
・src="" 埋め込む動画への URL を指定する。
・autoplay 生可能な状態になった時点で即座にコンテンツの再生が始まる。
・controls 再生、音量、シーク、ポーズの各機能を制御するコントロールを表示する。
・loop ブラウザーは動画の末尾に達すると、自動的に先頭に戻る。
・muted 初期状態が消音になる。既定値は false で、動画再生時に音声も再生する。
・poster="" 代替画像。童画の読み込み待ちの間も表示される。
<video src="images/p-movie.mp4" poster="hero.jpg" autoplay loop muted></video>
・time ・ユーザーに対して日時を示すのではなく、検索エンジンに向けて日時を示す。
・Google検索結果のスニペットに日付を表示することができる。
・datetime 検索エンジンに正確な日付を認識させるための属性。
<p>明日の<time datetime="2020-11-21 12:00">ランチ</p>
<p>日時：<time>2020年11月21日午前10時</time></p>
・<!-- --> ・コメントアウト。
◆代表的な属性
1. id ・要素に固有の名前を指定する。
2. class ・要素に分類名（種類）を指定する。
・数字から始まるclass名は不可。必ずアルファベットで始める。
3. title ・要素に補足情報を指定する。
4. lang ・要素内の言語を言語コードで指定する。
5. styl ・要素に直接スタイルシートを適用する。
6. href ・リンクされたリソースのURL。Hypertext Reference。 <a>, <area>, <base>, <link>
・相対パス ・現在のページと同じフォルダの場合 href="menu.html"
・HTMLと同じ階層のdrinkフォルダ内の場合 href="drink/coffee.html"
・事前準備なしでページ最上部へのリンクできる（HTML5の仕様）。
<a href="#top">このページの最上部へ戻る</a>
<a href="#">このページの最上部へ戻る</a>
・絶対パス ・ファイルを最初から最後まで完全に記述する形式のこと。
・インターネット上での絶対パスは、ブラウザのアドレスバーに書かれている
文字列のすべて。
7. src ・埋め込みコンテンツの URL。 <iframe>, <img>, <input>, <script>, <source>, <video>
・相対パス HTMLと同じフォルダの場合 src="logo.png"
HTMLと同じ階層のimagesフォルダ内の場合 src="images/logo.png"
HTMLの1つ上の階層のimagesフォルダ内の場合 src="../images/logo.png"
HTMLの2つ上の階層のimagesフォルダ内の場合 src="../../images/logo.png"
・相対パス 画像ファイルがサーバー内に置いている場合 src="http://yscafe.co./logo.png"
8. alt ・画像が表示できない場合の代替テキスト。alternate。 <applet>, <area>, <img>, <input>
・イラストやアイコンなど文字が書かれていない画像の場合、alt属性を省略せず属性値を空にする。
alt=""
9. colspan, lowspan
・<th><td>タグに使用してセルを結合する。
・属性値には繋げるセルの数を指定する。
・colspan 2つ以上のセルを横につないで1つのセルにする。
・lowspan 2つ以上のセルを縦につないで1つのセルにする。
<th>名前</th><th colspan="2">出身地</th>
10. <form>要素の主な属性
・action ・フォームから送信された情報を処理するプログラムのURL。
・method ・フォームを送信する際にブラウザが使用するリクエスト方法。
・postまたはgetを指定。
・novalidate ・ブラウザは送信ボタンを押したときに入力内容を検証しない。
・autocomplate ・フォームの入力補完（以前に入力した内容を自動入力）の有効(on)・無効(off)を指定する。
・name ・フォーム作成時に入力欄のタグに名前を付ける。
11. フォーム作成時に使用する属性
・type ・text テキストボックス（改行不可）
・tel 電話番号
・email メールアドレス
・number 数値（minとmaxを指定できる）
・date 日付（minとmaxを指定できる）
・radio ラジオボタン（同じグループのinputタグには同じname属性をつけ、value属性必須）
・check チェックボックス（同じグループのinputタグには同じname属性をつけ、value属性必須）
・submit 送信ボタン（送信ボタンに表示する文字はvalue属性に指定する）
・reset リセットボタン（リセットボタンに表示する文字はvalue属性に指定する>
・name ・入力欄を表示するタグには必ずname属性で名前をつける必要がある。
・value ・ラジオボタン, チェックボックス, セレクトボックスで値を入力する。
・送信ボタンに表示する文字を指定する。
・placeholder ・テキストエリアとテキストボックスに入力説明（入力例）を表示できる。
・checked ・ラジオボタンとチェックボックスの初期値を指定できる。
・selected ・セレクトボックスのoptionタグで初期値を指定できる。
・required ・名前やメールアドレスなど必ず入力してもらいたい項目に書く。
◆ナビゲーション
・<nav>タグでナビゲーションにしたい範囲を囲う。
・<nav>タグの中に、<ul>や<li>を使ってリストを作成する。
・ナビゲーションのリストを横並びにするには、cssで<li>タグに「display: inline-block;」と指定する。
・liタグは本来ブロック要素なので前後に改行が入り縦に並ぶが、インライン要素に変えることで
前後の改行が消えて横並びに変更される。
・nav要素は視覚障害者がWebサイトを閲覧する際に使用するスクリーンリーダーが、サイトのメニューを見つけ、
利用者が必要なページを探し移動するのを助ける役割がある。
<nav>
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">概要</a></li>
<li><a href="#">サービス</a></li>
</ul>
</nav>
◆画像をレスポンシブに対応させる
〇概要
・画面の小さなデバイスで大きなサイズの画像を表示させると、読み込みに時間がかかる。
・画面サイズに合わせて読み込む画像を振り分ける。
・<img>タグにレプ本支部画像用の属性を追加して対応させる。
〇src属性
・レスポンシブ画像を設定するときも必須の記述。
・レスポンシブに対応していないブラウザで閲覧した場合、SRC属性で指定した画像がデフォルトで表示される。
〇srcset属性
・サイズの異なる画像を条件によって切替得るための属性。
・表示する画像の候補を複数指定すれば、ブラウザが環境に合わせて最適なものを自動で表示する。
・横幅の単位は「px」ではなく「w」を使用。「400px」は「400w」と記述。
・表示したい画像の幅ではなく、画像本来の大きさである点に注意！！
<img src="デフォルト画像のパス"
srcset="画像Aのファイルパス 画像Aの横幅(w),
画像Bのファイルパス 画像Bの横幅(w),
画像Cのファイルパス 画像Cの横幅(w) "
alt="デモ画像">
〇sizes属性
・画像を表示する幅を指定。
・srcset属性がある場合のみ記述可能。
・sizes属性がなくても画像は表示されるが、特定のサイズを指定したい場合は記述する。
・この属性値にメディアクエリを利用することもできる、
・画面幅が800px以上の時は画像の幅を800pxに、それ以外（800px以下）では100vwにしたい場合。
<img src="800.png"
srcset="400.png 400w,
800.png 800w,
1200.png 1200w "
sizes="(min-width: 800px) 800px, 100vw"
alt="デモ画像">
◆フォーム
〇概要
・メール送信機能が付いたフォーム作成サービス（Googleフォーム, オレンジメール, フォームメーラー）。
・プログラム配布サイト（PHP工房）からダウンロード押したプログラムを自分でサーバーに設置。
・ブラウザは、フォームの入力内容を名前と値のセットにしてメール送信プログラムに引き渡すため、
入力欄を表示するタグには必ずname属性で名前をつける必要がある。
・name属性を付け忘れた入力欄は送信されない。
・各<input>要素を1行ごとに囲うのは、<div>、<p>、<table><th><td>。
〇フォーム入力欄の主な要素
・<input> ・text テキストボックス（改行不可）
（type属性） ・tel 電話番号
・email メールアドレス
・number 数値（minとmaxを指定できる）
・date 日付をカレンダーから入力（minとmaxを指定できる）
・url URL（「http(s)://～」から始まる文字列）
・password パスワード（入力内容を「●●●」と非表示で入力・maxlength属性で文字数を指定）
・radio ラジオボタン（同じグループのinputタグには同じname属性をつける・value属性必須）
<input type="radio" name="ご来店員数" value="1" checked>1人
<input type="radio" name="ご来店員数" value="2">2人
<input type="radio" name="ご来店員数" value="3">3人
・check チェックボックス（同じグループのinputタグは同じname属性をつける・value属性必須）
・file ファイルのアップロードフィールド
（accept属性でアップロード可能なファイルの種類を制限できる）
<input type="file" accept="image/png, image/jpeg">
・submit 送信ボタン（送信ボタンに表示する文字はvalue属性に指定する）
・image 画像送信ボタン（画像を送信ボタンにでき画像のファイルパスのsrc属性とalt属性必須）
<input type="image" src="btn-submit.jpg" alt="クリックで送信">
・reset リセットボタン（リセットボタンに表示する文字はvalue属性に指定する）
<input type="reset" value="リセットする">
・<textarea> ・改行できる入力欄。
・終了タグが必要。
・<select> ・セレクトボックス（プルダウン形式の選択欄）の全体を囲む。
・name属性はselectタグに付ける。
・<option> ・セレクトボックスでひとつひとつの選択肢を囲む（value属性必須）。
<select name="ご職業">
<option value="未選択" selected>選択してください</option>
<option value="会社員">会社員</option>
<option value="学生">学生</option>
</select>
・<label> ・ラベルの文字と入力欄のタグをまとめて囲むと、ラベルに書いた文字をクリックしたときに
入力欄に自動でフォーカスが移る。
〇フォーム入力欄の主な属性
・name属性 ・ブラウザは、フォームの入力内容を名前と値のセットにしてメール送信プログラムに
引き渡すため、入力欄を表示するタグには必ずname属性で名前をつける必要がある。
・name属性を付け忘れた入力欄は送信されない。
・value属性 ・ラジオボタン, チェックボックス, セレクトボックスで値を入力する。
・送信ボタンやリセットボタンに表示する文字を指定する。
・placeholder属性 ・テキストエリアとテキストボックスに入力説明（入力例）を表示できる。
・checked属性 ・ラジオボタンとチェックボックスの初期値を指定できる。
・selected属性 ・セレクトボックスのoptionタグで初期値を指定できる。
・required属性 ・名前やメールアドレスなど必ず入力してもらいたい項目に書く。
・送信ボタンを押したときにブラウザが自動で入力検査される。
・disable属性 ・送信ボタンやテキストエリアの入力、送信機能を停止する。
〇label要素・for属性
・<label>要素は、フォーム要素（inputやtextareaなど）とその説明文（ラベル）を関連付けるための要素。
・for属性は、ラベル付け対象であるラベル付け可能フォーム関連要素のid属性値を指定する属性。
・フォーム要素のid属性の値は、label要素のfor属性の値と一致させる。
・for属性をinput要素のid属性で指定することによって、label要素をクリックするだけでチェックボックスや
セレクトボックスの選択ができるようになる（label要素をクリックしてもフォームがアクティブ化）。
・label要素は、input要素とセットで使用する。
a．<label>と<input>を分ける場合
・label要素とinput要素を組み合わせるために、input要素にidを設定し、label要素のfor属性で
組み合わせたいinput要素のidを指定しなければならない。
<div class="example">
<label for="potepan">Example</label>
<input type="checkbox" id="potepan">
</div>
b．<label>の中に<input>を入れる場合
<div class="example">
<label>Example<input type="checkbox"></label>
</div>
〇フォーム全体の設定（<form>）
１．入力欄と送信ボタンを含めたフォーム全体を<form>タグで囲む。
２．action属性に、ブラウザがフォームの入力内容を引き渡すメール送信プログラムのURLを指定。
３．method属性に「post」を指定。
<form action="送信先プログラムのURL" method="post">
（フォーム欄・送信ボタン）
</form>
〇<form>タグの主な属性
・action ・フォームから送信された情報を処理するプログラムのURL。
・必ず指定しなければならない。
・method ・フォームを送信する際にブラウザが使用するリクエスト方法。
・属性値
・get ・サーバ側にあるデータを取得するような場合に使われる。
・URLの末尾にパラメータをつけて送る方法。「?」や「&」の付いた長いURL。
・URL上にパラメーターが丸見えになってしまう。
・画面表示のために必要なパラメーターは「get (取得)」。
・post ・データの量に制限がなく、何か新しいデータをサーバに送信して登録するといった
用途に利用する。
・パラメータをURLにつけずにサーバーに送る方式。
・ユーザーが画面に入力して送信するパラメーターは「post (送信)」。
・method属性を省略した場合の初期値は「get」。
・一般的に「post」を利用する場合が多い。
・novalidate ・ブラウザは送信ボタンを押したときに入力内容を検証しない。
・autocomplate ・フォームの入力補完（以前に入力した内容を自動入力）の有効(on)・無効(off)を指定する。
〇テキストボックス（改行できない入力欄）
◆<label>と<input>を分ける場合
１．<div>を作成。
２．<label>のfor属性に名前をつける。
３．<input>にtype属性を「text」に指定。<input>タグは空要素。
４．<input>のidにfor属性と同じ名前を指定。
５．<input>に<name>属性を指定。
<div>
<label for="name">氏名：</label>
<input type="text" id="name" name="氏名" placeholder="例：山田太郎" required>
</div>
◆<label>に<input>を埋め込む場合
<p><label>名前<input type="text" name="氏名" placeholder="例：山田太郎" required></label></p>
〇ラジオボタン・チェックボックス（intut・radio/checkbox・value）
<p><label>性別：
<input type="radio" name="性別" value="男" cheked>男性
<input type="radio" name="性別" value="女">女性
</label></p>
<tr><th>性別：</th>
<td><label><input type="checkbox" name="性別" value="男" cheked>男性</label>
<label><input type="checkbox" name="性別" value="女">女性</label></td>
</tr>
〇セレクトボックス（selrct・option・value）
<select name="ご職業">
<option value="未選択" selected>選択してください</option>
<option value="会社員">会社員</option>
<option value="学生">学生</option>
</select>
〇テキストエリア（改行できる入力欄）
<p>メッセージ：
<textarea name="メッセージ" placeholder="コメントを入力してください"></textarea>
</p>
〇送信ボタン・リセットボタン（submit・reset）
<input type="reset" value="リセット">
<input type="submit" value="送信ボタン">
〇フォーム全体のコード
<form action="送信先プログラムのURL" method="post">
<div>
<label for="name">氏名：</label>
<input type="text" id="name" name="氏名" placeholder="例：山田太郎" required>
</div>
<p><label>名前<input type="text" name="氏名" placeholder="例：山田太郎" required></label></p>
<p><label>性別：<input type="radio" name="性別" value="男" cheked>男性
<input type="radio" name="性別" value="女">女性</label></p>
<p>メッセージ：<textarea name="メッセージ" placeholder="コメントを入力ください"></textarea></p>
<input type="reset" value="リセット">
<input type="submit" value="送信ボタン">
</form>