Packt+ | Advance your knowledge in tech

You're reading from jQuery for Designers Beginner's Guide Second Edition

Product typeBook

Published inJul 2014

Reading LevelBeginner

Publisher

ISBN-139781783284535

Edition1st Edition

Languages

JavaScript

Tools

jQuery

Concepts

Web Design

Author (1)

Natalie Maclees

Chapter 12. Improving Forms

If you've ever tried to work with web forms, you know how complex they can be. Luckily, the authors of HTML5 are working hard to ensure that the experience improves for designers, developers, and web site visitors alike. Browser support for the new HTML5 form elements and attributes is coming along really nicely, and even in browsers that don't have support, the new elements and attributes are backward compatible.

In this chapter, you'll learn:

How to mark up a form with some of the new HTML5 attributes
How to place the cursor in the first form field automatically
How to validate your site visitors' form entries
How to style stubborn form elements such as file uploads and select dropdowns

An HTML5 web form

We'll get started by taking advantage of some of the new attributes made available to us in HTML5. The great thing about these additions is that they are completely backward compatible—browsers that don't know how to handle them will either ignore them or default to a simple text input, and our site visitors on older browsers will be able to use our forms without even knowing what they're missing.

First, a word of caution about web forms. A web form doesn't work by itself—it needs to have some fancy backend programming on a server somewhere to collect the form entries and process them, which could mean writing fields to the database or sending the form information via an e-mail. Because of this, the forms we build in this chapter won't actually function—nothing will happen after clicking on the Submit button on the form. If you want to add a functioning web form to a project, you have a few options, which are as follows:

You can learn to do server-side programming to handle...

Time for action – setting up an HTML5 web form

Perform the following steps to set up a form using the new HTML5 elements and attributes:

We'll get started with a simple HTML document and the associated files and folders, just like we set up in Chapter 1, Designer, Meet jQuery. Inside the <body> tag, open up a <form> tag as shown in the following code:
```
<form action="#" id="account-form">
</form>
```
The form tag needs an action attribute in order to appear correctly on our page. Since our forms are just dummy forms used for scripting and styling purposes, we'll just use # as the value for this attribute. The value of the action attribute is usually a URL—the place on the server where we're going to send our form data for processing. We also added an id attribute to make it easy to select the form for CSS and JavaScript purposes later.
Next up, we'll create a section for our site visitor to create the Username and Password fields. We'll wrap these two fields in a <fieldset...

Setting focus

If you head over to http://google.com, you'll see that they've made it really easy for you to conduct a web search—as soon as the page is loaded in the browser, the cursor is blinking in the search field. There are other sites on the Web that behave this way too, making it quick and easy to get started with filling in a form.

Any time you have a page where the site visitor's main task will be to complete a form, you can make things easy for your site visitor by placing the cursor into the first form field so they can just start typing. And it's wicked easy with jQuery. Here's how to do it.

Time for action – setting focus to the first field

We'll keep working with the sample form we set up in the previous example. Perform the following steps to set the focus to the first field in the form.

Open up your empty scripts.js file and add a document ready statement, as follows:
```
$(document).ready(function(){
  // Our code goes here
});
```
Next up, we want to select the first field in our form. There are many different ways to go about this. While we could use the id attribute of the first field, this is not very flexible. If we update our form later to add a new field at the beginning, we'd also have to remember to update our JavaScript. Instead, let's just find the first input element, as follows:
```
$(document).ready(function(){
  $('input').first();
});
```
This works pretty well, but there are several cases where we would not like to set the focus on the first input element, for example, if the first element is disabled, or if it's a button, a checkbox, or a radio button. Let's add a filter to...

Validating site visitor entry

Sometimes, it can feel frustrating for a site visitor when they have to submit a form several times over, correcting errors that they've made while filling it out. Without JavaScript, the only way to validate the information that the site visitor has entered is to wait for them to submit the form, then identify the issues on the server, and send back a page that contains the form along with any error messages that might help the site visitor correct the problem.

Showing errors as soon as they occur goes a long way towards making your form feel snappy and responsive and helping your site visitors submit the form correctly on the first try. In this section, we'll learn how to use the Validation plugin from Jörn Zaefferer. This plugin is powerful and flexible and can handle validation in several different ways. We'll take a look at the most straightforward way of adding client-side validation to your form.

Time for action – validating form values on the fly

