When I visited the Facebook page at the first time, it required me to sign up. Therefore, I completed the sign up form to create my new account.
The form is very simple to fill in because it only asks for very common information such as full name, phone number, new password, birthday, and gender. It only took me one or two minutes to finish the form.
Not only Social media sites require us to sign up first before we post anything, but many business or eCommerce sites also ask us to create new account before we take any action.
For example, when I go to the Origins skin care site, it will pop up a email sign up form window. To encourage new customers to sign up, it gives a 15% off for the first order. It is definitely an attractive call-to-action message.
Anyway, if your website requires users to sign up, you need to know how to create a HTML form.
Yesterday, I just learned how to build a simple HTML form from Udemy course. And it is not that hard. All you need to know is these three elements: <form>, <input> and <label>.
Study Notes:
<form>
According to MDN Web Doc, HTML forms are the one of the main points of interaction between a user and a website or application.
The HTML form includes five main widgets: text, button, radio, select box, checkbox.
When you start to create a form, you need to enter<form></form> element inside the element, so the screen-reader will know that there will be a form on the web page.
A form includes two attributes:
1. action: the URL to send form data to
2. method: the type of the http request, which has two values-“get” or “post”
For example:
<input>
The<input>tag creates interactive controls. The “type”attribute determines the type of input.
For example:
<input type=”text”>
<input type=”date”>
<input type=”color”>
<input type=”file”>
<input type=”checkbox”>
With the <input> tag, we can use the following code to create a very simple HTML form now:
When you put the code in your Editor, the outcome will be:
When you put the code in your Editor, the outcome will be:
Note: The“placeholder”attribute can allow the ” username “to show on the “text box”. Users can read the word “username”, so it helps them to understand what kind of information belongs to this area.
<label>
Labels are very important to making website accessible. What are the labels? Labels are the “name” or “title” of the input area.
For example, the Facebook login form shows two labels, which are “Email or Phone” and “Password”.
The <label></label> element needs to match with <input> tag:
Note: the use of the “for” attribute should on all
I add the <label></label> element on the previous “sign in” page.
The new Sign In page will be:
From the new page, you can see “username” and “password” labels are in front of input box.
网友评论