HTML Form <form>

HTML forms collect data and act as a point of interaction between a visitor and your website.

Forms are quite common on web pages, usually most web pages have a Contact Us form for example, however there is a lot of flexibility in terms of the information you collect as well as the formatting.

All HTML forms work similarly.

Initially, the user is required to input information, varying based on the nature of the form.

Second, the user must click the Submet button to ensure that all the information is directed to a separate page where it is processed.
Processing can entail a lot of things – checking against existing databases, sending a portion of the form to the credit card company to process and so on.

This section discusses the varied range of form input types available to use and how to create a form to collect all the essential data we need.

However, we will not discuss the processing of form data as it a vastly broad subject, and it usually involves a different language such as PHP.

There are also many no-code form builders which help with all the hard lifting – they allow you to visually build your form and define what needs to happen in terms of the processing, and then spit out code back to you which you can place in your HTML web page.

Example a popular no-code form builder which I have used is Formstack. There are a ton of third-party integrations already available as well, so it makes it easy to build a form, process the information in multiple ways, like sending the email address to Mailchimp if the user opted in, process a payment by sending credit card info to Stripe etc.

I strongly suggest you learn the fundamentals of the front-end of forms in HTML using our tutorial below.

After which, it may be most efficient to use a solution like Formstack to continue forward.

 

Building a Form

All HTML forms have the same general layout.

To begin a form, we use the <form> tag.

We must incorporate different attributes in the same tag to alter the output.

Initially, we must mention the action attribute, which defines the name of the web page where the browser should direct all the information once the user has filled out the form and pressed the submit button.

Next, we must include the method attribute.

It instructs the browser how it should deliver the information to the subsequent page.

It may be classified into two methods; either “get” or “post.”

The “get” method involves sending information as part of the URL to the next web page.

The “post” method sends the information in a hidden format.

If we dismiss the method characteristic, the default “get” method will be appointed by the form data.

This method, however, is restricted to a 100 character limit, and therefore, you will probably find the post method more useful.

So our opening tag then becomes:

<form action=”pagetoprocessdata.php” method=”post”>

Once we begin our form, we can include any combination of input tags that we desire.

We will outline the types of input tags and their outputs in detail below.

Lastly, we’ll need to include a Submit button.

The function is as implied by the name – it submits the data collected through the form to a distinct web page, which has been specified in the action attribute included in the form tag, which processes the data.

Although the button is named “Submit”, you can name it whatever you like by changing the value attribute:

<input type=”submit” value=”Go!”/>

Output:

The Submit input tag is closed while the form is closed using </form> when all elements have been added.

 

HTML Form Text Boxes

The first commonly used element in forms is the text box.

These inputs are ideal for obtaining information like name and subject, basically any information that you would collect with single line of text or characters.

1. To include text input, use the HTML input tag.

2. To specify your desired text input type, you must mention the type attribute.

3. Provide a name for your input. Names must be unique in order to keep data unique when passed forward.



<form>

Name:
<input type="text" name="name" />

<br />

Subject:
<input type="text" name="subject" />

</form>


Output:

Name:


Subject:

You can further control the size of the fields and the maximum amount of allowable characters by using the size and maxlength attributes.

Let’s add these attributes in and see what happens:



<form>

Name:
<input type="text" name="name" size="50" maxlength="50" />

<br />

Subject:
<input type="text" name="subject" size="40" maxlength="30" />

</form>


Output:

Name:


Subject:

 

Now try typing characters in the name field vs the subject field.

You’ll notice that even though the size (width) of both fields is the same, the subject field caps the amount of text allowed at 20 characters.

 

HTML Form Text Area

HTML text inputs are beneficial when the amount of information you wish to collect is small.

For example, name or age, but they might restrict the collection of large amounts of data or text, such as comments or feedback.

Textarea inputs are ideal for larger amounts of text and allow you to alter and adjust the dimensions of the display box according to your specifications.

This provides the user with a much more user friendly space to type in larger amounts of text.

To include an HTML text area, we need to use the textarea tag and not the commonly used input tag.

To specify dimensions, we use the column and row attributes.

Here’s an example:



<form>

Name:
<input type="text" name="name" size="80" maxlength="80" />

<br />

Subject:
<input type="text" name="subject" size="80" maxlength="20" />

<br />

Comments:
<textarea name="comments" cols="40" rows="4">
Optional placeholder text can be added here
</textarea>

</form>


Output:

Name:


Subject:


Comments:

 

HTML Form Checkbox

HTML checkboxes come in handy when you want to provide the user with the capability of selecting more than one option.

Checkboxes are very easy to incorporate in your forms.

Use the usual <input> tag with checkbox as the type attribute.

Use the name attribute to name the option and the value attribute to collect related data that would make sense once processed. For example, the value can be a 0 or 1, or can also be the name of the option.

By default all checkboxes are left empty.

If you want to have them checked instead, you can use the value checked in the checked attribute

Here’s an example:



<form>

Name:
<input type="text" name="name" size="80" maxlength="80" />

<br />

Subject:
<input type="text" name="subject" size="80" maxlength="20" />

<br />

Why did you choose our paid service?
<br />
<input type="checkbox" name="cheaper" value="cheaper" />  Cheaper
<br />
<input type="checkbox" name="features" value="features" />  Better Features
<br />
<input type="checkbox" name="easier" value="easier" checked="checked" />  Easier To Set Up
<br />
<input type="checkbox" name="ads" value="1" />  Tired of seeing ads

<br />

Comments:
<textarea name="comments" cols="40" rows="4">
Optional placeholder text can be added here
</textarea>

</form>


Output:

Name:


Subject:


Why did you choose our paid service?

Cheaper

Better Features

Easier To Set Up

Tired of seeing ads

Comments:

The third option, we’ve pre-checked it, just to show you how the code works.

The fourth option, Tired of Seeing Ads, we set the value as 1.

On post processing, we can use this as criteria not to show ads to users on our service who have selected this, as we know they’re going to get annoyed by ads.

Example if statement: if ads=1, don’t show ads

You will observe that users are free to choose as many boxes they like without the restriction of a minimum or maximum number to be selected.

This feature may not be beneficial in some cases, where you want to allow the user to choose just one suitable option.

If that’s the case, a radio button will probably be a better option.

 

HTML Form Radio Button

HTML radio buttons are different from the checkboxes in that they can offer the user several options, however the user can only select one option.

There are several use cases where you would want the user to only select A or B, not both.

If the input type has multiple choices, use the same name attribute as seen below.



<form>

Name:
<input type="text" name="name" size="80" maxlength="80" />

<br />

Subject:
<input type="text" name="subject" size="80" maxlength="20" />

<br />

Monthly Budget:
<br />
<input type="radio" name="budget" value="under1K" />  Under $1,000
<br />
<input type="radio" name="budget" value="1to5K" />  $1,000 to $5,000
<br />
<input type="radio" name="budget" value="5to10K" />  $5,000 to $10,000
<br />
<input type="radio" name="budget" value="over10K" />  Over $10,000
<br />

Comments:
<textarea name="comments" cols="40" rows="4">
Optional placeholder text can be added here
</textarea>

</form>


Output:

Name:


Subject:


Monthly Budget:

Under $1,000

$1,000 to $5,000

$5,000 to $10,000

Over $10,000

Comments:

 

This way, we can collect all of the data under the budget field, so it’s easier to process and consume later on as it makes sense as a set.

As you begin to build forms, it will be easier to choice between checkboxes and radio buttons based on your use cases.

 

HTML Form Select List

While checkboxes and radio buttons are great when you want the user to choose from multiple options, what happens when you have 100 different options?

We can’t really have 100 different checkboxes, as that’s a poor user experience.

In this case we use select lists.

They allow us to provide users a wide range of options from which they can choose one ore more that are applicable to them

To begin a select list, we have to include the specific HTML <select> tag.

To populate options on the same list, we use the <option> tag.

To introduce every new option, we have to include a new <option> tag, then type our option and include the </option> closing tag.



<form>

Name:
<input type="text" name="name" size="80" maxlength="80" />

<br />

Subject:
<input type="text" name="subject" size="80" maxlength="20" />

<br />

Monthly Budget:
<br />
<input type="radio" name="budget" value="under1K" />  Under $1,000
<br />
<input type="radio" name="budget" value="1to5K" />  $1,000 to $5,000
<br />
<input type="radio" name="budget" value="5to10K" />  $5,000 to $10,000
<br />
<input type="radio" name="budget" value="over10K" />  Over $10,000
<br />

Please select your state:
<select name="state">
<option value="CA">California</option>
<option value="FL">Florida</option>
<option value="NV">Nevada</option>
<option value="NJ">New Jersey</option>
<option value="MI">Michigan</option>
<option value="OH">Ohio</option>
<option value="TX">Texas</option>
</select>

<br />

Comments:
<textarea name="comments" cols="40" rows="4">
Optional placeholder text can be added here
</textarea>

</form>


Output:

Name:


Subject:


