Hey, welcome back.
In the previous video, we coded the index.html file and also the app.py file.
So these two files are producing this web page.
The visible part though is the responsibility of the index dot html file.
So let's work some more on the front end.
So the front end is the HTML code.
The back end is the python code.
Right?
So this is what we have so far.
Just a heading here, this text.
And let's add some input fields I first name and a second name field.
How do we do that?
Well, as I mentioned before, everything that is visible goes inside the body tags.
So we have this H1 tag already.
We want to add another one.
Let's indent here.
This will be a form, right?
So we use the form tags.
Inside the form tags we will have labels and input fields.
So label, for example, first name.
And just under that goes an input tag.
Now you can notice that some tags have their corresponding closing tags, but other ones, such as the
input tag, does not have a closing tag.
So with inputs, you write here the parameters of that tag.
So the type will be text for this input, the ID will be first name and the name will be first name
as well.
So these will be needed later on because we refer to that from the Python file.
And so name is important for that part.
And we want to make this a required field.
So that's it.
Oh, you need to remove the comma here.
So you usually get these kind of highlighting when you have some issues there.
So, for example, you can hover your mouse here and it says attributes, comma is not allowed, so
you may want to delete that.
Also, we have some highlighting here in labels, unknown HTML tag labels.
So this is actually label, not a labels.
And you also want to add here four is equal to first name and this refers to the ID, So if you change
the ID to something else, for example, that this will be highlighted in red.
So it says invalid ID reference.
So you need to mention an ID here.
So basically you are tying these two together and now if we go to the web page, so make sure that your
app is running.
My app is running so I don't need to rerun it again.
I can just go here, refresh with Ctrl or Command R and you'll see the label and the field.
So the field is this the label?
Is this.
Now there is also one more thing we may need to add here, and that is the div tags div like this and
you want to cut that and place it just below here.
So notice what I'm doing here, the hierarchy.
So we have the form, it opens here and it closes here, right?
And then parts of the form are these children.
So div is the child of the form, so to say.
And then Div now, which opens here and closes in here, has these children a label and an input tag
or elements.
In other words, why did I put div here?
Well, because for now this will not change anything.
So you can refresh the page.
It doesn't change anything, but this allows us to actually keep these two organized and then we apply
some styling to this div later on we'll add some class is equal to some bootstrap classes, but let's
do that later.
For now we'll leave it like that and then I'll select these four lines.
So the div together with its two children and I'll press Ctrl or command D and that will duplicate that
div.
You see, we had these, now we have these also.
And I did this because now I want the last name as well.
So I want to write here.
Last name.
Last name type is text.
The ID is last name.
The name is also last name.
Last underscore name, and it's a required field as well.
So go to the Web page refresh.
And we've got these two fields and two labels.
Don't worry about the Luke for now.
I know that these are very close to each other, but we'll fix that with CSS and bootstrap later on.
So for now, let's just make sure the structure of the front end is accurate.
So we have first name.
We have a last name.
Then we have the email input, so duplicate those with Ctrl or command D.
So that is just say email here.
Email for the label text.
Then this will be email.
The type is email.
So this is one of the input types.
We have text.
We have email.
It's good to have email here even though you can also use text.
But having email means HTML will validate the user input there.
So if the user is typing in something which doesn't contain the email at symbol, then the app will
reject will not submit those entries.
So it's very important to have email as the type here.
Let's use email for the ID and the name as well.
So that will reflect to this.
So we have three entries.
Let's add some more.
The date the the applicant will select the date that they are available for the new job.
So this will be the label for the date.
Let's say available start date Type.
Date ID.
Date.
Name.
Date.
Right.
Let's see what this brings up.
So there we go.
By setting date as the type.
Here that will give us the correct widget, the correct field for the date.
So depending on your browser, though, this may look different.
So on Chrome it will look something like this on different browsers can be.
In different styles.
So I hope that's clear.
And the last element we want to add is a series of radio buttons.
So we want to ask the user what is their current occupation?
And we want to do that by showing them some options which they can select and let's duplicate the date
widget.
So this one here, let's duplicate it with Ctrl or command D, So that's the duplicated code and this
is going to be the first option employed and remove that column.
So for.
Employed.
So that will be the ID of the input type.
So input type, this will be a radio type, right?
So that's a label of this radio widget.
The ID is going to be employed, the name also employed, and this will look like this on the website.
So employed and the option there.
Now this is on the left because the label is before.
So if you want to change that, you want to cut this.
So put your cursor anywhere in this line and press Ctrl or Command X and then go to the next line and
yeah, put that in its place.
So the input widget first and then the label and that will look like this.
So now it looks better.
Let's add another one.
And before we do that we also need a label for the group of buttons.
So label, label and let's say current occupation rates and this will look like this.
So current occupation, we need a break line To create a break line.
We need the BR tag so the current occupation label a break line, the widget and the label of the widget.
So this will look like this now.
Current occupation employed.
And let's add another one so everything stays inside this div tags.
Right?
So now I select input and label and I duplicate it.
So again, this will be type radio.
The ID, let's add the other option.
The first option was employed.
The second option is unemployed.
The current occupation of.
The applicant for unemployed.
And the label, the actual text that the user will see on the website will be unemployed as well with
an uppercase letter.
So these are invisible, right?
All these are metadata, but this is what the user sees.
So we refresh and we see this.
It's not ideal.
We will improve it.
We will make it vertical later on.
But let's keep it as it is for now so the user can select a one of them.
However, currently that's not possible.
So the user might select more than one option, which is not what we want.
We'll fix that.
But before that, let's add the other options as well.
So let's duplicate that and we have three.
Now I'll make some break lines between each group so it's more readable.
And so this will be self.
Employees copy that to the name and here in the label as well.
So this is self employed.
Right.
One more time for the student status.
So.
Student name.
Student for student.
Texts.
Student.
Let's refresh.
So there we go.
Employed, unemployed, self employed student.
And let's fix this issue now so that we force the user to select only one option.
To do that, we should place all these four radio buttons inside a div.
So let's do that.
Let's go here with tab, create a div tag.
So you want to cut that out?
We want to go here.
Pays that fix the indentation rates.
And then we want to select all that block and press tab to indent it.
And so notice we have two divs, right?
We have this, that div, it opens here and it closes in here.
And that div element encapsulates all the radio buttons plus this label here, current occupation,
plus the break line.
And then we have this other div element which opens here and it closes here.
This encapsulates only the radio buttons.
And now we can go inside this div tag here and add an ID which will be equal to occupation.
Now this ID here occupation should reflect the name of these radio buttons.
If we want to group them together.
So instead of having a different name for each radio button, we should have occupation for all of them.
Because currently if we go here, we refresh again, we can select all of them.
But see now if I change this to occupation, so I'll copy that name to.
Every button.
So I'm working on the name attributes, right?
Not on the ID attributes.
So we've got occupation as the ID of the div occupation, as the names of the input elements.
And now we go here, refresh, and the user can now select only one of the options.
Because the options now are grouped together using that trick.
And lastly, there's one more element we need to add to the form, and that is the button.
The submit button.
So we'll add that button somewhere here.
And when the user presses that button, the user entries such as the first name, the last name they'll
put here, the email address, the date and the selection here, all these data will be sent to Python
right in the Python script.
We'll get them as strings and then we'll send those strings as text by email to the user email address.
So the user will enter an email address here and we will send an email to the user telling them, Oh,
you sent us this data, this is your application, just so that they have that as a confirmation.
And then we also store this data in an SQL database.
So let's add that button.
Let's go to index.html again.
So we are here.
No, the divs.
So that's the div for the available starts widget.
That's the div for the radio button group.
So from here.
Up to here.
So we have two div elements.
Right.
And after the second div, which is between the form closing tag and the closing div here, just here
we want to add a button element with a submit label.
So that's the label of the button and also the type will be button with that.
If we go to the website, we refresh, we should see this button here so it doesn't do anything for
now, but we'll fix that in the next videos.
So that's what I wanted to show you in this video.
We built the structure of the front end.
We have everything now here.
These don't look very visually appealing for now.
So in the next video, I want to focus on adding some style to this page using Bootstrap.
So let's implement that in the next video.
I'll see you there.