You are previewing Learning Web Design, 4th Edition.

Learning Web Design, 4th Edition

Cover of Learning Web Design, 4th Edition by Jennifer Niederst Robbins Published by O'Reilly Media, Inc.
  1. Learning Web Design: A Beginner’s Guide to HTML, CSS, JavaScript, and Web Graphics
  2. Preface
    1. How This Book Is Organized
    2. Acknowledgments
    3. About the Author
    4. Using Code Examples
    5. We’d Like to Hear from You
  3. I. Getting Started
    1. 1. Where Do I Start?
      1. Where Do I Start?
      2. What Does a Web Designer Do?
      3. What Languages Do I Need to Learn?
      4. What Do I Need to Buy?
      5. What You’ve Learned
      6. Test Yourself
    2. 2. How the Web Works
      1. The Internet Versus the Web
      2. Serving Up Your Information
      3. A Word About Browsers
      4. Web Page Addresses (URLs)
      5. The Anatomy of a Web Page
      6. Putting It All Together
      7. Test Yourself
    3. 3. Some Big Concepts You Need to Know
      1. A Dizzying Multitude of Devices
      2. Sticking with the Standards
      3. Progressive Enhancement
      4. Responsive Web Design
      5. One Web for All (Accessibility)
      6. The Need for Speed (Site Performance)
      7. Test Yourself
  4. II. HTML Markup for Structure
    1. 4. Creating a Simple Page: (HTML Overview)
      1. A Web Page, Step by Step
      2. Before We Begin, Launch a Text Editor
      3. Step 1: Start with Content
      4. Step 2: Give the Document Structure
      5. Step 3: Identify Text Elements
      6. Step 4: Add an Image
      7. Step 5: Change the Look with a Style Sheet
      8. When Good Pages Go Bad
      9. Validating Your Documents
      10. Test Yourself
      11. Element Review: Document Structure
    2. 5. Marking Up Text
      1. Paragraphs
      2. Headings
      3. Lists
      4. More Content Elements
      5. Organizing Page Content
      6. The Inline Element Roundup
      7. Generic Elements (div and span)
      8. Some Special Characters
      9. Putting It All Together
      10. Test Yourself
      11. Element Review: Text
    3. 6. Adding Links
      1. The href Attribute
      2. Linking to Pages on the Web
      3. Linking Within Your Own Site
      4. Targeting a New Browser Window
      5. Mail Links
      6. Telephone Links
      7. Test Yourself
      8. Element Review: Links
    4. 7. Adding Images
      1. First, a Word on Image Formats
      2. The img Element
      3. A Window in a Window
      4. Test Yourself
      5. Element Review: Images
    5. 8. Table Markup
      1. How Tables Are Used
      2. Minimal Table Structure
      3. Table Headers
      4. Spanning Cells
      5. Table Accessibility
      6. Wrapping Up Tables
      7. Test Yourself
      8. Element Review: Tables
    6. 9. Forms
      1. How Forms Work
      2. The form Element
      3. Variables and Content
      4. The Great Form Control Roundup
      5. Form Accessibility Features
      6. Form Layout and Design
      7. Test Yourself
      8. Element Review: Forms
    7. 10. What’s Up, HTML5?
      1. A Funny Thing Happened on the Way to XHTML 2
      2. In the Markup Department
      3. Meet the APIs
      4. Video and Audio
      5. Canvas
      6. Final Word
      7. Test Yourself
  5. III. CSS for Presentation
    1. 11. Cascading Style Sheets Orientation
      1. The Benefits of CSS
      2. How Style Sheets Work
      3. The Big Concepts
      4. Moving Forward with CSS
      5. Test Yourself
    2. 12. Formatting Text: (Plus More selectors)
      1. The Font Properties
      2. Changing Text Color
      3. A Few More Selector Types
      4. Text Line Adjustments
      5. Underlines and Other “Decorations”
      6. Changing Capitalization
      7. Spaced Out
      8. Text Shadow
      9. Changing List Bullets and Numbers
      10. Test Yourself
      11. CSS Review: Font and Text Properties
    3. 13. Colors and Backgrounds: (Plus Even More Selectors and External Style Sheets)
      1. Specifying Color Values
      2. Foreground Color
      3. Background Color
      4. Playing with Opacity
      5. Introducing...Pseudo-Class Selectors
      6. Pseudo-Element Selectors
      7. Attribute Selectors
      8. Background Images
      9. The Shorthand background Property
      10. Like a Rainbow (Gradients)
      11. Finally, External Style Sheets
      12. Test Yourself
      13. CSS Review: Color and Background Properties
    4. 14. Thinking Inside the Box: (Padding, Borders, and Margins)
      1. The Element Box
      2. Specifying Box Dimensions
      3. Padding
      4. Borders
      5. Margins
      6. Assigning Display Roles
      7. Adding Drop Shadows to Boxes
      8. Test Yourself
      9. CSS Review: Basic Box Properties
    5. 15. Floating and Positioning
      1. Normal Flow
      2. Floating
      3. Positioning Basics
      4. Relative Positioning
      5. Absolute Positioning
      6. Fixed Positioning
      7. Test Yourself
      8. CSS Review: Floating and Positioning Properties
    6. 16. Page Layout with CSS
      1. Page Layout Strategies
      2. Page Layout Techniques
      3. Multicolumn Layouts Using Floats
      4. Positioned Layout
      5. Top-to-Bottom Column Backgrounds
      6. Test Yourself
    7. 17. Transitions, Transforms, and Animation
      1. Ease-y Does It (CSS Transitions)
      2. CSS Transforms
      3. Keyframe Animation
      4. Test Yourself
      5. CSS Review: Transitions, Transforms, and Animation
    8. 18. CSS Techniques
      1. A Clean Slate (CSS Reset)
      2. Image Replacement Techniques
      3. CSS Sprites
      4. Styling Forms
      5. Styling Tables
      6. Basic Responsive Web Design
      7. Wrapping Up Style Sheets
      8. Test Yourself
      9. CSS Review: Table Properties
  6. IV. JavaScript for Behaviors
    1. 19. Introduction to JavaScript
      1. What Is JavaScript?
      2. Adding JavaScript to a Page
      3. The Anatomy of a Script
      4. The Browser Object
      5. Events
      6. Putting It All Together
      7. Test Yourself
    2. 20. Using JavaScript
      1. Meet the DOM
      2. Polyfills
      3. JavaScript Libraries
      4. Big Finish
      5. Test Yourself
  7. V. Creating Web Graphics
    1. 21. Web Graphics Basics
      1. Image Sources
      2. Meet the Formats
      3. Image Size and Resolution
      4. Working with Transparency
      5. Introduction to SVG
      6. Summing Up Images
      7. Test Yourself
    2. 22. Lean and Mean Web Graphics
      1. General Image Optimization Strategies
      2. Optimizing GIFs
      3. Optimizing JPEGs
      4. Optimizing PNGs
      5. Optimize to File Size
      6. Optimization in Review
      7. Test Yourself
  8. A. Answers
    1. Chapter 1: Where Do I Start?
    2. Chapter 2: How the Web Works
    3. Chapter 3: Some Big Concepts You Need to Know
    4. Chapter 4: Creating a Simple Page (HTML Overview)
    5. Chapter 5: Marking Up Text
      1. Exercise 5-1
      2. Exercise 5-2
      3. Exercise 5-3
    6. Chapter 6: Adding Links
      1. Exercise 6-1
      2. Exercise 6-2
      3. Exercise 6-3
      4. Exercise 6-4
      5. Exercise 6-5
      6. Exercise 6-6
      7. Exercise 6-7
    7. Chapter 7: Adding Images
      1. Exercise 7-1
    8. Chapter 8: Basic Table Markup
      1. Exercise 8-1
      2. Exercise 8-2
      3. Exercise 8-3
      4. Exercise 8-4
    9. Chapter 9: Forms
      1. Exercises 9-1 through 9-4: Final source document
    10. Chapter 10: What’s Up, HTML5?
    11. Chapter 11: CSS Orientation
      1. Exercise 11-1
    12. Chapter 12: Formatting Text
      1. Exercises 12-1 through 12-3
    13. Chapter 13: Colors and Backgrounds
      1. Exercise 13-1
      2. Exercise 13-2
      3. Exercise 13-3
      4. Exercise 13-4
      5. Exercise 13-5
      6. Exercise 13-6
      7. Exercise 13-7
      8. Exercise 13-8
    14. Chapter 14: Thinking Inside the Box
      1. Exercise 14-1
      2. Exercise 14-2
      3. Exercise 14-3
    15. Chapter 15: Floating and Positioning
      1. Exercise 15-1
      2. Exercise 15-2
      3. Exercise 15-3
      4. Exercise 15-4
      5. Exercise 15-5
    16. Chapter 16: Page Layout with CSS
      1. Exercise 16-1
      2. Exercise 16-2
    17. Chapter 17: Transitions, Transforms, and Animation
      1. Exercise 17-1
      2. Exercise 17-2
    18. Chapter 18: CSS Techniques
      1. Exercises 18-1 through 18-3
    19. Chapter 19: Introduction to JavaScript
      1. Exercise 19-1
      2. Exercise 19-2
    20. Chapter 20: Using JavaScript
    21. Chapter 21: Web Graphics Basics
    22. Chapter 22: Lean and Mean Web Graphics
  9. B. CSS3 Selectors
  10. Index
  11. About the Author
  12. Colophon
  13. Copyright
O'Reilly logo

Chapter 9. Forms

It didn’t take long for the Web to shift from a network of pages to read to a place where you went to get things done—making purchases, booking plane tickets, signing petitions, searching a site, posting a tweet...the list goes on! All of these interactions are handled by forms.

In fact, in response to this shift from page to application, HTML5 introduced a bonanza of new form controls and attributes that make it easier for users to fill out forms and for developers to create them. Tasks that have traditionally relied on JavaScript may be handled by markup and native browser behavior alone. HTML5 introduces a number of new form-related elements, 13 new input types, and many new attributes (they are listed in Element Review: Forms at the end of this chapter). Some of these features are waiting for browser implementation to catch up, so I will be sure to note which controls may not be universally supported.

This chapter introduces web forms, how they work, and the markup used to create them. I’ll also briefly discuss the importance of web form design.

How Forms Work

There are two parts to a working form. The first part is the form that you see on the page itself that is created using HTML markup. Forms are made up of buttons, input fields, and drop-down menus (collectively known as form controls) used to collect information from the ...

The best content for your career. Discover unlimited learning on demand for around $1/day.