Book Image

Mastering HTML5 Forms

By : Gaurav Gupta
Book Image

Mastering HTML5 Forms

By: Gaurav Gupta

Overview of this book

HTML5 has given web developers the ability to easily develop sites and applications which, previously, were extremely time consuming. Now, they can not only build visually stunning forms and web pages, but can also increase the scope of their applications, as well as collect valuable user inputs and data through customized forms. This practical guide will teach you how to create responsive forms, and how to link them to the database. This will enable you to take advantage of the power behind HTML5 elements for building forms, and make the user interfaces attractive and more interactive. Explore the benefits of web forms, and learn how to create them using new HTML5 form elements. This guide will take you through a number of clear, practical examples that will help you to take advantage of the forms built and customized using HTML5 and related technologies, quickly and painlessly. Your ability to build responsive forms will be enhanced throughout the book.You will also learn about the necessity of validations, CSS3 properties for improving the look of the form, and how to link the form to the server. Lastly, you will learn to make the standard forms responsive by making them compatible with desktops and mobile devices.
Table of Contents (12 chapters)

Preface

Web viewers may never know about the background of an application, such as HTML5, CSS3, Responsive Web Design, or PHP. What they want to know is whether your application works on their device or not and how much effort is required.

Even though web development has changed over the years, the core task of creating a web page has not been changed. We create a document and put it out on the Web for people to view. To put something on the Web, we need to learn some special languages that are accepted on the Web. Yes, we are talking about the scripting languages such as HTML and PHP.

The main objective of this book is to ensure that the user who fills the form built by you should enjoy and feel satisfied in every possible way. Here, satisfaction means the look and feel of the forms and minimum adjustments on the page while navigating, which can be on a desktop computer, mobile device, or mini laptop.

This book has been written keeping in mind that readers should enjoy a step-by-step, example driven, and visual-based approach to learning. This book will cover many aspects of web development, such as the language used to develop the web forms as well as ways to make web forms look good and accept information from visitors.

This book will act as a platform with which you will learn how to create beautiful and responsive forms and link them to the database where the form information will be stored.

What this book covers

Chapter 1, Forms and Their Significance, explains what web forms are and how we can create these using the new HTML5 form elements. It also explains the benefits of web forms along with the guidelines that must always be kept in mind while designing and developing a form.

Chapter 2, Validations of Forms, explains validations and their necessity in forms as well as the new HTML5 elements and their attributes that reduce the effort of client-side validations. It gives a brief description of the validation constraints and supported API's and also briefs us on the customization of error messages on the browser.

Chapter 3, Styling the Forms, explains the CSS3 properties that can be utilized to make forms more presentable. It details us about the vendor-specific prefixes that are utilized in different browsers along with the effective styling guidelines that must be kept in mind while enhancing the look and feel of a form.

Chapter 4, Connection with Database, explains briefly about linking a form to the server using PHP and MySQL, which are used by web developers to store user information.

Chapter 5, Responsive Web Forms, explains responsive designing and approaches that can be used to make our form responsive. It also discusses the guidelines you should follow to make a responsive form.

What you need for this book

Any text editor such as Notepad++ or Bluefish can be used to write HTML and JavaScript code. In Windows, Notepad can also be used to create a simple HTML file and CSS and JavaScript code can be embedded inside it, which can then be opened in a web browser.

The good news is that almost every web browser comes with a built-in HTML and JavaScript Interpreter that compiles the code and executes it within the web browser host environment during run-time.

PHP files can be written in any of the editors used for writing HTML, CSS, or JavaScript. For linking the form to the server, the Wamp server is used in Windows and phpMyAdmin tool is used for MySQL databases.

Who this book is for

This book will help anyone who is willing to enhance their skills in building web forms using HTML5 and related technologies.

This book should be read by those who are interested in learning how HTML5, CSS3, and PHP can be used to build responsive, beautiful, and dynamic web forms.

Different readers will find different parts of the book interesting.

Without worrying much about having in-depth knowledge of previous W3C specifications and PHP, users who have learned HTML and PHP on a beginner level can directly learn how to build web forms using HTML5, CSS3, and PHP and collect customer information.

Conventions

In this book, you will find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles, and an explanation of their meaning.

Code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles are shown as follows: "We can include other contexts through the use of the include directive."

A block of code is set as follows:

<div class="gender">
  <label for="gender">Gender</label><br>
  <input type="radio" name="gender"><label>Male</label>
  <input type="radio" name="gender"><label>Female</label>
</div><br>

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

font-family: Helvetica, Arial, sans-serif;
  color: #000000;
  background: rgba(212,228,239,1);
  background: -moz-linear-gradient(top, rgba(212,228,239,1) 0%, rgba(134,174,204,1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(212,228,239,1)), color-stop(100%, rgba(134,174,204,1)));

New terms and important words are shown in bold. Words that you see on the screen, in menus or dialog boxes for example, appear in the text like this: " For submitting the form to the server, we have created a Submit button".

In this book, we have used for Mozilla Firefox, Google Chrome, Safari, Internet Explorer, and Opera.

Note

Warnings or important notes appear in a box like this..

Tip

Tips and tricks appear like this.

Reader feedback

Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of.

To send us general feedback, simply send an e-mail to , and mention the book title via the subject of your message.

If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide on www.packtpub.com/authors.

Customer support

Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.

Downloading the example code

You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.

Errata

Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you would report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/submit-errata, selecting your book, clicking on the errata submission form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded on our website, or added to any list of existing errata, under the Errata section of that title. Any existing errata can be viewed by selecting your title from http://www.packtpub.com/support.

Piracy

Piracy of copyright material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works, in any form, on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.

Please contact us at with a link to the suspected pirated material.

We appreciate your help in protecting our authors, and our ability to bring you valuable content.

Questions

You can contact us at if you are having a problem with any aspect of the book, and we will do our best to address it.