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.

Pro Tip

If you have no idea about HTML, do not worry! Try JotForm today to create beautiful online forms!

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 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.

<form action=”#”>
First name: <input type=”text” name=”firstname” autofocus>
Last name: <input type=”text” name=”lastname”>
<input type=”submit”>
</form>

Try 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.

<input type=”text” id=”someid” disabled>

Try 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.

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.

Pro Tip

If you have no idea about HTML, do not worry! Try JotForm today to create beautiful online forms!

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.

This article is originally published on Sep 17, 2019, and updated on Feb 07, 2020

Send Comment:

JotForm Avatar

Comments:

Podo CommentBe the first to comment.