フォームのHTML #HTML

要素

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>