We'll continue working with the form we've been creating through the last three sections. Perform the following steps to validate user entry into the form:

The first thing we'll do is download the Validation plugin and get it attached to our page.
Head over to http://jqueryvalidation.org/ and click on the Download button in the Files section to download a ZIP file.
Open up the ZIP file and take a look at what we've got.
There's a lot going on here—there are several different JavaScript files, some demos, a change log, and so on. Remember how I said this plugin is powerful and can handle lots of different approaches to validation? That's what all this is for—handling form validation in just about any old crazy situation you might find yourself in.
Luckily, though, our situation is pretty simple, so we don't have to do anything complicated.
Inside the dist folder, find jquery.validate.min.js and copy it to your own scripts folder. Then, attach...

Improving the appearance

If you've tried styling web forms with CSS, then you've probably discovered that some form elements, such as text inputs and buttons, are pretty easy to style. There are a few quirks, but once you get those figured out, you can get those form elements to look just about any way you'd like. Other form elements, however, are much more stubborn and don't respond much, if at all, to CSS styles. It's so frustrating to design a lovely form only to realize that it's technically impossible.

These troublesome form elements are as follows:

<select>
<input type="file">
<input type="checkbox">
<input type="radio">

Not only are these four form elements impossible to style with CSS, but they also look radically different in different browsers and operating systems, leaving us with little control over the appearance of our form. Let's see how Lutrasoft's Fancyform plugin can help us out.

Time for action – improving form appearance

Perform the following steps to take advantage of the styling options made possible by the Fancyform plugin:

We'll get started with a basic HTML file and associated files and folders, just like we set up in Chapter 1, Designer, Meet jQuery. We'll work with a new HTML file, but let's keep using the styles we set up for the earlier forms. Open your styles.css file and paste in the styles we used for our forms in the previous sections.
For this example, in the body of the HTML document, we're going to set up a simple form with examples of each type of hard-to-style form element. Get started with a <form> tag, as follows:
```
<form id="pretty-form" action="#">
</form>
```

Then, inside our form, we'll add our form elements. We'll start off with a select drop-down option, as follows:

<fieldset>
  <legend>Select your favorite juice</legend>
  <p>
    <label for="juice">Favorite Juice</label>
    <select id="juice...

Time for action – adding Fancyform to style the unstyleable

Perform the following steps to use the Fancyform plugin to gain styling control over your form elements:

Let's get the Fancyform plugin and take a look at how it works. Head over to https://github.com/Lutrasoft/Fancyform and click on the Download ZIP button.
Unzip the file and take a look inside the folder.
This is pretty straightforward, right? We've got a demo folder, a README file, the Fancyform JavaScript, and some other associated scripts—we've seen this all before. We also see a V2 folder—the developer is starting on the next version of the plugin. If you read the notes in GitHub carefully, you'll see that V2 isn't quite ready for prime time yet, so we'll just ignore that for now.
Next, we need to add the Fancyform script to our own project and attach it to our HTML page. Copy jquery.fancyform.js to your own scripts folder and attach the Fancyform script between jQuery and your own scripts.js file, as follows:
```
<script src="scripts...
```

Summary

Well, this wraps up the chapter on forms. We learned how to properly use the new HTML5 form elements to create a form that functions perfectly and is accessible to boot. We learned how to focus the first field in the form, validate our site visitor's form input, and style those stubborn and notoriously unstyleable form elements. Now, you've got an arsenal of tools on your side to create gorgeous-looking forms that enhance your site visitors' experience on your site. And the best of all, they all degrade gracefully for users with JavaScript disabled as we approached our forms with the progressive enhancement mindset—by first building a working form, and then layering in enhancements for site visitors whose browsers support them.

I know that JavaScript can be a scary subject for designers. Kudos to you for sticking with me to the end of the book! I hope that you now have a basic understanding of jQuery and feel sure that you'll be able to tackle your next JavaScript challenge with confidence...

The rest of the chapter is locked

You have been reading a chapter from

jQuery for Designers Beginner's Guide Second Edition

Published in: Jul 2014Publisher: ISBN-13: 9781783284535

A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.

undefined

Unlock this book and the full library FREE for 7 days

Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of

Start free trial

Renews at $15.99/month. Cancel anytime

Author (1)

Natalie Maclees

