カテゴリー
fieldset HTML5

fieldestタグとは?-HTML

(例)fieldsetタグの使用方法

See the Pen
form
by linlin (@linlin098765)
on CodePen.

<form action="◯◯.php" method="post">
<p><label>氏名:<input type="text" name="name" size="20"></label></p>
<p><label>血液型:
<select name="blood">
<option value="A">A型</option>
<option value="B">B型</option>
<option value="O">O型</option>
<option value="AB">AB型</option>
</select>
</label></p>
<fieldset>
<legend>性別</legend>
<p><label><input type="radio" name="sex" value="male">男性</label></p>
<p><label><input type="radio" name="sex" value="female">女性</label></p>
</fieldset>
<fieldset>
<legend>習慣</legend>
<p><label><input type="checkbox" name="hobby" value="tre">筋トレ</label></p>
<p><label><input type="checkbox" name="hobby" value="reading">読書</label></p>
<p><label><input type="checkbox" name="hobby" value="music">音楽</label></p>
<p><label><input type="checkbox" name="hobby" value="travel">旅行</label></p>
</fieldset>
<p><label>その他:<br><textarea name="comments" rows="2" cols="40"></textarea></label></p>
<p><input type="submit" value="送信"><input type="reset" value="リセット"></p>
</form>

fieldsetタグとは?-HTML

 fieldsetタグとは、formタグによるフォーム入力項目をグループ化するタグになります。fieldsetタグで囲われたinputタグやselectタグ、textareaタグはグループとなり、通常のブラウザではボーダーで囲われたデザインとなります。

カテゴリー
form HTML5

formタグとは?-HTML

(例)formタグの使用方法

See the Pen
form
by linlin (@linlin098765)
on CodePen.

<form action="◯◯.php" method="post">
<p><label>氏名:<input type="text" name="name" size="20"></label></p>
<p><label>血液型:
<select name="blood">
<option value="A">A型</option>
<option value="B">B型</option>
<option value="O">O型</option>
<option value="AB">AB型</option>
</select>
</label></p>
<fieldset>
<legend>性別</legend>
<p><label><input type="radio" name="sex" value="male">男性</label></p>
<p><label><input type="radio" name="sex" value="female">女性</label></p>
</fieldset>
<fieldset>
<legend>習慣</legend>
<p><label><input type="checkbox" name="hobby" value="tre">筋トレ</label></p>
<p><label><input type="checkbox" name="hobby" value="reading">読書</label></p>
<p><label><input type="checkbox" name="hobby" value="music">音楽</label></p>
<p><label><input type="checkbox" name="hobby" value="travel">旅行</label></p>
</fieldset>
<p><label>その他:<br><textarea name="comments" rows="2" cols="40"></textarea></label></p>
<p><input type="submit" value="送信"><input type="reset" value="リセット"></p>
</form>

formタグとは?-HTML

 formタグとは、データの入力・送信フォームを作成するためのタグになります。
 formタグの子要素として、inputタグやselectタグ、texetareaタグを配置し、送信ボタンを押下することで入力・選択されたデータをサーバー側へ送信することが可能です。

formタグの属性

  • action属性
    送信先のURLを指定
  • method属性(データ送信方法の指定)
    get …… 送信内容をURLのクエリ(?以降)として送信(初期値)
    post …… 送信内容をデータとして送信
  • enctype属性(送信データの形式を指定)
    application/x-www-form-urlencoded …… 複数の「フィールド名=入力内容」を&でつないだ形式のデータ(初期値)
    multipart/form-data …… ファイルを含むデータ
    text/plain …… テキストのみ
  • accept-charset属性
    文字コードを指定(UTF-8、Shift_JIS等)
  • name属性
    フォームの名前を指定、他フォームと重複不可
  • autocomplete属性
    入力欄の自動補完の有無。初期値は”on”
  • novalidate属性
    入力されたデータの妥当性があるか判断しない指定
カテゴリー
HTML5 td

