HTML Web Forms

With web forms, you can collect information from users. Web forms can collect any information like name, email address, message, images, files from your computer, and so on.

images/articles/html/html-forms.webp

When you fill out a form, the information is sent to the web server. In HTML, forms are created with the <form> element. The action attribute tells the form where to go or what to do when the user clicks the Submit button. For example,

<form action="#">
 <input type="text" name="email">
 <input type="submit" name="submit">
</form>

HTML5 web forms have introduced new form elements, input types, attributes, and other features. Earlier, you had to resort to JavaScript to create these features. They are now available directly in the browser. All you need to do is set an attribute in your markup to make them available.

With client-side validation being handled natively by the browser, there is greater consistency across different sites, and many pages will load faster without all that redundant JavaScript.

1. Input Elements

There are many ways to get input through a form, each with its own specific name or type of input.

  1. text: one-line text input field
  2. password: password field; The characters in a password field are masked (shown as asterisks or circles)
  3. submit: button for submitting form data to a form-handler; The form-handler is typically a server page with a script for processing input data. The form-handler is specified in the form's action attribute.
  4. reset: button that will reset all form values to their default values
  5. radio: select only one of a limited number of choices
  6. checkbox: select zero or more options of a limited number of choices
  7. file: file with a MIME type and optionally a file name
  8. hidden: string that is not displayed to the user
  9. button: defines a button

Most of the form elements are variations of the same tag. The <input> tag can be used to create single-line text boxes, password boxes, buttons, and even invisible content (such as hidden fields).

The input element has three common attributes:

  1. type: The type attribute indicates the type of input element this is. For example, text.
  2. id: The id attribute creates an identifier for the field. When you use a programming language to extract data from this element, use the id to specify which field you are referring to.
  3. value: The name attribute determines the default value of the text box. If you leave this attribute out, the field will be empty.

2. HTML5 Input Types

HTML5 added several new input types. New input types that are not supported by older web browsers behave as text input. HTML5 has a total of 13 new input types:

  1. color
  2. date
  3. datetime
  4. datetime-local
  5. email
  6. month
  7. number
  8. range
  9. search
  10. tel
  11. time
  12. url
  13. week

1. datetime

A date and time (year, month, day, hour, minute, second, fractions of a second) encoded according to ISO 8601 with the time zone set to UTC. This includes both the date and time, separated by a "T". 

2. datetime-local

A date and time (year, month, day, hour, minute, second, fractions of a second) encoded according to ISO 8601, with no time zone information.

3. date

A date (year, month, day) encoded according to ISO 8601. This comprises the date (year, month, and day), but no time.

4. month

A date consisting of a year and a month encoded according to ISO 8601.

5. week

A date consisting of a year and a week number (from 1 to 52) encoded according to ISO 8601.

6. time

A time (hour, minute, seconds, fractional seconds) encoded according to ISO 8601.

7. number

The number type provides an input for entering a number. The step attribute specifies the precision, defaulting to 1. Usually, this is a spinner box, where you can either enter a number or click on the up or down arrows to select a number.

The number input has min and max attributes to specify the minimum and maximum values allowed.

8. range

The range input type displays a slider control. It is used for input fields that should contain a value from a range of numbers. As with the number type, it allows the min, max, and step attributes.

The difference between number and range is that the exact value of the number is unimportant with range. It is ideal for inputs where you want an imprecise number. For example, a customer satisfaction survey asking clients to rate aspects of the service they received.

The default value of a range is the midpoint of the slider - halfway between the minimum and the maximum.

9. email

The email type is used for specifying one or more email addresses. This type is used for input fields that should contain an email address. If you try to submit a form with content unrecognizable as one or more email addresses, the browser will tell you what is wrong.

10. url

The url input is used for specifying a web address. This type is used for input fields that should contain a URL address.

11. search

The search input type provides a search field, a one-line text input control for entering one or more search terms. 

The difference between the text and the search is that on platforms where search fields are distinguished from regular text fields, the search state might result in an appearance consistent with the platform's search fields rather than appearing like a regular text field.

12. tel

For telephone numbers, use the tel input type. All over the world countries have different types of valid phone numbers, with various lengths and punctuation, so it would be impossible to specify a single format as standard. 

You can encourage a particular format by including a placeholder with the correct syntax. Additionally, you can stipulate a format by using the pattern attribute.

13. color

The color input type provides the user with a color picker.  The color picker returns a hexadecimal RGB color value, such as #FF3300.

3. The select Element (Dropdown List)

The <select> element defines a drop-down list. The <option> elements defines an option that can be selected. By default, the first item in the drop-down list is selected. To define a pre-selected option, add the selected attribute to the option.

