🌝

学習記録1_<table>と<form>

2022/12/08に公開

HTML

初心者

idea

ひとこと

Zenn初投稿！今後も雑に学習記録つけていこうと思う
驚きはなかったものの、割と抑えるべきとこありちゃんと頭つかう内容だった、復習すると思う
瞼がおちそうなので学習中断です🐱

教材

学習範囲

HTMLの終盤。テーブルとフォーム😀

超重要
- テーブルの基本: <table>,<tr>,<td>,<th>
- フォーム要素の基本
- ボタン要素
- ラベル要素
- よく使われるinputの種類
重要
- テーブルのセクション<thead>,<tfoot>,<tbody>
- range型のinputとtextarea
- フォームのバリデーション
知っておくといい
- テーブルのセル結合(colspan,rowspan)

ノート📓

テーブル

<table>: 表要素 - HTML: HyperText Markup Language | MDN
- 表のこと。昔はレイアウトを整えるためにやっていた、こんな感じ↓
  - http://www.dolekemp96.org/
  - https://www.spacejam.com/1996/
- 構成要素は5~10種類ある
  - tr: table row
  - td: table data
  - th: table header
  - tbody: テーブルのヘッダー/ボディ/フッターのうちボディ
  - tfoot: テーブルのヘッダー/ボディ/フッターのうちフッター
  - rowspan: 縦に繋げる
  - colspan: 横に繋げる e.g. <th colspan=“2”></th>

フォーム

<form>: フォーム要素 - HTML: HyperText Markup Language | MDN
- ウェブサーバーに情報を送信するためにつかう, 必ずしもお問合せフォームみたいな形ではなく検索ボックスも含む
- "action属性"と"method属性"がある
  - action属性はフォームにインプットされた情報を「どこ」へ送信するかを指定する
  - method属性はフォーム送信時にブラウザがつかうHTTPメソッドを指定する
    - get: データをリクエストするためだけに使用する, データを含めない
    - post: サーバーにデータを送信する
- 中身
  - <input>
    - これだけで結構いろんなフォームができる, 日付選択からチェックボックスまで
    - "type属性"が鍵, たくさんあってこれで挙動や見た目を変更することができる
      - よくあるのは text, password, color, numberなど
      - placeholderで未入力時のテキストを指定できる
  - <label>
    - 視覚的なラベリングだけでなく、プログラム的にも関連付けられる(平たくいうと便利というより欠かせない) <input> と関連づけることで生まれる利点
    - <input>に"id属性"を設定する
    - <label>の"for属性"の値にidと同じ値をいれる
  - <button>
    - クリックできるボタンを表す
    - ボタンを押した時の挙動は、当該ボタンの<button>が含まれる<form>のaction属性による
    - 属性のtypeはデフォルトでsubmit(送信)。その他button, menu, resetなどがある
    - ちなみに<input type="submit" value="送信する">と<button type="submit">送信する</button>はいっしょ
  - inputの属性name
    - 入力欄コントロールの名前。名前/値の組の部分としてフォームと一緒に送信される

つづく🌚

ひとこと

教材

学習範囲

ノート📓

テーブル

フォーム

Discussion