【HTML5学習】 Part.5 -form-

5回目になります！
今回は、最近勉強中のフォームについて。

##formとは

ユーザーからの入力を受け付けてデータを送信するための仕組み。

##formタグ   

***&lt;form&gt;&lt;/form&gt;*** :入力・送信フォームを作る時に使用する。inputなどのフォームに関する要素は基本的に、この要素内に含める。

>**action** : (アクション)属性。送信先URLを指定する時に使う。

>**method** : (メソッド)属性。　データの送信方法を指定する。

>**get** : 送信内容がURLとして渡される（初期値）

>**post** :  本文（本体）として送信される

>```html
<form action="送信先.php" method="get"></form>
```

  

##inputタグ
  データや表を表す。ユーザーから送られてきたものを受け付けるための部品。

```html
<input type="#" name="〇〇〇">
```

>***type属性*** : (タイプ)属性。要素のデータタイプを指定する。

>**text** :１行のテキストボックス。

>```html
ユーザー名 :<input type="text" name="user_name" id="user_name">
```
><img width="233" alt="text.png" src="https://qiita-image-store.s3.amazonaws.com/0/174180/b0a175d3-c8a7-2821-85b1-01417a37c9b0.png">


>***email*** : メールアドレスのデータを表すテキストボックス。
アドレスっぽくないものを入力するとエラーメッセージが表示される。

>```html
email : <input type="email" name="email">
```
<img width="346" alt="email_error.png" src="https://qiita-image-store.s3.amazonaws.com/0/174180/b5e7cc12-0ccf-b48e-2efc-80fa59a29d83.png">


>***password*** : パスワードを入力するテキストボックス。入力したデータは●で隠されて表示される。

>```html
パスワード : <input type="password" name="pass">
```

>***radio*** : 複数ある選択肢から１つを選択するラジオボタン。

>```html
<input type="radio" name="gender" value="man">男性
<input type="radio" name="gender" value="woman">女性
```
<img width="160" alt="radio.png" src="https://qiita-image-store.s3.amazonaws.com/0/174180/6d1d332a-423b-0ff3-a8f1-ee04aeaf878b.png">

>***checkbox*** : 複数ある選択肢から複数選べるようにするチェックボックス。

>```html
iPhone :
<input type="checkbox" name="iphone" value="6" checked>iPhone6
<input type=”checkbox” name="iphone" value=”6s”>iPhone6s
<input type=”checkbox” name="iphone" value=”7”>iPhone7
```
><img width="346" alt="checkbox.png" src="https://qiita-image-store.s3.amazonaws.com/0/174180/b65bf1f4-ca3b-08d2-8fd7-81c860763025.png">


>***submit*** : 送信ボタンを表示させる。

>```html
<input type="submit" value="送信">
```
><img width="43" alt="submit.png" src="https://qiita-image-store.s3.amazonaws.com/0/174180/9db20388-236a-073e-0f59-d1ae341c3caa.png">

>**required** : 必須項目であることを指定してくれる。


##buttonタグ
**&lt;button&gt;&lt;/button&gt;** : 画像を入れ込んだり、ボタンに書くテキストをよりリッチにできる。
type="submit" を指定すると送信ボタンとして機能する。

```html
<button><img src="#" height="#" width="#"></button>
```



##textareaタグ 
**&lt;textarea&gt;&lt;/textarea&gt;** : ユーザーから送られてきたものを受け付けるための部品。inputと違い、複数行のテキストを入力できる。

>```html
<p>感想</p>
<textarea row="10" cols="60"></textarea>
```
><img width="332" alt="textarea.png" src="https://qiita-image-store.s3.amazonaws.com/0/174180/e9ded318-593d-3254-0cb1-a8374a4c4d30.png">

>**cols** : 幅を設定する
>**rows** : 高さを設定する





####その他テキスト関連属性

>**size** : 入力欄の横幅を指定する。

>```html
<input type="text" name="user_name" id="user_name" size="10">
```

>**maxlength** : 最大入力文字数を指定。

>```html
<input type="text" name="user_name" id="user_name" maxlength="20">
```

>**minlength** : 最小入力文字数を指定。

>```html
<input type="text" name="user_name" id="user_name" minlength="10">
```

>**placeholder** : 入力欄に薄文字などで表示する文字を指定する。

>```html
<textarea row="10" cols="50" placeholder="ここに記入してください"></textarea>
```
><img width="333" alt="placeholder.png" src="https://qiita-image-store.s3.amazonaws.com/0/174180/4fc7e6f0-1f1e-fbf3-e374-f53c3b55fff2.png">

##まとめ

```html
<form action="#" method="#">
	<table>
		<tr>
			<th><label for="name">名前</label></th>
			<td><input type="text" name="name" maxlength="15" required id="name"></td>
		</tr>
		<tr>
			<th><label for="email">メールアドレス</label></th>
			<td><input type="email" name="email" required id="email"></td>
		</tr>
		<tr>
			<th><label for="pass">パスワード</label></th>
			<td><input type="password" name="password" minlength="6" required id="pass"></td>
		</tr>
		<tr>
			<th>性別</th>
			<td>
				<input type="radio" name="gender" required value="woman" id="woman">
				<label for="woman">女性</label>
				<input type="radio" name="gender" value="man" id="man">
				<label for="man">男性</label>
			</td>
		</tr>
		<tr>
			<th>SNS</th>
			<td>
				<input type="checkbox" name="sns" value="instagram" checked>Instagram
				<input type="checkbox" name=”sns” value=”facebook”>Facebook
				<input type="checkbox" name=”sns” value=”twitter”>Twitter
			</td>
		</tr>
		<tr>
			<th><label for="other">その他</label></th>
			<td><textarea row="30" cols="40" id="other" placeholder="何かあればご記入ください"></textarea></td>
		</tr>
	</table>
	<p><input type="submit" value="送信"></p>
</form>
```
<img width="500" alt="form_table.png" src="https://qiita-image-store.s3.amazonaws.com/0/174180/3a8661d3-8088-bfff-8d34-52a0a877749f.png">



今回は大まかなフォームについて書きました。
他にももっとたくさんの種類があるので、引き続き勉強してキレイなフォームが作れるようになります〜！