form#method(POST)

method属性がPOSTだと、URLにクエリ文字列は付かず、リクエストボディにクエリ文字列が書き込まれる。

<form> - フォーム - とほほのWWW入門

form.htmlで、

とすると、

最初この状態でsubmitを押すと
最初この状態でsubmitを押すと

最初この状態でsubmitを押すと、

query_stringのほうが空なのに対し、リクエストボディにクエリ文字列が来てる。
query_stringのほうが空なのに対し、リクエストボディにクエリ文字列が来てる。

query_stringのほうが空なのに対し、リクエストボディにクエリ文字列が来てる。

Sample/html/form/method_POST/src/form at master · bg1bgst333/Sample · GitHub

form#method(GET)

method属性でGETの時には、inputタグのname属性がキー、value属性が値となり、クエリ文字列として渡される。

<form> - フォーム - とほほのWWW入門

form.htmlで、

こう書く。
action.cは、

クエリ文字列は環境変数で取得、リクエストボディは標準入力で読み込む。

この状態からsubmitを押す
この状態からsubmitを押す

この状態からsubmitを押す。

GETなのでURLにクエリ文字列が付く
GETなのでURLにクエリ文字列が付く

GETなのでURLにクエリ文字列が付く。
そして、クエリ文字列は取得できるが、GETはリクエストボディがないので、そちらは空。

Sample/html/form/method_GET/src/form at master · bg1bgst333/Sample · GitHub

form#method

method属性でリクエストメソッドを変えられる。

<form> - フォーム - とほほのWWW入門

form.htmlで、

<html>
  <head>
    <title>form#method</title>
  </head>
  <body>
    <script type="text/javascript">
    <!--
    // -->
    </script>
    <form action="/cgi-bin/action.cgi">
      <input type="submit" value="submit">
    </form>
  </body>
</html>

何も指定してないと、

submitボタンを押した時
submitボタンを押した時

submitボタンを押した時、

ここに飛ぶが
ここに飛ぶが

ここに飛ぶが、この時のリクエストは、access_logを見ると、

GETメソッド
GETメソッド

GETメソッド。

method属性で"POST"を指定すると、

ここからsubmitを押された時
ここからsubmitを押された時

ここからsubmitを押された時、

こうなって
こうなって

こうなって、

POSTメソッドになってる
POSTメソッドになってる

POSTメソッドになってる。

Sample/html/form/method/src/form at master · bg1bgst333/Sample · GitHub

form#action

前回CGIのURLと書いてしまったが、action属性は、正確にはリクエストの送り先ページのURLなので、PHPでも可能。

<form> - フォーム - とほほのWWW入門

form.htmlを、

こうして、action.phpを、

こうすると、

この状態でsubmitを押すと
この状態でsubmitを押すと

この状態でsubmitを押すと、

action.phpに飛ぶ
action.phpに飛ぶ

action.phpに飛ぶ。
ここには載せないけど、HTMLページを指定しても同様に飛んだ。

Sample/html/form/action/src/form at master · bg1bgst333/Sample · GitHub

form

inputタグのtype属性で"submit"にした場合、formタグで囲み、action属性にCGIのURLを指定することで、CGIを実行できる。

<form> - フォーム - とほほのWWW入門

form.htmlは、

formのactionに実行するCGIのURLを指定。
このaction.cgiは、

こういう内容。

最初こうだけど
最初こうだけど

最初こうだけど、submitボタンを押すと、

action.cgiに切り替わる
action.cgiに切り替わる

action.cgiに切り替わる。

Sample/html/form/form/src/form at master · bg1bgst333/Sample · GitHub

input#type(submit)

type属性で"submit"を選んだ場合は、『実行ボタン』という特殊なボタンになる。

<input> - フォーム部品:入力欄 - とほほのWWW入門

とはいっても、

このボタンだけでは、

この状態からsubmitを押しても
この状態からsubmitを押しても

この状態からsubmitを押しても、

何も起きない
何も起きない

何も起きない。

Sample/html/input/type_submit/src/input at master · bg1bgst333/Sample · GitHub

input#type(button)

type属性で"button"を選んだ場合は、ボタンになる。
この時、valueはボタンのラベルテキストになる。

<input> - フォーム部品:入力欄 - とほほのWWW入門

ON/OFFを切り替えるトグルボタンを作ってみる。

こうすると、

最初この状態
最初この状態

最初この"OFF"の状態。
ボタンを押すと、

”ON"に切り替わる

”ON"に切り替わる。
もう一度ボタンを押すと、

&quot;OFF&quot;に戻る
"OFF"に戻る

"OFF"に戻る。

Sample/html/input/type_button/src/input at master · bg1bgst333/Sample · GitHub