【HTML】フォーム要素いろいろ

## input
:sunny: １行のテキスト入力欄を作成
:sunny: 終了タグは不要

よく見るこんな感じ:smile:
↓
<img width="197" alt="スクリーンショット 2019-12-27 22.24.28.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532773/97e4e21f-c950-2bd0-6406-0ac63250cfa3.png">

この四角枠に入力してくださいっていうやつ。
これを作成するのはとてもかんたん:smile:

```例.html
<p>名前を入力してください</p>
<input type="text">
```

これだけでできちゃう:smile:

type・・・属性値の部分（今回はtext）を変更することでいろんなフォームが作成できる
text・・・１行のテキスト入力欄を作成


ちなみに1行テキストの場合は input とだけ入力するだけでも作成できちゃいます:smile:

```例.html
    <p>名前を入力してください</p>
    <input>
```

Web
↓
<img width="195" alt="スクリーンショット 2019-12-27 22.32.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532773/2cfe6928-72d6-944f-c00f-3f0e21eb7013.png">

これでもＯＫ:smile:

## input placeholder
:sunny: ボックスの中に記入されている薄い灰色のテキスト
:sunny: ボックスに何を入力すればいいのかわかりやすい

よくあるこのパターン
↓
<img width="192" alt="スクリーンショット 2019-12-27 22.41.58.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532773/3675a6f7-f904-b847-7d17-a2ad700c12c1.png">

ボックスのなかに文字が記入されているパターン。
これはどうするかというと・・・

```例.html
<p>名前を入力してください</p>
<input placeholder="こちらに名前を入力してください">
```

属性値はボックスに入力したいテキストを記入する。

これだけでできちゃう:laughing: 

## textarea
:sunny: 複数行のテキスト入力欄を作成

よく見るこれ
↓
<img width="324" alt="スクリーンショット 2019-12-27 23.56.46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532773/ea8f5f15-3df0-ea2f-13d8-e0a6efc80be1.png">

```例.html
<p>ご意見ご要望はこちら</p>
<textarea placeholder="こちらにご意見等をご記入ください"></textarea>
```

これでできちゃいます:smile:
ちなみに開始タグと終了タグのあいだに文字を入れるとどうなるかというと・・・

```例.html
<p>ご意見ご要望はこちら</p>
<textarea placeholder="こちらにご意見等をご記入ください">ここに文字をいれたらどうなるの？</textarea>
```

Web
↓
<img width="319" alt="スクリーンショット 2019-12-28 0.02.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532773/1267e00c-a0c8-a019-8a0c-a390730cfc5b.png">

入力欄にはいっちゃいました:sweat_smile:
ここに入力されるのなら placeholder で設定しなくていいんじゃないの？と思っちゃいますが placeholder を設定しないと・・・

<img width="328" alt="スクリーンショット 2019-12-28 0.07.59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532773/895401d6-abbe-0311-981e-2ce4e6a5e2b3.png">

入力時に文字を消さないといけないため面倒です。
なので placeholder を設定するほうが親切です:smile:

## input type="checkbox"
:sunny: チェックボックスを作成

チェックボックスとは・・・

<img width="294" alt="スクリーンショット 2019-12-28 0.44.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532773/084f4af7-067e-5680-c52c-8ce9b0ef21dc.png">

こういうやつ！:laughing: 

作り方はちょっと長くなります。

```例.html
<p>あなたの趣味を教えて下さい（複数可）</p>
<input type="checkbox" name="hobby" value="0">映画
<input type="checkbox" name="hobby" value="1">音楽
<input type="checkbox" name="hobby" value="2">ゲーム
<input type="checkbox" name="hobby" value="3">スポーツ
```

checkbox・・・１行テキスト入力欄のときは text と入力しましたが、今回はチェックボックスを作るので属性値は checkbox となります。

name・・・要素の名前を指定（”_charset_” と ”isindex” 以外なら好きな名前でOK！）

value・・・０から始まる数を指定？

value に関して断定はできないのですが name 属性があるということは、その名前で 0 〜作成したデータを保存するため・・・なのかな？？と思います。
上記言うなら、hobby というグループに 0番は映画、1番は音楽・・・というふうに。
データ管理するためなのかな・・・？と思います。
違ったらごめんなさい。

なので checkbox をつくるときは

type を checkbox にして
name で 好きな名前を決めて
value で 0 から始まる数字をつけていく（もしかしたら文字でもいいのかもしれません）

とおぼえてしまったほうがいいかもです:sweat_smile: 

## input type="radio"
:sunny: ラジオボタンを作成

<img width="230" alt="スクリーンショット 2019-12-28 1.20.49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532773/58e60cd5-db3a-fe38-e8e6-f0d02d091f10.png">

上記のようにボタンを１つしか選べないやつです:smile:

```例.html
<p>次の計算の答えを選びなさい</p>
<p>１＋１＝？</p>
<input type="radio" name="answer" value="0">２
<input type="radio" name="answer" value="1">５
<input type="radio" name="answer" value="2">７

```

基本的には作り方はチェックボックスのときと同じです。


違うのは type に対しての属性値を radio にすればいいだけです:smile:

type を radio にして
name で 好きな名前を決めて
value で 0 から始まる数字をつけていく（文字でも可？？）

## input type="submit"
:sunny: 送信ボタンを作成

これまたよくあるこんなやつ
↓
<img width="352" alt="スクリーンショット 2019-12-28 1.31.46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532773/5c42b10d-fa93-879a-1dd4-c337d9fe5a83.png">

```例.html
<p>入力が完了したら送信ボタンを押してください</p>
<input type="submit">
```

submit・・・送信ボタン作成

送信ボタンの名前を変えたいなぁというときは

```例.html
<p>入力が完了したら送信ボタンを押してください</p>
<input type="submit" value="ポチッとな">
```

Web
↓
<img width="351" alt="スクリーンショット 2019-12-28 1.37.09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532773/2c999351-a872-0e65-2ce7-c3ed45b990a1.png">

任意の文字に変えれました:laughing: 
なので value="任意の名前" で名前を好きにできます:laughing: 

## label
:sunny: フォームと項目をセットにする
:sunny: フォームをクリックしてもテキストをクリックしてもチェックをつけれる

<img width="294" alt="スクリーンショット 2019-12-28 0.44.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532773/3bfc6603-5a06-9d55-9b36-3df0237495d1.png">

上記チェックボックスですが、さきほどまでのコードだとチェックボックスの四角枠をクリックしないとチェックが押せませんでした。
しかし label タグを使うことで 音楽 とか ゲーム とか文字をクリックしてもチェックがつくということです:smile:

作成したコードはこちら

```例.html
<p>あなたの趣味を教えて下さい（複数可）</p>
<label>
  <input type="checkbox" name="hobby" value="0">映画
</label>
<label>
  <input type="checkbox" name="hobby" value="1">音楽
</label>
<label>
  <input type="checkbox" name="hobby" value="2">ゲーム
</label>
<label>
  <input type="checkbox" name="hobby" value="3">スポーツ
</label>
```

label で囲むだけ:smile:
か〜んたん:smile: