Organize the form elements

- [Instructor] Combining the form wizard and the layout view is an easy way to get started created your database's forms. But the real power and flexibility lies in utilizing the full design environment for creating forms from scratch. Once you understand what's going on under the hood, creating your own forms that meet your exact specifications and needs will become second nature. Let's start by creating a new employee directory for H+ Sport. To do that, I'll go up to the create tab, and in the forms group I'll click on form design. That'll start up a new blank form in the design view. And we can see that we have this dot and grid pattern here in the background. This'll help us align our different elements on the form, but it won't display any final design. The edges of the form are represented by the area where that dot and grid pattern ends. So we can see that line right over here on the right and if I scroll down my screen, we'll see the bottom of the form here. I like to be able to see the entire form on my screen at one time without having to scroll, so let's go over to the bottom right hand corner and when I get the four-headed arrow, I'll click and drag that up a little bit. Then I can go ahead and scroll back up on my screen. Keep in mind though that your forms are going to automatically resize to fit your end user screen. And we'll take a look at ways that we can control that behavior later on in the course. For now though, we need to start adding in the fields that have referenced the employees table. To do that on the design tab of the ribbon, we'll come over to the tools group and click on add existing fields. That'll open up this new window on the right. Then I can click on show all tables, expand the employees table, and we can start dragging and dropping the different fields that occur inside that table. First I'll click on the first name field and I'll drag and drop it into the center of my form. That actually brings along two different elements. The one on the left is a label, and the one on the right is a text box. The label will be a static piece of text that won't change as we scroll through the records. The text box is where the data will actually appear and it'll get populated from the data table. If I switch my view into form view we can see what that means. Here we have the label that says first name and now the text ox says Henry, which is the first name of my first employee. If I scroll through the different records we can see that that name changes. Let's go back into design view. And to do that I need to press the bottom portion of the view button and choose design view from the popup menu. With an element selected in design view you'll notice that we get these handles around the edges. We can use these to resize the element. For instance, if I click here on the right hand side, I can make it wider or I make it narrower by dragging to the left. I can also make it taller or shorter by dragging on the bottom handle. The handle in the upper left hand corner that's a big gray rectangle will allow you to move the element around on the screen. If I grab anywhere else on that line and move it, you'll notice that it also moves the label as well. So in order to move these two elements independently you'll use the grabber handle in the upper left hand corner, and in order to move them together you can grab and move on any of the other areas. I can also nudge things around on my screen by using the arrow keys on my keyboard. So for instance, if I tap the left arrow a couple of times we can move it the left. I can move it to the right with the right arrow, I can also move it up or down. And if I hold down the shift key on my keyboard, we can resize things as well. So hold down the shift key and press the right arrow to make it wider. Press the left arrow with the shift key held down to make it narrower. So that's how we move elements around on the design view of our form. Let's go ahead and add in the other fields from our table. I can go ahead and grab the last name and drag and drop that into my form as well. Another way we can do this is to simply double-click on fields over here in the list. For instance, if I double-click on employee ID, that gets added in as well. Let's add in the email address, the department, the position, I'm going to skip status, and I'm going to scroll down here on the list, and we'll skip the benefit information, but we'll also add in the photo, I'll double-click on that. Now all of the fields that I want to use in my employee directory have been added into the design view of my form, I can go ahead and close out of the field list. If I switch my view back into form view we can see the data being populated into these different areas. And I can scroll through the records and see how things are shaping up. Now let's go ahead and fine-tune some of these positions. Once again, I'll switch back into design view. Now I can move a bunch of different objects at once by selecting them all by dragging a box around a bunch of different elements. Now that they're all selected I can move them all at once. Let's go ahead and move them out of the way. Then I'm going to delete some of these redundant labels, let's go ahead and click off of that to deselect everything. And I'm going to delete the label that says photo. This box over here is where the photo will actually display and I don't need a label to tell me that that's a picture. Let's go ahead and select the photo label and I'll press delete on my keyboard to get rid of it. Then, I'll click on the photo itself and I'll move that into position. Move that over here to the top left hand corner and resize it so it's about one inch by an inch and a quarter by taking a look at the rulers on the left hand side and top of the screen. Then I'm going to delete the labels for the first name as well as the last name. I'll select the first one, press shift on my keyboard, and select the last name field. And then going to tap the delete key on my keyboard to get rid of those labels. Then, I'll move the first name into position here on the top of the screen. I'll move the last name field after it. Then I'm going to move the employee ID to the upper right hand corner. Let's go ahead and select its label and move it independently by dragging on the upper left hand corner handle. I'll move that above the employee ID field. Then I'll select the employee ID field and move that to the upper right hand corner, it'll move the label at the same time. Finally, I'm going to move the email, department, and position all underneath the first and last names. Let's go ahead and select all of these, oh actually I need to draw a bigger box around it. Then we'll move those up. And I'm actually going to make these text boxes a little bit wider. I'll go ahead and drag a box around all three of these and drag it to the right. Let's go ahead and click off of our form to deselect everything and take a look at the results in form view. And I think this is looking a lot better. At this point it's a good time to save our form, I'll press the save icon on the quick access tool bar or just simply tap the control S shortcut key on your keyboard. And I'll call it Employee Directory. That'll save the form into the navigation pane. We can finesse these positions as we continue to develop the form, and truth be told, form design is going to require a lot of back and forth as the final layout gets further refined. Now that we have our form field elements in roughly the positions that we want, we can turn our attention to some of the formatting options that are available.