• Skip to main content
  • Skip to primary sidebar
  • Skip to footer

Matt Doyle | Elated Communications

Web and WordPress Development

  • About Me
  • Blog
    • Design & Multimedia
      • Photoshop
      • Paint Shop Pro
      • Video & Audio
    • Online Marketing
      • E-Commerce
      • Social Media
    • Running a Website
      • WordPress
      • Apache
      • UNIX and Linux
      • Using FTP
    • Web Development
      • HTML
      • CSS
      • JavaScript
      • PHP
      • Perl and CGI Scripting
  • Portfolio
  • Contact Me
  • Hire Me
Home / Blog / Articles tagged: forms

forms

7 Lovely Things About HTML5 Markup

12 July 2011 / 6 Comments

7 Lovely Things About HTML5 Markup

HTML5 — the latest generation of the Web’s markup language — has been creating quite a stir over the last couple of years, as more and more browsers implement the latest and greatest HTML5 features. HTML5 really hit the mainstream in 2010, in part driven by Steve Jobs’ open letter, Thoughts on Flash.

HTML5 is quite a broad term, encompassing everything from the revised markup specification through to new API features such as audio, video, canvas and geolocation.

In this article I’m going to focus on the markup language itself, and look at seven reasons why I love HTML5’s markup more than HTML4’s. We’ll look at:

  • Doctypes
  • data- attributes
  • Some new and improved elements and attributes
  • More flexible linking
  • Simpler markup, and
  • Enhancements to web forms.

Ready to upgrade your markup? Let’s go!

[Read more…] about 7 Lovely Things About HTML5 Markup

Hold That Website! 12 Things to Check Before Launch

27 January 2011 / 6 Comments

Hold That Website! 12 Things to Check Before Launch

After weeks of hard work, your new website’s ready to launch! It’s uploaded, you’ve set up the domain, and you’re ready to take the wrapping off and reveal it to the general public.

Before you hit the proverbial switch, however, it’s important to check that your site is functioning correctly — especially if you’re launching it with an expensive marketing campaign.

Here’s a list of some important things to look for when giving your site its pre-launch testing.

[Read more…] about Hold That Website! 12 Things to Check Before Launch

Banish JavaScript in Web Forms with HTML5

3 September 2010 / 4 Comments

Banish JavaScript in Web Forms with HTML5

View Demo »

Download Code

For years now, most Web forms have included at least some lines of JavaScript code. Typically this JavaScript is used to validate the form — that is, check all the fields have been filled in correctly before the form is sent to the server. JavaScript is also used to enhance forms with additional functionality, such as calendar widgets and the like.

While using JavaScript for these purposes is a pretty good solution, it’s not without its problems:

  • Not all browsers have JavaScript enabled, or can even run JavaScript.
  • Each Web developer builds their JavaScript form validation and widgets differently. This means that, when confronted with a new form, a user has to learn the form’s unique quirks and foibles in order to use it.
  • Adding decent validation to a form — not to mention creating custom widgets for things like dates and number ranges — is both fiddly and time-consuming.

The good news is that these dark days of JavaScript-laden Web forms may soon be coming to an end. Thanks to the joys of HTML5, we can now create forms with built-in validation and rich widgets for dates, numbers and so on, all without including a single line of JavaScript code. Hallelujah!

As with most cutting-edge Web stuff, there’s a catch to all this, and that is browser support (or lack of it). Fortunately, there are a few JavaScript libraries out there that can emulate HTML5 form validation and widgets, as we’ll see later in the tutorial. Sure, this does mean we’re not exactly banishing JavaScript for now, but at least we can remove it once the browsers catch up!

In this tutorial I’m going to walk you through the process of creating a nice, self-validating, widget-rich, HTML5 Web form. It’s an online order form for an imaginary software company.

You can play with the form now by trying out the demo. Fill in a couple of fields, then click “Place Your Order” to see the validation kick in. Try clicking the “Expiry date” field and see what happens.

Ready to code it? Let’s get started!

[Read more…] about Banish JavaScript in Web Forms with HTML5

Creating Accessible Forms

22 November 2006 / Leave a Comment

In HTML forms we looked at the basics of creating HTML forms: GET vs POST, text fields, checkboxes, radio buttons and so on. In this tutorial we’re going to go a step further and look at some of the ways you can make forms more accessible and usable for your visitors.

Web accessibility is important because it makes it easier for users to visit and use your site. This means happier visitors and more traffic!

We’ll cover the following topics:

  • Using the fieldset and legend elements to group form fields in a logical way
  • Adding labels to form fields with the label element
  • Controlling the tabbing order of the elements in a form
  • Speeding up form access and improving accessibility through the use of access keys

By the end of this tutorial you’ll be well on your way to designing wonderfully accessible forms. Read on…

[Read more…] about Creating Accessible Forms

Styling Forms with CSS

22 November 2006 / Leave a Comment

HTML forms are fantastically useful things, but by default they tend to look like something only a mother could love. Fortunately, with the aid of CSS, you can really transform the look of an HTML form, and make it much easier on the eye. This tutorial shows you how.

[Read more…] about Styling Forms with CSS

Primary Sidebar

Hire Matt!

Matt Doyle headshot

Need a little help with your website? I have over 20 years of web development experience under my belt. Let’s chat!

Matt Doyle - Codeable Expert Certificate

Hire Me Today

Call Me: +61 2 8006 0622

Stay in Touch!

Subscribe to get a quick email whenever I add new articles, free goodies, or special offers. I won’t spam you.

Subscribe

Recent Posts

  • Make a Rotatable 3D Product Boxshot with Three.js
  • Speed Up Your WordPress Website: 11 Simple Steps to a Faster Site
  • Reboot!
  • Wordfence Tutorial: How to Keep Your WordPress Site Safe from Hackers
  • How to Make Awesome-Looking Images for Your Website

Footer

Contact Matt

  • Email Me
  • Call Me: +61 2 8006 0622

Follow Matt

  • E-mail
  • Facebook
  • GitHub
  • LinkedIn
  • Twitter

Copyright © 1996-2023 Elated Communications. All rights reserved.
Affiliate Disclaimer | Privacy Policy | Terms of Use | Service T&C | Credits