HTML：フォームを作ろう

#フォームについて
今回はフォームを作ってきます:relaxed:
**フォーム**とは、ユーザーがテキスト入力したり、選択したりできるものです。
お問い合わせや、検索ボックス、会員登録などの際にWebページでよく見かけるのではないでしょうか。

お問い合わせフォームの例を見ていきましょう:point_down_tone2:
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/c73c1483-8791-a78c-4bd7-1eb34d3077a0.png)

このフォームは実は多くのパーツを組み合わせて作られているのです。
そのパーツを1つ1つ勉強していきましょう:bangbang:

今回の記事:arrow_down:

- フォーム欄を作るformタグ
- テキスト入力欄
- ラジオボタンを作る
- チェックボックスを作る
- 送信ボタンの作り方
- セレクトボックス
- 複数行テキスト入力欄
- より使いやすいフォームにするには

#フォーム欄を作るformタグ
**＜form＞タグ**とは、フォームを作成するためのタグで、フォームを作る際には＜form＞タグで使用するすべてのパーツを囲う必要があります。

記述する主な属性は以下の通りです。

|  属性      |       用途|   
|:-----------------|------------------|
| action            |データ送信先ページを指定 |  
| method           |データの送信方法を指定。主にgetかpostを入力 |
| name             |  フォームの名前を指定 | 


```html:フォームタグの例
<form action="./Homeservlet" method="post" name="contact_form">
        <!-- ここにフォームの部品が入ります。 -->
</form>
```
この例だと、入力した内容がHomeservlet.javaに送られます。(JSP,Servlet使用の場合)
次からフォームの部品について見ていきます。
多くのパーツは**inputタグ**で書いていきます。

#テキスト入力欄
部品部分はinputタグの**type属性**によって変わってきます。**１行のテキスト入力**の場合は、type属性の中に**text**と書きます。

```html:１行テキストの例
お名前：<input type="text">
```
すると入力欄に文字が入力できるようになります。
![GIF 2020-03-20 12-24-45.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/7d2400a0-c97e-518d-b0ea-d40949b860c3.gif)

####入力欄に最初からテキストを表示

入力欄に最初からテキストを表示することも可能です。
placeholder属性を使用します。

```html:テキスト初めから表示
お名前：<input type="text" placeholder="名字　名前">
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/04ec1ed1-6f02-8750-a949-71f5ce041cfa.png)


####色々な種類の１行テキスト
１行テキストには入力する内容が多々あります。
type属性の中に様々なものを指定できます。この属性値をサポートしているブラウザで正しい書式をチェックしてくれます。

|  属性値     |       用途|   
|:-----------------|------------------|
| text            |１行テキスト（初期値）　|  
| search          |検索するときのテキスト |
| email             |メールアドレス | 
| tel             |  電話番号 | 
| url             |  WebサイトのURL | 

#ラジオボタンを作る
複数ある選択肢のうち、1つのみ選択してももらいたい時には**ラジオボタン**を使用します。
ユーザーが一つをクリックして選択すると、その他の選択肢は自動的に選択できなくなります。
**ラジオボタンを作る**場合は、type属性の中に**radio**と書きます。


主な属性

|  属性値     |       用途|   
|:-----------------|------------------|
| name            |ラジオボタンの名前　|  
| value          |送信される選択肢の名前 |
| checked            |最初から選択されている状態にするとき指定 | 

```html:ラジオボタンの例
 性別：
    <input type="radio" name="gender" value="男">男
    <input type="radio" name="gender" value="女" checked>女
    <input type="radio" name="gender" value="その他">その他
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/9b897379-3426-dd60-fcb0-24a2360f501a.png)

複数の選択肢があるラジオボタンでは、それぞれに同じname属性の値を付けることで1つのグループとしてまとめられます。checked属性を指定したラジオボタンは最初から選択状態になります。

#チェックボックスを作る
**チェックボックス**はラジオボタンのように複数ある選択肢から選んでもらうパーツですが、ラジオボタンと違いチェックボックスの場合は複数の項目を選択可能です。
**チェックボックスを作る**場合は、type属性の中に**checkbox**と書きます。

主な属性

|  属性値     |       用途|   
|:-----------------|------------------|
| name            |チェックボックスの名前　|  
| value          |送信される選択肢の値 |
| checked            |最初から選択されている状態にするとき指定 | 

