HTML forms: Learn how to create them like a pro

One of the main drivers of business success is good customer relations. Companies must listen to their customers and take appropriate action. Many online businesses collect feedback from their customers through online forms.

You can see these forms on the contact page of almost every website. They ask for the following basic information:

• Name
• Email
• Message

The comments companies receive from these contact pages can affect their road maps. Have you ever wondered how these forms work? Let’s take a look at them together, beginning with the basics and ending with more advanced topics.

Note: What I’m going to talk (write) about requires some HTML knowledge.

The form element: <form>

<form> … </form>

First, you need to enable users to interact with you — through a form. You can improve the form with various input, textarea, checkbox, radio, button, and submit elements.

Let’s examine these elements, beginning with a brief description of attributes:

Attributes add properties to an element. Each element has tags that specify what it can do and have a key=“value.” I will build them with you below.

The input element: <input>

<input />

The input element creates a field where text can be entered. With the type attribute, you can further customize this element and allow it to do specific work.

Input types:

• button: sends information in the form to the backend. It can perform any function within the page.

• checkbox: used for single or multiple selection. Checkbox creates a small square box in the browser. When users click on the box, a check mark appears.

• color: allows the user to visually select a color. The selection screen may appear differently in different browsers. You can also enter the color manually in six-character hexadecimal format (# FF0000).

• date: used for date selection. You can use attributes to limit your selection from or to a specific date. You can make it easier for users by allowing them to click to select a date. This selection screen may appear differently in different browsers.

• datetime-local: date allows users to select date and time separate from input type. Users can select day, month, year, hour, and minute. You can limit this selection by providing minimum and maximum date-time intervals. The dropdown box may vary according to browser types.

Note: There was no seconds option at the time of writing. :)

• email: used to enter an email address. You can support a specific domain extension. The pattern structure allows you to verify emails. You can use multiple attributes to separate email addresses with commas.

• file: allows the user to select one or more files from their computer for upload. It’s possible to submit these files to the server using forms or through the JavaScript API. You can use the accept attribute to limit the file extensions that will be accepted.

• hidden: creates inputs that the user cannot see. This is usually used to send information to the backend.

• image: replaces images with standard input when sending forms.

• month: allows users to select month and year.

• number: allows users to enter numbers. This type of input prevents users from entering characters rather than numbers. You can specify minimum and maximum values.

• password: allows users to enter passwords. Each character that’s entered is marked with a “*” or “•” (this varies according to browser), ensuring that the entered information remains secure. You can make passwords more secure by specifying minimum or maximum values.

• radio: allows a single selection from multiple choices. Radio creates a small round box in the browser. When a user clicks on a radio button, a check mark appears.

• range: allows users to make a selection within a certain range. It creates a round horizontal slider in the browser. The user can scroll left or right to make a selection.

• reset: clears all inputs in a form. This is a very useful button for long- form entries, such as survey entry.

• search: creates a text input field where users can input a search term. Backend JavaScript development is required to create a search button.

• submit: sends all inputs entered into the form to the server.

• tel: allows users to enter a phone number. Since there are multiple formats used throughout the world, you can specify a specific format. This type of input opens the keyboard to numbers instead of text for mobile users.

• text: allows the user to enter a single line of text. This is one of the most used input types. You can specify the text length with minimum and maximum values.

• time: allows users to select a time within a specific period. Users can enter values in hours and minutes. You can distinguish between the 12-hour clock or the 24-hour clock according to the user’s operating system.

• url: allows users to enter URLs. You can control these values by creating a specific pattern.

• week: allows the user to enter the week and year. It uses the standard ISO 8601 week number (i.e., week 1 to 52 or 53).

Attributes

You can add more attributes using input attributes. As you can see in the examples below, there are many options, such as allowing for autocomplete when typing, limiting uploads to particular file extensions, and setting minimum or maximum values for text entry.

Let’s take a look at these features.

accept (place to use — input type=“file”)

Usually used in file input type, this value allows the user to select specific file types during file selection. You can add more than one type by separating types with a comma.

