This lesson is very easy to understand – but it is essential in that in this new knowledge, all of the interactivity of the internet will be relayed. There are a few additional HTML tags that we need to discuss before finishing the Pre-Work: they are the first possible ways of interaction that were introduced in HTML: The Inputs and Forms.
Like always, let’s compare our website with an MS Word document…At some point scientists needed to create forms just like the ones we fill out when we pay our taxes: with blank spaces available for the user to fill with their Name, Last Name, Date of Birth, etc.
The elements that the user fills in a form are called
<inputs> and they always have to be wrapped inside of a
<form> tag. You can also use all the other HTML tags we learned in the previous lessons without any problems.
Here is an example of a simple form in HTML:
The following is a list of all the possible elements we can use to receive any input from the user:
|Text||The text input is meant to receive any small string of characters such as: Username, Name, Last Name, Date of birth, etc.|
|Textarea||The textarea is ideal for long text inputs. Its main difference from the text input is its ability to allow for multiple lines.|
|Password||This is just like an input type="text" but with the only difference that the characters are hidden like bullets – the user cannot see what they are typing.|
|Radiobutton||Allows the user to select only one of all the inputs with the same name.|
|Checkbox||You have to use brackets in the name of the input to allow the user to select multiple options at the same time.|
|File||This is the only way to work with files. Eg: It’s what websites use when they ask you to upload a picture.|
|Submit Button||When the form is ready to be sent, the user presses this "submit" button and everything is then sent to the server for processing.|
|Select||Asks the user to pick one or more elements from a list of options.|
Just like any other HTML tag, the input tags have several attributes that can be set to describe their behavior in more specific ways:
VALUE: You can specify a default value that the input should have before it starts getting filled by the user:
<input type="text" name="firstname" value="John">
READ ONLY: Determines if the user is allowed to change the value of the input.
<input type="text" name="firstname" value="John" readonly>
DISABLED: Determines if the input is going to be gray and read-only. The disabled inputs are not sent to the backend – they act as if they never existed.
<input type="text" name="firstname" value="John" disabled>
SIZE: The maximum number of characters allowed for that input.
<input type="text" name="firstname" value="John" size="40">
The two most important attributes that need to be set into the
<form> tag are action and method:
Action: Is the URL where the data collected from the form is going to be sent.
Method: Can be either "POST" or "GET" – the main differences will be: (1) How the collected data is going to be sent to the destination page once we arrive there and (2) How the form data is submitted to the server.
|Using method GET||Using method POST|
|All form data is encoded into the URL. This means that it will append all the information of the form to the end of the destination URL, for example: http://www.mydestinationurl.com?inputname1=value1&inputname2&value2….||The data will be hidden from the end-user. The URL will remain as it was defined in the "action" attribute and only a developer will be able to request the form information.|
☝If you are going to use the
<input type="file" the only method supported is POST.
You now know all the basics to create your first interactive website. Now, if only you knew any backend language to process the data that is being collected from your forms! In the meantime, you can try this free service to start the modjo! https://formspree.io/