Class Days
17 Forms

Class 17: Forms

Instructions

  1. Watch the lecture
  2. Finish HTML Forms Tutorial (opens in a new tab). You should try all the examples and finish all the exercises.

Docker Recap

Please watch this video (opens in a new tab) to get a recap on how to effectively run our server-side webpages.

To recap:

  • To run your web development you first need to:
    1. Start Docker Desktop (wait for it to be green)
    2. Open up PHPStorm
    3. Run the services tab from docker-compose.yml Once these are up, then you can run your files either through PHPStorm or directly via the browser.
  • Use docker ps as a diagnostic tool to let you know what containers are running.
    • You should see a notice of your web server running and that port number. Once you see that there, then the webserver is running.
  • Make sure you read the webpage errors generated carefully. Sometimes they give you great clues on what your computer is doing, and can help you diagnose if the URL is incorrect or the server is not currently running.

You should also do docker system prune every once in a while to clean up any dangling containerrs. If you have port issues, you should also restart docker, and you can change your port as a last resort.

Also, you can learn more about the <form> element via Mozilla's documentation (opens in a new tab)

Form Basics

The next video (opens in a new tab) will introduce you to some basics related to forms and how users of web pages can submit information to a server.

As we talked about in the video, the information that sometimes is passed into forms, if it's meant to retrieve information, is often encoded into a string that is also displayed as part of a URL.

So here is another example of something to search for (opens in a new tab) And here is the URL that this link points to:

https://www.google.com/search?q=science+of+sleep+paralysis

You can also see that this same parameter string can be used on other sites, like my old favorite, lmgtfy (opens in a new tab)

https://letmegooglethat.com/?q=science+of+sleep+paralysis

When a form gets transferred from text in a box to a URL, the text is often encoded with different strings. Also remember that the URL is broken up into the form:

?key1=value1&key2=value2

It starts with a ? and then is separated by a bunch of key-value pairs. Each of those pairs are separated by the & symbol.

Here's some of the most popular strings and their form-encoded equivalents

StringForm encoded Equivalent
+
&%26
=%3D
?%3F

Your First Form

In this video walkthrough of your first form (opens in a new tab), I go through some of the basics of making a basic form using HTML and our tech stack.

FYI Our tech stack can be PHPStorm, Apache, Docker-Compose, along with others, like XDebug and git.

Here is a link to Mozilla's documentation on the input element (opens in a new tab), which covers many of the different types including:

as well as other cool things like:

maxlength vs size

Both of these are used for text input, however, they have different uses

maxlengthsize
restricts number of characters you can inputsets the overall size of the textbox

Remember that if size is 1 but maxlength is 10, then you'll be able to type 10 characters in a tiny text box.

Advanced Form Controls

This next video walks continues our march through different input elements (opens in a new tab), where I go through a few more of the popular elements and show how they appear in our IDE.

The elements that I go over here include:

In addition to this, you'll also see how we use PHP's request features to see what exactly is being sent to the server when we submit.

Dropdown Menus

This video focuses on the dropdown via select and option (opens in a new tab), where I show different ways of being able to categorize the drop down menu to enhance readability

In addition to the select (opens in a new tab) and option (opens in a new tab) tags, we also go over additional options like the size (opens in a new tab), multiple (opens in a new tab), and selected (opens in a new tab) attributes. We also talk about optgroup (opens in a new tab) as a way to group options.

Resetting, Stylizing, and Hiding

Continuing on with forms, this video goes through the idea of restting forms, applying CSS, and hiding elements (opens in a new tab)

Here are some of the relevant links to documentation for each of these

In all of these we keep using the PHP script to print out everything that we get from a form submission.

FYI: In any of the documentation pieces for mozilla, make sure that you scroll down in the try-it fields. See here with the legend element: image showing scrolled to show text and HTML output

Encoding & Requests

This video reviews encoding and covers the two types of HTTP requests (opens in a new tab).

Encoding

Just like with the form data above, it's important to realize that any information that is sent is encoded as part of the URL. It needs to be encoded so that it can be present as part of a URL that is sent over. This is why you also see at times different characters, like %20 for space.

FYI: in the above section we mentioned that + is also encoded as a space. Which one is it? It's actually dependent on its use. Typically in forms spaces get translated to +, but when it is part of a URL, like for example when you have a picture on your website that is called i woke up like this.png, that gets encoded instead with %20 so that it would be http://yourwebpage.com/images/i%20woke%20up%20like%20this.png Make sure you look at more URLs as you navigate through the web in the future!

Requests

While there are many different types of request methods (opens in a new tab) that can be sent to an HTTP server, the two most popular are GET and POST.

Request typeUsevariables present in URL?
GET (opens in a new tab)Retrieve InformationYES
POST (opens in a new tab)Insert InformationNO
15 PHP Part 218 Forms Part 2