HTML Forms: Form Creation in HTML with Examples

In this article, you will learn all about HTML forms with examples. So without any further delay, let's start with a brief introduction regarding why we need to learn the creation of forms in HTML.

Why we need a form in HTML

If you have a website, you must make it possible for users to contact us with any queries, questions, or suggestions. Then you must create a form where users can enter their information and submit it to your website so that you can see what they want.

Another example of when we need a form is if you want to create a website that requires user registration, you will need a form to allow the user to register on your website.

Along with the two examples above, where you understand the need for a form, there are numerous other reasons, but the main reason we need a form is to collect user input.

What is a form on a web page?

A form is a section of a Web page where users can provide information in a variety of ways, such as by typing text into a text field or selecting one or more options from a list.

The HTML FORM tag allows you to add a form to a web page. After you've added the form to the web page, you can add controls to it with tags like buttons and text fields. Input, buttons, textareas, and datalists are examples of these elements.

You can use the INPUT tag to enter values such as a date, time, and email address. You can use the BUTTON tag to add buttons to the form, such as submit and cancel buttons, to submit or cancel the form's details. You can enter text in the designated area by using the TEXTAREA tag. By providing a list of predefined values, the DATALIST tag allows you to enter text into a text field.

Since there are multiple tags, attributes, and codes that are required while creating a form in HTML, I decided to divide the "HTML form" topic into the following sections:

• HTML FORM Tag
• HTML INPUT Tag
• HTML BUTTON tag
• HTML Multiple-Choice Tags
• HTML TEXTAREA and LABEL Tags
• HTML FIELDSET and LEGEND Tags
• HTML DATALIST tag
• HTML KEYGEN tag
• HTML OUTPUT tag
• HTML PROGRESS tag
• HTML METER Tag
• HTML Form Submission
• HTML Form Examples

HTML FORM Tag

A form is an area on the web page that consists of plain text, HTML tags, and controls. Plain text and HTML tags are used to structure the form, whereas controls, which are also known as form fields, are used to make the form interactive by allowing a user to enter the information.

You can create a form on a web page using the FORM tag. However, some other tags and attributes are required to add at least the necessary items to the form in order to make it visible and interactive.

Attributes of the FORM tag

The following table describes the attributes of the FORM tag:

HTML INPUT Tag

A form is made up of controls that allow the user to enter information, such as a text box, drop-down list, check box, and radio button. The INPUT tag can be used to create these controls. To accomplish this, change the type attribute of the INPUT tag to the name of the control. For example, <INPUT type="text"> creates a text box control.

Types of INPUT Tag

The following is a list of HTML INPUT tag types. These are the possible values for the "TYPE" attribute of the "INPUT" tag.

• text and search
• email
• password
• number and range
• checkbox
• radio
• file
• tel
• url
• datetime, date, month, week, and time
• datetime-local
• hidden
• submit
• reset

Now let's discuss all the above values of the "TYPE" attribute of the "INPUT" tag one by one, starting with "text" and "search."

<input type="text"> and <input type="search">

A text box (or text field) is a rectangular-shaped box that facilitates a user's entry of information. It is used to collect single line information from the user, such as a name, date of birth, telephone number, or e-mail address.

You can create a text box inside a form by setting the type attribute of the INPUT tag to text; for instance, <INPUT type="text">. In addition, the attributes of the input tag that specify the features of the text box are as follows:

• Name: Gives the text box a name so that the program that handles the information in the form can identify it. For example, <INPUT type="text" name="username">
• Size: This property defines the size of the text box. It defines the number of visible characters that can be seen in the text box. For example, <INPUT type="text" name="username" size="30">
• Maxlength: Specifies the maximum number of characters the user can enter in the text box.
• Value: Specifies the default text that you want to display in the text box when the form is first loaded.

<input type="email">

The email type of the input control is used to enter a valid e-mail address, which should contain an @ symbol and a dot (.). The value of the e-mail field is automatically validated when you submit the form.

You can also enter more than one email address in the email field by using the multiple attribute, which specifies that multiple email addresses can be entered in the input control.

<input type="password">

A password is used to protect the secret information that a user does not want to share with others. You can create a password field by using the INPUT tag and setting its type attribute to password. The password field is similar to the text box, but the text entered in the password field is not in a readable format because the asterisk symbol or dot is displayed in place of the characters.

