フォームのHTML

フォームのJavaScript、フォームのCSSも併せてご覧ください。

要素

form

html

<form name="myForm" action="example.php" method="POST" enctype="multipart/form-data" autocomplete="off"></form>

form要素の属性	内容
name	フォームの名前
action	送信先
enctype	application/x-www-form-urlencoded(初期値)、multipart/form-data(type="file"使用時)、text/plain
method	フォーム送信時にブラウザーが使用するHTTPメソッド
autocomplete	入力補完(on/off/default)

autocomplete属性は、offにしてもブラウザーで無視されてしまう事があるので、自動入力を使用しているユーザーのために適切に設定しておくと良いです。

input

inputのtype	内容
text	(デフォルト)1行テキストボックス 2行以上にわたる長い文章を入力させたい場合は、textarea要素を使う
password	パスワード 入力したテキストがアスタリスク(*)などに置き換えて表示(データ自体は暗号化されない)
checkbox	複数選択が可能(checked属性であらかじめチェックの付いた状態にできる)
radio	ラジオボタン 複数の中から一つしか選択できない　name属性で同じ名前を付けて同じグループ (checked属性であらかじめチェック)
file	ファイル送信
hidden	隠しデータ
search	検索テキスト
tel	電話番号
url	URL
email	メールアドレス
number	数値
range	レンジ
color	色

inputのtype(時間系)	内容
datetime	UTC(協定世界時)による日時の入力欄を作成
date	日付の入力欄を作成
month	月の入力欄を作成
week	月の入力欄を作成
time	時間の入力欄を作成
datetime-local	UTC(協定世界時)によらないローカル日時の入力欄を作成

inputのtype(ボタン系)	内容
submit	送信ボタン
reset	リセットボタン それまでに入力した情報をキャンセルして初期状態に戻す
button	汎用ボタン
image	画像のボタン src属性で使用する画像ファイル指定 alt属性必須

selectbox

html

<select name="bloodtype">
  <option value="A">A型</option>
  <option value="B">B型</option>
  <option value="O">O型</option>
  <option value="AB">AB型</option>
</select>

datalist

selectboxとの違い：選択後に文字修正が可能です。

html

<input type="text" name="city" list="citylist">
  <datalist id="citylist">
  <option value="東京">
  <option value="大阪">
  <option value="福岡">
</datalist>

textarea

html

<textarea name="名前" cols="40" rows="8"></textarea>

textareaの属性	内容
cols	一行の文字数
rows	行数

button

html

<button type="button">ボタン</button>

buttonの属性	内容
type	reset/submit/button

label

input、textarea、select要素にはラベルを付けられます。
labelと入力欄を関連付けすると、labelクリック時に入力欄にフォーカスを与えたりアクティブにできます。
ヒット領域を拡大できるで操作しやすくなります。

html

<label for="label-item">ラベルの文言</label>
<input type="text" name="item" id="label-item">

fieldset

各要素はfieldsetタグで囲むとグループ化できます。
グループ自体にキャプションを付ける時はlegend要素を使用します。

html

<fieldset>

  <legend>趣味</legend>
 
  <input type="checkbox" name="hobby" value="listenmusic" id="label-listenmusic">
  <label for="label-listenmusic">音楽鑑賞</label>
 
  <input type="checkbox" name="hobby" value="readbook" id="readbook">
  <label for="label-readbook">読書</label>
 
  <input type="checkbox" name="hobby" value="watchmovie" id="label-watchmovie">
  <label for="label-watchmovie">映画鑑賞</label>
 
  <input type="checkbox" name="hobby" value="playgame" id="label-playgame">
  <label for="label-playgame">ゲーム</label>
 
</fieldset>

属性

name属性

フォーム部品に名前をつけられます。

id属性

labelのforと要素のidを揃えるとlabelと要素の紐づけができます。

name属性とid属性の違い

id/name	違い
id	JavaScriptでそのタグを指定するため
name	入力された値をPHPなどで送信するため

value属性

送信される値を指定します。

size属性

inputでは幅を指定します。
selectでは表示する項目数を指定します。

maxlength属性

最長の長さを指定します。
フォーム自体に入力制限がかかります。
(自由に入力できる系のみ)

html

<input type="password" maxlength="8">

minlength属性

最短の長さを指定します。
満たしていない場合、送信ボタンを押した時にエラーが表示されます。
(自由に入力できる系のみ)

html

<input type="password" minlength="4">

autocomplete属性

html

<input type="text" name="username" autocomplete="name">

名前	内容
name	姓名
honorific-prefix	接頭辞や敬称 ("Mr."、"Ms."など)
given-name	名(ファーストネーム)
additional-name	ミドルネーム
family-name	姓(ファミリーネーム、ラストネーム)
honorific-suffix	接尾辞や敬称("Jr."、"II"など)
nickname	ペンネームやハンドルネーム
username	ユーザー名またはアカウント名

住所	内容
street-address	住所　複数行のテキストが使用できる　市町村名、郵便番号、国名は含めない
address-line1	番地・マンション名(1行目)　street-address" が存在する場合のみ使用可能
address-line2	番地・マンション名(2行目)　street-address" が存在する場合のみ使用可能
address-line3	番地・マンション名(3行目)　street-address" が存在する場合のみ使用可能
address-level4	第4管理水準
address-level3	第3管理水準
address-level2	第2管理水準　市町村名
address-level1	第1管理水準　都道府県名(アメリカでは州名)
country	国コード
country-name	国名
postal-code	郵便番号(アメリカではZIPコード)

組織	内容
organization-title	職名や組織内の肩書
organization	企業名や団体名

言語	内容
language	優先言語

生年月日	内容
bday	生年月日の全体
bday-day	生年月日の日
bday-month	生年月日の月
bday-year	生年月日の年

性別	内容
sex	性別

電話番号	内容
tel	国番号を含む、完全な電話番号
tel-country-code	国コード
tel-national	国番号以外の電話番号全体(市外局番の接頭辞を含む)
tel-area-code	市外局番(必要な場合市外局番の接頭辞を含む)
tel-local	国番号や市外局番を含まない電話番号(市内局番+加入者番号)
tel-local-prefix	市内局番
tel-local-suffix	加入者番号
tel-extension	内線番号

web、メッセージング	内容
email	メールアドレス
impp	インスタントメッセージのアドレス
url	URL
photo	画像のURL

パスワード	内容
new-password	新しいパスワード
current-password	現在のパスワード
one-time-code	ワンタイムコード

支払い手段	内容
cc-name	氏名の全体
cc-given-name	名(ファーストネーム)
cc-additional-name	ミドルネーム
cc-family-name	姓(ファミリーネーム、ラストネーム)
cc-number	クレジットカード番号、口座番号など
cc-exp	有効期限( "MM/YY" や、"MM/YYYY" の形)
cc-exp-month	有効期限の月
cc-exp-year	有効期限の年
cc-csc	セキュリティコード
cc-type	種類("Visa"や、"Master Card")

通貨	内容
transaction-currency	決済に使う通貨
transaction-amount	決済する金額

pattern属性

正規表現で入力値のパターンを指定します。
ルールに沿わない状態で、送信ボタンを押すとエラーメッセージが出ます。
(自由に入力できる系のみ)

html

<form action="sample.php">
  <p>半角英数で入力してください</p>
  <input type="text" name="userid" pattern="^[0-9A-Za-z]+$">
  <input type="submit" value="送信">
</form>

placeholder属性

入力欄に初期表示する内容を指定します。

html

<input type="search" name="searchword" placeholder="キーワードを入力">

readonly属性

ユーザーによるテキスト編集を不可にして読み取り専用にします。

html

<input readonly type="text" value="読取専用">

required属性

入力必須にします。
未入力のまま「送信」を押すとエラーメッセージが出ます。

html

<form action="sample.php">
  <p>入力必須です。</p>
  <input type="text" name="yourname" required>
  <input type="submit" value="送信">
</form>

disabled属性

html

<input disabled type="text" value="変更不可">

accept属性

type=fileでアップロードできるファイルの種類を指定します。

html

<input type="file" accept="image/png, image/jpeg">

ファイルタイプ	記述
text/html	HTML
text/xml	XML
text/css	CSS
text/plain	テキスト
text/csv	CSV
image/png	PNG
image/jpeg	JPEG
image/gif	GIF
audio/mpeg	MP3
video/mpeg	MPEG
video/mp4	MP4
application/pdf	PDF

multiple属性

emailとfileで複数の項目を選択します。
fileの場合はアップロードする時に複数のファイルを一括選択してアップロードできます。

html

<input multiple="multiple" type="file">

step属性

numberやrangeで数値を刻みます。
(数値や日付系のみ)

html

<input type="range" step="20" min="0" max="100">

max属性

最大値を指定します。
(数値や日付系のみ)

min属性

最小値を指定します。
(数値や日付系のみ)

autofocus属性

フォームの先頭の項目などにつけておくと、最初の入力欄をクリック(タップ)する手間が省けます。
1つ目の項目は入力しやすい項目にしておきます。

html

<label>入力1：</label>
<input type="text">
 
<label>入力2：</label>
<input type="text" autofocus>

novalidate属性

ブラウザに標準で付いているバリデート機能をオフにします。

html

<form name="myForm" action="example.php" method="POST" enctype="multipart/form-data" autocomplete="off" novalidate>

</form>