Skip to main content

Three Most Common HTML Form Elements You Should Know

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 <body></body> element, so the screen-reader will know that there will be a form on the web page.

A form includes two attributes: 
  • action: the URL to send form data to
  • method: the type of the http request, which has two values-"get" or "post"
For example:

<body>
    <form action="my form submitting page URL" method="post">
<!--you put your input here-->
    </form>
</body>

<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:

<!DOCTYPE html>

<html>
<head>
<title>Form</title>
</head>
<body>
<h1>Sign In</h1>
<form action="http://www.wikipedia.org" method="get">
<input type="text" placeholder="username">
<input type="password" placeholder="password">
<input type="submit" >
</form>
</body>
</html>

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:

<form action: "sign in page url" method="post">

   <label for="username">Username</label>
   <input id="username" type="text">

</form>

Note: the use of the "for" attribute should on all <label>

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.
Labels:

Comments

Post a Comment

Popular posts from this blog

Intermediate Express.js: How To Add Styles & Partials in EJS File?

So far, we only have simple HTML tags and ejs tags in each ejs file. Every template page has no style at all. And the basic HTML header and footer are also missing. Today, I learned how to add styles and partials in ejs file. Link Style Step One: Touch a Separate CSS file I create a new directory "Style" under the "EJSDemo" directory, then I add a new CSS file "app.css" inside "Style" folder. Step Two: Add app.use(express.static()) in the app.js I add app.use(express.static("style")) in the "app.js". This will tell Express.js to serve the content of "Style" directory. Step Three: Write styles in CSS file I simple give body an orange background color and set text color to be grey. Step Four: Link to CSS file in the EJS file I just add <link> tag to link the "app.css" file on the top of the h1 tag in each ejs template. As the result, when I run the app and...
Post a Comment
Read more

Intermediate Express.Js: Write Conditions and Loops In The EJS (study note)

We continue to use the app.js which we have build to be the study example. In the last post, we only add a simple EJS tag <%= thingVar %> inside h1 tag. This will match the "thing" to any "thing" request from the user. If Statement Today, the course shows us to write a simple if statement in the EJS file. I learn to apply it to my own app. In the if statement, if users send"/wantto/workout" request, the page will show a new content "Good Idea!". We wrote the if statement in the "diet.ejs" file, and we add "<% %>" tags around the code. We have to wrap every line of JavaScript anytime JavaScript starts and ends. Moreover, you may see there are two types of ejs tags here: <%= %> The one with equal sign. According to the course, when we add equal sign, the value that is returned inside of the tag will be rendered to the HTML page. it will be added to the HTML. For example, if we write ...
Post a Comment
Read more

Authentication Project: Secret Page App Part One (Set up & Create User Model)

So far we only write the RESTful routes to send request and redirect to the related page, but we haven't do anything about authentication. If we can sign up, login, and log out, it will make our app more meaningful. Therefore, the course shows us how to create a secret page app, which will allow us to sign up, login to a secret page, and logout. Since it requires so many pieces, I will divided this project into three parts: set up & create user model, sign up, and login/logout. In this post, I am going to show all the set up process. Set Up Step One: Install packages The first thing we are going to do to create a folder "Auth", and inside of "Auth", we need to create another folder "AuthDemo". Then we cd (change directory) to "AuthDemo". Now we can set up the actual application structure by installing a few packages: passport, passport-local, passport-local-mongoose, mongoose, express, ejs, body-parser, and express-session....
Post a Comment
Read more