Form Input Types and Elements
Recently I have been coding up so many HTML forms I feel like I know how to set up a form in my sleep. However, after looking more into the <form> tag I realized that it has more elements and input types than just the regular text field input I’m used to using. (In the examples I do use a lot of <br> tags to create a line break in the HTML document for a cleaner looking form.)
I will go over the most common used input types and form elements that I have come across:
Input Types — Input type is probably the most common element you see inside the form tags. It has a variety of types you can use. I will go over some of the more common ones.
Type text — This is the default input type. It’s a single line text field, the default width of the text field is 20 characters.
Type submit — This type defines a submit button which submits all form values to a form handler. Only clicked on when the user wants to submit the form to the server.
Type password — This type defines a password field. When typing in the field the characters become masked.
Type reset — This type is rendered as a button. Once clicked it resets all of the inputs in the form to their initial values.
Type radio — This type presents radio buttons which allow a user to only select one option from a limited number of choices. They come in radio groups and only one radio button in a group can be selected.
Type checkbox — This type is rendered by default as a square box that are checked when activated. They are used to allow the user to select one or more options from a limited number of choices.
Type date — This created an input field which lets the user enter a date or use a special data picker interface. The resulting value includes the year, month, and day.
Type email — Creates a field for an e-mail address. The input value is validated to ensure it is a properly formatted e-mail address.
Type number — This type allows a use to enter a number. It has a built in validation to reject non numerical entries. Some browsers provide a stepper arrow to let the user increase or decrease the value by tapping on the arrows.
Required — When this attribute is added to an input field it specifies that the input field must be filled out before submitting the form.
Textarea — Creates a multi-line input control. This is useful when you want the user to enter a sizeable amount of free-form text.
Select/Option — The select tag is used to create a drop down list. It holds the option tags which will be the values you want to show in the drop down list. The option tags should have a value attribute. Once the user clicks submit that value attribute is what will be passed to the server.
I coded out these examples on codepen.io which is online code editor. I would recommend you play around with the input types and form elements in your code editor or on codepen.io just make sure to not hit the submit button if you are using codepen.
