#100DaysOfWeb in Python Transcripts
Chapter: Day 52: Anvil - Full Stack Web Apps
Lecture: Building the add document form
0:00 Alright, our next goal is going to work on,
0:02 to be working on this add_doc_form here.
0:06 So what we want to do is we want to be able to drop in
0:09 some pieces, so we're going to come over
0:11 and add a little sublabel, and this is going to control,
0:15 this is going to basically be the label in our form.
0:17 We don't really program against it,
0:18 so we don't need to set the name,
0:20 but this'll be document name.
0:23 And let's make it a little more standout, make it bold.
0:27 And then, we're going to have a text area where they can type.
0:30 Notice I can drop it in these different locations.
0:32 I'll drop it right here.
0:35 We can tighten that up by dragging that bit over.
0:41 Now this one, let's give this a name,
0:43 such as, like, textbox_doc_name.
0:47 And let's give it a placeholder
0:52 document_name like that.
0:54 I'll do exactly the same thing for the rest of the elements.
1:03 Okay, so I've done a little draggy droppy magic,
1:05 and gotten this far.
1:08 We have a document name, we have a category,
1:10 and this is going to be a dropdown, we'll fill that up.
1:12 This is going to be a text area, and we should
1:14 go ahead and give this a placeholder
1:17 so people see and document this little placeholder,
1:21 which'll only be there until they type text,
1:23 and we have this button, create document.
1:25 Let's do a little more work on this.
1:26 We want this to align to the right over here.
1:31 We want an icon.
1:33 Little plus sign, and let's change the color here.
1:40 Go with this blue, which I just grabbed
1:42 off somewhere on my screen, and let's make this,
1:44 you can type hex here if you want.
1:46 Three F's for white.
1:47 Okay, so there's our create document.
1:49 Let's go ahead and run this, see how it works.
1:51 Again, we can click around.
1:53 And now we can add a new document.
1:55 It says document name, the name,
1:57 look how cool that is, it's got nice little bootstrap forms,
1:59 nothing in our dropdown yet, contents here.
2:02 Nothing happens when we click,
2:03 but that's going to be what we do next,
2:05 is we're going to make this interactive
2:07 and do a little validation.