contacted on 10 may '16 _______________ Natalie MacLees is the founder of Purple Pen Productions (purplepen.com), an interactive agency based in Los Angeles, California. She has been designing websites since 1997 and is a passionate advocate of both accessibility and usability. She loves teaching and sharing her knowledge, both in seminars and workshops and also with her clients. She discovered WordPress a few years ago as a flexible, extendable, and quick way to build robust websites that clients could manage on their own. She is the organizer of the Southern California WordPress Meetup Group. She is also a Google Analytics Qualified Individual.
Read more about Natalie Maclees

Personalised recommendations for you

Based on your interests and search pattern

Modernizing Drupal 10 Theme Development

Modernizing Drupal 10 Theme Development covers everything a frontend developer or a Drupal developer needs to know about the Drupal 10 theme layer. Using real-world examples, this book will help you to build up from an empty theme to a fast, responsive, maintainable, and accessible Drupal website in both monolithic and decoupled ways.

BookAug 2023360 pages4

Full Stack Development with Spring Boot 3 and React

Full Stack Development with Spring Boot 3 and React contains a wealth of practical guidance for picking up full stack development. The step-by-step exploration of everything from dependency injection, ORM with Hibernate, and JWTs to RESTful APIs, UI styling, and TypeScript will help you to develop the Spring Boot and React skills you need.

BookOct 2023454 pages5

Modern API Development with Spring 6 and Spring Boot 3

This practical guide teaches inexperienced Java programmers and web developers how to design, develop, test, and deploy highly scalable and maintainable APIs using REST, gRPC, GraphQL, and reactive programming paradigms with Java and Spring Boot. Complete with real-world examples, it will guide you to build enterprise-level APIs and services.

BookSep 2023494 pages1

Hands-On Web Scraping with Python

This book guides you to discover and extract quality data from the web using Python libraries such as requests, lxml, pyquery, scrapy, and to use effective scraping techniques. It’ll help you master the fundamentals and advanced concepts of web scraping and apply your skills to real-world data extraction tasks, with analysis and visualization.

BookOct 2023324 pages

Mastering Blazor WebAssembly

Mastering Blazor WebAssembly is a comprehensive, practical guide that’ll help you to develop advanced web applications. By combining real-world experience with the thorough knowledge needed to build Blazor apps in a masterful fashion, this book enables you to efficiently manage cross-platform mobile development with .NET MAUI and Blazor.

BookAug 2023370 pages4

Mastering Blazor WebAssembly

Mastering Blazor WebAssembly is a comprehensive, practical guide that’ll help you to develop advanced web applications. By combining real-world experience with the thorough knowledge needed to build Blazor apps in a masterful fashion, this book enables you to efficiently manage cross-platform mobile development with .NET MAUI and Blazor.

BookAug 2023370 pages3

Full Stack Web Development with Remix

Unlock the power of the web platform and cutting-edge technologies for your React applications using Remix to take advantage of the full stack to create a great user experience. This book is a complete resource covering the conventions, levers, and primitives of Remix and illustrates concepts through a real-world project.

BookNov 2023318 pages

Real-World Svelte

This book is a must-have guide to unlocking Svelte's true potential. You’ll learn about advanced component development, efficient coding, and powerful UI patterns using actions. With a focus on state management, custom stores, and renderless components, this book equips you to build exceptional web apps with lightning-fast performance.

BookDec 2023282 pages3

Building Micro Frontends with React 18

This book is a step-by-step guide to building production-grade, highly scalable, and performant web apps using multi-SPA and micro apps patterns, where you’ll learn to deal with complexities related to micro frontends. The book is a full life cycle guide to building, deploying, and managing micro frontends in a cloud-native environment.

BookOct 2023218 pages

Drupal 10 Masterclass

This all-in-one guide helps you get up and running with building Drupal applications using the latest Drupal 10 features. You’ll develop a complete practical understanding of Drupal frontend, backend, architecture, content management, themes, and modules to deliver a rich user experience by creating custom Drupal apps.

BookDec 2023310 pages

Full-Stack Flask and React

This book teaches you how to build simple yet efficient production-ready web applications. Starting with an introduction to React, this book will equip you with deeper knowledge of Flask and React technology stacks to undertake web application development with confidence.

BookOct 2023408 pages5

Full-Stack Flask and React

This book teaches you how to build simple yet efficient production-ready web applications. Starting with an introduction to React, this book will equip you with deeper knowledge of Flask and React technology stacks to undertake web application development with confidence.

BookOct 2023408 pages2