<select id="planet">
 <option value="venus">Venus</option>
 <option value="mars">Mars</option>
 <option value="earth">Earth</option>
 <option value="saturn">Saturn</option>
</select>

4. The textarea Element

In HTML5, there is the wrap attribute. This attribute applies to the textarea element, and can have the values soft (the default) or hard.

With soft, the text is submitted without line breaks other than those actually entered by the user, whereas hard will submit any line breaks introduced by the browser due to the size of the field. If you set the wrap to hard, you need to specify a cols attribute.

5. Other Elements

A fieldset is a special element used to supply a visual grouping to a set of form elements or fields. The <fieldset> element is used primarily for layout and accessibility.

The <legend> element, a part of the fieldset, creates the heading of the fieldset and a box surrounds the inputs in the form. Like <fieldset>, the <legend> element is entirely optional.

The <div> elements used to create each row of inputs. The <label> elements are used to show friendly name of what an input does.

<form action="#">
 <fieldset>
  <legend>Form Information</legend>
  <div>
   <label for="username">Name:</label>
   <input id="username" type="text" name="username">
  </div>
  <div>
   <label for="email">E-mail Address:</label>
   <input id="email" type="text" name="email">
  </div>
 </fieldset>
</form>

6. The form Element

The action of a form points to the server program that will handle the input from the form. It is where the form sends its data. In HTML5, the forms no longer need to have the action attribute defined. If omitted, the form will behave as though the action were set to the current page.

The method attribute tells the form how to send the data to the server. There are two methods for this - GET and POST. The GET method is appropriate for small forms, whereas the POST method is appropriate for larger forms or ones that need to send a lot of information.

When you use a GET method, the form's content is sent as part of the URL.

7. HTML5 Form Attributes

1. The required Attribute

The required attribute insists to have a value. The Boolean required attribute tells the browser to only submit the form if the field is filled out correctly. 

<input type="text" name="search" required />

If a required field is empty or invalid, the form will fail to submit, and focus will move to the first invalid form element. The required attribute can be set on any input type except button, range, color, and hidden, all of which generally have a default value.

2. The placeholder Attribute

The placeholder attribute provides a hint to the user of what can be entered in the field. The placeholder text disappears when the field gains focus, and reappears on blur if no data was entered.

<input type="text" name="search" placeholder="Search the web" />

3. The pattern Attribute

The pattern attribute enables you to provide a regular expression that the user's input must match in order to be considered valid. For any input where the user can enter free-form text, you can limit what syntax is acceptable with the pattern attribute.

When including a pattern, you should always indicate to users what is the expected (and required) pattern.

4. The disabled Attribute

The disabled attribute can be used with any form control except the output element. HTML5 allows you to set the disabled attribute on a fieldset and have it apply to all the form elements contained in that fieldset.

The form elements with the disabled attribute have the content grayed out in the browser. The text is lighter than the color of values in enabled form controls. Form controls with the disabled attribute are not submitted along with the form. So, their values will be inaccessible to your form processing code on the server side. If you want a value that users are unable to edit, but can still see and submit, use the readonly attribute.

5. The readonly Attribute

The readonly attribute is similar to the disabled attribute. It makes the form element impossible for the user to edit the form field. However, unlike disabled, the field can receive focus, and its value is submitted with the form.

6. The multiple Attribute

The multiple attribute indicates that multiple values can be entered in a form control. While it was available in previous versions of HTML, it only applied to the select element. In HTML5, it can be added to email and file input types as well. If present, the user can select more than one file, or include several comma-separated email addresses.

7. The form Attribute

The form attribute allows you to associate form elements with forms in which they are not nested. This means you can now associate a fieldset or form control with any other form in the document. The form attribute takes as its value the id of the form element with which the fieldset or control should be associated.

If the attribute is omitted, the control will only be submitted with the form in which it is nested.

8. The autocomplete Attribute

The autocomplete attribute specifies whether the form, or a form control, should have autocomplete functionality. For most form fields, this will be a drop-down that appears when the user begins typing. For password fields, it is the ability to save the password in the browser.

By default, autocomplete is on. In order to disable it, use autocomplete="off". This is a good idea for sensitive information, such as a credit card number, or information that will never need to be reused, like a captcha.

9. The datalist Element and the list Attribute

It is  a text field with a set of predefined autocomplete options. Unlike the select element, the user can enter whatever data they like, but they will be presented with a set of suggested options in a drop-down as they type.

The datalist element, much like select, is a list of options, with each one placed in an option element. You then associate the datalist with an input using the list attribute on the input. The list attribute takes as its value the id attribute of the datalist you want to associate with the input. One datalist can be associated with several input fields.

10. The autofocus Attribute

The Boolean autofocus attribute specifies that a form control should be focused as soon as the page loads. Only one form element can have autofocus in a given page.