Time for action – improving form appearance
Perform the following steps to take advantage of the styling options made possible by the Fancyform plugin:
- We'll get started with a basic HTML file and associated files and folders, just like we set up in Chapter 1, Designer, Meet jQuery. We'll work with a new HTML file, but let's keep using the styles we set up for the earlier forms. Open your
styles.css
file and paste in the styles we used for our forms in the previous sections. - For this example, in the body of the HTML document, we're going to set up a simple form with examples of each type of hard-to-style form element. Get started with a
<form>
tag, as follows:<form id="pretty-form" action="#"> </form>
- Then, inside our form, we'll add our form elements. We'll start off with a
select
drop-down option, as follows:<fieldset> <legend>Select your favorite juice</legend> <p> <label for="...