Therefore, it is also referred to as a "masked text box." The attributes of the INPUT tag that specify the features of the password field are as follows:

• Name
• Size
• Maxlength
• Value

The meaning of these four is the same as the previous.

<input type="number"> and <input type="range">

The number types are used to enter only numbers in the input control. You cannot enter any alphabet, as the number type does not accept it and prompts you to enter only numbers at the time of submitting the form. The min and max attributes can be used to specify the minimum and maximum number to be entered in the input control. The range type of the input control allows you to enter a value within a specific range.

<input type="checkbox">

A checkbox is used to select or deselect one or more items from a given set of items that are displayed on the form. It helps a user select the items quickly and easily by providing options.

You can create a checkbox by setting the type attribute of the INPUT tag to checkbox. The attribute of the INPUT tag that specifies the features of the checkbox field is as follows:

• Name: This property gives a name to the checkbox field. The following example shows the user of the name attribute:
  <input type="checkbox" name="cars">
• Value: This property determines the value that should be transmitted to the server after selecting the corresponding option on the checkbox. The following example shows the user of the value attribute:
  <input type="checkbox" name="cars" value="audi">
• Checked: Provides the default item, which has to be sent to the server along with the items that are selected by the user. In addition, a user can clear the checked item as per the requirement. The following example shows the user of the checked attribute:
  <input type="checkbox" name="cars" value="audi" checked="yes">

<input type="radio">

The usage of a radio button is almost similar to that of a checkbox, except that, in a check box, more than one item can be selected; however, in a radio button, only one item can be selected.

Therefore, a radio button can be described as a field having a list of items from which a user has to select a single item. The radio button field can be created by setting the type attribute of the INPUT tag to radio. The attributes of the INPUT tag that specify the features of the radio button field are as follows:

• Name: This field provides a name for the radio button. Unlike the check box, where different items can be named differently, each radio button in a group has the same name. The following example shows the use of the name attribute:
  <input type="radio" name="cars">
• Value: This refers to the value that should be transmitted to the server when the corresponding option for the radio button is selected. The following example shows the user of the value attribute:
  <input type="radio" name="cars" value="audi">
• Checked: Provides the default item, which is selected and sent to the server if the user does not select any item. If the user selects any other item from the list, the default item is automatically deselected. The following example shows the use of the checked attribute:
  <input type="radio" name="cars" value="audi" checked="yes">

<input type="file">

The file type allows a user to select a file stored on the local computer and send it to the server upon submission of the form. You need to set the type attribute to the file to create a file selection field. A user can either type the pathname of the file directly into the file selection field or use the browse option to select the pathname of the file from a system-specific dialogue box.

In the case of using the browse option, even if the pathname exceeds the maxlength specified, the browser accepts the complete pathname. The attributes of the file selection field are as follows:

• Size: defines the width of the visible text on the file selection field.
• Maxlength: specifies the maximum number of characters that can be entered in the file selection field.
• Accept: Specifies the types of files that can be submitted through a file upload.

<input type="tel">

The tel type of the input control is used to enter the telephone numbers. In this type, you can only enter numbers, as it does not accept alphabets. Because there is such a wide range of valid phone numbers, there is no specific syntax for specifying the telephone number in the input control.

You can also specify a particular pattern to enter the telephone number by using the pattern attribute of the INPUT tag.

<input type="url">

The url type of the input control is used to enter a valid path to a web page. A valid url for a website consists of a protocol, a domain name, and a pathname. The two most widely used protocols are Hypertext Transfer Protocol (HTTP) and File Transfer Protocol (FTP).

The value of the url field is automatically validated when you submit the form.

<input type="datetime">, <input type="date">, <input type="month">, <input type="week">, and <input type="time">

You can also set the type of the input control to datetime, date, month, week, and time separately.

The datetime type allows you to enter the year, month, day, hour, minute, second, and fraction of a second in Coordinated Universal Time (UTC).

The date type allows you to enter the day, month, and year by using the date time picker.

The month type allows you to enter the month in the input control. You can also set the minimum and maximum month by specifying the min and max attributes of the month type, respectively.

The week type is used to enter one week of a month.

The time type is used to enter only time in the input control.

<input type="datetime-local">

The datetime-local type of the input control is used to enter the date and time in the input control. When the date and time are defined as the type of input control, a date and time picker is provided on a form to select the date, month, year, and time.

