Basic Forms
Using HTML forms is a simple way of receiving user data. Forms consist of boxes and buttons where information is entered then sent to a server where the data is further processed.
Basic HTML Form Structure:
HTML forms start with the <form> element which supports some specific attributes to configure the way the form behaves such as the action and method attributes.
- The action attribute defines the location of where the data should be sent(url address).
- The method attribute defines which HTTP method (POST or GET) to send the data.
The <form> element is a container that holds all of the input elements. The most common input elements are:
- Text Fields
Text Box - Single Line
Textarea - Multi Line
- Selection Options
Radio Buttons
Check Boxes
Drop Down Boxes
3. Submit Button
Text Fields
There are two types of text fields.
- One line text boxes
- Multi line text areas.
One Line Text Boxes
The <input> element is used to capture text e.g name, email, password, etc. Here is the code for a one line text box that asks for the user to input their first name.
Type and Name Attribute:
The type attribute decides which type of <input> element to display. The name attribute references elements in JavaScript or the form data after submission.
Example 1: Displays Email
Script:
Browser:
Data Returned:
email: xxxx@email.com ← Returned Value
Example 2: Displays Date
Script:
Browser:
Data Returned:
date: xx/xx/20xx ← Returned Value
Size and Placeholder Attribute
The size attribute specifies the length of the box on your page. The placeholder attribute provides a hint of the expected value.
Script:
Browser:
Multi Line Text Area
This box allows for multiple lines of text to be entered such as comments or address. Text areas don’t have input type= “” , instead they use the <textarea> tag. You can specify the size of your text area by setting the cols and rows attributes.
Script:
Browser:
Selection Options
There are several types of selections to give the user a choice of options. Radio buttons, drop-downs, and check boxes.
Radio Buttons:
Gives the users a set amount of options to select from. Use the <input>tag with type attribute set to “radio”.
Script:
Browser:
Drop Downs:
Drop downs give the user a list of options in which they can choose by selecting the drop down menu. Use the <select> tag to create a select drop down option. Use the <option> tag inside of the <select> tag to give the user a specific list of options.
Script:
Browser:
Check boxes:
Allows for the user to check a box setting it to true or unchecking a box setting it to false. Use the <input> tag with the type attribute set to “checkbox”.
Script:
Browser:
Submit Button
After filling in all of the data you will need a way to submit the form. You guessed it, the submit button. To make a submit button use the <input> tag with type attribute of “submit”.
Script:
Browser:
Putting it all together to create a simple HTML form.
Script:
Browser:
HTML forms are required to send user input data to servers. This post we created a simple and very basic HTML form.