HTML Forms

What is an HTML Form

HTML forms are one of the main ways users interact with our website. 

Examples of forms include user registration and login windows on websites, sending messages on forums, YouTube's own comment box, a registration for the tax office, or when we search for anything on Google. All these actions are performed through forms. 

This wide variety of uses is possible because we have a broad range of elements that can be included in our form, which you can see in the following post (link post).

In this post, we will focus on how a form works. To do this, we will create a simple form and explore its options. 

The main function of a form is to send information to the web server.

1 - Creating an HTML Form

In this example, we will see how to create a login form for a website. We will not be implementing the functionality to check if the information is correct, just how the form itself works. 

The first thing we need to know is that to create a form in HTML, we should use the <form> tag.

Inside this tag, we will add two elements.

We will look at these in more detail in the next post or video. 

For now, we will include two fields: one for the user and one for the password. We will go into more detail in the next video.

<form >
    <input type="text" name="usuario"/>
    <input type="text" name="Pass"/>
    <input type="submit" value="Enviar">
</form>

2 - HTML Form Attributes

By itself, the <form> tag doesn't do much. To make it send information to our server, we need to specify certain attributes. 

2.1 - Action Attribute in an HTML Form 

The first one we'll look at is the action attribute, which allows us to indicate the address or web page to which the information will be sent. 

<form action="ejemplo.html">
    <input type="text" name="usuario"/>
    <input type="text" name="Pass"/>
    <input type="submit" value="Enviar">
</form>

We can omit this attribute, and in that case, the information will be sent to the same page.

2.2 - Enctype Attribute in an HTML Form

This attribute tells the browser what kind of encoding the form data will use.

It is mandatory if you are going to include images. For example, if you want to upload a profile picture on a forum, you must use a form that contains the enctype attribute with the value multipart/form-data.

<form action="ejemplo.html" enctype="multipart/form-data">
    <input type="text" name="usuario"/>
    <input type="text" name="Pass"/>
    <input type="submit" value="Enviar">
</form>

2.3 - Method Attribute in an HTML Form

The method attribute lets us specify which HTTP method will be used to send the information. Usually, we will use POST since it is the standard when sending data to our web server. 

<form method="POST" action="ejemplo.html" enctype="multipart/form-data">
    <input type="text" name="usuario"/>
    <input type="text" name="Pass"/>
    <input type="submit" value="Enviar">
</form>

But there are more options, such as:

• GET: Used to retrieve information from a web page. We should never use it to insert or modify information, as its values appear in the URL and it is the default when we do not specify the method attribute.
• POST: Used to send information, usually to add new data. 
• PUT: Used to indicate that we are modifying existing information, essentially to update data.
• DELETE: Used to delete the resource we are sending.

Using these different methods by themselves doesn't mean much, since the server or backend application also needs to support them. 

If, in the previous example, we change the method to DELETE but the server does not support it, it would be normal for the server to respond that the method is not supported by the application. However, it is also possible that it logs you in anyway, or you might get an error or a 404 if it is not well implemented.