```html:チェックボタンの例
　好きな色：
   <input type="checkbox" name="color" value="赤" checked>赤
   <input type="checkbox" name="color" value="青">青
   <input type="checkbox" name="color" value="黄">黄
   <input type="checkbox" name="color" value="緑">緑
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/7115677b-7350-eb28-68dc-651526ad0124.png)

ラジオボタンと同じく、それぞれに同じname属性の値を付けることで1つのグループとしてまとめることができます。checked属性も同様です。
チェックボックスは、趣味や利用目的など、複数の答えが考えられるときに利用しましょう。

#送信ボタンの作り方
フォームに入力した内容を送信するパーツです。
**送信するパーツを作る**場合は、type属性の中に**submit**と書きます。
ボタン上に表示させるテキストは「送信」でなくても大丈夫です。例えば検索フォームなら、「検索」、会員登録フォームなら「登録」と、用途に合わせて変えるといいでしょう。

主な属性

|  属性値     |       用途|   
|:-----------------|------------------|
| name            |ボタンの名前　|  
| value          |ボタンに表示されるテキスト |

```html:送信ボタンの例
<input type="submit" value="送信">
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/d74addb4-5090-9462-7261-79204c0c4bbd.png)

#セレクトボックス
セレクトボックスをクリックすると、選択肢が表示されるパーツです。選択肢全体を**＜select＞タグ**で囲み、選択項目はそれぞれ**＜option＞タグ**で囲みます。

＜select＞タグの主な属性

|  属性値     |       用途|   
|:-----------------|------------------|
| name |セレクトボックスの名前　|  
| multiple|ShiftまたはCtrlキーで複数の項目を選択可能にする|

＜option＞タグの主な属性

|  属性値     |       用途|   
|:-----------------|------------------|
| value |送信される選択肢の値　|  
| selected|最初から選択されている状態にするときに指定|

```html:セレクトボックスの例
    <select name="bloodtype">
        <option value="A">A</option>
        <option value="B">B</option>
        <option value="O">O</option>
        <option value="AB">AB</option>
        <option value="不明" selected>不明</option>
    </select>
```
![GIF 2020-03-22 17-15-19.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/9707c52f-27a6-a028-ab6f-30f5a4005a9c.gif)


#複数行テキスト入力欄
＜textarea＞ タグを使えば、複数行にわたるテキストを入力できます。お問い合わせ内容やメッセ時を入力するときに使われます。＜textarea＞ タグで囲まれた部分が初期値として表示されます。

＜textarea＞ タグの属性

|  属性値     |       用途|   
|:-----------------|------------------|
| name |入力フィールドのの名前　|  
| cols|一行当たりの最大文字数の目安を指定する|
| rows|表示行数を指定する|
| placeholder|ユーザー入力に関するヒントを短めのテキストで指定|

```html:複数行テキスト入力の例
   <textarea name="message" cols="30" rows="10">メッセージを入力</textarea>
```

![GIF 2020-03-23 7-45-39.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/85c00f1c-a0ca-51e5-23e4-315f0de8e7bb.gif)

上記のように＜textarea＞ タグで囲まれた部分は入力欄をクリックしても消えないので、 placeholder属性で指定するとよいでしょう。

```html:複数行テキスト入力の例
<textarea name="message" placeholder="メッセージを入力" cols="30" rows="10"></textarea>
```
![GIF 2020-03-23 7-51-47.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/4014eaf7-f8d6-65f3-173a-015bf5a97746.gif)


#より使いやすいフォームにするには
フォームを設置する時、例えば1行テキスト入力欄横に「名前」「電話番号」などの文字表示させます。これらのテキストのことを**「ラベル」**と呼びます。ラベルをつけることでより使いやすいフォームになります。
ラベルには＜label＞タグを使います。ラジオボタンやチェックボックスをクリックする際などに使用します。

|  属性値     |       用途|   
|:-----------------|------------------|
|for |フォーム部品とラベルを関連付ける　|  

関連付けたいフォームには**id属性**を付けます。このfor属性とid属性の値を同じものにしておけば関連付けられます。

```html:ラベルの例
    <input type="checkbox" name="travel" value="日本国内" id="japan">
    <label for="japan">日本国内</label>

    <input type="checkbox" name="travel" value="ヨーロッパ" id="europe">
    <label for="europe">ヨーロッパ</label>

    <input type="checkbox" name="travel" value="東南アジア" id="asia">
    <label for="asia">東南アジア</label>
```
![GIF 2020-03-23 8-06-59.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/aef1a625-68c3-ac2b-705b-b423c2b1d373.gif)



これで文字の部分をクリックしてもチェックがつくので、使いやすいですね:smiley: