Client-Side Interacting with Server-Side

**This information will supplement what was taught through the first *Adventure* in the *Junior App Development* Journey in CodingVille. You can use this additional information to create your first Email Contact page, which will be an assignment in this class.** # Elements By now you have learned many of the basics of HTML including - `<html></html>` - `<head></head> and <title></title>` - `<body></body>` - `<div></div>`, `<p></p>`, `<span></span>` and `<br>` - `<h1></h1>`, `<h2></h2>` and similar - `<strong></strong>`, `<em></em>` and `<font></font>` - `<table></table>`, `<th></th>`, `<tr></tr>` and `<td></td>` - `<a></a>` - `<img>` - `<input>` There is only one significant HTML element that you have not learned that CodingVille will not teach you, because CodingVille is a standalone environment. That new element is the `<form></form>` tag. # Connecting the Client to the Server When you request input from a user on a webpage, usually that input needs to be processed. Extremely simple input can be processed through simple scripts entirely on the server side, as you will see as you continue the *Journey* in Codingville. But some interactions require servers to do some processing, such as sending emails. The `<form></form>` tag is one such interaction. The way you'll be using this tag will be to interact with a server script that Mr. Windsor has written. `<form></form>` tags usually need to have two attributes; the `method` attribute and the `action` attribute. - The `method` attribute is most commonly set to `post`, which indicates that when a user completes the form, you're going to "POST" a message to the server. - The `action` attribute points to the URL of the script you want to use. Example: `<form method="post" action="https://www.myserver.ca/cgi-bin/myemailer.cgi"> ... </form>` ## Where does it go? `<input>` tags are expected to be linked to a `<form></form>`. That means you should put the introduction of your `<form>` *before* all `<input>` tags, and end the `</form>` after your last `<input>` tag. There are ways around this, but this is the simplest way to go. `<form method="post" action="https://www.myserver.ca/cgi-bin/myemailer.cgi">` `<input type="text" name="hello">` `<input type="submit" value="Click me">` `</form>` ## Meeting the Scripts Needs Most scripts that are on a server require specific *parameters* be passed to it for security purposes. Sometimes these are called "API Keys" or "Developer IDs" or something like that. Oftentimes you can pass them to the script with a `hidden` input type. You will always need to check with the script's author or developer documents to find out exactly what it needs to keep the script secure. An example is below; `<input type="hidden" name="apiKey" value="sh80qy7r3qbfisocw0aha">` --- With this information, you are now ready to challenge the HTML Forms assignment.