HTML

<form> フォーム

詳細を開く 詳細を閉じる

フォーム : <form>要素

  • 「ブラウザ」から「サーバ」へデータを送る「フォーム」を作ります。
  • 個々の入力エリアは、様々な種類のコントロールで作成します。
  • 送信ボタン(submit)を押すと、サーバに入力データが送られます。
  • ブロック要素です。

別ウィンドウで表示

<form action="../aaa.php" method="GET">
	
	<input name="text">
	<button>送信</button>
	
</form>

action属性

  • データを受け取るURL(PHPなどで作ったサーバ上のページ)を指定します。

method属性

  • データの送り方を指定します。
  • GET」または「POST」を指定します。

GETとPOSTの違い

method="GET"

別ウィンドウで表示

<form action="../aaa.php" method="GET">
	<input type="password" name="password" value="ykato">
	<button type="submit">送信</button>
</form>

method="POST"

別ウィンドウで表示

<form action="../aaa.php" method="POST">
	<input type="password" name="password" value="ykato">
	<button type="submit">送信</button>
</form>

上の2つのコードはmethod属性だけが異なります。 以下の手順で、その違いを説明します。

  1. 上の2つの例を「別ウィンドウで表示」させます。
  2. 「送信」をクリックします。
  3. 「GET」の場合、結果画面のURLが「~/aaa.php?password=○○」となっています。
  4. 「POST」の場合、結果画面のURLが「~/aaa.php」となっています。
method GET POST
データが含まれる場所 URL
HTMLの<body>要素
用途 検索の画面など。 パスワード入力画面、個人情報入力画面など。
最大長 2KB(約2000文字) プロトコル上は無制限だが、HTTPサーバの設定に依る。
  • 「GET」の場合、送信データは「URL」に含まれます。そのため、入力したパスワードがそのままURLに表示されています。 通常、訪問したURLはサーバやネットワークのログに残されます。このままでは、パスワードが丸見えで非常に危険です。
  • 「POST」の場合、送信データはHTMLの<body>要素に含まれます。 そのため、入力したパスワードはURLに見えません。 このように「パスワード入力画面」や「個人情報入力画面」など重要なデータを送る場合には、必ず「POST」を使うべきです。 (また、可能であればHTTPプロトコルではなく、HTTPSプロトコルを使いましょう。)
  • では、GETはどのような場面で使うのでしょうか? 主要な用途は「検索」です。 たとえば、Googleで「ykato.net」を検索した結果のURLをメールで共有したい場合、GETであれば 「https://www.google.co.jp/search?q=ykato.net」 と書いて送ることができます。

コントロール

  • <input>要素のtype属性については、こちら
基本<fieldset>コントロールのグループ化
<label>各コントロールにラベル(見出し)を付ける
入力<button>ボタン(送信リセット一般画像
<input>type属性を指定することで、様々な入力エリアを作る
<textarea>複数行入力可能なテキストボックス
<select>セレクトボックス(セレクトボタン)
<datalist>入力候補となるリストを提供
出力<output>計算結果
<progress>進捗状態を表示
<meter>特定の範囲内に収まる数値を図的に表示

別ウィンドウで表示

<form action="../aaa.php" method="GET" 
	  oninput="output.value=parseInt(range.value)">
	
	<!-- fieldset -->
	<fieldset>
		<legend>form</legend>
		
		<!-- label, checkbox -->
		<label>
			<input type="checkbox" name="checkbox">
			label (文字列をクリック)
		</label><br><br>

		<!-- button -->
		<button type="submit">送信</button>
		<button type="reset">リセット</button><br><br>
		
		<!-- textarea -->
		<textarea name="textarea"></textarea><br><br>

		<!-- select, optgroup -->
		<select name="select">
			<optgroup label="optgroup A">
				<option value="A-1">option A-1</option>
				<option value="A-2">option A-2</option>
			</optgroup>
			<optgroup label="optgroup B">
				<option value="B-1">option B-1</option>
				<option value="B-2">option B-2</option>
			</optgroup>
		</select><br><br>

		<!-- input, datalist -->
		<input name="input" 
			   placeholder="datalist" 
			   list="datalist">
		<datalist id="datalist">
			<option value="abcdefg">
			<option value="hijklmn">
			<option value="opqrstu">
			<option value="vwxyz">
			<option value="0123456789">
		</datalist><br><br>
		
		<!-- range, output -->
		<input type="range" name="range">
		<output name="output"></output><br><br>

		<!-- progress -->
		progress: <progress value="30" max="100">
			progress
		</progress><br><br>

		<!-- meter -->
		meter: <meter value="80" max="100">
			meter
		</meter><br><br>
		
	</fieldset>
		
</form>
詳細を開く 詳細を閉じる
詳細を開く詳細を閉じるページの先頭へ