tdタグとは?-HTML

(例)tdタグの使用方法

See the Pen
table
by linlin (@linlin098765)
on CodePen.

<table>
<caption>
<strong>お肉</strong>
<details>
<summary>このテーブルの説明</summary>
<p>説明文補助</p>
</details>
</caption>
<thead>
<tr><th>長所</th><th>どこ</th><th>短所</th></tr>
</thead>
<tbody>
<tr><td>品質が素晴らしい</td><th>高級焼肉店</th><td>値段が高価、予約が必要</td></tr>
<tr><td>値段が良心的、気軽</td><th>大衆焼肉店</th><td>品質が微妙、休みの日は混む</td></tr>
</tbody>
</table>

tdタグとは?-HTML

 tdタグとは、tableのデータセルを作成するタグです。
 tableはtrタグにより行、thタグにより見出し、tdタグによりデータセルを作成します。

カテゴリー
HTML5 th

thタグとは?-HTML

(例)thタグの使用方法

See the Pen
table
by linlin (@linlin098765)
on CodePen.

<table>
<caption>
<strong>お肉</strong>
<details>
<summary>このテーブルの説明</summary>
<p>説明文補助</p>
</details>
</caption>
<thead>
<tr><th>長所</th><th>どこ</th><th>短所</th></tr>
</thead>
<tbody>
<tr><td>品質が素晴らしい</td><th>高級焼肉店</th><td>値段が高価、予約が必要</td></tr>
<tr><td>値段が良心的、気軽</td><th>大衆焼肉店</th><td>品質が微妙、休みの日は混む</td></tr>
</tbody>
</table>

thタグとは?-HTML

 thタグとは、tableの見出しを作成するタグです。
 tableはtrタグにより行を作成し、thタグにより見出し、tdタグによりデータを作成します。

カテゴリー
HTML5 tr

trタグとは?-HTML

(例)trタグの使用方法

See the Pen
table
by linlin (@linlin098765)
on CodePen.

<table>
<caption>
<strong>お肉</strong>
<details>
<summary>このテーブルの説明</summary>
<p>説明文補助</p>
</details>
</caption>
<thead>
<tr><th>長所</th><th>どこ</th><th>短所</th></tr>
</thead>
<tbody>
<tr><td>品質が素晴らしい</td><th>高級焼肉店</th><td>値段が高価、予約が必要</td></tr>
<tr><td>値段が良心的、気軽</td><th>大衆焼肉店</th><td>品質が微妙、休みの日は混む</td></tr>
</tbody>
</table>

trタグとは?-HTML

 trタグとは、tableの行を表すタグです。tableの行構成としては、trタグで行を作成し、thタグで見出し、tdタグによりデータを記述します。

カテゴリー
HTML5 tfoot

tfootタグとは?-HTML

(例)tfootタグの使用方法

See the Pen
table
by linlin (@linlin098765)
on CodePen.

<table>
<caption>
<strong>お肉</strong>
<details>
<summary>このテーブルの説明</summary>
<p>説明文補助</p>
</details>
</caption>
<thead>
<tr><th>長所</th><th>どこ</th><th>短所</th></tr>
</thead>
<tbody>
<tr><td>品質が素晴らしい</td><th>高級焼肉店</th><td>値段が高価、予約が必要</td></tr>
<tr><td>値段が良心的、気軽</td><th>大衆焼肉店</th><td>品質が微妙、休みの日は混む</td></tr>
</tbody>
</table>

tfootタグとは?-HTML

 tfootタグとは、tableのフッタを指定するタグです。
 tableはタイトル・ヘッダ・ボディ・フッタという構造になっており、tfootタグによりフッタを定義します。tfootタグはあくまでコンピュータがtable構造を正確に読み取るためのものであり、デザイン面に変化があるタグではありません。

カテゴリー
HTML5 thead

theadとは?-HTML

(例)theadの使用方法

See the Pen
table
by linlin (@linlin098765)
on CodePen.

