HTML5 form elements

You should be familiar with the new HTML5 form elements from this week’s reading, but if you need a refresher, this article about HTML5 Forms and Input Types (Links to an external site.)Links to an external site. provides a good review (with plenty of screenshots) of the new elements.

There are two examples of forms described in detail below. When you have finished reading, please:

  • provide your thoughts on each form
  • provide one example of a form you have interacted with recently and describe any elements you think are good or bad

Example One: Paypal

The first form I want to look at is Paypal’s account creation form:

  • Paypal Account Sign Up (Links to an external site.)Links to an external site.

One of the things you would notice is that PayPal asks you for the absolute minimum amount of information it needs to in order to continue along the process of creating an account, a great strategy when you need to gather a lot of information from people, but don’t want to scare them away:

  • The first form you see is a simple choice. Personal Account or Business Account
    • The “Continue” button below your selection shows you are not done with this sign up process yet, but you have started down that path.
    • You might notice that these radio buttons look a bit different than the ones you are used to seeing.
    • They are using some advanced CSS to draw those radio buttons inside of the form fields label.
      • /* Background */
        .radioButton:before {
        content: "";
        position: absolute;
        box-sizing: border-box;
        width: 1.5rem;
        height: 1.5rem;
        background: #ffffff;
        border: 1px solid #9da3a6;
        border-radius: 100%;
        cursor: pointer;
        -webkit-box-shadow: inset 0 1px #ffffff;
        box-shadow: inset 0 1px #ffffff;
        /* Checkmark */
        .radioButton:after {
        opacity: 0;
        content: "";
        position: absolute;
        width: .6rem;
        height: .6rem;
        left: .75rem;
        top: .75rem;
        -webkit-transform: translate(-50%, -50%);
        background: #009cde;
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 100%;
        cursor: pointer;
        box-shadow: 0 1px rgba(255, 255, 255, 0.5);
    • Which, when clicked, triggers another advanced CSS selector to draw the blue inside:
      • input[type=radio]:checked + .radioButton:after {
        opacity: 1;
  • After deciding which kind of account is being used, you are given another short series of form fields:
    • Email, Password, Confirm Password
    • These look standard until you click into one and then click somewhere else without entering any text in.
    • These inputs are making use of HTML5 validation
      • By simply adding required=”required” as an attribute to your form element, most modern browsers will not allow the form to be submitted until there is some content inside that input box.
      • Paypal goes even farther on the email field:
        • Not only are they requiring this field (required=”required”), but they are also indicating that this field must be an email address (type=”email”).
        • The type of email does a couple of important things:
          • By default, browsers will not accept any input in an email field without an “@” symbol in it.
          • Perhaps most importantly though, on mobile devices (tablets and phones) the email input type will trigger a different keyboard layout (one that includes the “@” character)
          • ( (Links to an external site.)Links to an external site.resources/uploads/iphone_keyboard_type_email.jpg (Links to an external site.)Links to an external site.)
      • They also provide instant feedback when you have filled out the input in the required manner:
  • After getting past the password and email requirements, you are shown the final fields, which might look familiar, as just about every form on the web asks for this information nowdays

I believe this form is successful because of the way Paypal gets you to invest your self into the form so easily. Forms that are set up this usually have people thinking:

  • “Oh great, I only need to choose my account type, this is easy!”
    • Chooses account type and sees other fields
  • “Oh, that makes sense, of course they need an email and password.”
    • Completes these fields.
  • “Oh man, now they want all of that information too, well I’ve already come this far, I might as well just keep going.”
    • Completes this information and finally has an account.

Paypal gets you to fill out 13 fields without really understanding that you did it. A form with 13 fields on it to start is usually intimidating and might scare people away, but if you collect a little bit of information at a time, you are more likely to get people to fill out the form.

Example 2: Social Tees

Social Tees Animal Rescue Application (Links to an external site.)Links to an external site.

This site is actually making use of a Google Form (Links to an external site.)Links to an external site. which is a nice way to capture information if you don’t have the resources to build a database to store information in. However, the form they wound up with is very long and very ugly. This form has around 55 fields, 50 of which are required.

Now, in a situation like this, you often times do need to collect a lot of information, but the better approach would be to break it up over several pages (which is possible in Google Forms). That way, you at least feel like you are making progress. Having visitors to your sites complete a larger number of smaller tasks is generally a better idea than forcing them to complete one giant task.

The other issues with this form is that it is not taking advantage of all the new form fields HTML5 allows for:

  • email
  • number
  • date (this one they do use)
    • This triggers a calendar dropdown that looks different across browsers

These field elements all add a bit of improvement over the basic text field that is being used instead, as noted on the HTML5 Doctor link (Links to an external site.)Links to an external site. provided in this week’s discussion overview.

Order a similar paper and get 15% discount on your first order with us

Dr. Padma Myers
Dr. Padma Myers
98% Success Rate
Read More
“Hello, I deliver nursing papers on time following instructions from the client. My primary goal is customer satisfaction. Welcome for plagiarism free papers”
Stern Frea
Stern Frea
98% Success Rate
Read More
Hi! I am an English Language and Literature graduate; I have written many academic essays, including argumentative essays, research papers, and literary analysis.
Dr. Ishid Elsa
Dr. Ishid Elsa
98% Success Rate
Read More
"Hi, count on me to deliver quality papers that meet your expectations. I write well researched papers in the fields of nursing and medicine".
Dr. Paul P. Klug
Dr. Paul P. Klug
99% Success Rate
Read More
"A top writer with proven reliability and experience. I have a 99% success rate, overall rating of 10. Hire me for quality custom written nursing papers. Thank you"

How Our Essay Writing Service Works

Tell Us Your Requirements

Fill out order details and instructions, then upload any files or additional materials if needed. Then, confirm your order by clicking “Place an Order.”

Make your payment

Your payment is processed by a secure system. We accept Mastercard, Visa, Amex, and Discover. We don’t share any informati.on with third parties

The Writing Process

You can communicate with your writer. Clarify or track order with our customer support team. Upload all the necessary files for the writer to use.

Download your paper

Check your paper on your client profile. If it meets your requirements, approve and download. If any changes are needed, request a revision to be done.

Recent Questions

Stay In Touch!

Leave your email and get discount promo codes and the best essay samples from our writers!