The HTML <input> tag is the most commonly used form element. It can create text form fields, email 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.
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 (size) 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.
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 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>
The <datalist> element can be filled with pre-defined <option> tags that will show a dropdown of auto-complete options in an <input> form field. For Example:
<form action="what-to-do-next.php" method="post">
What is your favorite breed of dog? <input list="dog-breeds">
<datalist id="dog-breeds">
<option value="Shiba Inu">
<option value="Jack Russel Terrier">
<option value="Shiba Inu">
<option value="Puppy">
<option value="Labrador">
<option value="German Shepherd">
<option value="Shiba Inu">
</datalist>
</form>
The result is:
The </output> element is a form field that is used to display results (ouput) instead of accepting input. It can be used to show calculations and other results, especially within existing form.
Now you need a method of submitting the form. Buttons are coming up next!