Form
A form is required on any web page, as they allow the user to send data to the server
The most common example is the form of registration or login
The forms use the element form
Within this element will be the controls that make up the form, and will be of those controls which will extract the information that you will receive the server
At the time of defining a form we have to enter the URL which will receive the data and what type of HTTP method we want to use
We have the following attributes:
- id
it is a unique identifier, it is very useful to recognize the element from JavaScript or to process it from the server
- name
this will be the name of the data that will be sent with the HTTP request, can be accessed from JavaScript or from the URL indicated in the attribute action to receive the data on the server
- action
normally contains the URL of the application that will receive the response on the server
For example a PHP script, although it could also be a JavaScript code file
- method
type of HTTP method to send the data to the server
Maybe:
- GET
sends the information to the server as parameters within the URL specified in the attribute action
These parameters will be visible in the navigation bar and it is only possible to send up to 500 bytes
For security, it is not recommended to use this method, since the data sent is exposed in the navigation bar and someone outside the user, could manipulate them before being processed by the server
- POST
sends the information to the server in the same HTTP request
You do not have the size limitation on the data sent
Allows you to send attachments and the data sent are not visible in the browser bar
It is recommended to use this method for security, as it makes it difficult for data manipulation before being processed by the server, although it is still possible
Input elements
The item input serves to create the vast majority of controls that can be used in a form
Depending on its attributes you can create buttons, checkboxes and even attach files
The vast majority of these controls are new thanks to the HTML5 standard such as controlling dates, colors, etc; and work through browser-specific dialog boxes
Because of this circumstance, they may differ from browser to browser or even unsupported if it is very old or does not support HTML5
It has general attributes that all elements input possess and specific attributes for each type of item
General attributes:
- id
it is a unique identifier, it is very useful to recognize the element from JavaScript or to process it from the server
- name
this will be the name of the data that will be sent with the HTTP request, can be accessed from JavaScript or from the URL indicated in the attribute action to receive the data on the server
- type
is the specific type of control, this attribute tells the browser what to paint on screen and what additional attributes it might contain
So it's important that if you have specific attributes for that type, we choose them correctly or the browser will ignore them by not understanding them
- form
form identifier, binds the control to the form by the value of its attribute id
Specific attributes:
- checked
indicates that the control has been selected
It is used only with the checkboxes and the checkboxes option
- autocomplete
tells the browser to fill in the field with the data entered by the user previously
It cannot be used ely with check boxes, option boxes, or buttons
- list
is used to define a list of default values that will be displayed to the user as possible inputs by the user
It cannot be used ely with check boxes, option boxes, or buttons
It is used by associating the id of the control to an item datalist in which we will list the elements that make up the list
These values are read-only, the user cannot modify them or add new
The item datalist has no display associated with it, however it can be associated by its id an element label with the that we can display the value chosen from the list
- maxlenght
indicates the maximum length that we can use in the text entered
Used with text box controls or those similar to it (text, password, email, url, tel, search, etc)
- placeholder
allows you to add a default text to give an idea to the user the type of control that is or what it is expected to enter in the same
When used, the element is not usually used label
- pattern
indicates a regular expression that will be used by the browser to validate the value entered in the field
In case the value entered does not fit the regular expression, it will display an error message to the user indicating it
Used with text box controls or those similar to it (text, password, email, url, tel, search, etc)
- multiple
used with the types email and file
Allows you to include more of an e-mail address or attach more than one file
- readonly
prevents the field to be modified by the user
The browser displayed darkened to indicate to the user that can not be modified
The value of the field will necessarily attribute value, so it needs to have some value
- required
tells the browser that the field is required to be some value
It is very useful for performing validations because in case the field has not been filled in, it will display an error message to the user
Text boxes
To create a text box in the attribute type we will assign the value text
It has the specific attribute value in which is saved the default value that will be displayed to the user
Has No closing tag
The example specified a form skeleton without attributes, because we don't need it to be functional to display the various controls. We're going to do it with all the examples from now on
We've also included a text box control with the attribute value with the default value Write something here
It is a good practice to fill in this value for the user to have a visual aid of what they are expected to fill in the control
Remaining as a result:
We can also use the item datalist to show the user a list of default values as possible inputs to the text control
In the example you have specified a list of colors by using the attribute list whose value is the attribute id the datalist
In addition, we can use the attribute label to display a label with the content of the selected value
Once a value is selected, we can check that we can't modify it or add a new value, but if you delete it to choose another value from the list
Remaining as a result:
Descriptive labels
In the example above we saw how to create a text box, but for the user it might not be clear what was expected to be filled in the control
To fix it we use the attribute value to show a default value
But we can do it through a descriptive label, using the element label
A label label will be associated always with an element input
We can use two methods to perform this association:
Passwords
It is similar to the text box, but to create a password attribute type we will assign the value password
In the example we can see that the main feature of this control is that the contents of the text box is camouflaged
However, if we use the GET method that password will be visible in the browser bar
That is why it is advisable to use the POST method if you're going to enter passwords
We also have included the attribute pattern that corresponds with a regular expression that adds more security in the validation if you do not meet the format of the expression
The example expression has forced at least one number, one lowercase letter, one uppercase letter, and its length to be eight characters
Remaining as a result:
E-mail
It is similar to text box but in order to create an e-mail to the attribute type we will assign the value email
In the example we can see that the main feature of this control is that the contents of the text box are validated and if an invalid email address is entered, the browser will display an error message
We also have included the attribute pattern that corresponds with a regular expression that adds more security in the validation if you do not meet the format of the expression
In the example expression, at least one lowercase letter or number before the @ has been forced, at least one lowercase letter or number before the. and two or three letters after the.
Remaining as a result:
URL
It is similar to the text box, but to create a URL to the attribute type we will assign the value url
In the example we can see that the main feature of this control is that the contents of the text box are validated and if an invalid URL is entered, the browser will display an error message
Remaining as a result:
Phone
It is similar to the text box, but to create a phone to the attribute type we will assign the value tel
In the example we can see that there is no significant difference with respect to the text box
You could just appear any icon or special image that is generated by the browser or by using a CSS style sheet
Remaining as a result:
Search
It is similar to the text box, but to create a search to the attribute type we will assign the value search
In the example we can see that there is no significant difference with respect to the text box
You could just appear any icon or special image that is generated by the browser or by using a CSS style sheet
Remaining as a result:
Check boxes
To create a set of check boxes with the attribute type we will assign the value checkbox
In this case, the value next to the button will be the same as the attribute name and use the same to form the group of exclusive selection
Has No closing tag
In the example you have specified the choice of gender and has marked the sex Woman by default, using the reserved word checked
Remaining as a result:
Keep in mind that if we check a box it will remain checked until we uncheck it again, if we want the effect of unchecking the unelected options, we will have to use JavaScript
Boxes option
To create a set of boxes option to the attribute type we will assign the value radio
In this case, the value next to the button will be the same as the attribute name and use the same to form the group of exclusive selection
Has No closing tag
In the example you have specified a group of colors and set the color Green by default, using the reserved word checked
Remaining as a result:
Buttons
The buttons normally used to control the send and reset the form
We can add new functionalities to our form using the buttons to activate them when you press them
To do this we will use or a picture or a generic button to which you then assign JavaScript or use Jquery to provide the programming
To create a button with the attribute type we will assign the value button
Has No closing tag
In the example you have used the attribute value to show the user a text and can recognize it
And the attribute onclick which is an event that allows the button to execute JavaScript code, in this case a warning to the user that the button has been pressed
Remaining as a result:
Submit the form
To create a button to submit the form to the attribute type we will assign the value submit
Has No closing tag
In the example you have used the attribute value to show the user a text and can recognize it
This example does not send anything to the server because you have not used the attributes action indicating the target URL or method indicating the GET or POST method
Remaining as a result:
We can also simulate the behavior of a submit button from an image
In the example you have used the attribute value to show the user a text and can recognize it
This example does not send anything to the server because you have not used the attributes action indicating the target URL or method indicating the GET or POST method
Remaining as a result:
Reset the form
To create a button to reset the form with the attribute type we will assign the value reset
Has No closing tag
In the example you have used the attribute value to show the user a text and can recognize it
Si escribimos algo en el cuadro de texto podremos comprobar que si pulsamos el botón reset el contenido del cuadro de texto vuelve a ser su valor por defecto
Remaining as a result:
Attach files
To create a button that allows to attach files to the attribute type we will assign the value file
This button will only be useful if we have chosen the POST method and have included at item form the attribute enctype=’multipart/form-data’
Además del botón aparece una etiqueta con el estado del archivo adjunto, que nos dirá si hay un archivo adjunto y en caso de haberlo su nombre y extensión
Pressing the button opens a system file explorer to the user, with which you can select the file you want to attach
Has No closing tag
In the example you attach a picture to the form, although it is not functional because it has not been added to the attribute action nor does it have a button to submit the form
You have used the attribute ok to tell the browser what MIME-types you may receive the browser when you press the button
In this case, you can only receive images of type jpeg and png
Remaining as a result:
Numbers
To create a box that can force the user to enter a number to the attribute type we will assign the value number
Has No closing tag
The example used the attributes:
- min
numeric value of minimum supports, the box
- max
maximum numeric value that supports the box
- step
controls the increase in numbers, if omitted, by default it is 1
- value
numeric value by default
Remaining as a result:
Ranges
To create a range of numbers that can force the user to enter an approximate number to the attribute type we will assign the value range
Has No closing tag
The example used the attributes:
- min
numeric value minimum that supports the range
- max
maximum numeric value that supports the range
- step
controls the increase in numbers, if omitted, by default it is 1
- value
numeric value by default
Remaining as a result:
Color palette
To assign a color from the palette to the attribute type we will assign the value color
Has No closing tag
In the example it has been used in the attribute value the default hexadecimal #FF0000
Remaining as a result:
Calendar
To assign a date from one calendar to the attribute type we will assign the value date
Has No closing tag
The example used the attributes:
- min
value of minimum date that supports the range of dates
- max
value of maximum date that supports the range of dates
- step
controls the increase in dates in the calendar, if omitted, by default it is 1
- value
date value by default
Keep in mind that the format for dates that are supported by the control is YYYY-MM-DD, es decir, A para un año con 4 dígitos, M para un mes de 2 dígitos y D para un día de 2 dígitos todos ellos separados con el símbolo –
Remaining as a result:
Hidden
Sometimes there is information that the developer does not want the user to be able to see, for this the hidden fields are used
These are fields that the user cannot see, but that are sent next to the form to the server
To assign hidden field to the attribute type we will assign the value hidden
Has No closing tag
The example sends three hidden fields giving the server information about the client, without that information appearing in the user's browser
Remaining as a result:
We shouldn't be able to see any of the hidden fields in the browser, but if we use our browser option View code, we can see that in fact, these fields exist
Text box multiple lines
It is similar to the text box but allows you to write more than a line to do this we will use the item textarea
In the example we can see that the most significant difference with respect to the text box is that we can use more than one line
In addition, we have specified with the attribute rows the number of rows to 4, with the attribute al the number of columns at 50 and with the attribute maxlength the maximum number of characters at 100
Remaining as a result:
Selection lists
The item select it serves to create a drop-down list selection
Its scheme is very similar to text boxes, although its contents cannot be modified, only selected
The elements option form the list and the server will be sent in value of your attribute value
In the example you have specified a list of selection of colors and it has set the color Green by default, using the reserved word selected
Remaining as a result:
Groupings of elements
The item fieldset serves to group related items together
In the example created a group to contain the user access control through login
It has been used the item legend that serves as a title or caption of the group
You have used the attribute required for the fields user and pass are mandatory and if we try to submit the form, the browser will show us an error message
The result is a box that contains all controls and has as its title Login for User
Remaining as a result:
