However, one thing that all these simple to complex forms have in common is HTML and more specifically the HTML tag. Using the Form Tag The tag is an HTML element that is used as a container to enclose other elements that can be considered as building blocks for forms. Some of these fundamental elements include the tag, the tag, and the tag. The tag has an important attribute that contributes to its functionality. This attribute is called “action” and is used to identify the file that the data entered into the form will be passed to. Using the Tag Example The example above shows how to use the form tag in your projects. One of the main takeaways is that if you open a form tag you should remember to close it. This will create a form structure and also ensure that the data entered into the form is processed correctly. Using the Tag The tag is used to describe the data in each input field in a form. This tag has a for attribute, which is used to enhance a form’s functionality. If the id that is assigned to the corresponding input field matches the for value in the tag, then that input field will be automatically highlighted when you click on the label. Using the Tag Example In the example above you can see that the for attribute is assigned the value fname. Therefore, if you create an input field with the fname id, this field will be highlighted each time you click on the First Name label. Using the Tag In its most basic form, the tag can be seen as a text box. The tag captures data from the user and one of its more crucial features is the type attribute. The type attribute indicates the type of data that this text box can collect. There are several different values that you can assign to the type attribute, but some of the more popular ones are as follows. Text Number Email Image Date Checkbox Radio Password Using the tag Example The tag in the code above has three different attributes that each have a unique function. The type attribute is assigned a text value which means that the text box will only accept characters. The id attribute is a unique identifier for the text box, and it’s important because it provides access to this element from a CSS file. The name attribute is also a unique identifier; however, the name attribute is used to interact with an element from the server-side of development. The id and name attributes are usually assigned the same value as one provides access to an element from the client-side and the other from the server-side. Using the Checkbox Element The checkbox element is very unique in comparison to the other elements that you can use with the tag. It allows a user to select one or more options from a list of related choices. Checkboxes are easily identified because they are represented by tiny square boxes that contain a check when selected. Using the Checkbox Element Example In the example above, each of the checkbox elements has a value attribute, and this is important because it helps to distinguish each checkbox option from the collection. Therefore, if a user selects “Java” from the options above, the data will reflect that. Using the Tag and the Radio Elements The tag and the radio elements are similar in the sense that they only allow a user to select a single value at a time; therefore, one can say that they have the same function. However, they’re very different in appearance. The radio element is closer to the checkbox element in appearance, however, with the radio element you have circles instead of squares. The tag produces what is essentially a drop-down box, which allows a user to select a single value. Using the Tag and Radio Element Example Using the Date Element The date element produces a small text box that generates a calendar when clicked. Using date as an input type in your forms safeguards against a user potentially entering an incorrect date, which can potentially lead to the collection of erroneous data. Using the Date Element Example Using the Email and Password Element When a developer assigns either the email or the password values to the type attribute of an tag, they each produce an identical text box. However, when you start using these boxes the differences become apparent. The email element monitors the data entered into the text box and ensures that each submission meets the standard requirement of an email address; which means having a local part, followed by the @ symbol, and ending with a domain. Using the Email Element Example In the example above you’re introduced to a new attribute called placeholder, and this attribute takes a text value which is displayed in the text box in faded gray. This text is used to indicate the data that is to be placed in the text box as is seen in the example above. The password element turns characters into asterisks as they are being entered into the textbox. Therefore, if your computer screen is visible to other people they won’t see the password you enter. Using the Password Element Example Using the Button Tag In a form, there are usually two different types of buttons. The first is the submit button, which submits the data entered in the form to the value assigned to the action attribute (which is located in the tag). Submit Button Example The second type of button that’s usually used in a form is a reset button, which clears the data in a form so the user can enter fresh data. The tag has a type attribute, which is used to indicate the function of the button. In the example above the type attribute is assign the value submit, therefore, a button that has a type value of reset is used to reset the form. Reset Button Example Creating a Form To create a simple form in HTML you’ll need to enclose all of the elements mentioned above in a tag. Creating a Form Example The code above will produce the following form: Now You Can Create a Simple Form in HTML This article provides you will all the tools to create a functional HTML form. It identifies the different HTML tags that are used in form creation and explores the different attributes that can be used with these tags. However, most forms that you see on websites have one additional component; CSS, which is used to bring the form to life and make it more aesthetically pleasing.
