Search

HTML要素フォームの定義（form）

  1. form〔フォームの定義〕
  2. fieldset〔フィールドセット〕
  3. label〔ラベル〕
  4. input〔入力要素〕
  5. button〔汎用ボタン〕
  6. select〔プルダウンメニューの定義〕
  7. datalist HTML5～〔選択可能なデータリスト〕
  8. optgroup〔選択肢のグループ化〕
  9. option〔選択肢〕
  10. textarea〔テキストエリア〕
  11. keygen HTML5～〔ペア鍵作成ジェネレータ〕
  12. output HTML5～〔計算結果〕

form
フォームの定義

2009/8/26

form要素は、ユーザーが入力するためのフォームを表します。

ユーザーが入力したデータを指定したURLへ渡すために使用します。
form要素を入れ子にしてはいけません。

属性

HTML4.01にあったname属性は廃止されました。
HTML5からdata/replace属性が新しく追加されました。

form要素の属性
属性値説明
グローバル属性-全要素共通の属性。
accept-charset文字セットリストフォームに対して可能な文字セットをカンマ区切りで指定。デフォルトは「unknown」。
actionURLフォームから送信されたデータを処理するプログラムのURIを指定。
autocompleteon
off		オートコンプリートの状態を指定。オンにする場合は「on」、オフにする場合は「off」を指定。
enctypeapplication/x-www-form-urlencoded
multipart/form-data
text/plain		送信データのMIMEタイプを指定。デフォルトは「application/x-www-form-urlencoded」。
methodget
post
put
delete		フォームの送信方法を指定。POST送信の場合は「post」、GET送信の場合は「get」（デフォルト値）を指定。省略した場合はデフォルト値が適用されます。
nameユニークな名前フォームの名前を指定。
novalidateTRUE
FALSE		フォーム送信時に値の整合性チェックを行うかどうかの有無を指定。チェックしない場合はTRUEを指定。
targetフレームターゲットaction属性で指定したプログラムの送信先のターゲットを指定。

サンプル

<form action="regist.php" method="get" onsubmit="return false;">
	<fieldset>
		<legend>ユーザ登録</legend>
		<p>
			<label for="user_name">ユーザー名：</label>
			<input type="text" id="user_name" name="user_name" size="20" maxlength="30" />
		</p>
		<p>
			<label for="user_password">パスワード：</label>
			<input type="password" id="user_password" name="user_password" size="20" maxlength="30" />
		</p>
		<p>
			<input type="submit" value="登　録" />
		</p>
	</fieldset>
</form>
ユーザ登録

fieldset
フィールドセット

2009/8/26

fieldset要素は、ログイン情報、個人情報など、フォーム要素を入力する情報によって、フォーム要素をグループ化するのに使用します。 グループにタイトルを付ける場合は、legend要素を使用します。

属性

HTML4.01ではfieldset要素に固有の属性はありませんでしたが、HTML5からdisabled/form属性が新しく追加されました。

fieldset要素の属性
属性値説明
グローバル属性-全要素共通の属性。
disableddisabledフィールドセットを無効化する場合に指定。
formフォームのID名フィールドセットを関連付けるフォーム要素のIDを指定。デフォルトはフィールドセット自身が含まれる直近のフォームに関連付けられるが、それ以外のフォームと関連付けたい場合に使用。
nameユニークな名前フィールドセットの名前を指定。

サンプル

<style type="text/css">
	form#member fieldset {
		margin:1em 0; padding:0 10px 5px 10px;
		border:1px solid #ccc;
	}
	form#member legend {
		margin:0; padding:0 5px;
		font-weight:bold;
	}
	form#member p {
		margin:0; padding:5px;
	}
</style>
<form action="#" id="member">
   <fieldset>
        <legend>ログイン情報</legend>
    	<p><label for="login_id">ユーザー名：</label><input type="text" name="login_id" id="login_id" /></p>
    	<p><label for="login_pw">パスワード：</label><input type="password" name="login_pw" id="login_pw" /></p>
    </fieldset>
	<fieldset>
		<legend>個人情報</legend>
			<p>
				<label for="name">氏名：</label>
				<input id="name" />
			</p>
			<p>
				<label for="postcode">郵便番号：</label>
				<input id="postcode" />
			</p>
			<p>
				<label for="address">住所：</label>
				<input id="address" />
			</p>
			<p>
				<label for="email">E-mail：</label>
				<input id="email" />
			</p>
			<fieldset>
				<legend>メルマガを購読しますか？</legend>
				<p>
					<label><input type="radio" name="melmaga" />はい</label>
					<label><input type="radio" name="melmaga" />いいえ</label>
				</p>
			</fieldset>
    </fieldset>
