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

<form>
    <input type='text' id='text' name='Text' value='Write something here' />
</form>

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

<form>
    <input type='text' id='text' name='Text' list='options'/>
    <datalist id='options'>
        <option label='Red' value='Red' >
        <option label='Green' value='Green' >
        <option label='Blue' value='Blue' >
    </datalist>
</form>

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:

• inserting the control inside the label label

  <form>
      <label>Name: <input type='text' id='text' name='Text' value='Write something here' /></label>
  </form>

  Remaining as a result:

  Name:
  

• using your attribute for that will have as value the attribute id the control that we want to associate

  <form>
      <label for='text'>Name: </label><input type='text' id='text' name='Text' value='Write something here' />
  </form>

  Remaining as a result:

  Name:
  

Passwords

It is similar to the text box, but to create a password attribute type we will assign the value password

<form>
    <label for='pass'>Password: </label><input type='password' id='pass' name='Pass' pattern='(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}' />
</form>

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

<form>
    <label for='mail'>Email: </label><input type='email' id='mail' name='Mail' pattern='[a-z0-9]+@[a-z0-9]+\.[a-z]' />
</form>

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

<form>
    <label for='url'>URL: </label><input type='url' id='url' name='Url' />
</form>

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

<form>
    <label for='tel'>Phone: </label><input type='tel' id='tel' name='Tel' />
</form>

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

<form>
    <label for='search'>Search: </label><input type='search' id='search' name='Search' />
</form>

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

<form>
    <label>Sex</label>
    <label for='man'>Man:</label><input type='checkbox' id='man' name='sex' />
    <label for='woman'>Woman:</label><input type='checkbox' id='woman' name='sex' checked />
</form>

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

<form>
    <label>Colors</label>
    <label for='red'>Red:</label><input type='radio' id='red' name='color' />
    <label for='green'>Green:</label><input type='radio' id='green' name='color' checked />
    <label for='blue'>Blue:</label><input type='radio' id='blue' name='color' />
</form>

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

env
<form>
    <input type='button' id='button' name='Button' value='Generic button' onclick='alert("You pressed the button");'/>
</form>

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

<form>
    <input type='submit' id='submit' name='Submit' value='Sent' /><span class ="tr_" id="tr_300" data-source="" data-orig="Sent" data-hidden="y"></span>
</form>

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

<form>
    <input type='image' id='imagesubmit' name='ImageSubmit' src='/wp-content/uploads/2019/09/server_go.png' />
</form>

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

<form>
    <label for='text'>Name: </label><input type='text' id='text' name='Text' value='Write something here' />
    <input type='reset' id='reset' name='Reset' value='Reset' />
</form>

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

<form name='formfile' method='POST' enctype='multipart/form-data' >
    <label for='file'>Attach an image: </label><input type='file' id='file' name='image' acept='image/jpeg, image/png' />
</form>

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

<form>
        <label for='number'>Number: </label><input type='number' id='number' name='Number' min='0' max='10' step='2' value='0' />
</form>

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

<form>
    <label for='range'>Range: </label><input type='range' id='range' name='Range' min='1' max='5' step='1' value='3' />
</form>

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

<form>
    <label for='color'>Color: </label><input type='color' id='color' name='Color' value='#FF0000' />
</form>

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

<form>
    <label for='date'>Date: </label><input type='date' id='date' name='Date' step='1' min='2019-01-01' max='2019-12-31' value='2019-01-01' />
</form>

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

<form>
    <input type='hidden' id='session' name='Session' value='1' />
    <input type='hidden' id='machine' name='Machine' value='Win32' />
    <input type='hidden' id='navigator' name='Navigator' value='Chrome' />
</form>

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

<form>
    <label for='textarea'>Comments: </label>
    <textarea id='textarea' name='TextArea' rows='4' cols='50' maxlenght='100'>Write your comment here</textarea>
</form>

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

<form>
    <label for='select'>Select a color</label>
    <select id='select' name='select'>
        <option value='red'>Network</option>
        <option value='green' selected>Green</option>
        <option value='blue'>Blue</option>
    </select>
</form>

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

<form>
    <legend>Login for User</legend>
    <label for='user'>User: </label><input type='text' id='user' required />
    <label for='pass'>Password: </label><input type='password' id='pass' required />

    <input type='submit' id='submit' name='Submit' value='Send'>
</form>

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: