TechAcademyが無料公開している「HTML・CSS入門講座」を受講する～HTML第7回～

# アジェンダ
* HTMLのタグ
    * テキスト入力のタグ
        * input type="text"
        * input type="password"
        * textarea
    * 選択肢のタグ
        * input type="radio"
        * input type="checkbox"
        * select
        * option
        * optgroup
    * ボタンのタグ
        * input type="submit"
        * button
    * その他
        * fieldset
        * legend
        * label
        * form
* HTMLの属性
    * rows
    * cols
    * value
    * for
* 実践

# HTMLのタグ
## テキスト入力のタグ
### input type="text"
テキストを入力する単一行のテキストボックスであることを示すタグ。

### input type="password"
パスワードを入力する単一行のテキストボックスであることを示すタグ。
入力した文字が●で表示される。

### textarea
テキストを入力する複数行のテキストボックスであることを示すタグ。

## 選択肢のタグ
### input type="radio"
ラジオボタンであることを示すタグ。
name属性で指定した値が等しいものを、一つの選択肢群とする。

### input type="checkbox"
チェックボックスであることを示すタグ。
name属性で指定した値が等しいものを、一つの選択肢群とする。

### select
ドロップダウンメニューであることを示すタグ。

### option
ドロップダウンメニューのうち、一つの選択肢であることを示すタグ。

### optgroup
いくつかのドロップダウンの選択肢が、一つのグループであることを示すタグ。
option groupのoptgroup。

## ボタンのタグ
###input type="submit"
データを送信するボタンを示すタグ。

### button
処理を実行するボタンを示すタグ。

## その他
### fieldset
いくつかのフォームが一つのグループであることを示すタグ。

### legend
fieldsetで作成したグループの名称を示すタグ。

### label
Webページに表示された文書とフォームを対応づけるタグ。
文書を選択することで、フォームを選択できるようになる。

### form
入力されたデータを送信する際の、一つのまとまりを示すタグ。

# HTMLの属性
## rows
テキストボックスの横幅の文字数を指定する属性。

## cols
テキストボックスの行数を指定する属性。

## value
フォームで選択したデータの値を指定する際に用いる属性。
主に、Webページ利用者ではなく、入力されたデータを収集する側が使用する。

## for
Webページに表示された文書を選択した際に、どのフォーム入力が対応しているかを指定するタグ。
値に入力した文字列と等しいid属性を持つフォームが対応する。

# 実践
上記の内容を用いて、以下のindex.htmlを作成した。

```html:index.html
<!DOCTYPE html>

<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>申し込みフォーム</title>
  </head>
  <body>
    <h1>☆申し込みフォーム☆</h1>
    <p>以下の内容をご記入した上で、申し込みボタンを押してください。</p>

    <form action="#" method="post">
      <fieldset>
        <legend>お客様情報</legend>
        <ul>
          <li>氏名：<input type="text" name="fullname" size="20"></li>
          <li>氏名(カナ)：<input type="text" name="fullname_kana" size="20"></li>
          <li>会員ID：<input type="password" name="member_id" size="10"></li>
          <li>
            性別：
            <input type="radio" name="sex" value="male" id="sex_male"><label for="sex_male">男性</label>
            <input type="radio" name="sex" value="female" id="sex_female"><label for="sex_female">女性</label>
          </li>
          <li>
            お住まい：
            <select name="prefectures">
              <option value="null">---</option>
              <optgroup label="関東">
                <option value="tokyo">東京</option>
                <option value="kanagawa">神奈川</option>
                <option value="chiba">千葉</option>
                <option value="saitama">埼玉</option>
              </optgroup>
              <optgroup label="関西">
                <option value="osaka">大阪</option>
                <option value="kyoto">京都</option>
                <option value="hyogo">兵庫</option>
              </optgroup>
              <optgroup label="四国">
                <option value="kagawa">香川</option>
                <option value="ehime">愛媛</option>
                <option value="kouchi">高知</option>
                <option value="tokusima">徳島</option>
              </optgroup>
            </select>
          </li>
        </ul>
        <!-- 入力内容をクリアするJavaScriptを実行. -->
        <button>入力内容クリア</button>
      </fieldset>

      <fieldset>
        <legend>アンケート</legend>
        <ul>
          <li>
            商品を購入した理由(複数選択可)<br>
            <input type="checkbox" name="buy_reason" value="cheap" id="buy_reason_cheep"><label for="buy_reason_cheep">値段が安かった</label>
            <input type="checkbox" name="buy_reason" value="replacement" id="buy_reason_replacement"><label for="buy_reason_replacement">以前使用していたものが壊れた</label>
            <input type="checkbox" name="buy_reason" value="useful" id="buy_reason_useful"><label for="buy_reason_useful">便利そうだと思った</label>
            <input type="checkbox" name="buy_reason" value="somehow" id="buy_reason_somehow"><label for="buy_reason_somehow">なんとなく</label>
            <input type="checkbox" name="buy_reason" value="other" id="buy_reason_other"><label for="buy_reason_other">その他：</label><input type="text" name="reason" size="20">
          </li>
          <li>
            商品に対する要望・感想<br>
            <textarea name="impression_for_product" cols="80" rows="10"></textarea>
          </li>
          <li>
            店舗に対する要望・感想<br>
            <textarea name="impression_for_store" cols="80" rows="10"></textarea>
          </li>
        </ul>
        <!-- 入力内容をクリアするJavaScriptを実行. -->
        <button>入力内容クリア</button>
      </fieldset>
      <!-- 入力内容を送信する. -->
      <input type="submit" value="申し込み">
    </form>
  </body>
</html>
```

これをWebページに表示させるとこんな感じ。
![index.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/648214/d9116886-dedc-ad7b-d7d1-e19e2c8d8fc7.png)

試しに入力してみた。
![example.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/648214/3846258c-a2ff-ec52-8db4-ca7c6f74610f.png)

ふむ、想定通りに出来上がっている！

# おわりに
今回はWebページに対して操作ができるような内容を学んだ。
普段使用しているQiita記事投稿画面も、こんな感じなのかなーと思いながら進めた。

今回でHTMLの入門講座はおしまい。次はCSSの入門講座を受講する。

## 参考
[7-1 テキスト入力（HTMLのフォーム）](https://www.youtube.com/watch?v=PYAfFw21AnI&list=PLjw-30bsJNVU87F5iCPAW9kB4QDUGQxUG&index=20)
[7-2 ラジオボタンとチェックボックス（HTMLのフォーム）](https://www.youtube.com/watch?v=KLR3oacDzcQ&list=PLjw-30bsJNVU87F5iCPAW9kB4QDUGQxUG&index=21)
[7-3 ドロップダウンメニュー（HTMLのフォーム）](https://www.youtube.com/watch?v=7H_F2dMOZMs&list=PLjw-30bsJNVU87F5iCPAW9kB4QDUGQxUG&index=22)
[7-4 フォームのグルーピング（HTMLのフォーム）](https://www.youtube.com/watch?v=OXspFYXjKks&list=PLjw-30bsJNVU87F5iCPAW9kB4QDUGQxUG&index=23)
[7-5 ボタンと送信（HTMLのフォーム）](https://www.youtube.com/watch?v=vJEYGErzxIc&list=PLjw-30bsJNVU87F5iCPAW9kB4QDUGQxUG&index=24)