ywork2020.com

Title

入力フォームの作成とデータ送信の方法

form要素の概要

form要素は、入力・送信フォームを作成する事ができます。
閲覧者が情報を入力できる入力欄設置と、入力情報をサーバーに送信するための対話型と呼ばれるコントロールの設置が可能になります。

実機サンプル(送信欄)

送信フォーム例補足説明














 送信フォームは以下のようなコードになります。
<form action="データの送信先(URL)" method="GET or POST(データの送信方法)"> </form>

このページではGETメソッドを使用して同ページに送信していますのでアドレスバーのURLが次のように変化します。 ※初期値のまま送信した場合
/content/html-form-tag.html?username=YWORK&age=30&job=%E4%BC%9A%E7%A4%BE%E5%93%A1&tel=00-1111-2222&email=sample%40domain.jp&dm=on

POSTメソッドで送信した場合はアドレスバーのURLに変化は無く、データが追加されません。
/content/html-form-tag.html
POSTデータの受信はjQueryの$.post()メソッドやPHPの$_POST変数などで行います。
又、XMLHttpRequestオブジェクトを使ってGETやPOST送信を行う方法もあります。

尚、実際にこのページで受信処理をしていますが、スクリプトですので下記のコード内容欄では混乱を避けるため、省略しています。

実機サンプル(受信欄)

結果セットを表示します

サンプルコード

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset = "utf-8">
		<title>HTML : form tag | 独学 Webプログラミング! - YWORK</title>
	</head>
	<body>
		<form action="送信先ページのURL" method="GET">
			<p>
				<label>名前:<br><input type="text" name="username" requird></label><br>
				<label>年齢:<br><input type="number" name="age" min="0"></label><br>
				<label for="job">職業:<br>
				<select name="job" id="job">
					<option value="会社員">会社員</option>
					<option value="公務員">公務員</option>
					<option value="自営業">自営業</option>
					<option value="学生">学生</option>
					<option value="主婦">主婦</option>
					<option value="パート・アルバイト">パート・アルバイト</option>
					<option value="その他">その他</option>
				</select></label><br>
				<label>電話番号:<br><input type="tel" name="tel"></label><br>
				<label>E-mail:<br><input type="email" name="email"></label><br>
				<label>DMの送信を希望する<br><input type="checkbox" name="dm" checked></label><br>
			</p>
			<p><input type="submit" value="送信"><br><input type="reset"></p>
		</form>
	</body>
</html>