You can select the date and time according to your appropriate time zone. In addition, you can set the minimum and maximum date and time values by using the min and max attributes. If you want to convert the seconds into milliseconds, you can use the step attribute.

<input type="hidden">

A hidden field is used to pass along variables and values from one form to another without forcing the user to re-enter the information.

In addition, it is not displayed by the browser. You can create a hidden field by using the INPUT tag and setting its type attribute to hidden. The attribute of the INPUT tag that specifies the features of the hidden field is as follows:

• Name: Specifies the name of the hidden field.
• Value: Specifies the value that is to be displayed by default in the hidden field.

<input type="submit">

When a user clicks the submit button, the form is sent to the address specified by the URL. You can create a submit button by setting the value of the type attribute of the INPUT tag to submit. The attributes of the INPUT tag that specify the features of the submit button are as follows:

• Name: Specifies the name of the submit button.
• Value: Specifies the label that is displayed on the submit button.

<input type="reset">

When a user clicks the reset button, all the information in all the fields in the form is erased and set to the default values. The reset button is created by setting the type attribute of the input tag to reset. The attributes of the INPUT tag that specify the features of the reset button are as follows:

• Name: Specifies the name of the reset button.
• Value: Specifies the label that is displayed on the reset button.

HTML BUTTON tag

In HTML, the BUTTON tag is used to add a button control to the form. A button control can be used to perform various tasks, such as submitting or resetting the details of the form.

The BUTTON tag can be used in conjunction with the FORM tag to display the controls on the form. A button control can also be placed on the form by using the INPUT tag, but the difference is that you do not have the scope to change the appearance of the button control, except for changing the text on the button control. However, you can change the appearance of the button control if you have already created it by using the BUTTON tag.

The button control is created by using the opening and closing tags of the BUTTON tag. The text, image, or any multimedia embedded between the opening and closing tags of the BUTTON tag becomes the content of the button control.

The BUTTON tag provides a type attribute that allows you to create three kinds of button controls, i.e., submit, reset, and normal buttons. The submit button is used to submit the form, whereas the reset button is used to erase all the text entered in the text box of the form and set the default values.

The submit button is created by setting the type attribute to submit; the reset button is created by setting the type attribute to reset; and the normal button is created by setting the value of the type attribute to button.

Attributes of the BUTTON tag

The following table describes the various attributes of the BUTTON tag:

HTML Multiple-Choice Tags

Multiple-choice tags offer multiple choices to the user in a web page, such as check boxes and radio buttons. For instance, you can use these multiple-choice tags in a web page to display the multiple-choice questions and answers.

However, the web page appears cumbersome when all the choices are displayed on it. Therefore, the multiple-choice tags, such as the SELECT, OPTION, and CAPTION tags, are used to manage choices.

This section is divided into the following three parts: These three parts are basically the tags that fall under the category of multiple-choice tags.

• SELECT Tag
• OPTION Tag
• OPTGROUP Tag

HTML SELECT tag

The SELECT tag allows the user to select a single item from a number of options. Unlike the radio button, the SELECT tag does not provide any default option that is to be transmitted to the server when no option is selected by the user. The options are written within the opening and closing tags of the SELECT tag by using the OPTION tag.

Attributes of the SELECT tag

The following table describes the various attributes of the SELECT tag:

HTML OPTION tag

The OPTION tag is used to define the options written within the SELECT tag. The options are created by embedding the OPTION tag within the opening and closing tags of the OPTION tag.

Each option is written in its own set of OPTION tags and cannot contain any other tags within it.

Attributes of the OPTION tag

The following table describes the various attributes of the OPTION tag.

HTML OPTGROUP tag

The OPTGROUP tag is used to create nested and cascading drop-down lists. In both types of lists, the related items are grouped under specific headings.

Attributes of the OPTGROUP tag

The following table describes the various attributes of the OPTGROUP tag.

HTML TEXTAREA and LABEL Tags

The TEXTAREA is similar to the text box, except that the text box only allows you to enter a single line of information, whereas the TEXTAREA allows you to enter multiple lines of information.

The content provided within the starting and ending tags of the TEXTAREA tag should only be plain text. You can adjust the size of the TEXTAREA by using the two attributes, i.e., cols and rows.

