学科 HTML基礎④

-本日のアジェンダ-

1限目
学科 HTML基礎④
テーブルタグについて

2限目
学科 HTML基礎④
フォームタグについて

3限目
学科 HTML基礎④
特殊文字について

4限目
学科 HTML基礎④
HTMLのまとめ

5限目
学科 HTML基礎④
HTMLのまとめ

本日のテーマ

テーブルとフォームを記述できるようになりましょう

テーブルタグについて

「TABLE」とは<tr>、<th>、<td>などと組み合わせて表を作成するためのタグです。表の基本的な構造は<table>～</table>の中に<tr>～</tr>で表の横部分を指定し、その中に<th>～</th>や<td>～</td>で表題や縦軸を指定してセルを定義します。この時ヘッダセルのテキストは、一般的なブラウザでは太字になりセンタリングされます。
<table>はしばし、レイアウトのために使用されることがあります。しかし本来の使用方法ではありませんので、レイアウトで同様の効果が欲しい場合はスタイルシートを利用するとよいでしょう。

table/caption/tr/th/td 要素（テーブル）

<table>
　　<caption>キャプション</caption>
　　<tr><th>見出し</th><th>見出し</th></tr>
　　<tr><td>データ</td><td>データ</td></tr>
　　<tr><td>データ</td><td>データ</td></tr>
</table>

テーブル構造の表示を指定します。

テーブルのデザイン（幅、高さ、色、文字飾りなど）は CSS で指定します。

• tableタグ：テーブルの範囲を指定します。
• captionタグ：表のキャプション（主題）を指定します。
• trタグ：1行の範囲を指定します。
• thタグ見出し項目を指定します。
• tdタグ：データ項目を指定します。

参考サイト

• HTML tableタグを初心者向けに解説&便利な知識5選 | Udemy …
• ホームページのレイアウトはテーブルではなくCSSを使う理由 …
• 【HTML table】表を作成する基本からレイアウトの方法までを解説

ワンポイントアドバイス

楽天やヤフーショッピングの商品ページでテーブルレイアウトが必要になる場合があります。EC関連のお仕事をする場合は、想定しておきましょう。

フォームタグについて

form 要素（フォーム）

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

入力フォームの作成を指定します。フォーム要素にフォームを構成するフォーム要素（部品）を配置します。

• action属性：送信先の URL を指定します。
• name属性：フォームの名前を指定します。
• method属性：送信データの転送方法（HTTP メソッド）を指定します。get（初期値）を指定すると URL の型式で転送します。post を指定すると本文にデータを配置して転送します。
• enctype属性：送信データの型式（MIME タイプ）を指定します。application/x-www-form-urlencoded（初期値）を指定すると URL エンコード型式になります。multipart/form-data を指定するとマルチパート型式になります。text/plain を指定するとプレーンテキスト型式になります。

label 要素（ラベル）

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

入力フォームのフォーム部品とラベルを関連付けます。一般的には、関連付けを行うことでラベルをクリックしてもフォーム部品をクリックしたのと同じ効果を出すことができます。

• form属性：form 要素との関連付けを行います。form 属性の値と form 要素の id 属性の値を一致させることで離れた場所に配置した form 要素のフォーム部品と関連付けを行うことができます。
• for属性：フォーム部品との関連付けを行います。for 属性の値とフォーム部品の id 属性の値を一致させることでフォーム部品との関連付けを行うことができます。

input 要素（インプット）

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

テキスト入力欄やボタンなそのフォーム部品を作成します。本要素には、終了タグがありません。

• 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属性：フォームが送信するための必須項目であることを指定します。

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

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

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

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

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 要素で指定されたリストからの選択ボックスを作成します。

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

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

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

button 要素（ボタン）

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

ボタンを作成します。

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

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

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

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

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

legend 要素は、グループ化した要素群のキャプションを指定します。

CSSとの紐付けについて

HTMLのタグとCSSの紐付けを行うためにid属性とclass属性が使用されます。

参考サイト

• 【HTML/CSS】３分でわかるid/class属性の違い
• idとclassをわかりやすく説明！
• 【必修知識】id と class の違いと使い分け方の基本

特殊文字について

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

参考サイト

• HTMLの特殊文字とは？変換方法と特殊文字一覧も紹介
• HTMLで特殊文字を扱う方法
• HTMLの記号・特殊文字の文字コード表

本日の課題

WordPressサイトに、本日学んだ内容を「投稿ページ」にまとめてください。
投稿日は、本日の日時で設定してください。
※ページタイトルは、投稿内容がわかるような記述にしましょう。