Web Design Essentials: Creating Forms in Dreamweaver CC
Everybody’s got something that you just can’t stand, but there’s no way around it. For me, it was black-eyed peas. Growing up, I despised black-eyed peas so much I put french dressing on them to hide the taste. And for the longest time, forms have been the black-eyed peas of web design.
Make no mistake about it: forms are essential for online communication. The form is a direct gateway to your online visitors and necessary for any site-based communication. Forms, especially with the new advanced controls like sliders and calendars, also are interactive and as such, serve to draw site visitors in and promote them from remote watchers to up-close doers
Dreamweaver CC has a great many form options and possibilities, from basic to advanced. In this post, I’ll walk you through the process of creating functional, tasty forms. No french dressing required.
Setting up an HTML form
The <form> tag acts as both the container and vehicle for your form elements as well as the entered data. Attributes of the <form> element direct where the data should be sent and how. With Dreamweaver, establishing the proper foundation for your form is point-and-click simple.
- In Live view, select the element you want to place the form after.
- From the Insert panel, switch the Form category and click Form.
- When Position Assist appears, click After.
The <form> element is placed on the page, complete with an ID—initially, form1—and placeholder content.
While the <form> tag is selected, let’s set the necessary attributes.
- In the Property Inspector, enter a new ID if desired.
If you only have one form on the page as is frequently the case, the default ID form1 is fine. However, if you plan on including multiple forms, I’d recommend customizing the ID to something more meaningful, like contactForm.
- Enter the path and file name of the form processing script in the Action field; you can also click the Browse for File icon to locate the file.
It’s key to understand the limitations of HTML when working with forms. HTML can only set up and display the form—you’ll need a server-side language like PHP or CGI to handle the actual processing. If you’re working on a PHP or similar web page and the processing code is on the same page, leave the Action field blank.
- From the Method list, select the way you want the data transmitted. The POST method is used when you want to sends the information without displaying it; use GET to include the data in the URL string, as is common with Search forms.
- Select any of the other desired attributes. The options include:
- Class – Sets an overall CSS style for the form.
- Title – Provides a tool tip when the form is hovered over by the user.
- No Validate – Select to override the default HTML5 validation.
- Auto Complete – Enable to allow browser to complete entries in a variety of form fields including text, search, url, tel, email, password, datepickers, range, and color.
- Enctype – Sets the encoding type. Use Default (application/x-www-form-urlencoded) unless your form is uploading a file, in which case, select multipart/form-data.
- Target – Controls where the page that is displayed after the form is submitted opens.
- Accept Charset – Handles the character encoding for form submission.
Okay, we’ve got our form. Let’s go populate it!
Laying down your structure
At this stage, I’d double-click inside the highlighted element and remove the placeholder text. Some designers like to include introductory text within the <form> tag, but I prefer to keep limit the content to form elements and controls.
Now we come to what I feel is a key decision: structure. For the most part, forms are composed of a series of labels and related form elements, separated from one another in rows. Some folks like to use tables while others prefer a series of paragraphs or divs. I think tables are perfectly acceptable—forms are a type of tabular data, after all—and I tend to use them for complex forms. For a basic form, like we’re going to construct, a number of paragraphs do the trick.
I’ve found when building a form in Live view, it’s best to set up your structure prior to inserting any form fields or controls. For this simple contact form, I think I’m going to need 4 different rows—you’re not married to whatever your initial decision is, but it’s best to plan out your form ahead of time. Here are the next steps:
- With the form placeholder content deleted, select the form.
- From the Insert panel, switch to the HTML category.
- Insert a paragraph, using Position Assist to nest it within the form element.
- After the paragraph is in place, select the <form> tag again, either from the Live view display or the Tag Selector.
- Press Ctrl C/Cmd C to copy the paragraph and then Ctrl V/Cmd V to paste a new paragraph.
- Repeat steps 4 and 5 twice more so there is total of 4 paragraphs inside the form.
Looks like our foundation is well-layed, time to add the form elements.
Starting with the basic form elements
With a basic contact form, such as this, you’re sure to use a combination of standard text fields as well as some of the new HTML5 varieties. Dreamweaver inserts both the form element and the associated label. Let me show you the most efficient way to work with them.
- Double-click the first paragraph tag in the form to enter Edit mode.
- Press Ctrl-A/Cmd-A to select all the placeholder content and delete.
- Click anywhere outside of the paragraph area to exit Edit mode.
The paragraph will remain selected.
- From the Insert panel, switch to the Forms category.
- Click Text and, via Position Assist, Nest.
Dreamweaver adds the label as well as form field, now selected.
- From the Property Inspector, change the ID to name.
While you can change the ID in the heads up display, making the change in the Property Inspector not only changes the ID attribute value, but also the name value (vital for much form processing) and even the <label> for attribute. Win, win, win!
- Double-click the <label> element and change the placeholder text to Name.
This same process can be followed for all the text-based fields.
Adding HTML5 pizazz
HTML5 lavished some much needed love on forms in general and form controls, specifically. The additional elements range from the core text-related fields—like email, tel, and url—to the more sophisticated date and time controls. We’ll take advantage of the relatively recent additions to include one from each category and then finish the form with the necessary submit button.
- Following the steps in the previous section, insert an Email object in the second paragraph.
Here, there’s no need to change either the ID of the form element or the <label> text, as both are appropriately-named Email by default.
- Remove the placeholder content for the third paragraph.
- From the Forms category of the Insert panel, click Date.
Again, you can leave the default ID and label text of Date. The default format, mm/dd/yyyy, is shown as a placeholder, courtesy of HTML5.
- Remove the placeholder content from the final form paragraph.
- From the Insert panel, choose Submit Button.
- In the Property Inspector, change Value to Contact Me! (exclamation mark optional :).
Now that the basic form is complete, save the file and preview it in a browser, like Chrome. Everything works as expected, even the date field.
However, if you try the same page in Firefox, you will only get a standard text field. Unfortunately, not all HTML5 innovations—such as the date tag—are fully supported across all browsers; the Can I Use site is your go-to source for finding out what works where. A bit later in this article I’ll show you how to add cross-browser support via jQuery UI, but first, let’s add some simple styles to clean up the look-and-feel of the form.
Because almost all the form elements we’re using follow the same pattern, <label> followed by <input>, a single CSS rule with just a couple of properties can neaten up the form.
In fact, for this page, all that’s needed is a single selector, label. You’ll want to give the <label> a consistent width to avoid the ragged appearance with different length text. Additionally, aligning the label to be flush with the input fields is a standard form look. Both goals are easily achieved with simple declarations.
The eagle-eyed among you will notice that I said almost all the form elements used follow the same pattern. The one exception is the submit button, which does not have a separate label tag. No worries, one more rule brings it into alignment:
With just those two CSS rules, your form is neat and tidy indeed.
Incorporating advanced jQuery UI controls
I promised to show you how to make the calendar cross-browser compatible and, luckily, the solution is built right into to Dreamweaver CC. The jQuery UI widgets available through the Insert panel and the menu include a couple of layout objects—Accordion and Tabs—along with a host of objects perfect for ramping up your form. Happily, for our purposes these objects include the highly-functional Datepicker. Let’s hit that upgrade, shall we?
- Select the Date <input> field and press delete.
None of the jQuery UI form objects include a <label> tag, so we’ll leave that in place.
- Select the <label>
- In the Insert panel, switch to the jQuery UI category.
- Click Datepicker and, when Position Assist appears, choose After.
- With the Datepicker object selected, on the Property Inspector, select the Button Image checkbox.
This option allows you to include a small icon to the right of the date field. You can use your own graphic or the available jQuery resource, referenced in the next step. Take note of all the other available options in the Property Inspector; they are very robust and worth investigating.
- In the file field below, enter the following path:
Almost done! The input field is all set, but with an ID different from the Date object. You’ll need to adjust the for attribute of the <label> to make sure everything works the way it should.
- Select the <label> tag again and press Ctrl-T/Cmd-T to open the Quick Tag Editor.
- Change the for attribute value to Datepicker1 and press Enter/Return.
Now, before you rush off to preview your glorious new datepicker in all the browser you can get your hands on, there is one small issue that may need to be addressed. If the page you have inserted the Datepicker into is a Bootstrap page, you’ll now have two calls to include jQuery—which is a conflict resulting in the object not working. To overcome this minor hiccup, locate the following line near the bottom of your page:
Delete or comment out the line. Now, save your page and preview away.
As noted earlier, once your form is designed in HTML (with a wee bit of help from jQuery), you’ll need to make sure it works properly with whatever server-side processing code you have chosen. Enjoy your new form functionality, courtesy of Dreamweaver CC—and eat your black-eyed peas or there’s no dessert!