# HTML Forms and Iframes
## Overview
In this lesson we will learn how to use HTML form elements to gather user input. We will also learn about using iframe elements to load other HTML content windows in our page.
## Objectives
1. Understand form elements get and post differences.
2. Familiarization with form elements.
3. A look at iframe code.
## Gathering User Input
\
*Note: Slides for this lecture video are provided in the resources at the bottom of this lesson.*
### Forms
Forms are essential for gathering user information from site visitors. Text can be inserted, selections made and a record of their responses can be sent remotely to a server whose backend can store the information. At this time we will not be going into detail about the back-end portion of a form submission, but instead focusing on the front-end portion. Let's explore some of the many form elements we have at our disposal for gathering user input.
We will start with the crucial parent element `
```
When the user clicks the submit button of our form all their responses are captured and labeled using the name attributes on each element. Then they are sent to the location listed in the action attribute in our case `process-user.php` The request uses the method attribute set as `get`. This causes the information to be sent as a Query String included into the URL. The URL for our GET request looks like this:
[](https://camo.githubusercontent.com/9eb2cb4325000d8147dddd462c0afaf527694aa1/687474703a2f2f69726f6e626f6172642d637572726963756c756d2d636f6e74656e742e73332e616d617a6f6e6177732e636f6d2f66726f6e742d656e642f6c61622d6173736574732f687474702d6765742d75726c2e706e67)
By looking at the headers of our request in the Developer Tools > Network tab, we can see the request type listed as GET, and our user's response is located in the Query String Parameters.
[](https://camo.githubusercontent.com/1654637ecae6813e0ce67af566e14eaba0927013/687474703a2f2f69726f6e626f6172642d637572726963756c756d2d636f6e74656e742e73332e616d617a6f6e6177732e636f6d2f66726f6e742d656e642f6c61622d6173736574732f687474702d6765742d686561646572732e706e67)
An HTTP GET request is used when we want to get back particular content from the server and we want to pass it some options to refine the search of what we are getting back from the server. Since the content of our request is visible in the URL string at the top of the browser window, this is not really ideal for passwords, as the people looking over your shoulder at your favorite cafe might be able to read the contents of what you are sending off your screen.
#### POST
Below we see the same form example code for making a POST request.
```
```
When the user clicks the submit button of our form all their responses are captured and labeled using the name attributes on each element. Then they are sent to the location listed in the action attribute in our case `process-user.php` The request uses the method attribute set as `post`. This causes the information to be sent as Form Data that is passed along to our process-user.php file. The URL for our post request looks like this:
[](https://camo.githubusercontent.com/89635ff9634c38a481562967361a1f51dfdbe611/687474703a2f2f69726f6e626f6172642d637572726963756c756d2d636f6e74656e742e73332e616d617a6f6e6177732e636f6d2f66726f6e742d656e642f6c61622d6173736574732f687474702d706f73742d75726c2e706e67)
By looking at the headers of our request in the Developer Tools > Network tab, we can see the request type listed as POST, and our user's response is tucked into the Form Data.
[](https://camo.githubusercontent.com/02c937873043fb9a3fbe726776f40be57d8ebed3/687474703a2f2f69726f6e626f6172642d637572726963756c756d2d636f6e74656e742e73332e616d617a6f6e6177732e636f6d2f66726f6e742d656e642f6c61622d6173736574732f687474702d706f73742d686561646572732e706e67)
HTTP Post request is ideally used when we wish to post content to the server. This is the more appropriate of the two methods for sending something like a password as the content is sent within Form Data and not directly visible in a query string in the URL as they are with GET requests.
Next, let's explore some of the many form elements we can use to gather user input.
#### Text Inputs
Setting the input element with a `type="text"` gives our users a place to type in a single line of text content. The `placeholder` attribute puts some dummy text into the element that will be replaced as the user starts typing. The `name` attribute gives our input value a label. This makes it possible to grab its value at the other end on the server by calling up the value by giving its name (key).
```
```
Setting the input element with a `type="password"` displays dots as the user types characters instead of the actual characters. This is useful when private information is entered that we do not want others around the user to read.
```
```
Setting the input element with a `type="tel"` will bring up the numeric keypad on supported mobile devices.
```
```
#### Hidden Inputs
Setting the input element with a `type="hidden"` will send the inserted `value` attributes data along with the form submission, but won't make the data visible in the browser window.
```
```
#### Submit Buttons
Setting the input element with a `type="submit"` will create a submission button that will submit the form upon clicking it. The `value` attribute holds the text that will appear on the button.
```
```
You can also use a `button` element:
```
```
Note that with a `button` element, the text that will appear on the button goes between the `` tags.
Submit
#### Radio Inputs
Radio inputs are useful when you want to have several possible values but wish to limit the user to choosing one or another. To accomplish this we must set different `value` attributes for each radio button, but they must share the same `name` attribute.
```
Male
Female
```
Male Female
#### Checkboxes
Checkboxes are ideal if we wish to allow our users to choose one or more values.
```
Bike
Car
```
Bike Car
#### Select Menus
Select menus create a nice drop menu with multiple selectable options. Here the user must also choose a single option, so this could be a replacement for a set of radio buttons. Here we must assign a text label between the opening and closing option elements as well as a `value` attribute that will hold the choice the user selects that will be passed along during form submission.
```
```
small medium large
#### Textarea
Textarea elements are useful if we want our users to be able to insert multiple lines of text. For example, if we wish to gather feedback in a way that allows the user to type as much or as little as they would like.
```
```
\
### Iframes
Iframe elements allow us to link to other HTML content from within a frame window on our pages. The `src` attribute points to the location of other HTML content elsewhere and displays it within the current page.
```
```
\
## Summary
* There are many options for gathering user input.
* We can start with a form element and give it an action and method.
* The POST method posts content to a server tucking form data within the request.
* The GET method sends form content as a set of options in the form of a query string visible in the browser's URL bar. The purpose is to describe to the server options for the content you wish to get back.
* We can use an iframe element to display other HTML documents inside a frame within our own HTML document.
## Resources
* [Presentation Slides](https://docs.google.com/presentation/d/115ECvsMyDnFBcc-Rvb4Jn876JhOycXxKVN6sv7OiJ1Y/edit?usp=sharing)
* [MDN - HTML - Form](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form)
* [MDN - HTML - Iframe](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe)
* [MDN - HTML - Button](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button)
* [HTML Goodies - Form Basics](http://www.htmlgoodies.com/primers/html/article.php/3881421)
* [HTML Form Generator](http://www.phpform.org/)
*
View [HTML Forms and iFrames](https://learn.co/lessons/HTML-Forms-and-iFrames) on Learn.co and start learning to code for free.
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://certil-remy.gitbook.io/learn/html-1/untitled-2-3.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.