DONT ADD ANYTHING HERE!

Personal Information


Notes

  1. The method is GET
    1. The formmethod attribute of <input type="image"> overrides the method attribute of form
    2. Similarly, the formaction attribute of <input type="image"> overrides the action attribute of form
  2. <input type="image" src="myButton2.png" alt="click me">
  3. <form target="myIframe"></form>
  4. click coordinates sent to server
    1. john doe&johndoe@icloud.com&phptwo.tomgdow.com¶m1=john
      +doe&param2=johndoe%40icloud.com&x=103&y=53
    2. Note x=103&y=53 at end of query string
    3. (MDN) When you submit a form using a button created with <input type="image"> extra data points are submitted to the server automatically by the browser — x and y
    4. Note that "&para" of "&param1" is interpreted as the html entity &para; (¶)
  5. To URL encode with JavaScript: encodeURIComponent()

Code

html
<form action="https://www.google.com" method="POST" id="form_one" target="myIframe">
    <fieldset>
        <legend>Personal Information</legend>
        <div class="box">
            <div>
                <label for="name">name</label>
                <input type="text" name="param1" id="name"><br>
            </div>
            <div>
                <label for="email">e-mail</label>
                <input type="email" name="param2" id="email" required><br>
            </div>
            <div class="submit">
                <input type="image" src="../images/myButton2.png" alt="click me"
                    formaction="https://phptwo.tomgdow.com" formmethod="GET">
            </div>
        </div>
    </fieldset>
</form>
<iframe width=" 400" height="100" name="myIframe" srcdoc="<div>Response will appear here</div>"
    sandbox title="iframe">
</iframe>
php (server)
    <?php
        echo(htmlspecialchars($_GET["param1"])."&"
            .htmlspecialchars($_GET["param2"])."&"
            .htmlspecialchars($_SERVER['HTTP_HOST'])."&"
            .htmlspecialchars($_SERVER['QUERY_STRING'])
            ); 
    ?>

References