Learn how form data is submitted, and the security implications of the various ways of submitting data.
- [Narrator] The point of a form is to send data to a server or sometimes just to another page. In this video, we will look at how forms are submitted. The form element has an action and method attribute which will determine how the data is sent to the server. First, the action attribute. This is where the data gets sent. It needs to be a valid URL either absolute or relative URL generally. It's not required to have an action and if you don't include one, the default is the current page.
It's important to know whether the sending and receiving page have HTTPS. That's the secure protocol for sending data, but not all websites have it and you can tell by whether the URL of the website is HTTP or HTTPS. If both the sending and receiving page are HTTPS, then everything is encrypted as it's sent. That's the best way to go. If both the sending and receiving page are HTTP, the data is not encrypted.
This is not recommended and definitely don't use this for any data that should be kept secure like personal information or passwords. If your sending page is HTTP, not secure, but the receiving page is HTTPS, then the data is encrypted. And if your sending page is secure, HTTPS, but the receiving page is HTTP, the data is not not encrypted. And further in this scenario, the browser will display a security warning message to the user advising the user that they should probably not submit their data.
Next, the method attribute on the form element and this is the HTTP method which is the way the data is transmitted. And commonly, this will be either get or post. First, if the method is get, this means the browser is sending an HTTP request to ask for a resource with an empty body in the request. So essentially that means the data from the form is in the URL which is sent to the server or to a different page. The format is after the URL, you can see there is a question mark followed by the name of the form field equals and the value the user entered.
So here we have color and the value is blue and there's design and the value is striped. If you have more than one to send, they're separated by an ampersand symbol. The user will be able to see this in the URL as the data is sent. There is a limit on how much information can be submitted as servers may limit the length of the URL. Don't use this method for sensitive data as it's possible to intercept data in the URL. The other value for method is post and this is more common.
In this one, the browser sends an HTTP request to the server to ask for a response with the data in the body of the request rather than in the URL. This is the preferred method as it is much more secure. All the user will see is the URL that the data is being sent to and their data will not be visible. The server receiving the data will process the data and respond. So the server is programmed in a language like PHP, Python, Pearl, Java, Ruby, other languages or a framework based on one of them.
And talking about what happens on the server is beyond the scope of this course. After the server processes the data, it responds by sending information back to the user's computer. It may just tell the browser to display a particular resource page such as a confirmation page or it may return data based on the form entries. For example if I submit a search form, the server will send back the search results that it retrieved from a database. There are a few things you should be aware of to make forms secure. On the browser side, the form is never totally secure.
Hackers can add scripts to a form or make their own form that submits to your server so don't rely on browser validation such as file type. Although it's nice to check on the browser side before sending, the server should also check to make sure it's not receiving an executable file. You don't want to get your server hacked. And the server should also make sure that the data it receives is in the format it's supposed to be as a hacker could send a script or database request. So that was an overview of what happens when a form is submitted. Next, we will look at how validation can help make sure that the user enters the right data.
- How users interact with forms
- Designing forms that are easy to use
- Following data privacy laws when collecting information
- Choosing which HTML input types to use
- Adding buttons
- Adding interactive validation
- Styling form fields with CSS
- Using positioning and flexbox to create responsive form layouts