<table>
<caption>
<strong>お肉</strong>
<details>
<summary>このテーブルの説明</summary>
<p>説明文補助</p>
</details>
</caption>
<thead>
<tr><th>長所</th><th>どこ</th><th>短所</th></tr>
</thead>
<tbody>
<tr><td>品質が素晴らしい</td><th>高級焼肉店</th><td>値段が高価、予約が必要</td></tr>
<tr><td>値段が良心的、気軽</td><th>大衆焼肉店</th><td>品質が微妙、休みの日は混む</td></tr>
</tbody>
</table>

theadとは?-HTML

 theadタグとは、tableのヘッダ行を表すタグです。
 tableの構造としてタイトル・ヘッダ・ボディ・フッタに分かれており、theadタグはヘッダに該当します。theadタグは必ず必要なタグではなく、コンピュータがtable構造を正確に読み取るうえで必要なだけで、デザイン面で変化があるものではありません。

カテゴリー
HTML5 tbody

tbodyタグとは?-HTML

(例)tbodyタグの使用方法

See the Pen
table
by linlin (@linlin098765)
on CodePen.

<table>
<caption>
<strong>お肉</strong>
<details>
<summary>このテーブルの説明</summary>
<p>説明文補助</p>
</details>
</caption>
<thead>
<tr><th>長所</th><th>どこ</th><th>短所</th></tr>
</thead>
<tbody>
<tr><td>品質が素晴らしい</td><th>高級焼肉店</th><td>値段が高価、予約が必要</td></tr>
<tr><td>値段が良心的、気軽</td><th>大衆焼肉店</th><td>品質が微妙、休みの日は混む</td></tr>
</tbody>
</table>

tbodyタグとは?-HTML

 tbodyタグとは、tableのボディ部分を定義するタグです。
 tbodyタグはtableタグの子要素として、captionタグやcolgroupタグより後に記述します。tbodyタグは複数使用可能であり、特段tbodyタグを使用しなくても問題ありませんが、tbodyタグを使用することでコンピューターが表の構造を読み取りやすくなります。

カテゴリー
col HTML5

colタグとは?-HTML

(例)colタグの使用方法

See the Pen
colgroup
by linlin (@linlin098765)
on CodePen.

<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="html,result" data-user="linlin098765" data-slug-hash="qBdrGjX" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="colgroup">
  <span>See the Pen <a href="https://codepen.io/linlin098765/pen/qBdrGjX">
  colgroup</a> by linlin (<a href="https://codepen.io/linlin098765">@linlin098765</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

colタグとは?-HTML

 colタグとは、tableのカラム(縦列)にまとめてスタイルや属性を指定する際に使用するタグです。colgroupタグと違い、グループ化するものではありません。
 colタグはcolgroupタグの子要素に記述します。colタグにspan属性を指定することでスタイル等をカラムにまとめて指定します。
 colgroupタグにspan属性を指定している場合にcolタグの使用はできません。

カテゴリー
colgroup HTML5

colgroupタグとは?-HTML

(例)colgroupタグの使用方法

See the Pen
colgroup
by linlin (@linlin098765)
on CodePen.

<table>
<caption>お肉の人気ランキング</caption>
<colgroup span="1" style="width:30px; background-color:#FF9900;">
<colgroup span="3" style="width:150px; background-color:#FF3300;">
<thead>
<tr><th>順位</th><th>名前</th><th>人気度</th><th>備考</th></tr>
</thead>
<tbody>
<tr><th>1位</th><td>飛騨牛</td><td>5</td><td>最高の霜降り</td></tr>
</tbody>
  
</table>

colgroupタグとは?-HTML

 colgroupタグは、tableのカラム(縦列)をグループ化するタグです。
 colgroupタグでカラムをグループ化することでスタイルや属性等をまとめて指定することが可能です。span属性に「1」以上の数字を指定することでグループ化するカラム数を指定できます。
 colgroupタグはcaptionタグの直下またはtableタグの直下に記述します。