The wrap attribute of the TEXTAREA tag defines how the text appears in the TEXTAREA field when it reaches the end of every row. Wrapping can have soft, hard, or off settings.

The soft setting forces the words to wrap inside the textarea, but when the form is submitted, it includes the line breaks.

The hard setting wraps the words inside the textarea and places line breaks at the end of each line so that when the form is submitted, it appears exactly as it appears in the textarea. The offset ignores all textarea wrapping and places the text in a single continuous line.

Attributes of the TEXTAREA tag

The following table describes the attributes of the TEXTAREA tag.

Some controls, such as button controls, do not require any description as they already have labels associated with them, whereas some controls, such as text boxes, check boxes, and radio buttons, need description.

You can provide a description of the control by adding a label to the form using the LABEL tag. Each label is associated with exactly one control.

The following table describes the attributes of the LABEL tag.

HTML FIELDSET and LEGEND Tags

The FIELDSET tag is used to group related controls in a single box. Grouping the related controls displays the form fields in a more organized manner.

Suppose you have a form that is used for user registration as well as for the login process. Using the FIELDSET tag, you can group the controls for the login process and the user registration process in two separate boxes. This makes the user easily understand the purpose of each control on the form.

Attributes of the FIELDSET tag

The following table describes the attributes of the FIELDSET tag.

Whereas the LEGEND tag is used to provide a caption for the FIELDSET tag. Using the LEGEND tag, you can provide the caption for the login process and the user registration process as "sign in" and "create an account," respectively.

HTML DATALIST tag

The DATALIST tag is used to display the list of the predefined options that the user may want to select as input. This tag enables the auto-complete feature on the forms. This means that when a user starts typing in a text box, a list of predefined words is dropped down for them to choose from.

The DATALIST tag is used with the INPUT tag, in which the list attribute is specified. The value of the list attribute is similar to the id attribute of the DATALIST tag to link the INPUT tag with the DATALIST tag.

The OPTION tag, used as the child tag of the DATALIST tag, is used to specify the list of options that are to be displayed.

Example of DATALIST Tag

The following is an example of using the DATALIST tag.

<INPUT type="text" list="name">
<DATALIST id="name">
<OPTION value="Richard">
<OPTION value="John">
<OPTION value="Tony">
</DATALIST>

Here, we have used the INPUT tag and the DATALIST tag. We have specified the same value for the list attribute of the INPUT tag and the id attribute of the DATALIST tag. We have also defined the OPTION tags and specified their value attributes as the options to be displayed.

HTML KEYGEN tag

The KEYGEN tag is used to generate the key pair. When a form is submitted, a key pair, which contains the private and public keys, is generated using the KEYGEN tag to secure the content of the form.

The private key from the generated key pair is encrypted and stored in the key database on the local computer. The public key is encrypted and submitted to the server along with the form.

KEYGEN Tag Example

The following code snippet illustrates an example of the KEYGEN tag.

<KEYGEN name="key_name" challenge="10987654321">

KEYGEN Tag Attributes

The following table shows all the possible attributes used with the KEYGEN tag.

HTML OUTPUT tag

The OUTPUT tag is used to display the result of the calculation, which can be written using JavaScript.

The OUTPUT tag has three attributes, i.e., form, name, and for. The form attribute is used to specify the name of the form in which the output is displayed. The name attribute is used to specify the name of the current tag, and the for attribute is used to specify the name of the control in which the result is displayed.

OUTPUT Tag Example

Following is an example of using the OUTPUT tag.

<FORM>
<OUTPUT name="result">
</OUTPUT>
</FORM>

OUTPUT Tag Attributes

The following table lists the attributes of the OUTPUT tag.

HTML PROGRESS tag

The PROGRESS tag is used to display the progress of a particular task that is being performed.

The PROGRES tag is used in conjunction with JavaScript to display the progress or process of a task.

The PROGRES tag has only two attributes, i.e., value and max. The value attribute is used to specify how much of the task has been completed, and the max attribute is used to specify the total progress to be made.

PROGRESS tag example

Following is an example of using the PROGRESS tag.

<PROGRESS value="100" max="500"> </PROGRESS>

PROGRESS tag attributes

The following table shows the attributes used within the PROGRESS tag.

HTML METER Tag

The METER tag is used to define the scalar measurement. This tag is mostly useful when you need to display the disc usage and the relevance of a search result, or to show some other measurement.

You cannot use the METER tag to display a single number as it is used to display a range.

Example of a METER Tag

Following are two examples of the METER tag.

<METER min="50" max="165">72</METER>
<METER>200 from 500</METER>

Here, in the first example, we have used the min and max attributes of the METER tag to specify the minimum and maximum values for the tag. This implies that you cannot define the value of the METER tag as less than 0 and more than 10. And in the second example, we have displayed the tag without any attribute.

Attributes of the METER Tag

The following table describes attributes used within the METER tag.

HTML Form Submission

When a user completes a form, he or she clicks the "Submit" button, which sends the information in the form to the server for processing.

The FORM tag's enctype, action, and method attributes handle the entire information transmission process from the browser to the server.

The enctype attribute encodes the form data before sending it from the browser to the server. The action attribute specifies the URL of the program that handles the form's data, and the method attribute specifies how the data is transmitted from the browser to the server.

In the following separate sections, you will learn everything you need to know about submitting the form in detail:

• Form "enctype" Attribute
• Form "action" Attribute
• Form "method" Attribute

The "enctype" and the "method" attributes are going to be covered in this article, starting from the next paragraph. where the "action" attribute is covered in the next (separate) article.

HTML enctype attribute

The enctype attribute is used to encode the information in the form before sending it to the server so that the information is not corrupted during the transmission. The encoding is performed by the browser.

Following are the types of encoding processes:

• application/x-www-form-urlencoded: This encoding is the standard form of encoding. If no value is set for the enctype attribute, the browser accepts the standard type.
• multipart/form-data: This encoding is required for those forms that contain a file selection field.
• text/plain: You can use this attribute along with the mailto URL to send the form information to an e-mail address rather than a server.

HTML method attribute

The method attribute instructs the server on how to send the form's information to be processed.

The following are two acceptable values for the method attribute:

• Get Method
• Post Method

HTML get method

The get method connects the browser to the server, which processes the form and sends the information in a single transmission step. The data is appended to the form's action URL by the browser, separated by a question mark.

The information can be easily captured because the get method places the information directly in the form's action URL.

The information sent via the get method is the default value for the method attribute.

Following is an example of using the get method.

<FORM method=get action="url_to_process_form_data">

The get method is commonly used for sending short pieces of information.

HTML post method

The post method is more appropriate than the get method for the transmission of large amounts of information.

In the case of the post method, the browser sends the information in two steps. In the first step, the browser contacts the form-processing program as specified in the form's action URL. In the second step, the browser sends the information to the server.

The following is an example of using the post method.

<FORM method=post action="url_to_process_form_data">

Here, the method attribute is set to post.

Please note that when receiving or submitting crucial form data such as login details, payment profile details, etc., they must be processed with the "POST" method.

Example of an HTML Form

Now is the time to look at some form creation examples to show the practical application of some of the most important HTML tags and attributes associated with the HTML FORM.

So here is a basic HTML form that allows the user to contact the website owner or admin with queries, questions, and so on.

<!DOCTYPE html>
<html>
<body>
   
   <h4>Contact Us</h4>
   <form>
      Name: <input type="text" name="name"><br>
      Email: <input type="email" name="email"><br>
      Message: <textarea rows="4" cols="20"></textarea>
      <input type="submit" value="Submit">
   </form>

</body>
</html>

The above form is very basic and lacks any styles. If you want to change the form's look and feel, you can learn and use "CSS" to do so.

HTML Contact Us Form Example

The following is a modified version of the above form. In this example, I used a few extra HTML tags and attributes along with a few styling codes.

<!DOCTYPE html>
<html>
   <head>
      <style>
         .mydiv{width: 200px; margin: 10px auto; border: 2px solid #ccc;
            padding: 0 12px;}
         p.contactHead{font-size: 28px; font-weight: bold; text-align: center; 
            border-bottom: 2px solid #ccc;}
         .myform input{padding: 2px 8px; margin: 8px 2px;}
         .myform input[type="submit"]{background-color: #008080; color: white; 
            padding: 8px; border: 0px; border-radius: 6px;}
         .myform input[type="submit"]:hover{cursor: pointer;}
      </style>
   </head>
<body>
   
   <div class="mydiv">
      <p class="contactHead">Contact Us</p>
      <form class="myform" action="#">
         <label for="name">Name</label>
         <input type="text" name="name"><br>
         <label for="email">Email</label>
         <input type="email" name="email"><br>
         <label for="name">Message</label>
         <textarea rows="4" cols="23"></textarea><br>
         <input type="submit" value="Submit">
      </form>
   </div>

</body>
</html>

Because all of the form codes provided in this article are just a demonstration of how to create forms in HTML, I used "#" as the value of the action attributes, indicating that if you click on the form button, you will be returned to the same page.

HTML Registration Form Example

Another HTML form example is shown below. This example generates a registration form for the portal.

<!DOCTYPE html>
<html>
   <head>
      <style>
         .mydivSecond{width: 300px; margin: 10px auto; border: 2px solid #ccc;
            padding: 0 12px;}
         p.registerHead{font-size: 28px; font-weight: bold; text-align: center; 
            border-bottom: 2px solid #ccc;}
         .myform input{padding: 2px 8px; margin: 8px 2px;}
         .myform input[type="submit"]{background-color: #008080; color: white; 
            padding: 8px; border: 0px; border-radius: 6px;}
         .myform input[type="submit"]:hover{cursor: pointer;}
      </style>
   </head>
<body>
   
   <div class="mydivSecond">
      <p class="registerHead">Registration Form</p>
      <form class="myform" action="#" method="post">
         <b>First Name</b>: <input type="text" name="firstname"><br>
         <b>Last Name</b>: <input type="text" name="lastname"><br>
         <b>DOB</b>: <input type="number" name="dobday" size="2" maxlength="2" placeholder="Day" min="1" max="31">
         <select name="month">
            <option value="month">Month</option>
            <option value="jan">Jan</option>
            <option value="feb">Feb</option>
            <option value="mar">Mar</option>
            <option value="apr">Apr</option>
            <option value="may">May</option>
            <option value="june">June</option>
            <option value="july">July</option>
            <option value="aug">Aug</option>
            <option value="sep">Sep</option>
            <option value="oct">Oct</option>
            <option value="nov">Nov</option>
            <option value="dec">Dec</option>
         </select>
         <input type="text" name="year" size="4" maxlength="4" placeholder="Year" min="1970" max="2500"><br>
         <b>Email</b>: <input type="email" name="email"><br>
         <b>Gender</b>: <input type="radio" name="gender" id="male"><label for="male">Male</label>
            <input type="radio" name="gender" id="female"><label for="female">Female</label><br>
         <b>City</b>: <input type="text" name="city" size="20" maxlength="40"><br>
         <b>Area Code</b>: <input type="text" name="acode" size="20" maxlength="20"><br>
         <b>Country</b>: <input type="text" name="country" size="20" maxlength="40"><br>
         <b>Areas of interest</b>: <input type="checkbox" name="interest" value="football">Football
            <input type="checkbox" name="interest" value="circket">Cricket
            <input type="checkbox" name="interest" value="travelling">Travelling
            <input type="checkbox" name="interest" value="dancing">Dancing
            <input type="checkbox" name="interest" value="teaching">Teaching<br>
         <input type="submit" value="Register">
      </form>
   </div>
   
</body>
</html>

In the preceding example, I used the "post" value for the "method" attribute to securely process the form data. That is, using method="post" prevents the web browser from displaying the form data in the URL bar after the form is submitted.

HTML Login Form Example

Let me show you one more "HTML form" example. This example generates a login form that enables users to access the portal.

<!DOCTYPE html>
<html>
   <head>
      <style>
         .fresherearth{width: 300px; margin: 10px auto; border-left: 2px solid #ccc;
            padding: 0 12px;}
         p.login{font-size: 28px; font-weight: bold; text-align: center; 
            border-bottom: 2px solid #ccc;}
         .myform input{padding: 2px 8px; margin: 8px 2px;}
         .myform input[type="submit"]{background-color: #008080; color: white; 
            padding: 8px; border: 0px; border-radius: 6px;}
         .myform input[type="submit"]:hover{cursor: pointer;}
      </style>
   </head>
<body>
   
   <div class="fresherearth">
      <p class="login">Login</p>
      <form class="myform" action="#" method="post">
         <b>Username</b>: <input type="text" name="user"><br>
         <b>Password</b>: <input type="password" name="pass"><br>
         <input type="submit" value="Login">
      </form>
   </div>
   

</body>
</html>

HTML Online Test