HTMLのinputタグについて


# はじめに

同僚とHTML5について話していたところ、追加された`input type属性`について説明ができなかった。<br>
復習するためにアウトプットしたいと思います。<br>
記事を8割書いた時点でデータが吹っ飛んだ為、随時追加型にしております。

# 参考サイト

[HTML5タグリファレンス](http://www.htmq.com/html5/input.shtml) <br>
[WebDesignLyric](http://kenyo--c.com/html/111/)

# \<input>の終了タグ/閉じタグについて

HTML5から終了タグ/閉じタグをつけるのは`間違った文法`ではなくなりました。<br>
ですが、終了タグ/閉じタグをつけないのが正しい文法だそうです。<br>
私はつけるようにしています。<br>

# イベントハンドラ

\<input>属性の中に一つのみ設定できる。<br>
イベントハンドラ内では複数の関数の呼び出しを行える。<br>
技法的には古いらしい。<br>

# 入力方法
例えば`<input type="text">`と`<input type="number">`を比較してみます。
PCでは「増やす」「減らす」の増減ボタンが`<input type="number">`において表示されます。
SPでは自動でキーパッドが数値用に`<input type="number">`ではなります。

# フォームバリデーション
HTML5のpattern,required属性等の追加に伴い、JSで実装していたクライアントチェック処理を<br>
一部HTMLの記述のみに置き換えられるようになった。
ブラウザ依存(旧ブラウザ)問題がある場合、フォームバリデーションを切ることもできる。
```html
<input type="submit" name="" value="" formnovalidate />
```

# input type属性

## input type属性一覧

name   | name   | name     | name
:----- | :----- | :------- | :-------------
hidden | text   | password | checkbox
radio  | file   | submit   | image
reset  | button | search   | tel
url    | email  | datetime | date
month  | week   | time     | datetime-local
number | range  | color    |

- search以降はHTML5にて追加

## input type属性の概要

### hidden

```html
<input type="hidden" name="" value="" />
```

- ブラウザ上に表示しないデータを送信します。

### text

```html
<input type="text" name="" value="" />
```

- ブラウザ上に1行テキストボックスを表示し、入力データを送信します。

### password

```html
<input type="password" name="" value="" />
```

- ブラウザ上に1行テキストボックスを表示し、入力データを暗号化せず送信します。
- 入力した文字列は「＊」に置き換えられます。

### checkbox

```html
<input type="checkbox" name="" value="">選択肢1</input>
<input type="checkbox" name="" value="">選択肢2</input>
<input type="checkbox" name="" value="">選択肢3</input>
```

- ブラウザ上にチェックボックスを表示し、選択データを送信します。

### radio

```html
<input type="radio" name="" value="">選択肢1</input>
<input type="radio" name="" value="">選択肢2</input>
<input type="radio" name="" value="">選択肢3</input>
```

- ブラウザ上にラジオボタンを表示し、選択データを送信します。

### file

```html
<input type="file" name="" />
```

- ブラウザ上にファイル参照とファイル名を表示し、ファイルを送信します。

### submit

```html
<input type="submit" value="" />
```

- ブラウザ上にサブミットボタンを表示し、ボタン押下後フォーム情報を送信します。

### image

```html
<input type="image" src="" alt="" />
```

- ブラウザ上に画像ボタンを表示する。

### reset

```html
<input type="submit" value="" />
```

- ブラウザ上にリセットボタンを表示し、ボタン押下後フォーム情報を初期化します。

### button

```html
<input type="button" value="" />
```

- ブラウザ上に汎用ボタンを表示する。

### search

```html
<input type="search" name="" value="" />
```

- ブラウザ上に1行テキストボックス(検索用)を表示し、入力データを送信します。

### tel

```html
<input type="tel" name="" value="" />
```

- ブラウザ上に1行テキストボックス(電話番号用)を表示し、入力データを送信します。

### url

```html
<input type="url" name="" value="" />
```

- ブラウザ上に1行テキストボックス(URL用)を表示し、入力データを送信します。

### email

```html
<input type="email" name="" value="" />
```

- ブラウザ上に1行テキストボックス(mail用)を表示し、入力データを送信します。

### datetime

```html
<input type="datetime" name="" value="" />
```

- ブラウザ上に1行テキストボックス(UTC（協定世界時）による日時の入力欄用)を表示し、入力データを送信します。

### date

```html
<input type="date" name="" value="" />
```

- ブラウザ上に1行テキストボックス(日付用)を表示し、入力データを送信します。

### month

```html
<input type="month" name="" value="" />
```

- ブラウザ上に1行テキストボックス(月用)を表示し、入力データを送信します。

### week

```html
<input type="week" name="" value="" />
```

- ブラウザ上に1行テキストボックス(週用)を表示し、入力データを送信します。

### time

```html
<input type="time" name="" value="" />
```

- ブラウザ上に1行テキストボックス(時間用)を表示し、入力データを送信します。

### datetime-local

```html
<input type="datetime-local" name="" value="" />
```

- ブラウザ上に1行テキストボックス(UTC（協定世界時）によらないローカル日時の入力欄用)を表示し、入力データを送信します。

### number

```html
<input type="number" name="" value="" />
```

- ブラウザ上に1行テキストボックス(数値用)を表示し、入力データを送信します。

### range

```html
<input type="range" name="" />
```

- ブラウザ上にレンジバーを表示し、選択データを送信します。

### color

```html
<input type="color" name="" value="" />
```

- ブラウザ上に1行テキストボックス(カラー用)を表示し、入力データを送信します。

# input type属性以外の属性

## input type属性以外の属性抜粋一覧

name       | name         | name      | name
:--------- | :----------- | :-------- | :-------------
checked    | disabled     | maxlength | readonly
size       | autocomplete | autofocus | formnovalidate
formtarget | max          | min       | multiple
pattern    | placeholder  | required  | step


## input type属性以外の属性の概要

### checked

```html
<input type="checkbox" name="" value="" checked="checked">選択肢1</input>
<input type="radio" name="" value="" checked="checked">選択肢1</input>
```

- `checkbox`と`radio`に設定することで、選択状態にします。

### disabled

```html
<input type="text" name="" value="" disabled="disabled" />
<input type="submit" value="" disabled="disabled" />
```

- 操作を無効/非活性にします。データを送信しません。

### maxlength

```html
<input type="text" name="" value="" maxlength="" />
```

- 入力可能な最大文字数を指定します。

### readonly

```html
<input type="text" name="" value="" readonly="readonly" />
<input type="password" name="" value="" readonly="readonly" />
```

- 操作を無効/非活性にします。データを送信します。

### size

```html
<input type="text" name="" value="" size="" />
```

- 表示文字数を指定します。

### autocomplete
- list属性と<datalist>を使用し、入力候補を提示して入力内容を自動補完する。

### autofocus

```html
<input type="text" name="" value="" autofocus />
```

- ウェブページが表示された際に、autofocauが指定された入力欄に自動的にフォーカスされるようにします。

### formnovalidate

### formtarget

### max

```html
<input type="number" name="" value="" max="10" />
```

- 入力可能な最大値を指定します。

### min

```html
<input type="number" name="" value="" min="1" />
```

- 入力可能な最小値を指定します。

### multiple

```html
<input type="text" name="" value="" multiple />
```

- 複数の値を一度に入力し、カンマ区切りのデータを送信します。

### pattern

```html
<input type="text" name="" value="" pattern="^[0-9A-Za-z]+$" />
```

- 正規表現を使って入力値のパターンを指定します。

### placeholder

```html
<input type="text" name="" value="" placeholder ="サンプル" />
```

- テキストフィールドに透過した文字を設定できる。

### required

```html
<input type="text" name="" value="" required />
```

- 入力必須にします。

### step

```html
<input type="number" name="" value="" step="3" />
```

- 入力欄でカウントアップ/ダウンする幅を指定します。