audio/* = allows users to select audio files.

video/* = allows users to select video files.

image/* = allows users to select image files.

.pdf = allows users to select only files with a .pdf extension.

alt (place to use — input type=“image”)

This is typically used in the image input type. If the image you want to use cannot be loaded, it will be displayed by the alternative text browser. This value shouldn’t be empty; it should contain information related to the image used.

autocomplete

If the user has given permission, this attribute is used to present the values that the user has previously entered in the input fields as suggestions.

This attribute provides convenience by automatically completing information, such as name, surname, email, address, or phone number, that the user begins to enter. Up-to-date browsers can store user credit card information in encrypted format.

Autocomplete may require the following to work:

1. Input must have name and id attributes.
2. It should be used inside the input form element.
3. The form must have a submit button.

autofocus

This Boolean value focuses on the input it’s applied to when the page loads. It cannot be used with a hidden input type because the user won’t be able to see it.

checked (place to use — input type=“checkbox” and input type=“radio”)

This Boolean value checks the input used when the page loads. It’s usually used with checkbox and radio input types.

dirname

When the form is submitted, dirname sends the text direction of the input value to the server.

Note: I have never used this one. :)

disabled

This Boolean value disables input. The user cannot interact with this field. The field is displayed with a dimmer color or grayed out in the browser. No inputs for this field are sent when the form is submitted.

form

This attribute specifies the forms an input element belongs to. The form’s ID should match this form attribute. If the form attribute doesn’t exist, the input matches the closest form element that contains it.

formaction (place to use — input type=“submit” and input type=“image”)

The formaction attribute specifies where form data is sent when the form is submitted. When this attribute is added, it changes where the form is sent.

formenctype (place to use — input type=“submit” and input type=“image”)

When the form is submitted, formenctype specifies how input data should be encoded. This changes the default enctype value of the form.

Below are three different types:

application/x-www-form-urlencoded: the default value, sent with the encodeURI() function; all characters are encoded.

multipart/form-data: uses the FormData API to send data; characters aren’t encoded. This attribute is used when the form allows for file uploads.

text/plain: characters aren’t encoded, and data is displayed the way it is sent. This is the riskiest method because the data isn’t formatted for machine understanding and behaves unpredictably.

formmethod (for type=“submit” and type=“image”)

The formmethod attribute specifies how to submit the form. There are three different ways to submit the form:

get: ends the URL with “?”. This attribute adds a question mark to all input data in the form. The URL is sent to the server as an HTTP get request. This method is often used for simple form structures that contain ASCII characters. This value is a default.

post: The body containing the input data in the form is sent as an HTTP post request. This is usually used for more complicated forms.

dialog: This method usually indicates that the button closes things like dialogs. No form data is transferred.

formnovalidate (for type=“submit”)

This Boolean value allows the form to submit the input contents without checking the specified patterns before submission. It overrides the novalidate attribute in these inputs.

formtarget (for type=“submit” and type=“image”)

The formtarget attribute determines where the response will be displayed after the form is submitted. There are three different types:

_self: opens the responses in the current page. This is the default.

_blank: opens the responses in a new browser page.

_parent: loads the response in the parent browsing context of the current page.

_top: loads the response in the top-level browsing context; this is the browsing context that is the topmost ancestor of the current context.

height (for type=“image”)

The height attribute specifies the height, in pixels, of the image used in the input. If you’re using the height type, you must also enter the width and height values. The browser will create a field based on these values.

max

The max attribute determines the maximum value that can be entered in the field. The max and min attributes work with the following input types: number, range, date, datetime, datetime-local, month, time, and week.

maxlength

The maxlength attribute specifies the maximum number of characters that can be included in the input element.

multiple (for type=“email” and for type=“file”)

This Boolean value allows the user to enter more than one value. The multiple attribute works with the following input types: email and file.

list

This attribute provides users with suggested options below the input field.

name

This attribute names an input. It distinguishes this input from others and allows the value to be received.

placeholder

The placeholder attribute provides the user with a hint about what they should input into a field. A brief description or example appears in the input field before a user enters a value.

pattern

The pattern attribute establishes a pattern for the data structure. The information the user enters is checked against this pattern before submission.

readonly

This Boolean value makes the input type readable only. The user cannot change this value; it can be changed only in the backend with JavaScript. The biggest difference between a read-only field and a disabled field is that a read-only field can be sent while the disabled input field isn’t sent during form submission.

required

This Boolean value checks whether the field is full/filled before form data is submitted. It returns an error if the field is empty.

size

The size attribute determines the width of an input element. In select elements, the size attribute determines how many visible options are available.

src (only for type=“image”)

The src attribute provides the location, or URL, of an image.

step

This attribute allows you to increase the values entered in the input by a specific amount. If the step is 5, the input values should be 0, 5, 10, 15, and so on. Step is usually used with min and max attributes.

tabindex

Tabs allow users to quickly navigate through form inputs by using the tab key instead of using a mouse. The tabindex attribute provides focus to tabbed elements in an order that differs from the default source code. It also gives usually untabbed elements, like paragraphs, tab focus. Tabindex consists of positive numbers. If a negative number is used, that input will not receive focus.

type

This attribute determines the input type used. There are different uses:

value

The value attribute determines what the current value of the input is. When “button” is used for “reset” and “submit,” it defines the text in the button.

The button element: <button>

<button>

The button element provides users with the ability to take action on a form.

Attributes

autofocus

This Boolean value focuses on the input it’s applied to when the page loads. It cannot be used with a hidden input type because the user won’t be able to see it.

disabled

This Boolean value disables input. The user cannot interact with this field. The field is displayed with a dimmer color or grayed out by browsers. No inputs for this field are sent when the form is submitted.

form

This attribute specifies the forms an input element belongs to. The form’s ID should match this form attribute. If the form attribute doesn’t exist, the input matches the closest form element that contains it.

formaction (input type=“submit” and input type=“image”)

The formaction attribute specifies where form data is sent when the form is submitted. When this attribute is added, it changes where the form is sent.

formenctype (for type=“submit” and type=“image”)

When the form is submitted, formenctype specifies how input data should be encoded. This changes the default enctype value of the form.

Below are three different types:

application/x-www-form-urlencoded: the default value, sent with the encodeURI() function; all characters are encoded.

multipart/form-data: uses the FormData API to send data; characters aren’t encoded. This attribute is used when the form allows for file uploads.

text/plain: characters aren’t encoded, and data is displayed the way it is sent. This is the riskiest method because the data isn’t formatted for machine understanding and behaves unpredictably.

formmethod (for type=“submit” and type=“image”)

The formmethod attribute specifies how to submit the form. There are three different ways to submit the form:

get: ends the URL with “?”. This attribute adds a question mark to all input data in the form. The URL is sent to the server as an HTTP get request. This method is often used for simple form structures that contain ASCII characters. This value is a default.

post: The body containing the input data in the form is sent as an HTTP post request. This is usually used for more complicated forms.

dialog: This method is usually used to indicate that that button closes things like dialogs. No form data is transferred.

formnovalidate (for type=“submit”)

This Boolean value allows the form to submit the input contents without checking the specified patterns before submission. It overrides the novalidate attribute in these inputs.

formtarget (for type=“submit” and type=“image”)

The formtarget attribute determines where the response will be displayed after the form is submitted. There are three different types:

_self: opens the returned responses in the current page. This is the default.

_blank: opens the responses in a new browser page.

_parent: loads the response in the parent browsing context of the current context.

_top: loads the response into the top-level browsing context; this is the browsing context that is the topmost ancestor of the current context.

name

This attribute names an input. It distinguishes this input from others and allows the value to be received.

type

This attribute determines the input type used. There are different uses:

value

Value determines what the current value of the input is. When “button” is used for “reset” and “submit,” it defines the text in the button.

The datalist element: <datalist>

The datalist element provides an autocomplete feature for a form. It’s used to provide predefined answer options.

Attributes

This element has no attributes other than the global attributes common to all elements.

The fieldset element: <fieldset>

This element groups input types within the form. It usually appears as a box in the browser. The legend tag provides a caption for the fieldset element.

Attributes

disabled

This Boolean value disables input. The user cannot interact with this field. The field is displayed with a dimmer color or grayed out by browsers. No inputs for this field are sent when the form is submitted.

form

This attribute specifies the forms an input element belongs to. The form’s ID should match this form attribute. If the form attribute doesn’t exist, the input matches the closest form element that contains it.

name

This attribute names an input. It distinguishes this input from others and allows the value to be received.

The label element: <label>

The label element names elements, such as button, input, meter, output, progress, select, or textarea, in the form. Labels help users understand how to fill out these elements in the form.

Attributes

for

This attribute specifies which element in the form matches which label. It matches the ID of an element with the string written for it.

form

This attribute specifies the forms an input element belongs to. The form’s ID should match this form attribute. If the form attribute doesn’t exist, the input matches the closest form element that contains it.

The legend element: <legend>

The legend element is used with the fieldset element. It defines the title of the grouped section.

Attributes

This element has no attributes other than the global attributes common to all elements.

The meter element: <meter>

This element represents a value within a specified range.

Attributes

min
The min attribute determines the minimum value that can be entered in the field. The max and min attributes work with the following input types: number, range, date, datetime, datetime-local, month, time, and week.

max

The max attribute determines the maximum value that can be entered in the field. The max and min attributes work with the following input types: number, range, date, datetime, datetime-local, month, time, and week.

low

This attribute must be greater than the value used in the minimum attribute but less than the value used in the maximum and high attributes.

high
This attribute must be less than the value used in the maximum attribute but greater than the value used in the low and min attributes.

optimum

This attribute is the optimal numeric value. It falls between the values specified in the min and max attributes. If the value is between the min and low attributes, the minimum value is accepted.

value

This attribute determines the current value of the input. When “button” is used for “reset” and “submit,” it defines the text in the button.

The opt group element: <optgroup>

This element groups related options in a dropdown list.

Attributes

disabled

This Boolean value disables input. The user cannot interact with this field. The field is displayed with a dimmer color or grayed out by browsers. No inputs for this field are sent when the form is submitted.

label

This attribute names the group where it’s used. This value is displayed as disabled in the dropdown, which allows the user to more easily make selections.

The option element: <option>

This element defines items listed in select, optgroup, and datalist elements. It’s used for menu items in popups, dropdown lists, and other lists.

Each option element must have a value attribute. If there is no value attribute, the value is determined from the text in the element.

Attributes

disabled

This Boolean value disables input. The user cannot interact with this field. The field is displayed with a dimmer color or grayed out by browsers. No inputs for this field are sent when the form is submitted.

label

Values for in this attribute are used in place of the listed elements. They are usually listed in dropdowns because they are shorter versions of the list options.

selected

This Boolean value automatically selects the value.

value

This attribute determines the current value of the input. When “button” is used for “reset” and “submit,” it defines the text in the button.

The output element: <output>

This input type shows the results of a calculation.

Attributes

for

The for attribute defines the relationship between a calculation and the elements used in the calculation.

form

This attribute specifies the forms an input element belongs to. The form’s ID should match this form attribute. If the form attribute doesn’t exist, the input matches the closest form element that contains it.

name

This attribute names an input. It distinguishes this input from others and allows the value to be received.

The progress element: <progress>

The progress element displays an indicator that shows the user how much progress they have made. This element is usually rendered as a progress bar.

Attributes

max
The max attribute for the progress element defines how much work is required to complete a task.

value

This attribute determines the current value of the input. When “button” is used for “reset” and “submit,” it defines the text in the button.

The select element: <select>

This element creates a dropdown list of options. Users can select an option from this list. The ID matches the for attribute in the label element, and the name attribute distinguishes it from other elements in the form.

Attributes

autocomplete

If the user has given permission, this attribute presents the values that the user has previously entered in the input fields as suggestions.

The autocomplete attribute provides convenience by automatically completing information, such as name, surname, email, address, or phone number, that the user begins to enter. Up-to-date browsers can store user credit card information in encrypted format.

Autocomplete may require the following to work:

1. Input must have name and id attributes.
2. It should be used inside the input form element.
3. The form must have a submit button.

autofocus

This Boolean value focuses on the input it’s applied to when the page loads. It cannot be used with a hidden input type because the user won’t be able to see it.

disabled

This Boolean value disables input. The user cannot interact with this field. The field is displayed with a dimmer color or grayed out in the browser. No inputs for this field are sent when the form is submitted.

form

This attribute specifies the forms an input element belongs to. The form’s ID should match this form attribute. If the form attribute doesn’t exist, the input matches the closest form element that contains it.

multiple

This Boolean value allows the user to enter one or more values in the input element. The multiple attribute works with the following input types: email and file.

name

This attribute names an input. It distinguishes this input from others and allows the value to be received.

required

This Boolean value checks whether the field is full/filled before form data is submitted. It returns an error if the field is empty.

size

The size attribute determines the width of an input element. In select elements, the size attribute determines how many visible options are available.

The textarea element: <textarea>

This is a multiline text field that is often used in comment or feedback forms. It allows the user to easily write and edit long text entries.

Attributes

autocapitalize

This feature is supported by WebKit on iOS for iOS 5 and later. The autocapitalize attribute controls whether the text is automatically capitalized when it’s entered/edited. There are several possible values:

none: turns off this feature.

sentences: replaces the first letter of the first word in each sentence with capital letters.

words: capitalizes the first letter of each word.

characters: capitalizes all letters.

autocomplete

If the user has given permission, this attribute presents the values that the user has previously entered in the input fields as suggestions.

The autocomplete attribute provides convenience by automatically completing information, such as name, surname, email, address, or phone number, that the user begins to enter. Up-to-date browsers can store user credit card information in encrypted format.

Autocomplete may require the following to work:

1. Input must have name and id attributes.
2. It should be used inside the input form element.
3. The form must have a submit button.

autofocus

This Boolean value focuses on the input it’s applied to when the page loads. It cannot be used with a hidden input type because the user won’t be able to see it.

cols

This attribute determines the width of the input field. The default value of this positive attribute is 20.

form

This attribute specifies the forms an input element belongs to. The form’s ID should match this form attribute. If the form attribute doesn’t exist, the input matches the closest form element that contains it.

maxlength

This attribute specifies the maximum number of characters that can be entered in the field.

minlength

This attribute specifies the minimum number of characters that can be entered in the field.

name

This attribute allows you to name an input. It distinguishes this input from others and allows the value to be received.

placeholder

The placeholder attribute provides the user with a hint about what they should enter in a field. A brief description or example appears in the input field before a user enters a value.

readonly

This Boolean value makes the input type readable only. The user cannot change this value; it can be changed only in the backend with JavaScript. The biggest difference between a read-only field and a disabled field is that a read-only field can be sent while the disabled input field isn’t sent during form submission.

required

This Boolean value checks whether the field is full/filled before form data is submitted. It returns an error if the field is empty.

size

The size attribute determines the width of an input element. In select elements, the size attribute determines how many visible options are available.

rows

This attribute determines the height/number of lines of the text input field. This value is a positive number.

spellcheck

The spellcheck attribute specifies whether the browser/OS should spell check the text area. There are two values this attribute can have:

true: The browser will check the spelling of text.

false: The browser will not check the spelling of text.

wrap

This attribute determines how the text in the text area will wrap when a form is submitted. This attribute can have one of several values:

hard: The browser automatically adds line breaks (CR + LF), so that each line cannot exceed the control width. The cols attribute must also be specified for this to work.

soft: The browser ensures that all line breaks in the value consist of a CR + LF pair, but does not add additional line breaks. This is the default value.

off: When wrap is off, line breaks are handled like they are when set to soft, but instead of a CR+LF pair, the browser transforms line breaks that cross columns into white spaces. Lines aren’t wrapped, and the text area becomes horizontally scrollable.

You must use various skills to create a form like a pro, and design plays a vital role. To learn more about form design, you can check 46 Form Design Best Practices.