in

Learn HTML For Beginner (Part 9: Form Element)

The form is one of the most important aspects of a website. Almost every web has a form as a means of interaction with the end. Is it used for registers, logins, polls, or for a search box?

The process of creating forms is actually quite complex, because we not only deal with HTML, but also with other web technologies such as PHP (for processing forms), MySQL (for storing form results), and JavaScript (making validations).

HTML provides many tags and attributes related to the form. Plus HTML5 brings various new features such as validation. Therefore, the discussion about forms will be broken down into 2 chapters.

Because there is quite a lot of discussion about forms, I will divide it into 2 chapters. In this chapter, we will discuss how to use basic forms. These tags and attributes are fully supported by all web browsers, including older web browsers such as IE 6, 7 and 8.

Whereas in the next chapter we will focus on discussing the new features brought by HTML5. These features are only supported by modern web browsers.

Element Form

All form objects (text boxes, radio buttons, checkboxes, etc.) must be between the opening tag <form> and the closing tag </form>. This tag is useful as a container or container from the form.

No matter how many form objects are between these tags, it is still considered one form. The number of forms in each HTML page is not limited, so we can create 2, 3 or 10 forms on 1 page. The <form> tag is included in the block-level element.

Here is an example of writing a framework for a form:

<form>
...
... form object here
...
</form>

Action Attribute

The action attribute is used to write the address of the file to which data is sent. Usually, the value of the action attribute is the address of a PHP page (or other server programming language) that is used to process the contents of the form.

Following is an example of writing an action attribute in the form:

<form action = "processform.php">
...fill the form...
</form>

The form above will send the form results to the process.php page for further processing on the server-side.

Method Attributes

The method attribute serves to tell the web browser how to send form data. This attribute can be filled with getting or post values.

The difference between getting and post is more technical. As an illustration, if we write the attribute method = “get”, then the contents of the form data will be added to the URL address (visible in the web browser’s address bar). Meanwhile, if you use method = “post”, the contents of this form data will not be seen.

As the name implies, method = “get” is used if the form will ‘fetch’ something from the server (such as displaying articles or displaying search results), while method = “post” is more suitable for forms that will ‘input’ something into the webserver ( such as a registration form) or a form with confidential data (such as a login form). However, its nature is only a recommendation. We can use the get or post method for any purpose.

Both the get and post methods have a maximum limit of characters that can be sent. This depends on the web browser and web server being used. As an illustration, the get method generally supports up to 2kB characters (around 2000 characters), while the post method can support up to 2GB characters (around 2 billion characters). Therefore, if the form submitted is long enough, you should use the post method.

If the method attribute is not written, the web browser will use method = “get” as the default value.

Following is an example of writing method attributes:

<form action = "processform.php" method = "post">
...fill the form...
</form>

The form above will send the form data value to the processform.php page using the post method.

Input Element Type Text (text box)

The simplest form object (and also the most widely used) is the text box. The text box is seen as a rectangular box where users can type something into this box. The text box is also called the ‘input type text’ because to create a text box, we add the type = “text” attribute to the <input> tag.

The <input> tag is a ‘universal’ tag that is used to create almost all form objects. The value of this type of attribute will distinguish one type of form object from one another. Writing <input> tags also do not require a closing tag or it is known as a self-closing tag.

Here is an example of making a text box in HTML:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learning HTML Forms</title>
</head>
<body>
<form action="prosesform.php" method="post">
   <input type="text">
</form>
</body>
</html>
Form Element

If you run the above code, you will see an input box.

We can also add a little text before the <input> tag as an explanation of the use of this text box, like the following example: 

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learning HTML Forms</title>
</head>
<body>
<form action="prosesform.php" method="post">
  <p>Name : <input type="text"></p>
  <p>Address : <input type="text"></p>
</form>
</body>
</html>
Form Element

In the example above, I made 2 text boxes to hold the name and address values.

The text box above is inside the <p> tag. This style of writing complies with the HTML5 specification where each form object is a separate part and is considered a paragraph. Even so, you don’t have to follow writing like this. Some web programmers choose to use the <li> or <div> tag for each form object.

Name Attribute

The <input> tag can be added with various attributes. One of the most important is the name attribute. This attribute acts as a marker and is useful when the form will be processed.

The following is an example of using the name attribute for the text box:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learning HTML Forms</title>
</head>
<body>
<form action="prosesform.php" method="post">
  <p>Name : <input type="text" name="user_name"></p>
  <p>Address : <input type="text" name="user_address"></p>
</form>
</body>
</html>

If you run the HTML code above, you won’t see any changes. The name attribute is used only for form processing and has no effect on appearance. The name attribute can be used for all form objects.

To describe the function of the name attribute, the form above can be accessed from the PHP programming language using the following code:

 <?php
echo $_POST[‘user_name '];
echo $_POST['user_address'];
?>

I did not discuss PHP in this tutorial. The code above is only to explain the use of the name attribute. Note that I use $ _POST because in <form> it uses method = “post”. If I change the method attribute to “get”, then in PHP it uses the $ _GET variable.

Value Attribute

The value attribute is useful for assigning values to a form object. Especially for the text box, the value of the value attribute will be displayed as the initial value. If the user does not change it, this value will be sent to the server for processing.

Following is an example of using the value attribute in the text box:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learning HTML Forms</title>
</head>
<body>
<form action="prosesform.php" method="post">
  <p>Name : <input type="text" name="user_name" value="John Doe"></p>
  <p>Address : <input type="text" name="user_address" value="City XYZ"></p>
</form>
</body>
</html>
Form Element

When you run the above code, the text box automatically contains the value according to the value attribute. This attribute can be used for all other form objects.

If you want the text to disappear when you start typing, HTML5 provides a placeholder attribute (which we will discuss in the next chapter).

Size attribute

We can also adjust the length of the text box displayed by using the size attribute. The value of this attribute is a number expressed in units of letters.

For example, if I make size = “5”, the length of the text box will be set to 5 characters long. However, because the length of one character differs from other characters and is also influenced by the type of font, this value is only as a reference.

Following is an example of using the size attribute:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learning HTML Forms</title>
</head>
<body>
<form action="prosesform.php" method="post">
  <p>Name : <input type="text" name="user_name" size="5"></p>
  <p>Address : <input type="text" name="user_address" size="30"></p>
</form>
</body>
</html>
Form Element

As seen from the form display, even though using the size = “5” attribute, I can input up to 7 numbers. If this attribute is not written, the default value used by the web browser is size = “20”. This attribute can be used for all form objects in the form of text boxes.

Readonly attribute

If we want a form object that cannot be changed by the user, we can use the readonly attribute.

The readonly attribute will make the form object irreversible, but the user can still interact with this object, for example clicking text. The resulting display also looks like an ‘ordinary’ form object.

Here is an example:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learning HTML Forms</title>
</head>
<body>
<form action="prosesform.php" method="post">
  <p>Name : <input type="text" name="user_name" value="John Doe" readonly></p>
  <p>Address : <input type="text" name="user_address" readonly></p>
</form>
</body>
</html>
Form Element

The two text boxes above will not be filled. But as you can see, both of them look like ‘normal’ form objects. This attribute can be used for the majority of other form objects.

Writing the readonly attribute like the example above is a method used by HTML. If you have studied XHTML, the method of writing is readonly = “readonly”. You can also use this method of writing.

Disabled attribute

The disabled attribute effect is similar to readonly, which makes the form object inaccessible. However, unlike readonly, the display form disabled object will be grayed out as a sign of inaccessibility.

Following is an example of using disabled attributes:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learning HTML Forms</title>
</head>
<body>
<form action="prosesform.php" method="post">
  <p>Name : <input type="text" name="user_name" value="John Doe" disabled></p>
  <p>Address : <input type="text" name="user_address" disabled></p>
</form>
</body>
</html>
Form Element

The readonly and disabled effects are generally used in conjunction with JavaScript. Thus, we can reactivate this form object using JavaScript.

Just like readonly, we can also write this attribute with XHTML writing style, which is disabled = “disabled”.

Maxlength attribute

The maxlength attribute is used to limit the number of digit characters in a text box. The value of this attribute is a number that indicates how many maximal digit characters are allowed.

For example, if I make maxlength = “10”, the text box will limit the input to 10 digit characters.

Following is an example of using the maxlength attribute:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learning HTML Forms</title>
</head>
<body>
<form action="prosesform.php" method="post">
  <p>Name : <input type="text" name="user_name" maxlength="4"></p>
  <p>Address : <input type="text" name="user_address" maxlength="10"></p>
</form>
</body>
</html>
Form Element

If you run the above code, we cannot input more than 4 characters as username.

But keep in mind that this limitation can be removed by the user. To be more secure, we should check the character length on the server-side (using PHP).

Input Element Type Submit

The <input type = “text”> tag that we learned before is one of many form objects in HTML. Before we study other form objects, I will first discuss how to submit forms to the server for processing using the submit button.

To send forms to the server, HTML provides the <input type = “submit”> tag. This tag still uses the <input> tag, but it looks like a button. Following is an example of its use:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learning HTML Forms</title>
</head>
<body>
<form action="prosesform.php" method="post">
  <p>Name : <input type="text" name="user_name"></p>
  <p>Address : <input type="text" name="user_address"></p>
  <p><input type="submit"></p>
</form>
</body>
</html>
Form Element

As you can see, the <input type = “submit”> tag is in the form of a button. When this button is clicked, the form will be directly sent to the processform.php page (according to the action attribute on the form tag).

By default, the submit button will display variously. Mozilla Firefox will display this button with the name “Submit Query” while Google Chrome will display “Submit” only. To change this text, we can use the value attribute. Here is an example:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learning HTML Forms</title>
</head>
<body>
<form action="prosesform.php" method="post">
  <p>Name : <input type="text" name="user_name"></p>
  <p>Address : <input type="text" name="user_address"></p>
  <p><input type="submit" value="Send Data"></p>
</form>
</body>
</html>
Form Element

This time the submit button will be displayed with the text: Send Data.

If you pay attention, in the example code above I use the method = “get” attribute, so that the results of the form can be seen in the URL address of the web browser. If I fill out the form name = John,

and address = XYZ, and click the “Send Data” button, then the address bar will see the following code:

file: /// D: /learn_html/prosesform.php?user_name = John&user_address=XYZ

Look at the characters after the question mark, which is the part:

user_name=John&user_address=XYZ

This is the result of the form that will be sent to the webserver (PHP) for processing. The “&” sign is used to separate the value of form objects with the value of other form objects. If you change the form method attribute to post, then you won’t see anything at the URL address (but the form value will still be sent).

Although it looks irrelevant, we can also add the name attribute to the submit button, so that the value is sent to the server. This works for the form confirmation process (using PHP). Here is an example:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learning HTML Forms</title>
</head>
<body>
<form action="prosesform.php" method="post">
  <p>Name : <input type="text" name="user_name"></p>
  <p>Address : <input type="text" name="user_address"></p>
  <p><input type="submit" value="Send Data" name="form_register"></p>
</form>
</body>
</html>

Target Attribute

When the form is submitted, the web page will automatically move to a new page according to the value of the action attribute. To set whether this page is displayed in the same window or in a new window / tab, we can add the target attribute to the <form> tag.

The value for this target attribute is the same as that used in the <a> tag, i.e. one of _self, _blank, _parent, _top, or a frame name. We have discussed the function of each value in chapter 4 when discussing the <a> tag.

For example, the following form code will display the processform.php page in a new tab:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learning HTML Forms</title>
</head>
<body>
<form action="prosesform.php" method="get" target="_blank">
  <p>Name : <input type="text" name="user_name"></p>
  <p>Address : <input type="text" name="user_address"></p>
  <p><input type="submit" value="Send Data"></p>
</form>
</body>
</html>

Input Element Type Reset

HTML also provides a reset button to empty the contents of the form. Its use is similar to the submit button, but this time we use the type = “reset” attribute. Following is an example of its use:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learning HTML Forms</title>
</head>
<body>
<form action="prosesform.php" method="get">
  <p>Name : <input type="text" name="user_name"></p>
  <p>Address : <input type="text" name="user_address"></p>
  <p>
  <input type="submit" value="Send Data">
  <input type="reset" value="Reset">
  </p>
</form>
</body>
</html>
Form Element

The reset button is not used too often, especially to avoid visitors who accidentally click the reset button when completing a long form. To leave the form blank without the reset button, simply open the form page again.

Input Element Type Password

Especially for inputting passwords, HTML provides special form objects, namely input type passwords. To use it, we add the type = “password” attribute to the <input> tag.

The following is an example of using an input type password tag:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learning HTML Forms</title>
</head>
<body>
<form action="prosesform.php" method="get">
  <p>Name : <input type="text" name="user_name"></p>
  <p>Password : <input type="password" name="user_password"></p>
  <p><input type="submit" value="Send Data"></p>
</form>
</body>
</html>
Form Element

The appearance of the password text box is no different from a regular text box. However, when we start typing, the characters entered will be ‘camouflaged’.

However, when we click the submit button, the value is still visible in the URL (if using the method = “get”). Therefore, for sensitive information such as passwords you should use method = “post”.

All attributes that apply to the regular text box can also be used for password text boxes, such as size, maxlength, readonly, disabled, etc.

Input Element Type Checkbox

A checkbox is a form object that looks like a square box where users can click (checklist) the fields to select. To make a checkbox we use the type = “checkbox” attribute in the <input> tag.

Following is an example of using the input type = “checkbox” tag:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learning HTML Forms</title>
</head>
<body>
<form action="prosesform.php" method="get">
  <p><input type="checkbox" name="agreement" value="agree"> 
  I agree with the terms and conditions above</p>
  <p><input type="submit" value="Send Data"></p>
</form>
</body>
</html>
Form Element

In the example above, I made a checkbox with the attributes name = “agreement” and value = “agree”. When the user selects the option above and submits the form, the results shown in the address bar are as follows:

file:///D:/learn_html/prosesform.php?agreement=agree

The checkbox form object is suitable for input where the user can choose more than 1 choice, like the following example:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learning HTML Forms</title>
</head>
<body>
<h3>This Year's Resolution:</h3>
<form action="prosesform.php" method="get">
  <p><input type="checkbox" name="target1" value="HTML"> Mastering HTML</p>
  <p><input type="checkbox" name="target2" value="CSS"> Understand CSS</p>
  <p><input type="checkbox" name="target3" value="PHP"> Mastering PHP</p>
  <p><input type="checkbox" name="target4" value="CSS"> Can JavaScript</p>
  <p><input type="checkbox" name="target5" value="PHP"> Proficient in MySQL</p>
  <p><input type="submit" value="Send Data"></p>
</form> 
</body>
</html>

In the code above, I use a different name and value attributes, so that each checkbox is a separate form object. You can try to select all available options, submit the form, and study the results sent in the URL section.

Checked Attribute

HTML provides a checked attribute that works so that the checkbox box is immediately selected when the page is displayed. Following is an example of its use:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learning HTML Forms</title>
</head>
<body>
<h3>This Year's Resolution:</h3>
<form action="prosesform.php" method="get">
  <p><input type="checkbox" name="target1" value="HTML" checked> 
  Mastering HTML</p>
  <p><input type="checkbox" name="target2" value="CSS"> Understand CSS</p>
  <p><input type="checkbox" name="target3" value="PHP"> Mastering PHP</p>
  <p><input type="checkbox" name="target4" value="CSS" checked> 
  Can JavaScript</p>
  <p><input type="checkbox" name="target5" value="PHP"> Proficient in MySQL</p>
  <p><input type="submit" value="Send Data"></p>
</form> 
</body>
</html>
Form Element

When the above code is executed, the checkbox option Mastering HTML and JavaScript can be selected immediately.

We can also write the checked attribute with checked = “checked”. This is the way of writing XHTML.

Radio Element Type Input (radio button)

If we want to limit choices where the user can only choose one value, we can use the radio button. Examples of use are for gender input in the form. Users can only choose one male or female, but not both

To create a radio button, we use the type = “radio” attribute in the <input> tag.

Following is an example of its use:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learning HTML Forms</title>
</head>
<body>
<h3>Select gender:</h3>
<form action="prosesform.php" method="get">
  <p><input type="radio" name="gender" value="laki_laki"> Male</p>
  <p><input type="radio" name="gender" value="perempuan"> Female</p>
  <p><input type="submit" value="Send Data"></p>
</form>
</body>
</html>
Form Element

In the code above, we can only choose one of the available choices. Writing a radio button is similar to a check box, but pay attention to the name attribute. For each radio button to be connected to the radio button, the pair name attribute must be filled with the same value.

Here is another example of a radio button:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learning HTML Forms</title>
</head>
<body>
<<h3>My ambition:</h3>
<form action="prosesform.php" method="get">
  <p><input type="radio" name="ambition" value="professor"> 
  Want to be a Professor</p>
  <p><input type="radio" name="ambition" value="doctor"> 
  Want to be a doctor</p>
  <p><input type="radio" name="ambition" value="engineer"> 
  Want to be an Engineer</p>
  <p><input type="radio" name="ambition" value="astronaut"> 
  Want to be an astronaut</p>
  <p><input type="radio" name="ambition" value="programmer"> 
  Want to be a Programmer</p>
  <p><input type="submit" value="Send Data"></p>
</form>
</body>
</html>
Form Element

This time the user can only choose 1 type of ideals. If we want users to be able to choose more than 1 choice, can use the check box.

As with other form objects, the value attribute is used as the value to be sent for processing.

We can also use the checked attribute to mark the initial selection when the form is first displayed. Because of the nature of the radio button that only one option can be chosen, only 1 radio button can use this attribute. Here is an example:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learning HTML Forms</title>
</head>
<body>
<<h3>My ambition:</h3>
<form action="prosesform.php" method="get">
  <p><input type="radio" name="ambition" value="professor"> 
  Want to be a Professor</p>
  <p><input type="radio" name="ambition" value="doctor"> 
  Want to be a doctor</p>
  <p><input type="radio" name="ambition" value="engineer"> 
  Want to be an Engineer</p>
  <p><input type="radio" name="ambition" value="astronaut"> 
  Want to be an astronaut</p>
  <p><input type="radio" name="ambition" value="programmer" checked> 
  Want to be a Programmer</p>
  <p><input type="submit" value="Send Data"></p>
</form>
</body>
</html>

This time when the page is displayed the first time, the option Want to be a Programmer will be immediately selected.

Textarea Element

When viewed from its appearance, the textarea is similar to the text box, but the text area can hold more text. To create a text area, we use the <textarea> opening tag and closing tag </textarea>.

Here is an example of its use:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learning HTML Forms</title>
</head>
<body>
<form action="prosesform.php" method="get">
  <p>Name : <input type="text" name="name"></p> 
  <p>Address : <textarea name="address"></textarea></p>	
  <input type="submit" value="Send Data"></p>
</form>
</body>
</html>
Form Element

The textarea form object is suitable for long data input, such as an address or for a comment section on a website. Textarea also has various attributes that can be used to adjust the display.

Rows and Cols attributes

The rows and cols attributes are used to set the number of rows and columns (cols) of textarea. The second value of this attribute is a number that indicates the number of characters for the height and width of the textarea. Here is an example of its use:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learning HTML Forms</title>
</head>
<body>
<form action="prosesform.php" method="get">
  <p>Name : <input type="text" name="name"></p> 
  <p>Address : <textarea name="address" rows="4" cols="50"></textarea></p>	
  <input type="submit" value="Send Data"></p>
</form>
</body>
</html>
Form Element

I made textarea with the attributes rows = “4” and cols = “50”, thus, the web browser will display textarea with a height of 4 characters, and a width of 50 characters. But as you can see, this value is more precisely the ‘average’ number of characters. In the above display, I can input around 53 numerical characters in the first line (which should only be as many as 50 characters).

Make Textarea Initial Values

Slightly different from most other form objects, to make the initial value of the textarea we do not use the value attribute, but only insert text between the opening tag and the closing tag <textarea>. Here is an example:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learning HTML Forms</title>
</head>
<body>
<form action="prosesform.php" method="get">
  <p>Name : <input type="text" name="name"></p> 
  <p>Address : <textarea name="address" rows="4" cols="50">
  XYZ Street, No.45</textarea></p>	
  <input type="submit" value="Send Data"></p>
</form>
</body>
</html>

Maxlenght Attribute

We can also limit the characters that can be input in textarea by using the maxlenght attribute. This attribute is filled with a number value indicating how many maximum number of characters are allowed. Like the following example:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learning HTML Forms</title>
</head>
<body>
<h2>Registration Form:</h2>
<form action="prosesform.php" method="get">
  Name : <input type="text" name="name" > 
  <br><br>
  Address : <textarea name="address" maxlength="10"></textarea>	
  <br><br>
<input type="submit" value="Send Data">
</form>
</body>
</html>
Form Element

In the example above, I set the max value value to 10 characters, so that the textarea cannot be inputted by more than 10 characters. However, it should be noted that someone can change this limit. We should double-check the server side (using PHP).

Select Element and Option Element (dropdown menu)

A dropdown menu is a form object where users can choose from the available options. To make it, we use 2 elements, namely the <select> tag as a container, and the <option> tag to make a selection.

To be more easily understood, here are examples of their use:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learning HTML Forms</title>
</head>
<body>
<h3>Choose Shirt Color:</h3>
<form action="prosesform.php" method="get">
  <p>Color : 
  <select name="shirt_color">
    <option value="red">Pink</option>
     <option value="green">Green moss</option>
     <option value="black">Solid black</option>
     <option value="blue">Light blue</option>
     <option value="brown">Dark brown</option>
  </select></p>
  <p><input type="submit" value="Send Data"></p>
</form>
</body>
</html>
Form Element

In the code above, the <select name = “shirt_color”> tag is the ‘container’ which wraps all the options. Within this tag the name attribute is placed.

To make a choice, we use the <option> tag. The selected text that appears is located between the opening tag <option> and the closing tag </option>, while what is sent to the server is the value of the value attribute.

For example, if I choose the moss green option, what the web browser will send is:

file:///D:/learn_html/prosesform.php? shirt_color=green

In the URL address above, warn_baju comes from the name attribute of the <select> tag, while the value “green” comes from the <option> tag’s value attribute.

If we don’t create a value attribute, then the value sent is the text between the <option> tags, the following example:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learning HTML Forms</title>
</head>
<body>
<h3>Choose Shirt Color:</h3>
<form action="prosesform.php" method="get">
  <p>Color : 
  <select name="shirt_color">
    <option>Pink</option>
     <option>Green moss</option>
     <option>Solid black</option>
     <option>Light blue</option>
     <option>Dark brown</option>
  </select></p>
  <p><input type="submit" value="Send Data"></p>
</form>
</body>
</html>

This time if I choose the color “Solid Black” and click the submit button, then what is sent is shirt_color=Solid+black, as seen in the following URL:

file:///D:/learn_html/prosesform.php?shirt_color=Solid+black

Selected Attribute

We can add the selected attribute to the <option> tag to make a default selection when the form is displayed. Here is an example of its use:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learning HTML Forms</title>
</head>
<body>
<h3>Choose Shirt Color:</h3>
<form action="prosesform.php" method="get">
  <p>Color : 
  <select name="shirt_color">
    <option value="red">Pink</option>
     <option value="green">Green moss</option>
     <option value="black">Solid black</option>
     <option value="blue" selected>Light blue</option>
     <option value="brown">Dark brown</option>
  </select></p>
  <p><input type="submit" value="Send Data"></p>
</form>
</body>
</html>

This time, when the form was first displayed the color “light blue” was automatically selected immediately.

The size attribute can also be added to the <select> tag to specify the preferred display height. Here is an example of its use:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learning HTML Forms</title>
</head>
<body>
<h3>Choose Shirt Color:</h3>
<form action="prosesform.php" method="get">
  <p>Color : 
  <select name="shirt_color" size="3">
    <option value="red">Pink</option>
     <option value="green">Green moss</option>
     <option value="black">Solid black</option>
     <option value="blue">Light blue</option>
     <option value="brown">Dark brown</option>
  </select></p>
  <p><input type="submit" value="Send Data"></p>
</form>
</body>
</html>
Form Element

If you run the above code, a dropdown menu will appear higher dari than usual. This time the color of the shirt is displayed with a height of 3 lines (according to the attribute size = “3”). If the size attribute is not written, the default value is 1. The size attribute is generally used together with the multiple attribute.

Multiple Attributes

By default, the <select> tag can only be selected 1 choice. However, if we add multiple attributes, then the user can choose more than 1 choice. To select more than 1 choice, you can use the CTRL+click button.

Following is an example of using multiple attributes:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learning HTML Forms</title>
</head>
<body>
<h3>Choose Shirt Color:</h3>
<form action="prosesform.php" method="get">
  <p>Color : 
  <select name="shirt_color" multiple>
    <option value="red">Pink</option>
     <option value="green">Green moss</option>
     <option value="black">Solid black</option>
     <option value="blue">Light blue</option>
     <option value="brown">Dark brown</option>
  </select></p>
  <p><input type="submit" value="Send Data"></p>
</form>
</body>
</html>
Form Element

As you can see, the web browser automatically enlarges the selection lines (to 4 lines) when we add multiple attributes. To be neater we can manually set the height of the <select> tag using the size attribute:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learning HTML Forms</title>
</head>
<body>
<h3>Choose Shirt Color:</h3>
<form action="prosesform.php" method="get">
  <p>Color : 
  <select name="shirt_color" size="5" multiple>
    <option value="red">Pink</option>
     <option value="green">Green moss</option>
     <option value="black">Solid black</option>
     <option value="blue">Light blue</option>
     <option value="brown">Dark brown</option>
  </select></p>
  <p><input type="submit" value="Send Data"></p>
</form>
</body>
</html>
Form Element

This time I used the size = “5” attribute so that all the choices could be seen.

Although it seems useful, dropdown menus with multiple attributes are rarely used. Because not all users understand how to choose to use CTRL + click. The checkbox form object will be more suitable for this purpose.

Optgroup Element

To present complex data, we can group the <option> tag selection using the <optgroup> tag with the label attribute. To be more easily understood, here are examples of their use:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learning HTML Forms</title>
</head>
<body>
<h3>Choose Shirt Color:</h3>
<form action="prosesform.php" method="get">
  <p>Color : 
  <select name="shirt_color">
    <optgroup label="Green">
      <option value="moos_green">Moss green</option>
      <option value="leaf_green">Leaf green</option>
      <option value="light_green">Light green</option>
      <option value="dark_green">Dark green</option>
    <optgroup label="Red">
      <option value="solid_red">Solid red</option>
      <option value="heart_red">Heart red</option>
      <option value="festive_red">Festive red</option>
  </select>
	</p>
  <p><input type="submit" value="Send Data"></p>
</form>
</body>
</html>
Form Element

In the example above, I made 2 groups of colors, “Green” and “Red”.

This grouping is created using the <optgroup> tag. The label attribute functions to display the selected title.

In a web browser, the <optgroup> tag is displayed separately and cannot be selected (because it is not part of the selection). Views like this are suitable for use if the data is long enough, so it will make it easy for users.

Input Element Type File

To upload a file, we use the <input> tag with the type = “file” attribute. This tag is used to upload something to the server, whether it is in the form of images, music, videos, documents, etc.

Here is an example of its use:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learning HTML Forms</title>
</head>
<body>
<form action="prosesform.php" method="post">
  <p>Name : <input type="text" name="name"></p> 
  <p>Upload Photos : <input type="file" name="images_file"></p>
  <p><input type="submit" value="Send Data"></p>
</form>
</body>
</html>
Form Element

Enctype Attribute

In order to be processed by the server, the <form> tag must be sent using method = “post” and additional enctype = “multipart / form-data” attributes. This relates to the way data is sent to the server.

Actually, the enctype attribute is still used by web browsers. If we don’t write this attribute, the web browser adds the attribute enctype = “application / x-www-form-urlencoded”. The difference between the two is in the ‘encoding’ process when the form is submitted.

If we use enctype = “application / x-www-form-urlencoded” (default selection), special characters will be converted (in programming terms: encoded) to ASCII character numbers, and the space mark will be replaced with ‘+ ‘.

When using enctype = “multipart / form-data”, the form will be sent “as is” without the encoding process. For forms that have upload features, we must use this enctype = “multipart / form-data”. Following is an example of its use:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learning HTML Forms</title>
</head>
<body>
<form action="prosesform.php" method="post" enctype="multipart/form-data">
  <p>Name : <input type="text" name="name"></p> 
  <p>Upload Photos : <input type="file" name="images_file"></p>
  <p><input type="submit" value="Send Data"></p>
</form>
</body>
</html>

The process of handling the upload file is then done on the server side.

Attribute Accept

Similar to the maxlength attribute that limits the number of input characters, for the upload form object, we can use the accept attribute. The accept attribute will limit the types of files to be uploaded, whether they are image files, document files, or other restrictions.

The value for the accept attribute is MIME_type such as audio / *, video / * or image / *. Here is an example of the writing:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learning HTML Forms</title>
</head>
<body>
<form action="prosesform.php" method="post" enctype="multipart/form-data">
  <p>Name : <input type="text" name="name"></p> 
  <p>Upload Photos : <input type="file" name="images_file" accept="image/*"></p>
  <p><input type="submit" value="Send Data"></p>
</form>
</body>
</html>

The form above will only accept uploads in the form of image files, according to the attribute accept =”image/*”.

However, restrictions from HTML like this should be re-checked on the server-side, because it can be skipped easily.

Input Hidden Element Type

HTML also provides form objects that are not visible (hidden). To make it, we use the type = “hidden” attribute in the <input> tag. All other attributes such as name, value, disabled, etc. also function inside this form object.

Following is an example of using hidden type input elements:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learning HTML Forms</title>
</head>
<body>
<form action="prosesform.php" method="get">
  <p>Name : <input type="text" name="name"></p> 
  <p>Password :  <input type="password" name="password" /></p>
  <input type="hidden" name="hidden"/>
  <p><input type="submit" value="Send Data"></p>
</form>
</body>
</html>
Form Element

You might ask, if this form object is not visible, so what is its function?

The <input type=”hidden”> tag can be used to send ‘secret messages’ which are used for the form confirmation process. For example, consider the following code:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learning HTML Forms</title>
</head>
<body>
<form action="prosesform.php" method="get">
  <p>Name : <input type="text" name="name"></p> 
  <p>Password :  <input type="password" name="password" /></p>
  <input type="hidden" name="token" value="h68et56d6"/>
  <p><input type="submit" value="Send Data"></p>
</form>
</body>
</html>

In the form above I added a hidden form object with name = “token” and value = “h68et56d6”. This token code can be generated automatically by the server, and is used to confirm that the form did originate from our website (preventing the form from being inputed from another location).

Input Element Type Image

We can also use images as form input objects. This can be used to replace the default web browser’s default submit button, or create applications that are related to coordinates, such as maps or mathematical graphics.

For this purpose, HTML provides the type = “image” attribute for the <input> tag. Following is an example of its use:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learning HTML Forms</title>
</head>
<body>
<form action="prosesform.php" method="get">
  <p>
    <input type="image" name="image" src="butterfly.jpg">
  </p>
</form>
</body>
</html>
Form Element

Note that in the input image type tag, it must also include the src attribute which contains the image address. If an area of the image is clicked, the cursor position will be sent to the server. For example, when I click on a butterfly wing image, the web browser will send the following data:

file:///D:/learn_html/prosesform.php?image.x=291&image.y=268

image.x and image.y are the coordinates of the image. The coordinate calculation starts from (0,0) on the upper left side, to the point (450,253) on the lower right side, this is because the image size that I use is 450 × 253 pixels.

In addition to painting image coordinates, image type input tags can also be used to replace submit form buttons, such as the following example:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learning HTML Forms</title>
</head>
<body>
<form action="prosesform.php" method="get">
  <p>Name : <input type="text" name="name"></p> 
  <p>Password :  <input type="password" name="password" /></p>
  <p><input type="image" name="send" src="button.png" width="50"></p>
</form>
</body>
</html>
Form Element

In the example above, the submit button can be replaced with an image using the image type input tag.

Input Element Type Button

In addition to using the submit and reset buttons, we can also add self-defined buttons. For this purpose HTML provides the type = “button” attribute of the <input> tag.

Following is an example of its use:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learning HTML Forms</title>
</head>
<body>
<h2>Registration Form:</h2>
<form action="prosesform.php" method="get">
  <p><input type="button" value="Data Check"></p>
</form>
</body>
</html>
Form Element

But unlike the submit and reset buttons, this button has no default functions. We can define the function of this button ourselves using JavaScript, like the following example:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learning HTML Forms</title>
</head>
<body>
<form action="prosesform.php" method="get">
  <p>Name : <input type="text" name="name"></p> 
  <p>Password :  <input type="password" name="password" /></p>
  <p><input type="button" value="Data Check" 
  onClick="alert('Name and password do not match')"/></p>
</form>
</body>
</html>
Form Element

This time the Check Data button will display a ‘name and password do not match’ message using JavaScript.

Element Labels

One of the HTML tags that are often used in forms is the <label> tag. This tag does not affect the appearance but will make interaction with the form better (user-friendly).

For example, consider the following form:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learning HTML Forms</title>
</head>
<body>
<h3>This year's resolution:</h3>
<form action="prosesform.php" method="get">
  <p><input type="checkbox" name="target1" value="HTML"> Mastering HTML<p>
  <p><input type="checkbox" name="target2" value="CSS"> Mastering CSS<p>
  <p><input type="checkbox" name="target3" value="PHP"> Mastering PHP<p>
  <p><input type="submit" value="Data Send"><p>
</form> 
</body>
</html>
Form Element

To click the checkbox, we must place the mouse directly above the checkbox. It would be more convenient if the user can choose by clicking the caption. For this we use the <label> tag:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learning HTML Forms</title>
</head>
<body>
<h3>This year's resolution:</h3>
<form action="prosesform.php" method="get">
  <p><label><input type="checkbox" name="target1" value="HTML"> Mastering HTML</label></p>
  <p><label><input type="checkbox" name="target2" value="CSS"> Mastering CSS</label></p>
  <p><label><input type="checkbox" name="target3" value="PHP"> Mastering PHP</label></p>
  <p><label><input type="submit" value="Data Send"></label></p>
</form> 
</body>
</html>

This time, we can click the description and the checkbox will automatically be selected immediately (without having to click right above the check box).

In addition to ‘enclosing’ the form object with the <label> tag, we can also separate the writing with the help of the for an attribute. So the code above can also be written like this:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learning HTML Forms</title>
</head>
<body>
<h3>This year's resolution:</h3>
<form action="prosesform.php" method="get">
  <p><input type="checkbox" name="target1" value="HTML" id="html">
  <label for="html"> Mastering HTML</label></p>
  <p><input type="checkbox" name="target2" value="CSS" id="css">
  <label for="css"> Mastering CSS</label></p>
  <p><input type="checkbox" name="target3" value="PHP" id="php">
  <label for="php"> Mastering PHP</label></p>
  <p><input type="submit" value="Data Send"></p>
</form>
</body>
</html>

This time the <label> tag only contains captions from the checkbox. Using the for attribute, we can associate labels with the appropriate checkboxes.

For the two to be connected, the value of the for attribute must match the id attribute on the form object. For example, if the checkbox has the attribute id=”php”, then the tag label must be written for=”php”.

The use of <label> tags is not only limited to checkboxes, but we can also use it for other form objects such as radio buttons, text boxes, etc. In addition, the addition of this tag can also be used as a CSS selector.

Fieldset Element and Legend Element

The <fieldset> tag and the <legend> tag are used to ‘beautify’ the form’s appearance by grouping form objects according to their division. The <fieldset> tag functions as a ‘container’ that holds form objects, while the <legend> tag functions to create an explanation title.

Following is an example of using the <fieldset> tag and the <legend> tag:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learning HTML Forms</title>
</head>
<body>
<form action="prosesform.php" method="get">
<fieldset>
<legend>This year's resolution:</legend>
  <p><input type="checkbox" name="target1" value="HTML"> Mastering HTML</p>
  <p><input type="checkbox" name="target2" value="CSS"> Mastering CSS</p>
  <p><input type="checkbox" name="target3" value="PHP"> Mastering PHP</p>
</fieldset>
  <p><input type="submit" value="Data Send"></p>
</form>
</body>
</html>
Form Element

The <legend> tag also has an align attribute that can be used to adjust the position of the text. Values that can be used are left, center, right, top and bottom. But the top and bottom values will generally be ignored by web browsers.

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learning HTML Forms</title>
</head>
<body>
<h3>Registration Form</h3>
<form action="prosesform.php" method="get">
<fieldset>
<legend align="right">Biodata</legend>
  <p>Name : <input type="text" name="name"></p>
  <p>Password :  <input type="password" name="password"></p>
</fieldset>
<fieldset>
<legend align="center">This year's resolution:</legend>
  <p><input type="checkbox" name="target1" value="HTML"> Mastering HTML</p>
  <p><input type="checkbox" name="target2" value="CSS"> Mastering CSS</p>
  <p><input type="checkbox" name="target3" value="PHP"> Mastering PHP</p>
</fieldset>
  <p><input type="submit" value="Data Send"></p>
</form>
</body>
</html>
Form Element

Button Element

In addition to using the <input type = “submit”> and <input type = “submit”> tags, we can also create buttons with the <button> tag.

Unlike the <input type = “submit”> tag, buttons with <button> elements require a closing </button> tag, and what will be displayed as text inside the button is the text in between not the contents of the value attribute.

For example, to create a button with the value “Send Data”, it is written as: <button> Send Data </button>

If the <button> tag is placed in the form, by default the function is also to submit the form, even though the form already has a <input type = “submit”> tag.

Generally, the <button> tag is used to create a button that is outside the form. Buttons that are not in the form do not have built-in functions, so they are suitable for use as JavaScript callers.

In this chapter, we have studied most of the tags and attributes associated with creating forms in HTML.

Even so, many parties still feel inadequate with these features. HTML5 comes with various latest features for creating forms, such as new form objects and validation processes. In the next tutorial, we will discuss this matter more deeply.

HTML Tutorial List

  1. Learn HTML For Beginner (Part 1 : Introduction HTML)
  2. Learn HTML For Beginner (Part 2 : Basic Structure of HTML)
  3. Learn HTML For Beginner (Part 3 : Head Element)
  4. Learn HTML For Beginner (Part 4 : Text Formatting Element)
  5. Learn HTML For Beginner (Part 5 : List Element)
  6. Learn HTML For Beginner (Part 6 : Image Related Element)
  7. Learn HTML For Beginner (Part 7 : Audio dan Video Element)
  8. Learn HTML For Beginner (Part 8 : Table Element)
  9. Learn HTML For Beginner (Part 9 : Form Element)
  10. Learn HTML For Beginner (Part 10 : HTML5 Form Element)
  11. Learn HTML For Beginner (Part 11 : Embed, Object dan Iframe Element)
  12. Learn HTML For Beginner (Part 12 : HTML5 Canvas Element)
  13. Learn HTML For Beginner (Part 13 : Scalable Vector Graphics (SVG))
  14. Learn HTML For Beginner (Part 14 : HTML5 Semantic Tag (Layout))

What do you think?

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Loading…

0

Comments

0 comments

Learn HTML For Beginner (Part 8: Table Element)