Are you learning and want to know correctly how to create html forms? Yeah? Well keep reading, I have created this article especially for you.
In the following paragraphs you will find what are the bases for creating web forms. It is not a complex task and if you stop at the following concepts that I propose you will be creating your own HTML forms in just a few minutes.
In this article I propose you to learn:
- Create your first basic HTML form.
- The most important attributes of forms.
- That types of forms They exist and what is their purpose.
- Basic tags to create fields in an HTML form.
Content
- 1. How to create a basic HTML form
- 2. Most important attributes of a FORM
- 2.1 The method attribute
- 2.2 The Action attribute
- 2.3 The enctype attribute
- 3. Types of HTML forms
- 3.1 Search engine type form
- 3.2 Form for inserting data or files
- 4. Basic INPUT tags to create fields in an HTML form.
1. How to create a basic HTML form
Creating a basic web form is easy, just use the tag #lt;form#gt; from HTML, specifically for this purpose. This label together with a text type field and a simple button will complete a functional and meaningful form. Below the code:
<form> <input type="text" name="campo1" /> <input type="submit" value="enviar" /> </form>
This HTML code generates a form like the following:
In these lines of HTML code you can see 2 types of tags: shape and input. The label shape is in charge of delimiting the form, while the label input indicates the creating a field suitable for writing text. Easy right?
This example is basic and just a sample to show you how quickly you can create an HTML form. Next we will see what are the most important tag attributes form.
2. Most important attributes of a FORM
The tags shape They have, like any other tag, two types of attributes:
- General attributes (id, class, etc) of HTML.
- Specific attributes for forms: action, method, enctype, etc.
Let’s focus on its specific attributes, specifically the most important ones, with which we can configure the purpose of the form and its behavior.
Next I am going to expose you the following attributes of a label shape:
- Attribute method: the attribute that controls the way to send the data to the server or backend of our development.
- Attribute action: this attribute sets which page the form is submitted to.
- Attribute enctype: with this attribute we will configure the way to encrypt the data sent in the form.
2.1 The attribute method
the attribute method it is the most essential and important of all attributes. This label attribute allows us to indicate how the form data should be passed to the server, that is, to our backend or PHP programming, etc.
This attribute accepts two values: get either post. I am directly going to tell you that to use this parameter correctly you must, at first, use the worth get for search type formsand the value post for input forms of data.
I am going to give you two examples of use, one for each value:
- If you wanted to create a search form for a forum, shop, etc. you must indicate get. Because? Well, because this value tells the form to send the information through the url, that is, that these data are visible, modifiable and copyable by the user for later use.
- On the contrary, if you want to create a data entry form to store data, such as a control panel form to upload news to a page, you should use the value post.
Note: if you do not indicate the attribute method in a form this is automatically configured as type GET.
Now, to finish, let’s look at two examples, one with each value.
GET type form example
<form method="get"> <input type="text" name="campo1" /> <input type="submit" value="enviar" /> </form>
This form would add the information from the form fields to the current URL. Let’s fill it with any data:
The form with the word “test”, if it were on a search engine page with the url “www.srcodigofuente.com/buscador”, after pressing the “send” button, the following url would remain “www.srcodigofuente.com/buscador?campo1 =test”.
As additional information, if you are going to program later in PHP, and you have not seen it before, I would like to let you how to read this data in php:
<?php $campo1_formulario = $_GET['campo1']; ?>
Example of a POST type form
This type of form is somewhat more difficult to understand, but with a bit of practice and if you read my explanation carefully, I’m sure you’ll get it.
For configure the form With data sent by POST method we will:
<form method="post"> <input type="text" name="campo1" /> <input type="submit" value="enviar" /> </form>
This form shares the same look and feel as its GET type namesake, where it differs is when we submit it. The data that is transmitted is not done through the URL and therefore it is a much more secure transmission.
I recommend that you try the form yourself, so that there is no hint, in the browser of the information sent.
The most important thing is that you know that your data will also be sent to the server (php programming or backend), and that they will be accessible in a similar way to a form of type get.
To retrieve the value of the field sent in the form in PHP we will do it with the $_POST array:
<?php //leer datos de tipo POST $dato_campo1 = $_POST['campo1']; ?>
2.2 The Action attribute
This attribute has only one purpose: to indicate to which page/url the form data should be sent once the user submits it.
In this field you will have to indicate a URL or leave it empty if, on the contrary, you want the information to be sent to the same page in which it is found.
If you want this information to end up in a url “www.srcodigofuente.com/form-final” once the form has been sent, you would write:
<form action="http://www.srcodigofuente.com/form-final"> <input type="text" name="campo1" /> <input type="submit" value="enviar" /> </form>
This form, once confirmed, will redirect the user to the page “https://www.srcodigofuente.com/form-final?campo1=test”, on the destomp page, in addition, the information on the form will be available.
2.3 The enctype attribute
We are going to see this attribute in a basic way, so pay attention to the value-use relationships. Depending on the type of form we will use a value:
- for a general use form you will indicate “application/x-www-form-urlencoded”.
- for a html form that allows uploading files you should use the value: “multipart/form-data”.
Regardless of the type of encryption you use, you can always recover the form data with PHP’s superglobal arrays $_GET and $_POST.
3. Types of HTML forms
To be direct, and so that you can get a clear idea of the types of HTML forms that existI am going to divide the types of forms by use into 2: search engines and information input.
3.1 Search engine type form
The “Search Engine” type forms would be those forms with the sole objective of giving the user the possibility of searching or filtering information on a website.
These forms must have the ability to be saved in bookmarks or copied its url for direct access to its results later.
For this type of forms we will use the following attributes and values:
- method=”get”. For the data to be passed by the URL so that it can be copied, shared or bookmarked, so the user can access the results later.
- enctype=”application/x-www-form-urlencoded”. To code the results in a standard way.
- action=”/finder”. This value will depend on the destination of the search engine, being normally the same page for a forum search engine, or another page for a typical top menu search engine.
Search form example
<form method="get" enctype="application/x-www-form-urlencoded" action="/buscador"> <input type="text" name="texto-busqueda" placeholder="Tu texto aquí" /> <input type="submit" value="buscar" /> </form>
3.2 Form for inserting data or files
we will call data entry forms to the forms that are normally found in administration panels or places where data is requested for subsequent storage.
These forms unlike the previous ones require more security and control so that your data is not forwarded.
For a text/numeric type data entry form we will use the following attribute configuration:
- method=”post”. For the ones data is passed in a hidden way and cannot be modified by hand from a URL. With this we will avoid certain improper uses of the forms
- enctype=”application/x-www-form-urlencoded”. For encode the results in a standard way.
- action=”/result”. This value will depend on the destination of the form, normally being another page where the results are validated and stored, or on the same page, checking if the sending of data has been confirmed.
Basic example of data entry form
<form method="post" enctype="application/x-www-form-urlencoded" action="/resultado"> <input type="text" name="nombre" /> <input type="text" name="email" /> <input type="submit" value="registrarse" /> </form>
Now that you’ve seen the setup for a standard data entry form, let’s see how to create a form that solves one of the big html questions: how to upload images with html or files.
The only difference lies in the configuration of the type of encryption and a special field for attaching files to the form. Specific:
- method=”post”. For the ones data is passed in a hidden way and cannot be modified by hand from a URL. With this we will avoid certain improper uses of the forms.
- enctype=”multipart/form-data”. To code the results in a standard way.
- action=”/result”. This url depends on the strategy of your project and you should send it to at least one page where you validate that it has been sent in the form.
- Field (input) of type files to be able to attach files.
Basic example of a form with file upload
<form method="post" enctype="multipart/form-data" action="/resultado"> <input type="file" name="archivo1" /> <input type="text" name="nombre-archivo" /> <input type="submit" value="subir" /> </form>
4. Basic INPUT tags to create fields in an HTML form.
You almost have it! We just have to see what options we have when it comes to create fields in forms for data entry. The following tags are the most common and essential to provide our forms with appropriate fields for each purpose.
You should know that any HTML tag to create fields in a form allows the use of the general attributes of this markup language. That is, you can add the attribute id, classes, eventsetc.
As their own and unique attributes these tags have mainly 2:
- the attribute yam. You will have seen it throughout this article, this attribute indicates the name (must be unique) of the given field. This name will serve us later to refer to this data, either to read it in PHP with for example $_POST[‘nombre-archivo’] or to access them at javascript.
- the attribute value. This attribute allows you to define a default value for the field. For example, we could fill in the fields with previously entered values or certain ones. This attribute exists only for tags input.
For text type fields short we will use the input of type text:
<input type="text" name="texto-corto" />
To create a wider space for longer textwhere you can write paragraphs without problems, you should use another type of label, the label textarea:
<textarea name="texto-grande"></textarea>
If in your form you need a date type field you can use the input of type date available in HTML5:
<input type="date" name="fecha" />
Now another basic, the buttons, that we can create them in a different way and with different functionality.
For type buttons confirmation of the form we must indicate type submit and use the label input either button HTML. The following two buttons generate buttons with identical functionality:
<input type="submit" name="formulario-confirmado" value="Confirmar formulario" /> <button type="submit" name="formulario-confirmado2">Confirmar formulario</button>
And to buttons for another use (for example for javascript) we will use the same tags but with the type with the value button:
<input type="button" name="formulario-confirmado" value="Otro botón" /> <button type="button" name="formulario-confirmado2">Otro botón/button>
Finally, as an extra, we could create buttons with the functionality of emptying the entire form, these buttons must have the type reset:
<input type="reset" name="formulario-confirmado" value="Otro botón" /> <button type="reset" name="formulario-confirmado2">Otro botón/button>