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

Seven Most Common jQuery Methods Last Part: ADD/REMOVE/TOGGLE CLASS()

Add, remove and toggleClass is also a very common way to manipulate style. .addClass() and .removeClass() I add two class selector in the style tag. Class one is to change text color to be green, and class two is change both text and background color.  Now I refresh the page and change h1 text to green by using addClass() method: $("h1").addClass("one") .  If you want to remove the style, you can change it to removeClass("one"). I do the same thing to the list. I change the list color and add a background color by adding the class two style value: $("li").addClass("two") . .toggleClass()  According to jQuery, toggerClass method can add or remove one or more classes from each element in the set of matched elements, depending on either the class's presence or the value of the state argument. I only want to change the first list item color and background by writing: $("li").first().toggleClas...
Post a Comment
Read more

Intro to Backend: Is Browser The Only Place To Send HTTP Request?

Today,  I begin to learn the second part of web develop course: backend. Frontend is the stuff that we can see and interactive with, such as HTML, CSS, and JS. We can type our code, style our page, or write some function to make interaction. However, backend is everything else. For example, we type Target web address in the Internet Browser. As we hit "enter", there are a few steps to go through: 1. The HTTP request is sent to a particular server's IP address. 2. The server figures out what to send us 3. It sends a HTTP response back to us Those process we are hard to see, and it happens in less than one second. The instructor said that the browser is not the only place to send the HTTP request, and there are so many choices out there. In this learning course, we are going to use Postman App . Postman allows us to make HTTP requests and viewer responses. It is really for developers to understand how things are working or debug something. In the P...
Post a Comment
Read more