How to Create HTML Forms Like a Pro

• Create, forms

23 min. (4566 words)

how-to-create-html-forms-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:

…

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:

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: