Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In previous videos, I described how to use the Record Insertion Wizard to create an entire data entry form and send the data collected from the user to the server-side database. I also showed that there are issues with the sort of code the Dreamweaver generates. Most importantly, the data entry form is designed using HTML tables in old-style HTML architecture, but you can also use Dreamweaver to generate similar server behaviors and attach them to your own custom forms.
For this demonstration, I'm going to use a custom form that I've created in the file explorerinsert.php. You'll find it in the explorers folder, under the current site root. This file is built with Cascading Style Sheets and XHTML. Let's take a look at the code structure. Each of the input controls that collects data from the user is represented by an input tag. The input tag has an associated label, and all of the labels and inputs taken together are inside a fieldset tag set.
This represents the most modern approach to building data entry forms - not relying on HTML tables, but instead on Cascading Style Sheets to format and place objects on the screen. I'm also using Spry validation components. I have one text field for the first name, one for the last name, and two others for the date of birth and e-mail. I'll look at the file in Design View and click on each of the validation components. The first name and last name only have required validations. The Date of Birth validation has the date type, and the Email validation has the e-mail type.
I'm going to add one more validation. The select control for the state column has a single static option with the text "Select a State," but if I look in the dynamic setting, it shows that it's filling in the rest of the options from a dynamic record set. This is the data coming from the MySQL database. I'll go to the State field and click it, and then go to the Insert panel, to the Spry category, and I'll locate and click Spry Validation Select.
That adds client-side validation wrapped around the select control. With the Spry validator selected, I'll go to the Properties panel and give this a custom name of sprystate, and then to match the behavior with all the existing form controls, I'll indicate that I want to validate on blur, meaning that if the user pulls down the list but doesn't actually make a selection, they'll see a validation message immediately. I'll save and run the file in the external browser.
If you see messages asking you to copy the file over to the server, say Yes. Next, I'll click Submit, and I'll show that all of the validators display their messages correctly, but you'll also see that the field set changes its width dynamically. If you don't want that to happen, you can fix the field set's width by simply applying a new Cascading Style Sheet rule. I'll close the browser and return to Dreamweaver. Then I'll click on the fieldset object. Take a look in the Tag Selector, and you'll see that the fieldset is selected.
Then I'll go to the CSS Styles, and I'll make sure that I've selected form.css. Notice that I've clicked the All button at the top. This indicates that the rule that I'm about to create will go into this external file. Then I'll click the Plus button to create a new CSS rule, and I'll see a complex descendent selector that Dreamweaver has generated. I'm going to make the selector less specific, because I want to apply this selector to any object with this ID regardless of where it is in my file, and I'll click OK.
And in the CSS rule definition dialog box, I'll go to the Box category, and I'll set the width of the object at 450 pixels and click OK. I'll save all my changes, and once again run the page in the browser. And now my data entry form has a fixed width from the beginning. When I click the Submit button, I still see all of my validation messages, but the width of the container doesn't change at runtime.
So in this video, I've shown you a couple of steps you might want to go through in preparing your form for receiving data and sending it to the server. You can use whatever XHTML and Cascading Style Sheet techniques you prefer to create the look and feel of your data entry form, and most particularly, you can design the form ahead of time to display any validation messages without dynamically changing its dimensions at runtime.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 81224 Viewers
80 Video lessons · 133185 Viewers
52 Video lessons · 66562 Viewers
59 Video lessons · 52380 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.