#100DaysOfCode in Python Transcripts
Chapter: Days 85-87: Fullstack web apps made easy
Lecture: Building the Add new document form
Login or
purchase this course
to watch this video and the rest of the course contents.
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:26
Okay.
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.
