All about HTML5 for Absolute Beginners: Part 5

on

All about HTML5 for Absolute Beginners: Part 5







Hello everyone! Welcome back to the blog, and I hope you're making great progress in learning HTML5 with me.

In this blog, we’ll dive into HTML5 forms, covering essential tags like <form>, <input>, <textarea>, and <select>, and explain how they work together to collect user input effectively.


HTML5 Forms: A Beginner's Guide to Creating User-Friendly Web Forms

In the last episode, we had a look at the input and label. These are widely used in making HTML forms on websites. 

If you wish to submit some information to apply for something, such as an application, complaint ticket, inquiry, or whatever, websites have forms to collect your necessary information to stay in touch with you and record your concerns. So, we will also need to implement a form on our website and start learning the foundation with HTML.


Now, a form is a thing that requires both a front-end and a back-end.

On the front end, the user will fill in their information, which will securely be sent to the back-end, where it will be accessible by the website owners. In HTML5, we can build the front end of the form, but for the back-end, we will need help from different technologies such as PHP, JavaScript, or others. We will cover that later in the series, but today, let's focus on the front end.

The method attribute decides which HTTP method the data will be sent through because it will be sent via an HTTP request.

Understanding HTTP and HTTPS

HTTP stands for Hypertext Transfer Protocol. It is a standard for communication between the server and the user.

HTTPS is a more secure version of HTTP. During the communication between the server and the user, there are chances that hackers might invade on sensitive data, so to prevent that and establish a more secure connection, HTTPS is used.

For example, when a user enters "https://apple.com" in the URL, an HTTPS request is sent to the server where the necessary files are stored to render the website. Then the server sends back a response, which contains these files and the website is rendered.

Common HTTP Methods Explained

There are different methods for different purposes, such as retrieving some data submitting it, deleting or updating it.

GET Method

This one is used to retrive data. For example, there is data stored about the prices of an item at different stores in a database. You want to retrieve that data and showcase it to the user, then you will be using the GET method.

POST Method

Similarly, if you want to store some data in your database or send data to another source, then use the POST method.

PUT Method

If you want to update existing data then PUT can be used.

PATCH Method

This is used to update a small amount of data.

DELETE Method

As the name suggests, it's for deleting data. 

Essential HTML5 Form Elements

The form tag

<form action="index.php" method="POST">

    <!-- Form elements go here -->

</form>


When you write a form tag like the one in the example, nothing would appear on the screen. This is because the form tag tells html that a form is going to be written in these tags, and the data for the backend should head over to the file in the action attribute, in this case, a PHP file index.php.

In between these form tags, you will write your label tags and input tags. You can place images, anchor tags for any links, if you wish to give, an input with a type equals file if you wish for the user to submit an image or something and much much more.


But how will the form be submitted? With a button of course.


Button tag

<button>click me</button>


To create a simple button, we use the button tag. Just a simple tag, you can try it out on your own.


In forms, usually, we use the input tag with a type equal to submit. This is great for forms where you have to submit a particular data. For example,


<input type="submit" />


Textarea tag

<textarea rows="4"></textarea>


If you want the user to fill in a big message consisting of multiple lines, then use the textarea tag. Rows attribute determines the number of visible text lines. It will create a rectangular box for a nice and big input. Try it out!

Select and Option

When you want the user to select from a list options, then this will come in handy. Use label to create the top heading and select as container for option tags for each option for the user to choose from.

<label for="coffee">
        Choose a coffee flavor
</label>

<select>

    <option>Cappuccino</option>
    <option>Latte</option>
    <option>Mocha</option>

</select>


Wrapping Up

I aim to make my blogs into small digestible chunks of information and do not intend to make my audience feel that coding or web development is very complex or impossible. So that is why I'm ending this blog here. Please let me know about this idea and what length you would prefer for my upcoming blogs.

Thank you so much for spending time with me and if you have questions about HTML5 forms then drop them in the comments below, and I’ll be happy to answer!"