はじめに

同僚とHTML5について話していたところ、追加されたinput type属性について説明ができなかった。

復習するためにアウトプットしたいと思います。

記事を8割書いた時点でデータが吹っ飛んだ為、随時追加型にしております。

参考サイト

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

HTML5から終了タグ/閉じタグをつけるのは間違った文法ではなくなりました。

ですが、終了タグ/閉じタグをつけないのが正しい文法だそうです。

私はつけるようにしています。

イベントハンドラ

<input>属性の中に一つのみ設定できる。

イベントハンドラ内では複数の関数の呼び出しを行える。

技法的には古いらしい。

入力方法

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

フォームバリデーション

HTML5のpattern,required属性等の追加に伴い、JSで実装していたクライアントチェック処理を

一部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

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

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

text

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

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

password

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

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

checkbox

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

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

radio

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

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

file

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

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

submit

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

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

image

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

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

reset

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

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

button

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

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

search

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

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

tel

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

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

url

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

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

email

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

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

datetime

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

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

date

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

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

month

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

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

week

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

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

time

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

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

datetime-local

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

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

number

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

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

range

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

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

color

<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

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

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

disabled

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

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

maxlength

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

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

readonly

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

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

size

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

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

autocomplete

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

autofocus

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

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

formnovalidate

formtarget

max

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

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

min

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

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

multiple

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

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

pattern

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

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

placeholder

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

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

required

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

入力必須にします。

step

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

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

HTMLのinputタグについて