Week 10 Learn & Practice - Forms

Textbook

Chapter 9: Forms

Forms

We probably use a form every time we use the Internet. Logging into Facebook, LinkedIn, and Brightspace all require a login form. Forms have two components that make them work. First is the form we see on the webpage.

The form itself contains all the fields, buttons, and dropdown menus used to collect information from the user. Secondly, something happens once the form is submitted. When a user submits the form, all the entered data goes to a server. The server and the application that runs on it processes this information.

Download week10Demo_forms and open the website in VS Code and your browser.
After the  enter a <form> element.
The <form> element has attributes that are important in making the form function. Add the below attributes to the opening tag of the <form> element.
```
<form name="pizzaForm" action="http://itins3.madisoncollege.edu/echo.php" method="post">
</form>
```
- name: The name attribute simply gives your form a name. The name attribute becomes important once you start working with JavaScript. This value is up to you, but it should contain no spaces and use camel-case for more than one word.
- action: This attribute tells the form where to send the data once the user clicks submit. It contains an address (URL) to the application that processes the entered data. For this class, we will always be using http://itins3.madisoncollege.edu/echo.php as the value for this attribute. It is the address to a server located here on campus.
- method: The method attribute tells the browser how the data will go to the server. For this class, the value of this attribute will be post.

Form Fields & Inputs

There are many types of data entered into a form. The data can be plain text, passwords, dates, and email addresses, to name a few. The <input> element is used to create entry fields for input.

Notice that it is an empty element, meaning that it contains no content of its own. However, the <input> uses several attributes; you'll learn below. One attribute is the type attribute. The value of this attribute tells the browser what type of data you're expecting the user to enter the field.

Text Input

Nested inside the <form> element create an <input> element that takes text as an input. Refresh your webpage to see the results. Create two of these.
```
<input type="text">
<input type="text">
```

Password Input

Create an <input> element that takes a password as an input. Refresh your webpage to see the results.
```
<input type="password">
```
Try it!

What happens when you try typing inside a password input element?

Textarea Field

Often, we need to provide the user with enough space to enter a lot of text. This is accomplished with the <textarea></textarea> element. Notice this has both an opening and closing tag.

Add a <textarea> element to the form
```
<textarea></textarea>
```
Our form has a nice selection of input boxes, but it's still not looking like a proper form at this point. Each text field is displaying on the same line. What does this tell you about the <input> and <textarea> elements?
Add a couple <br> elements after each <input> element and the <textarea> to force each field to a new line.

The `<label>` Element

Our form is looking better, but the users do not know what to enter. We need some labels. Create labels with the <label> element.

Above each <input> and <textarea> element, add an appropriate <label>.
```
<label>First name:</label>
<input type="text">
<br><br>
```
Inline or Block?

Is the <label> element and inline or block-level element?

Explicit Labels

We can associate a label with a field so that when a user clicks on the label, the cursor automatically appears in the associated field. We associate a label with its input element by giving our <input> element an id and using the for attribute on the <label> element. The for and id attributes must be the same value.

Add an id attribute to each <input> element and the <textarea>.
Add the for attribute to the <label> element. The value of the for attribute is the id of the associated field.
```
<label for="firstName">First Name:</label>
<input type="text" id="firstName">
<br><br>
```
In the browser, click on the label element. The cursor should automatically go inside the correct input.

Implicit Labels

You can also accomplish this same behavior by making the <label> element a parent of the <input> element. This eliminates the need to match a for and id attribute; however, this method does not always work with assistive technology like screen readers.

<label>First Name:
    <input type="text" id="firstName">
</label>

Submit

We need to have a way for the user to submit their data once they've completed the form. We create a submit button with the <input> element and an attribute type="submit".

Create a submit button. Test the button by filling in the form and clicking the submit button.
```
<input type="submit">
```
Change the name that appears on the "submit" button by using the value attribute.
```
<input type="submit" value="Order Pizza">
```
- When the user clicks on the submit button, the form grabs the data from the form and sends it to the location indicated in the action attribute of our form. In our case, it is going to http://itins3.madisoncollege.edu/echo.php
- The echo.php is an application that runs on a Madison College server. The application takes all the data entered in the form and dumps in on the green Echo page.
- However, something is wrong. Do you see any of the data you entered? It should appear on this page, but it's not. We'll fix this shortly.

Reset

The reset button is created with the <input> element as well.

Create a reset button. Test it out by filling in the form and clicking the reset button.
```
<input type="reset">
```
- Just like the "Submit" button, you can change the name that appears on the button by using the value attribute.

Post vs. Get

Look at the form element and refer to the method attribute we added. This attribute specifies how the data should go to the server.

Change the value of the method attribute to get. Fill out the form in the browser and click the submit button.

Look at the URL, what do you see in there? Not very secure!

Change the method value back to post and resubmit the form. This is the best method for securely sending data over to the server.

For this course, you should always use the post method.

Form Field Attributes

There are several attributes that we can add to the <input> element to enhance our form. Your textbook lists several attributes in more detail.

The `name` attribute

Earlier the form wasn't working properly. It should be sending the data from our form to the server and then display on the green Echo page. The server is not receiving the data because an important piece is missing: the name attribute.

Each <input> and <textarea> (not including the submit and reset buttons) must have a name attribute to send the data to the server.

The name attribute acts as a container (a variable) to hold the data we enter and send it to the application on the server. Without the name attribute, our data goes nowhere.

Add a name attribute to our text fields. The value should be something meaningful that describes the data. It needs to start with a lower-case letter, contain no spaces, and follow the camel-case naming format.
- It’s common practice to make it the same value as the id.
```
<input type="text" id="firstName" name="firstName"/>
```
Add the name attribute to each field, fill out your form, and click submit. Did the data come over to the Echo page?

You should see the name attribute value, followed by the data you entered on the Echo page. The data sent to the server application are called parameters.

You now have a working form!

The `placeholder` attribute

The placeholder attribute provides a short hint of how to fill in the field.

Add the placeholder attribute to the first three <input> elements, and the <textarea> element. Give each placeholder attribute an appropriate value to describe the data expected for each field.
- The list of attributes is getting rather long, so you can move each attribute to a new line to help legibility.
```
<input type="text"
        id="firstName"
        name="firstName"
        placeholder="first name">
```

The `size` attribute

You can alter the field length by using the size attribute.

Add the size attribute to the first <input> element and give it a value of 25.

<input type="text"
        id="firstName"
        name="firstName"
        placeholder="first name"
        size="25">

The `maxlength` attribute

The maxlength attribute specifies the maximum allowed length of text. You can also specify the minlength.

Add the maxlength attribute to the first <input> element and give it a value of 10.

<input type="text"
        id="firstName"
        name="firstName"
        placeholder="first name"
        size="25"
        maxlength="10">

The `value` attribute

You can assign a default value to a field by using the value attribute. The value attribute differs from the placeholder attribute, as text in a value attribute will go to the server. It also overrides the placeholder’s value if it is present.

Add the value attribute to the first name <input> element.

<input type="text"
        id="firstName"
        name="firstName"
        placeholder="first name"
        size="25"
        maxlength="10"
        value="Claudia">

The `required` attribute

Newer browsers support the required attribute. The required attribute indicated the field must contain data before submission.

Add the required attribute to the password <input> element. The required attribute does not need a value.
```
<input type="password" id="password" placeholder="password" required>
```
Try submitting the form without providing a password to see what happens.