You are previewing Mastering HTML5 Forms.
O'Reilly logo
Mastering HTML5 Forms

Book Description

Create dynamic and responsive web forms with this in - depth, hands-on guide

  • Enhance the look and feel of your form

  • Optimize your user experience for any device

  • Utilize HTML5’s brand new form elements

In Detail

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

  1. Mastering HTML5 Forms
    1. Table of Contents
    2. Mastering HTML5 Forms
    3. Credits
    4. About the Author
    5. About the Reviewers
    6. www.PacktPub.com
      1. Support files, eBooks, discount offers and more
        1. Why Subscribe?
        2. Free Access for Packt account holders
    7. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is for
      4. Conventions
      5. Reader feedback
      6. Customer support
        1. Downloading the example code
        2. Errata
        3. Piracy
        4. Questions
    8. 1. Forms and Their Significance
      1. Understanding web forms
        1. Benefits
      2. HTML versus HTML5 forms
      3. The form <input> types, elements, and attributes
        1. The <form> <input> types
        2. The <form> elements
        3. The <form> attributes
      4. Building an HTML5 form
      5. Guidelines
      6. Summary
    9. 2. Validation of Forms
      1. Form validation
        1. Client-side form validation
        2. Server-side form validation
      2. HTML5 form validation
        1. Code 1 – validating a textbox using JavaScript
        2. Code 2 – validating a textbox using HTML5 <form> controls
      3. Constraint validations
        1. HTML5 constraint validation APIs
          1. The validity object
          2. The checkValidity method
          3. The setCustomValidity() method
          4. The willValidate attribute
          5. The validationMessage attribute
          6. The patternMismatch property
            1. The validity.patternMismatch attribute
          7. The customError property
            1. The validity.customError property
          8. The rangeOverflow property
            1. The validity.rangeOverflow property
          9. The rangeUnderflow property
            1. The validity.rangeUnderflow property
          10. The stepMismatch property
            1. The validity.stepMismatch property
          11. The tooLong property
            1. The validity.tooLong property
          12. The typeMismatch property
            1. The validity.typeMismatch property
          13. The valueMissing property
            1. The validity.valueMissing property
          14. The valid property
            1. The validity.valid property
      4. Error messages
      5. Summary
    10. 3. Styling the Forms
      1. CSS3 for web forms
      2. Selectors and pseudo-selectors
      3. Backgrounds
        1. The background-clip property
          1. Syntax
          2. Values
        2. The background-origin property
          1. Syntax
          2. Values
        3. The background-size property
          1. Syntax
          2. Values
        4. The background-color property
        5. The background-repeat property
        6. The background-attachment property
        7. Borders
        8. The border-radius property
          1. Syntax
          2. Values
        9. The box-shadow property
          1. Syntax
          2. Values
        10. The border-image property
          1. Syntax
          2. Values
      4. Text effects
        1. The text-shadow property
          1. Syntax
        2. The word-wrap property
          1. Syntax
          2. Values
      5. Fonts
        1. The @font-face rule
          1. Syntax
        2. Font descriptors
          1. The src font descriptor
          2. The font-style font descriptor
          3. The font-stretch font descriptor
          4. The font-family font descriptor
          5. The unicode-range font descriptor
          6. The font-weight descriptor
      6. Gradients
        1. Syntax
        2. Values
      7. Styling the forms
      8. Guidelines
      9. Summary
    11. 4. Connection with Database
      1. PHP
        1. Syntax
        2. Form handling
          1. The GET method
          2. The POST method
        3. The filter method
          1. Validating user input data
          2. Sanitizing user input data
          3. The FILTER_CALLBACK filter
          4. Filter multiple inputs
      2. MySQL
        1. MySQL for PHP
        2. MySQL-PHP connectivity
          1. Open a connection to the MySQL server
          2. Close a connection
        3. Create or select a database
          1. Create a database
          2. Select a database
        4. Create a table
        5. Primary keys
      3. Spoofing and forging forms
        1. Forging HTTP requests
        2. Spoofing submissions
        3. Shared secrets
        4. Setting expectations
      4. Linking a form to a server
      5. Summary
    12. 5. Responsive Web Forms
      1. Responsive design
        1. Google's view about responsive design
        2. Benefits of using responsive design
        3. How responsive design works
        4. Screen resolutions
        5. Viewport
      2. Media queries
        1. Media types
          1. Internal media query
            1. Syntax
          2. External media query
        2. Media features
        3. Different screen resolutions
          1. Small screen devices
          2. High resolution displays of Apple mobile devices
            1. For high resolution devices
            2. For small screen high resolution devices
            3. For large screen high resolution devices
          3. Devices in landscape and portrait modes
            1. Small screen devices in portrait mode only
            2. Small screen devices in landscape mode only
      3. Fluid grids
        1. Fluid grid generators
        2. 960 grid system
        3. Bootstrap
      4. Adaptive images
        1. Features
        2. How it works
        3. Customization
      5. Making our form responsive
      6. Limitations
      7. Guidelines
      8. Summary
    13. Index