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

<input type=”button” value=”Send My Form Data”>

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.

<input type=”checkbox” id=”audia3" name=”audia3">

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

<input type=”color” id=”id-car” name=”name-car” value=”#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.

<input type=”date” id=”id-date” name=”name-date” value=”2020–07–22" min=”2020–01–01" max=”2030–12–31">

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

<input type=”datetime-local” 
  id=”id-datetime-local” 
  name=”id-datetime-local” 
  value=”2020–01–10T10:45" 
  min=”2019–01–01T00:00" 
  max=”2030–01–01T00:00">

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.

<input type=”email” id=”id-email” pattern=”[email protected]” size=”30" required>

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.

<input type=”file” id=”id-profile” name=”name-profile” accept=”image/png, image/jpeg”>

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

<input type=”hidden” id=”id-hidden” name=”id-profile” >

image: replaces images with standard input when sending forms.

<input type=”image” id=”image” 
  alt=”Submit Button” 
  src=”https://www.stickpng.com/assets/images/586383c67d90850fc3ce2914.png">

month: allows users to select month and year.

<input type=”month” id=”id-month” name=”name-month” min=”2019–01" value=”2020–01">

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.

<input type=”number” id=”id-number” name=”name-number” min=”1" max=”20">

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.

<input type=”password” id=”id-password” name=”name-password” minlength=”10" required>

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.

<input type="radio" id="audia3" name="audi">

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.

<input type=”range” id=”id-range” name=”name-range” min=”0" max=”100">

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

<input type="reset" value="Reset">

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

<input type=”search” id=”id-search” name=”name-search” aria-label=”Search content”>

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

<input type=”submit” value=”Send”>

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.

<input type=”tel” id=”id-tel” name=”name-tel” 
  pattern=”[0–9]{3}-[0–9]{3}-[0–9]{4}” required>

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.

<input type=”text” id=”id-text” 
  name=”name-text” required minlength=”1" 
  maxlength=”8" size=”10">

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.

<input type=”time” id=”id-appt” name=”name-appt” 
  min=”09:00" max=”18:00" required>

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

<input type=”url” name=”name-url” id=”id-url” 
  placeholder=”https://example.com" pattern=”https://.*" 
  size=”30" required>

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

<input type=”week” name=”name-week” id=”id-week” 
  min=”2019-W10" max=”2020-W20" required>

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/*

video/*

image/*

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

<input type="file" accept="image/*,.pdf">

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.

<input type="image" id="image" alt="Submit Button" 
src="https://www.stickpng.com/assets/images/586383c67d90850fc3ce2914.png">

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.

<div>
<label for="cc-number">Enter your credit card number</label>
<input type="number" name="cc-number" id="cc-number" autocomplete="off">
</div>

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><br>
Last name: <input type="text" name="lastname"><br>
<input type="submit"></form>

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.

<form>
<input type="radio" id="audia3" name="audi" checked>  <label for="audia3">Audi A3</label>
<br>
<input type="radio" id="audia4" name="audi">
<label for="audia4">Audi A4</label>
<br>
<input type="radio" id="audia5" name="audi">
<label for="audia5">Audi A5</label>
</form>

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.

Read full article: https://www.jotform.com/blog/create-html-form/

Originally published at https://www.jotform.com 

I'm @phyesix_en on Twitter. Thank you for reading :).