Monthly Budget:

Under $1,000

$1,000 to $5,000

$5,000 to $10,000

Over $10,000

Please select your state:

Comments:

 

Pretty neat right!

To further elaborate, we can also adjust the way select lists are displayed and add the ability to select multiple items in a select list.

By adding the size attribute, we change the list from a dropdown selection to a text box type field with a scroll, if the list of options is longer than the size we have chose.



<form>

Please select your state:
<select name="state" size="7">
<option value="AZ">Arizona</option>
<option value="CA">California</option>
<option value="GA">Georgia</option>
<option value="FL">Florida</option>
<option value="NV">Nevada</option>
<option value="NJ">New Jersey</option>
<option value="MI">Michigan</option>
<option value="OH">Ohio</option>
<option value="TX">Texas</option>
</select>

</form>


Output:

Please select your state:

One more attribute to discuss is the multiple attribute.

Using this attribute will automatically amend the list and change its structure from a drop-down menu to a simple, flat list.

This will allow the user to choose multiple options as opposed to a drop-down list.

In the below example, you will note that we do not have the size attribute any longer, however the list atuomatically changes from a drop down to a text area.



<form>

Please select your state:
<select name="state" multiple="multiple">
<option value="AZ">Arizona</option>
<option value="CA">California</option>
<option value="GA">Georgia</option>
<option value="FL">Florida</option>
<option value="NV">Nevada</option>
<option value="NJ">New Jersey</option>
<option value="MI">Michigan</option>
<option value="OH">Ohio</option>
<option value="TX">Texas</option>
</select>

</form>


Output:

Please select your state:

 

Users can click and drag down to select multiple options or hold the Ctrl button while they click to select multiple options.

 

Hidden HTML Form Fields

Sometimes, you will come across the need to pass on information by sending information that you don’t want to disclose to the users of your website.

For example, this data may comprise variables that inform the processing page about the source of information and how it shall be treated or dealt with.

To fulfill this purpose, we employ the HTML hidden input.

The hidden input fields are not visible to the user and therefore users are unable to manipulate them.

We assign a specific value to them and can add them anywhere within the form tags, I usually add them in towards the bottom.

Use the input tag for hidden fields like this:

<input type=”hidden” name=”landingpage” value=”1″ />

In the past I’ve used hidden fields to identify the page the form was sent for so that it could trigger the appropriate next set of events tailored to that landing page.

 

HTML Form Submit Button

A proper HTML form will bring us no benefit on its own.

It only becomes useful when we can gather the information collected by the form and send it all to another web page, where the information will be processed, and something fruitful can be done with it.

Our next step may be to store the data in a database and engage automated rules to process it.

We use a submit button to direct all the content gathered through the form to a processing web page.

At the beginning of this guide, we touched on the action attribute in the initial opening form tag.

To reiterate, this tag will inform the browser as to where it should direct all of the user’s responses once they have completed the form and pressed the submit button.

<form action=”pagetoprocessdata.php” method=”post”>

To actually have the data move forward, we’ll need a submit button:

<input type=”submit” value=”Go!”/>

You can amend the value attribute to change the text on the button to make it read whatever you want. It can be “Submit”, “Go” or anything else.

Just make sure that the type in the input is set to “submit” and the function of the tag will remain the same despite the text displayed.

Here’s an example:



<form action="pagetoprocessdata.php" method="post">

Name:
<input type="text" name="name" size="80" maxlength="80" />

<br />

Subject:
<input type="text" name="subject" size="80" maxlength="20" />

<br />

Monthly Budget:
<br />
<input type="radio" name="budget" value="under1K" />  Under $1,000
<br />
<input type="radio" name="budget" value="1to5K" />  $1,000 to $5,000
<br />
<input type="radio" name="budget" value="5to10K" />  $5,000 to $10,000
<br />
<input type="radio" name="budget" value="over10K" />  Over $10,000
<br />

Please select your state:
<select name="state">
<option value="CA">California</option>
<option value="FL">Florida</option>
<option value="NV">Nevada</option>
<option value="NJ">New Jersey</option>
<option value="MI">Michigan</option>
<option value="OH">Ohio</option>
<option value="TX">Texas</option>
</select>

<br />

Comments:
<textarea name="comments" cols="40" rows="4">
Optional placeholder text can be added here
</textarea>

<br />

<input type="submit" value="Go!"/>
</form>


Output:

Name:


Subject:


Monthly Budget:

Under $1,000

$1,000 to $5,000

$5,000 to $10,000

Over $10,000

Please select your state:

Comments: