Login | Contact Us | Site Map | Resources

HTML Forms

Home > HTML Tutorial > HTML Form Fields

HTML Form Fields

The HTML <input> tag is the most commonly used form element. It can create text form fields, password form fields, and hidden form fields, to name just a few. The "type" attribute defines which of these and other options will be used in each case.

HTML Text Form Fields

Text form fields allow a user to type characters in one line, which can vary in length, and can accept an unlimited number of characters unless otherwise specified.

<form action="what-to-do-next.php" method="post">
  <input type="text" size="25" name="field-identifier" />
</form>

The result is:

The type attribute specifies the type of form field, in this case "text". The size attribute specifies the length of the form field, and the name attribute should assign a unique identity to the field so that the field can be referenced later when the data is processed.

Using the maxlength attribute with a numerical value will specify the maximum number of characters that can be entered into the form field. The value attribute defines characters that will appear in the form field by default, but can be over-written by the visitor.

HTML Password Form Fields

Password form fields are identical to text form fields with one major exception. Any characters entered into a password form field will show up in the browser as asterisks (*) or some kind of dot. While this can keep people from reading a password over the user's shoulder, it will not encrypt the password in any way.

<form action="what-to-do-next.php" method="post">
  <input type="password" size="25" name="password" />
</form>

The result is:

As you can see, the same attributes can be used, with the exception of the type, which now has a value of "password", and the name, which should be unique.

Hidden HTML Form Fields

Hidden form fields are never visible on a webpage. They are used behind-the-scenes to store data that is not entered by the user, but needs submitted to the server along with the rest of the form data.

The "type" attribute should be set to "hidden" and the name attribute should assign a unique identity to the field so that the field can be referenced later when the data is processed. The "value" attribute should contain the data that is being stored in order to be passed on to the server when the form is submitted.

<form action="what-to-do-next.php" method="post">
  <input type="hidden" name="hidden-data" value="No One Will Ever See Me On the Webpage!" />
</form>

Now you need a method of submitting the form. Buttons are coming up next!