CSS - Styling Forms Part 1

Instructors: Jess, Carmen, and Eda

Styling Forms

Before this session, please:

• Read Best Practices for Styling Forms: What Are Some Best Practices for Styling Text Inputs? and take notes
• Read Best Practices for Styling Forms: When Should You Use appearance: none to Deal with Issues Styling Search Inputs and Checkboxes? and take notes
• Read Best Practices for Styling Forms: What Are Common Issues When Styling Special Input Elements? and take notes
• Try to complete as many steps from Design a Registration Form as you can solo. You may need to complete this workshop after we cover this material in class.
• Complete Design a Contact Form solo over the next few days. It’s hard to make contact forms interesting, so bring all your creativity!

During this session, we’ll:

• Review notes
• Review notes
• Review notes
• We’ll look at key steps and concepts from Design a Registration Form together. You may need to finish solo over the next few days
• We’ll talk through Design a Contact Form together to help make sure you’re able to complete this lab solo over the next few days

After this session, please:

• Try to complete as many steps as you can from Build a Game Settings Panel to cement your CSS understanding
• Complete Design a Feature Selection Page solo over the next few days
• Read Styling Forms Review and take notes
• Complete Styling Forms Quiz solo to test your knowledge of CSS and forms

Instructor notes

Best Practices for Styling Forms: What Are Some Best Practices for Styling Text Inputs?

When styling text inputs, some best practices we should be aware of are:

• Properly sized fonts and sufficient contrast of background and text colors
• A readable placeholder with good contrast
• Modifiable input elements (for example, allowing users to resize textareas)
• Focus indicator when the element is in focus
• Noticeable indicator of error state

Best Practices for Styling Forms: When Should You Use appearance: none to Deal with Issues Styling Search Inputs and Checkboxes?

Styling checkboxes and search inputs is usually more difficult than styling other input elements because the browsers define specific default styles for them.

To add custom styles, we can use the appearance: none to remove default browser styling. Creating a custom style also helps with consistency across different platforms.

However, it might also remove the default features such as focus indicators, so we need to make sure that our custom-styled inputs remain accessible.

Best Practices for Styling Forms: What Are Common Issues When Styling Special Input Elements?

The styling of some input types such as date and color will be different from browser to browser, and it relies on complex pseudo-elements (for example, Chrome and Safari use ::-webkit-color-swatch, and Firefox uses ::-moz-color-swatch for color inputs).

Because of these challenges, it’s useful to keep in mind that developers usually need to rely on JavaScript libraries or custom components to style these elements!

Design a Registration Form

We’ll take a look at this workshop and practice styling forms!

Design a Contact Form

This lab exercise goes through the things we’ve learned in this unit, we’ll go through it and make sure you have the support to complete it on your own!