How to Style the Easy-to-Style Widgets

The easier widgets to style are <form>, <input> (but not "search"), <label>, <output>, and a few others. By styling these when creating your form, you make the form easier for the user and ensure the data is correct by using form validation in the next section. This has a great example of styling a "postcard" contact form from scratch. Download the starter file and follow along to make your own styled form.

Styling web forms

In the previous few articles, we showed how to create web forms in HTML. Now, we'll show how to style them in CSS.

Prerequisites: Basic computer literacy, and a basic understanding of HTML and CSS.
Objective: To understand the issues behind styling forms, and learn some of the basic styling techniques that will be useful to you.

Source: Mozilla, https://developer.mozilla.org/en-US/docs/Learn/Forms/Styling_web_forms
Creative Commons License This work is licensed under a Creative Commons Attribution-ShareAlike 2.5 License.