What is a Form?

When browsing websites, you may have come across designs like the one shown in the image below.

Fields where information can be entered are called “forms.”

When you enter information into a form and press the submit button, the information is sent to the server.

Forms are not just for entering text; they include “select boxes” for choosing from multiple options, “checkboxes” for selecting multiple options, and “radio buttons” for selecting only one option from several.

In this chapter, we will first learn how to input various forms in HTML, and in the next chapter, we will learn about how these forms interact with the server.

Input Form

An input form is used when you want to enter text that fits in a single line, as shown in the image below.

The HTML syntax is as follows:

<input type="text" name="family-name">

The syntax is straightforward: enclose with the <input> tag and specify the type and name attributes. Note that the form type changes with the type attribute, so it requires attention. Also, the name attribute is necessary when sending to the server, so ensure to set a unique name for each input. Remember, the input tag does not require a closing tag.

Examples of Input Form Use

• When you want to enter a name
• When entering a telephone number
• When entering an email address
• When entering an address

Checkbox

Checkboxes are used when you want to select multiple options from several choices.

The code is written as follows:

<label><input type="checkbox" value="1" name="check">check 1</label>

<label><input type="checkbox" value="2" name="check">check 2</label>

<label><input type="checkbox" value="3" name="check">check 3</label>

Use the input tag as with text forms, but specify checkbox for the type attribute.

The value attribute contains the data to be sent to the server.

In the above example, the server receives the value of the checked numbers 1, 2, or 3.

To display text next to a checkbox, enclose the input tag with a label tag and insert the desired text after the input tag.

【Examples of Checkbox Use】

• When you want to select multiple hobbies from a list of options

Radio Button

Radio buttons are similar to checkboxes, but they are used to select only one option from several.

The way to write the code is very similar to checkboxes, simply change the type attribute to radio.

<label><input type="radio" value="1">radio 1</label>

<label><input type="radio" value="2">check 2</label>

<label><input type="radio" value="3">radio 3</label>

【Examples of Radio Button Use】

• When you want to choose one option from several, like selecting gender

Select Box

A select box, like a radio button, is a form used to select one option from multiple choices.

The code is written as follows:

<select name="selectbox">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
</select>

Unlike other forms, the select box does not use the <input> tag but uses the <select> tag.

Furthermore, the <option> tag is used to input values.

It’s good to choose between radio boxes and select boxes based on the number of options.

The select box options are not displayed until clicked, allowing for a cleaner display.

【Examples of Select Box Use】

• When selecting from a large number of options, like choosing a prefecture

Text Area

Finally, the text area.

A text area is similar to a text form but is useful for entering longer text that requires line breaks.

The code is written as follows:

<textarea name="long-text" rows="5">Please enter details</textarea>

The <textarea> tag, unlike the input tag, is unique.

The name attribute etc. has the same meaning as

The Process of Sending Form Data

To send data, you need to specify:

• What is being sent
• Where it’s being sent to
• How it’s being sent

These three elements are crucial. In the previous chapter, we created the form, addressing the “what” aspect. This chapter will cover the “where” and “how.”

Setting Up the <form> Tag to Define the Form

To send data to a server, you need to use the <form> tag.

Although we have learned how to write form elements like:

<input type="text" name="address">

You actually need to enclose these elements within the <form></form> tags to send them.

Then, within this form tag, you specify:

• Where to send
• How to send

Specifying “Where” to Send (action attribute)

The “action attribute” specifies where the data created by the form should be sent.

By specifying the action attribute, you can instruct the program to:

“Send the values created by the form to this location.”

The method of description is as follows, where you can set a path to send:

<form action="http://foo.com">
    <input type="text" name="address">
</form>

By writing this way, the text entered in the input will be sent to “http://foo.com.”

Specifying “How” to Send (method attribute)

Next, you need to specify how to send the data. This involves understanding “HTTP Methods,” which are essentially “methods of sending.”

Common HTTP Methods include:

• GET (to retrieve data)
• POST (to create data)
• PUT (to update data)
• DELETE (to delete data)

Forms typically use the “POST” or “PUT” methods to create data. The syntax is as follows:

<form action="http://foo.com" method="post">
    <input type="text" name="address">
</form>

By specifying an HTTP method in the method attribute, you can define the “how” part of the process.

Sending by Pressing a Button

Finally, we discuss sending by pressing a button. There are several ways to send, but the most standard method is by pressing a submit button. You can create a submission button by including the following code within the <form> tag:

<input type="submit" value="送信">

Key points to remember:

1. Use the input tag.
2. Specify submit as the type.
3. Define the button text using the value attribute.

When you set the type attribute of an input tag to “submit,” the input tag appears as a button instead of a form.

Pressing this button sends the values inside the form to the location set in the action attribute, using the method specified in the method attribute.

The Process After Submission

Let’s look at the process after pressing the submit button.

For example, the flow after sending an inquiry from a “Contact Us” page is as follows:

On the server side, a security check called “validation” is typically performed first.

If there are no issues in the validation check, the process of saving the data in the database follows.

Once the saving process is completed, the server instructs the browser to move to the “completion page.”

When the browser receives this instruction, the page changes, and the interaction with the server is completed.

What is Validation Check?

Validation is, simply put, a process of verifying whether the entered values are correctly filled in.

For example, if you create a form where only numbers, like a phone number, should be entered, validation is the role of checking if only numbers have been entered.

It involves checks like:

1. Input check
2. Format check
3. Verification of validity

The goal is to check for unintended values before saving them to the database.

Validation plays a crucial role as storing unintended values in the database can lead to critical system bugs.

Validation Checks Possible in HTML

The required attribute allows you to enforce mandatory validation on input tags. If nothing is entered, an alert like this can be triggered.

Besides required, there are also:

• pattern… Specifying an input pattern (only for fields like text where free input is allowed)
• maxlength… Specifying the maximum length (only for fields allowing free input)
• minlength… Specifying the minimum length (only for fields allowing free input)
• max… Maximum value (only for numbers or dates)
• min… Minimum value (only for numbers or dates)
• step… Increment of the value (only for numbers or dates)

Feel free to utilize these as needed.

Learn Frontend with Skilled

At Skilled, we offer a specialized, practical programming learning service focused on frontend development.

We cover everything from coding to becoming a frontend engineer. Our service emphasizes practical learning while coding, ensuring that you gain “skills” rather than just knowledge.

We’re currently running a free trial campaign. If you’re interested, we encourage you to take advantage of this free trial.

Click here for a free Skilled trial