[HTML]FORM TAG

23359 ワード
GET pormtag html POST テキストリンク
こんにちは!😊 今日はHTMLでFORM TAGを位置づけます.

FORM TAG


FORM TAGは、Webドキュメント(htmlタグで作成されたドキュメント)からWebサーバにデータを要求できる唯一のタグです.
  • 写真の出所:HTTPプロトコル2
    • WebドキュメントからWebサーバにデータを要求する方法(request)
    番号付け方法1 formタグ2 XMLHttpRequestオブジェクト3 Ajax(XMLHttpRequestオブジェクトを使用してGoogleエンジニアによって作成されたフォーマット)

    FORM TAG：GET方式


    FORM TAGにおいて、GET方法は以下の特徴を有する.
    FORM TAGのGET方式にはサイズ制限があります.
    FORM TAGのGET方式は256〜4096バイトのサーバに伝送され得る.これはGET法にサイズ制限があることを示している.
    FORM TAGのGET方式は、要求データをヘッダに送信する.
    ✔HTML FORM TAG:GET例
    <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>VELOG 회원가입</title>
<style type="text/css">
	*{
		width:600px;
		margin:10px;
	}
</style>
</head>
<body>
	<h2>VELOG 회원가입</h2>
	<hr>
	<form method="GET" action="#">
		아이디 : <input type="text" name="id"><br>
		비밀번호 : <input type="text" name="pw"><br>
		<input type="submit" value="GET방식"><br>
	</form>
</body>
</html>
    ✔HTML FORM TAG:GET画面
    link : http://localhost:포트번호/firstWeb/htmlp/formTest.html
    次の画面で、ユーザー名、パスワード1234を入力し、「≪発行｜Submit｜ldap≫」をクリックすると、リンクが次のように変更されます.
    link : http://localhost:포트번호/firstWeb/htmlp/formTest.html?id=velog&pw=1234#
    変わったリンクを見たら?id=velog&pw=1234が追加されていることがわかります.このセクションをクエリーString(Query String)と呼びます.Query Stringはkey=value&key=valueからなる.
    ✔HTML FORM TAG:GET開発者ツールネットワーク

    入力後、「開発者ツール」(ウィンドウ条件F 12)をクリックしてネットワーク上のPayloadでチェックすると、Query String Parametersにidの開発が入力され、pwに1234が入力されていることがわかります.

    FORM TAG：POST方式


    FORM TAGにおいて、POST方式は以下の特徴を有する.
    FORM TAGのPOST方式にはサイズ制限はありません.
    FORM TAGのPOST方式はサイズに制限されません.
    FORM TAGのPOST方式は、要求データをBODYに送信する.
    ✔HTML FORM TAG:POST例
    <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>VELOG 회원가입</title>
<style type="text/css">
	*{
		width:600px;
		margin:10px;
	}
</style>
</head>
<body>
	<h2>VELOG 회원가입</h2>
	<hr>
	<form method="POST" action="#">
		아이디 : <input type="text" name="id"><br>
		비밀번호 : <input type="text" name="pw"><br>
		<input type="submit" value="제출하기"><br>
	</form>
</body>
</html>
    ✔HTML FORM TAG:POST画面
    link : http://localhost:포트번호/firstWeb/htmlp/formTest.html
    次の画面で、ID開発、パスワード1234を入力し、「発行」をクリックしてクエリーをリンクに追加しません.
    http://localhost:8088/firstWeb/htmlp/formTest.html#
    ✔HTML FORM TAG:GET開発者ツールネットワーク

    入力後、「開発者ツール」(ウィンドウ条件F 12)をクリックしてネットワーク上のPayloadでチェックすることで、FormDataにidが入力されていること、pwに1234が入力されていることを確認できます.

    Formタグを使用して入力値をjspに出力


    formTest.html
    <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>VELOG 회원가입</title>
<style type="text/css">
	*{
		width:600px;
		margin:10px;
	}
</style>
</head>
<body>
	<h2>VELOG 회원가입</h2>
	<hr>
	<form method="POST" action="/firstWeb/jspp/formTest.jsp">
      <!-- jsp 파일 경로 action으로 설정해주기 -->
		아이디 : <input type="text" name="id"><br>
		비밀번호 : <input type="text" name="pw"><br>
		<input type="submit" value="제출하기"><br>
	</form>
</body>
</html>
    formTest.jsp
    <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.util.Enumeration" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
	<title>VELOG 회원가입 데이터 입력</title>
</head>
<body>
<%
  String id=request.getParameter("id");
  String pw=request.getParameter("pw");
  out.println("입력된 아이디는 >>> : "+id+"<br>");
  out.println("입력된 비밀번호는 >>> : "+pw+"<br>");
%>
</body>
</html>
    jspを使用して、次のようにアイデンティティとパスワードを受信できます.
    画面

    IDとパスワードを入力すると

    以上が[HTML]FORM TAGの位置づけです😊
    2、Hello Worldコンソールアプリケーション
    同期ブロックと同期方法の違いの例