Whenever dealing with user input, it is advisable to provide a structure so the process can be completed quickly and reliably, also limiting the amount of ‘free form’ input, which can be dangerous to allow in a public site. In HTML5, such a structure is achieved with the use of the and tags. form input Every web developer is somewhat familiar with these tags and their use. But HTML5 has made them more powerful than ever and revisiting their properties could prove beneficial for your future projects. Types, properties, names. A tag is composed of an opening tag, a body and a closing tag. We’re interested in the first two parts. form Parameters and methods. Like most HTML tags, rm admits several parameters that alter its behavior and allow it to fulfill more than one role. In the previous figure, only one parameter was present: the parameter. This is no accident, as this is the only form parameter without a default value. You could omit every other parameter and the form would still do something. fo action The action parameter determines do you want the form data to be sent as an HTTP request. Without it, your form would lose your collected data in a limbo of non-made requests. where Still, after knowing where to send your data, your form needs to know to send it. Or, more precisely, how what does my form want to get back from that request? This behavior is the responsibility of the parameter, which defaults to and defines if the form wants only to get information back, or if it wants to leave something in the request’s destination. method get Putting as the value of the parameter or omitting it means that the form will send it’s input to the destination waiting for an action to be performed there while making the value means that the form will try to perform an action in the destination and wait to get a confirmation. Remembering this is important, as you won’t be able to use as your value on most external sites. get post post Now you have managed to get your data where you want it and told the destination what you want to get back. But you still haven’t got any data. That is the job of the tag. And while there are still some parameters that you can add to your tag, it would be better to bring them up as we manage our inputs. input form Where do I type my name? If you want to allow users to give you their precious information, you need to provide a place to put it. And if the form tag is the neat package, the input tag is the gift. The input tag will create an interactive field where a user can put the required information. And as information can take many forms, so can the tag. It can gather text, it can create a checkbox to pick one, more, or none, from a small set of options; it can create a file upload field, a color picker, range selector or even a phone field. input Many are the shapes this tag can take, and it’s almost a certainty that whatever data you need from the user, this tag can handle. A complete reference can be found in Mozilla’s . site It would be impractical to list every option enabled by these types but here is a non-comprehensive list of some of the most common fields and parameters you’ll need: . Basic field for text input. Accepts some self-explanatory attributes like , and ; it can take a attribute that defines the character length of the field, and it can also take some more advanced parameters like , which takes a for matching the format of the text; or like , to enable or disable spell checking for the field. Text minlength maxlength readonly size pattern regular expression spellcheck is a staple parameter for presenting the user with some example text or an instruction. No matter what you put here, this and every other filed need to be encoded before being sent. The type of encoding is defined by the form’s parameter. Most times, the default , , is the one you will be using, but other values can be used for different purposes. placeholder enctype enctype urlencoded . This field is very similar to the text field, being able to take the same attributes. The main difference is that password will hide the text input. Password . It is, basically, a text input that, by default, matches input for email format. If your form uses the parameter , there will be no format validation for this nor for any other format-validated fields. Email no-validate . Checkboxes are two-value fields that can be either selected or deselected. When presented alone, these fields can be managed just like any other field, with the benefit of having only two values. But, when part of the same group -i.e. when they have the same - they open up more possibilities. Checkbox name You still can select/deselect as many of them as you want but, when submitted, they’ll behave as a single field and will send their data in a format, where the existence of a certain pair indicates that those boxes were checked. name=id[&name=id…] name=id . They behave mostly the same as checkboxes, but only one of them, if in a group, can be selected at the same time. Radio Buttons The range field creates a slider the user can use to select a quantity between a and parameters, which default to 0 and 100, respectively. The parameter allows you to control by how much will the slider change the value while being dragged. Range. min max step Similar to the email field, this one is a text filed that validates the user input against a URL pattern. Still, a can be provided to further your control over the field. Url. pattern Do not be deceived by this field’s name, it is functionally a text input. The main difference is that some browsers — mostly mobile — will present a phone typing keyboard when activating this filed. This is due to the many different formats that phone numbers take around the world. Using a to validate the input is recommended. Tel. pattern Both date and time fields are very useful and very similar. They both create formatted selectors that are different for each browser, can define and parameters as well as and . They can’t, however, handle a . Unsupported browsers degrade the tag to a text input, so you should be careful while handling data coming from these fields. Date and time. min max value step placeholder A more complex field used primarily to upload files from the user’s computer, but can also be used to capture new media from a device camera. It’s parameters are , which takes a string with unique , comma-separated if there are several; , which defines if a backward-facing camera/microphone should be used, or a front-facing one, with the values and respectively; is a boolean parameter that defines if a user can upload just one or multiple files; and , the last parameter, is defined when the user selects a file, contains a list of paths to all files to be uploaded, and can only hold one path unless the parameter is present. File. accept file type specifiers capture user environment multiple files multiple Remember, any form that contains this field must use the value in its parameter to function correctly. multipart/form-data enctype An input of type won’t do anything by itself when included in an HTML file, inside or outside a form, unless a behavior for it is defined with javascript. However, the special types of button and will have a default behavior when they are part of a form. The button will clear the fields to their default state, and the button will trigger the submission of the form as defined by the form’s parameters. The special buttons. button reset submit reset submit The parameter of a form will determine where the response to the form will be displayed. The default value is which will display the response in the same window and tab, as they are the current Other options include , to display the response in a new browser/tab, depending on the browser; and to display it inside a named element within the page the form was in. target _self, browsing context . _blank framename, iframe and are form parameters that can be overridden by parameters of format in this field. Method, enctype, action, target form[parameter] What is this button for? So far, we have shown some of the types of input HTML5 has access to. Something, nevertheless, seems odd. Some of our fields have formats and placeholders which can explain their purpose but, still, there are no names, no visible identifiers for the user to read. many We could add some text beside them and that would be enough, right? Yes, but HTML offers us a tag with a couple more uses for this task: the tag. label While the label tag can appear humble and similar to any other plain text tag, it has some neat utilities packed in which can make your form more accessible. First, a parameter defined as the same value of the parameter of an input field will associate the label to said field, which means that clicking the label will make the browser focus the input it is related to. for id This, for example, will make it easier to click in a small checkbox or radio button. Secondly, a label’s content will be read out loud when a screen reader user focuses on the associated input. The benefit of this is self-explanatory. A few things before GETting to work. By this point, you should have all the information you need to build semantically correct forms, modify their behavior, construct many kinds of inputs with their own parameters and options. Still, there are a few things you should remember while building your forms. While HTML5 can validate many kinds of inputs by format and file type, be aware that these validations are not bulletproof. Thew allow you some control over the input your user can give you, but they are not enough to dissuade malicious users. Think of them more like a convenience for the average user of your site and not as a security system. The tools of your trade, developer, are many and each of them has its own purpose, characteristics, and limitations. Knowing the meaning of what you type is the difference between capability and mastery. Appendix: Code shown. Forms, labels, and inputs. Forms, labels and inputs. Option 1 Option 2 < = > html lang "en" < > head < = > meta charset "UTF-8" < = = > meta name "viewport" content "width=device-width, initial-scale=1.0" < = = > link rel "stylesheet" href "./style.css" < > title </ > title </ > head < > body < = > div class "main" < > h1 </ > h1 < = = > form action "#" method "get" < = = = > input type "text" name "name" placeholder "Name" required < = = = > input type "password" name "pwd" placeholder "***" required < = = = > input type "email" name "email" placeholder "example@mail.com" required < = = = = > input type "checkbox" name "checkbox" id "checkbox-1" value "1" < = = = = > input type "checkbox" name "checkbox" id "checkbox-2" value "2" < = > div class "radio-group" < = > label for "radio-1" </ > label < = = = = > input type "radio" name "radio" id "radio-1" value "1" </ > div < = > div class "radio-group" < = > label for "radio-2" </ > label < = = = = > input type "radio" name "radio" id "radio-2" value "2" </ > div < = = = = = > input type "range" name "range" min "0" max "100" step "2" < = = = > input type "url" name "url" placeholder "https://www.example.com" < = = = = > input type "tel" name "phone" pattern "[0-9]{2}-[0-9]{4}-[0-9]{4}" placeholder "##-####-####" < = = = = = > input type "date" name "date" min "2020-01-01" max "2020-12-31" value "2020-04-15" < = = = = = > input type "time" name "time" min "09:00" max "18:00" placeholder "17:00" < = = = > input type "file" name "file" accept "image/png, image/jpeg" < = = > input type "reset" name "reset" < = = = > input type "submit" value "Submit" name "submit" </ > form </ > div </ > body </ > html Disclaimer: Some CSS was used to make it look better. Previously published at https://medium.com/@danielchincoya/forms-labels-and-inputs-what-are-they-for-and-how-to-use-them-d5cd180b1de9

Mozilla

Target

Too Long; Didn't Read

Let Your Engineers & PMs focus on Product. Apply for $50K Credits!

HTML Forms And Elements And How to Use Them

Too Long; Didn't Read

Companies Mentioned

@chincoya

RELATED STORIES