</form>
ログイン情報

個人情報

メルマガを購読しますか？

label
ラベル

2009/8/26

label要素は、入力要素のラベルを表します。

label要素を入れ子にすることはできません。 フォーム内の入力要素にそれぞれラベルを付けることで、ラベルをクリックすると、テキストボックスにフォーカスが当たったり、ラジオボタンにチェックを付けることができるようになるため、ユーザーが入力、選択しやすくなります。

属性

label要素の属性
属性値説明
グローバル属性-全要素共通の属性。
forIDへの参照ラベルと関連付ける入力要素のid名を指定。
formフォームのID名ラベルを関連付けるフォーム要素のIDを指定。デフォルトはラベル自身が含まれる直近のフォームに関連付けられるが、それ以外のフォームと関連付けたい場合に使用。

サンプル

<form id="userfrm" action="regist.php" method="get" onsubmit="return false;">
	<fieldset>
		<legend>ユーザ登録</legend>
		<p>
			<label for="username">ユーザー名：</label>
			<input type="text" id="uname" name="username" size="20" maxlength="30" />
		</p>
		<p>
			性別：
			<label for="s1"><input type="radio" id="s1" name="sex" value="1" />男</label>
			<label for="s2"><input type="radio" id="s2" name="sex" value="2" />女</label>
		</p>
		<p>
			趣味：
			<label for="cb1"><input type="checkbox" id="cb1" name="cb1" value="1" />映画</label>
			<label for="cb2"><input type="checkbox" id="cb2" name="cb2" value="1" />音楽</label>
			<label for="cb3"><input type="checkbox" id="cb3" name="cb3" value="1" />読書</label>
			<label for="cb4"><input type="checkbox" id="cb4" name="cb4" value="1" />スポーツ</label>
			<label for="cb5"><input type="checkbox" id="cb5" name="cb5" value="1" />その他</label>
		</p>
		<p>
			<label for="job">職業：</label>
			<select id="job" name="job">
			 <option value="" selected="selected">▼ひとつ選択してください</option>
			 <option value="government-employee">公務員</option>
			 <option value="manager">経営者・役員</option>
			 <option value="company-employee">会社員</option>
			 <option value="self-employed">自営業</option>
			 <option value="free-lance">自由業</option>
			 <option value="housewife">専業主婦</option>
			 <option value="part-time">パート・アルバイト</option>
			 <option value="student">学生</option>
			 <option value="other">その他</option>
			</select>
		</p>
		<p>
			<input type="submit" value="登　録" />
		</p>
	</fieldset>
</form>
ユーザ登録

性別：

趣味：

input
入力要素

2009/8/26

input要素は、様々な入力要素を表します。

属性

HTML4.01にあったalign/size属性は廃止されました。 HTML5からautocomplete/autofocus/form/inputmode/list/replace/required/step/template/pattern属性が新しく追加されました。

input要素の属性
属性値説明
グローバル属性-全要素共通の属性。
acceptMIMEタイプフォームのaction属性に指定したプログラムが処理可能なMIMEタイプを指定。
altテキスト画像ボタン（type="image"）の代替テキストを指定。
autocompleteon
off		オートコンプリートの状態を指定。オンにする場合は「on」、オフにする場合は「off」を指定。
autofocusTRUE
FALSE		ページ読込時にフォーカスを当てる。
checkedcheckedラジオボタン（type="radio"）またはチェックボックス（type="checkbox"）のデフォルトのチェックを入れる場合に指定。
disableddisabledinput要素を無効化する場合に指定。type="hidden"には指定不可。
formフォームのID名input要素を関連付けるフォーム要素のIDを指定。デフォルトはフィールドセット自身が含まれる直近のフォームに関連付けられるが、それ以外のフォームと関連付けたい場合に使用。
formactionURLフォームから送信されたデータを処理するプログラムのURIを指定。
formmenctypeapplication/x-www-form-urlencoded
multipart/form-data
text/plain		送信データのMIMEタイプを指定。デフォルトは「application/x-www-form-urlencoded」。
formmethodget
post
put
delete		フォームの送信方法を指定。POST送信の場合は「post」、GET送信の場合は「get」（デフォルト値）を指定。省略した場合はデフォルト値が適用されます。
formnovalidateTRUE
FALSE		フォーム送信時に値の整合性チェックを行うかどうかの有無を指定。チェックしない場合はTRUEを指定。
formtargetフレームターゲットフォームの送信先を指定。

listdatalistのiddatalist要素の参照。定義されるなら、 値を入力フィールドに挿入するのにドロップダウンリストを使用できます。
maxlength数値入力最大文字数を指定。
min数値入力可能な最小値を指定。
pattern正規表現値をチェックする正規表現を指定。
placeholder文字列入力のヒントとなる入力支援テキストを指定。
readonlyreadonly入力要素を読取専用にする場合に指定。
requiredTRUE
FALSE		必須入力フィールドかどうかを指定。type属性がhidden、image、button、submit、resetのinput要素には使用できません。
size数値入力要素の幅を指定。テキストボックス（type="text"）の場合は文字数、それ以外の場合はピクセルで指定。
srcURL画像ボタン（type="image"）の画像URLを指定。
type入力タイプ

入力要素のタイプを指定。省略した場合はデフォルト値の「text」が適用される。

  • text（テキストボックス）
  • password（パスワード入力欄）
  • checkbox（チェックボックス）
  • radio（ラジオボタン）
  • submit（送信ボタン）
  • reset（リセットボタン）
  • file（ファイル参照）
  • hidden（隠し要素）
  • image（画像ボタン）
  • button（通常のボタン）
value値 デフォルト入力値、またはボタンに表示される値。 ボタン、リセットボタン,送信ボタンの場合、ボタン上に表示するテキストを指定。 画像ボタンの場合は、スクリプトに渡すフィールドのシンボリック結果を指定。 type="file"には使用不可。 この属性は、type="checkbox"とtype="radio"の場合は必須。
height数値input要素の高さをピクセルサイズで指定。
width数値input要素の幅をピクセルサイズで指定。

サンプル

<form action="#" onsubmit="return false;">
	<input type="hidden" name="username" value="hoge">
	<p>ID：<input type="text" name="txt" size="20" maxlength="100"></p>
	<p>パスワード：<input type="password" name="txt" size="20" maxlength="8"></p>
	<p>性別：
		<input type="radio" name="sex" value="male" checked>男
		<input type="radio" name="sex" value="female">女
	</p>
	<p>趣味：
		<input type="checkbox" name="favorite" value="movie">映画
		<input type="checkbox" name="favorite" value="music">音楽
		<input type="checkbox" name="favorite" value="other">その他
	</p>
	<p>アップロード：<input type="file"></p>
	<p>
		<input type="image" src="/content/img/btn/imagebutton.png" alt="画像ボタン">
		<input type="button" value="ボタン">
		<input type="reset" value="リセットボタン">
		<input type="submit" value="送信ボタン">
	</p>
</form>

ID：

パスワード：

性別： 男 女

趣味： 映画 音楽 その他

アップロード：

button
汎用ボタン

2009/8/26

button要素は、汎用ボタンを表します。

type属性には、「button」（通常のボタン）、「submit」（送信ボタン）、「reset」（リセットボタン）の値を指定可能です。 デフォルトは、「submit」（送信ボタン）です。 それぞれ、input要素のtype属性にbutton、submit、resetを指定した時と動作は同じですが、button要素内に画像やHTMLタグを使用できる点が異なります。 ただし、button要素内に、input要素、select要素、textarea要素、label要素、button要素、form要素、fieldset要素、iframe要素、isindex要素を含めることはできませんので注意してください。

属性

HTML5からautofocus属性が追加されました。

button要素の属性
属性値説明
グローバル属性-全要素共通の属性。
autofocusTRUE
FALSE		ページ読込時にボタンにフォーカスを当てるかどうかの有無
disableddisabledボタンを無効化する場合に指定。
nameボタン名ボタンのユニークな名前を指定。
typebutton
reset
submit		ボタンのタイプを指定。
valueいくつかの値ボタンの初期値を指定。値はスクリプトで変更可能です。

サンプル

<form action="/content/demo/test.php" method="post">
	<input type="button" value="ボタン" onclick="this.form.submit();" />
</form>

select
プルダウンメニューの定義

2009/8/26

select要素は、プルダウンメニューを表します。

select要素内には、要素またはoption要素が1回以上出現する必要があります。 単一選択型（select-one）と複数選択型（select-multiple）の2タイプがあります。 デフォルトは、単一選択ですが、multiple属性を指定することで複数選択型になります。 multiple属性を指定した場合、複数選択しやすいようにsize属性に2以上の数値を指定するようにしてください。

属性

HTML4.01にあったsize属性はHTML5で廃止されました。
HTML5からautofocus/data/form属性が追加されました。

select要素の属性
属性値説明
グローバル属性-全要素共通の属性。
autofocusautofocusページ読込時にプルダウンメニューにフォーカスを当てる場合に指定。
disableddisabledプルダウンメニューの無効化する場合に指定。
formフォームのID名プルダウンメニューを関連付けるフォーム要素のIDを指定。デフォルトはoutput要素自身が含まれる直近のフォームに関連付けられるが、それ以外のフォームと関連付けたい場合に使用。
multiplemultipleプルダウンメニューの選択肢を複数選択できるようにするかの有無。
nameユニークな名前プルダウンメニューの名前を指定。
size数値表示する選択肢の数を指定。1以上の整数値を指定可能。デフォルトは1。例えば3を指定した場合、プルダウンメニューの高さが選択肢3行分になる。multiple属性を指定して、複数選択可にしている場合に使用。

サンプル

<form action="#">
	<label for="myjob">あなたの職業は？</label>
	<select id="myjob" name="myjob">
		<option value="" selected="selected">▼ひとつ選択してください</option>
		<option value="government-employee">公務員</option>
		<option value="manager">経営者・役員</option>
		<option value="company-employee">会社員</option>
		<option value="self-employed">自営業</option>
		<option value="free-lance">自由業</option>
		<option value="housewife">専業主婦</option>
		<option value="part-time">パート・アルバイト</option>
		<option value="student">学生</option>
		<option value="other">その他</option>
	</select>
</form>

datalist HTML5～
選択可能なデータリスト

2009/8/26

datalist要素は、他のコントロールのためにあらかじめ定義された選択肢を表すoption要素のセットを表します。

属性

固有の属性はありません。

datalist要素の属性
属性値説明
グローバル属性-全要素共通の属性。

サンプル

<input id="fruits" list="fruits_list" />
<datalist id="fruits_list">
	<option value="リンゴ">
	<option value="みかん">
	<option value="バナナ">
</datalist>

optgroup
選択肢のグループ化

2009/8/26

optgroup要素は、プルダウンメニューの選択肢をグループ化するのに使用します。

optgroup要素は、select要素内に記述します。 optgroup要素内には、option要素が1回以上出現する必要があります。 選択肢が多い場合、optgroup要素を使用して、カテゴリ毎にグループ化することで、ユーザーが選択しやすくなります。 optgroup要素のlabel属性（必須）には、グループの名前を指定します。 label属性に指定した値は、一般的なブラウザで太字＋斜体で表示されます。

属性

optgroup要素の属性
属性値説明
グローバル属性-全要素共通の属性。
disableddisabledoptgroup要素を無効化する場合に指定。
labelテキストラベル選択肢のグループの名前を指定。

サンプル

<form action="#">
	<dl>
		<dt><label for="myenv">あなたのPC環境は？</label></dt>
		<dd>
			<select id="myenv" name="myenv">
				<option value="" selected="selected">▼ひとつ選択してください</option>
				<optgroup label="Windows">
					<option value="windows95">Windows 95</option>
					<option value="windows98">Windows 98</option>
					<option value="windows98SE">Windows 98 Secound Edition</option>
					<option value="windowsNT">Windows NT</option>
					<option value="windowsME">Windows ME</option>
					<option value="windows2000">Windows 2000</option>
					<option value="windowsXP">Windows XP</option>
					<option value="windowsVista">Windows Vista</option>
				</optgroup>
				<optgroup label="Macintosh">
					<option value="puma">Mac OS 10.0 (Puma)</option>
					<option value="cheetah">Mac OS X 10.1 (Cheetah)</option>
					<option value="jagar">Mac OS X 10.2 (Jaguar)</option>
					<option value="panther">Mac OS X 10.3 Panther</option>
					<option value="tiger">Mac OS X 10.4 Tiger</option>
					<option value="leopard">Mac OS X 10.5 Leopard</option>
					<option value="mac_other">それ以外のMac OS</option>
				</optgroup>
				<option value="other">その他</option>
			</select>
		</dd>
	</dl>
</form>

option
選択肢

2009/8/26

option要素は、select要素の選択肢を表します。

option要素は、select要素内あるいはdatalist要素内に記述します。 option要素をグループ化する場合は、optgroup要素を使用します。 option属性は、属性なしでも使用できますが、通常は、サーバーへ何らかの値を送るためにvalue属性を指定します。

属性

option要素の属性
属性値説明
グローバル属性-全要素共通の属性。
disableddisabledoption要素を無効化する場合に指定。
labelテキスト選択肢のグループの名前を指定。
selectedselectedデフォルトで選択する選択肢に指定。
valueテキスト選択肢の値。

サンプル

<form action="#">
	<label for="myspot">よく遊びに行く街は？（複数選択可）</label><br>
	<select id="myspot" name="myspot" multiple="multiple">
		<option value="shimokitazawa" selected="selected">下北沢</option>
		<option value="omotesando">表参道</option>
		<option value="roppongi">六本木</option>
		<option value="shibuya">渋谷</option>
		<option value="ebisu">恵比寿</option>
		<option value="azabu" selected="selected">麻布</option>
		<option value="shinjyuku">新宿</option>
		<option value="other">その他</option>
	</select>
</form>

textarea
テキストエリア

2009/8/26

textarea要素は、複数行のテキストが入力可能な入力欄を表します。

textarea要素のcols属性（1行あたりの文字数）およびrows属性（行数）は必須属性です。 1行のみの入力欄を生成したい場合は、テキストボックス（input type="text"）を使用してください。

属性

HTML5からautofocus/form/inputmode/required属性が追加されました。

textarea要素の属性
属性値説明
グローバル属性-全要素共通の属性。
autofocusautofocusページ読込時にテキストエリアにフォーカスを当てる場合に指定。
cols数値1行の文字数を指定。
disableddisabledtextarea要素を無効化する場合に指定。
formフォームのID名テキストエリアを関連付けるフォーム要素のIDを指定。デフォルトはoutput要素自身が含まれる直近のフォームに関連付けられるが、それ以外のフォームと関連付けたい場合に使用。
maxlength数値テキストエリアに入力可能な文字数を指定。
nameテキストエリアの名前テキストエリアの名前を指定。
placeholder文字列入力のヒントとなる入力支援テキストを指定。
readonlyreadonly入力要素を読取専用にするかの有無を指定。デフォルトは読取専用ではない。
requiredTRUE
FALSE		必須入力フィールドかどうかを指定。type属性がhidden、image、button、submit、resetのinput要素には使用できません。
wrapsoft
hard		2つのキーワードと状態がある列挙属性。ソフト状態の時は「soft」（表示上は自動改行、送信データは自動改行しない）、ハード状態の時は「hard」（表示状も送信データも自動改行）を指定。省略した場合はデフォルトの「soft」が適用される。

サンプル

<form action="#">
   <textarea cols="50" rows="5">幅は50文字、高さは5行です。rows属性に指定した行数以上が入力された場合、自動的にスクロールバーが表示されます。</textarea>
</form>

keygen HTML5～
ペア鍵作成ジェネレータ

2009/8/26

keygen要素は、ペア鍵作成ジェネレータを表します。 フォーム送信時に、秘密鍵をローカルのキーストアに保存し、公開鍵をサーバーにパッケージして送信します。

属性

keygen要素の属性
属性値説明
グローバル属性-全要素共通の属性。
autofocusautofocusページ読込時にkeygen要素にフォーカスを当てる場合に指定。
challenge　送信されたされた鍵のパッケージを指定。
disableddisabledkeygen要素を無効化する場合に指定。
formフォームのID名keygen要素を関連付けるフォーム要素のIDを指定。デフォルトはoutput要素自身が含まれる直近のフォームに関連付けられるが、それ以外のフォームと関連付けたい場合に使用。
keytype　列挙属性。キーワードと状態をリストアップ。
nameユニークな名前keygen要素の名前を指定。

output HTML5～
計算結果

2009/8/26

output要素は、計算結果を表します。

属性

output要素の属性
属性値説明
グローバル属性-全要素共通の属性。
forIDへの参照計算結果と計算に使われるか、計算に影響される値を表す要素との関係を明示的に作成する場合に使用。指定する場合、値には、ユニークなスペース区切りトークンからなる順不同のセットで構成される文字列で、それぞれ同じ文書内にある要素のIDを指定。
formフォームのID名output要素を関連付けるフォーム要素のIDを指定。デフォルトはoutput要素自身が含まれる直近のフォームに関連付けられるが、それ以外のフォームと関連付けたい場合に使用。
nameユニークな名前output要素の名前を指定。

関連コンテンツ

Q. このサイトの情報はお役に立ちましたでしょうか？

投票する 投票結果を見る

管理人に【web拍手】を送るweb拍手（1行メッセージも送れます♪）

TOP / ご利用上の注意点 / リンクについて / RSS

Valid: HTML検証, CSS検証, RSS検証

Thanks: Material Design 420 free icons

©2024 PHP & JavaScript Room All Rights Reserved.

pagetop

polarized women