So we have the list of users displaying correctly, and now it's time to work on the ad or edit a user
form.
And right now it just looks like this.
We just have an empty screen with nothing more than a title and a horizontal rule.
And clearly, we need a form here.
So let's build a form back to our editor.
And I'm looking at one dash user, dot page go HTML and right here in the content section.
Let's create a form.
So form method equals post, which doesn't matter because we're not actually going to post this form.
But anyway, we'll put an empty action in there and we'll give it a name, user form and an ID user
form and we'll also give it a class
and we'll put it needs validation
and we'll use bootstraps.
Validation, of course, will set out complete equal to off and no validate equals nothing.
And we'll close the formal.
And of course, we don't need very much information in here, but we need the first name.
So div class equals m b three to give some merging on the bottom and closer and we'll have a label
for equals first underscore name class equals form label
and we'll give it the label of first name and close the label
and our input input type equals text class equals form.
Dust control
idea equals first underscore name mean equals first underscore name
and we'll make that required
and we'll set autocomplete equal to first underscore named.
So there's our first input.
So let's copy and paste it for last name
and change the ID and the name and the first part of autocomplete label.
Now we'll paste it again.
Let me copy this, paste it here.
Let's put a space in there to an indent everything a little bit.
And this will be for email and the label is email
and the idea is email.
And the last name is email.
And we'll make this email new.
We'll make the type of email now, we'll do one for password and revalidate password.
Let's give ourselves some room.
So password and validate password.
And this will be password.
We'll copy and paste it and pasted it.
Make this password and let's make that a capital E on email.
So we're consistent.
The type is password and password now and we'll make that not required.
So basically when we're editing a user, if we don't enter the password and verify password, then we're
not changing the password.
Otherwise we are.
So we'll get rid of that and the same thing down here and we'll make this password or verify password.
Now, copy and paste it in here and make this password and verify password, verify password and verify
password.
So I have error running.
Let's make sure everything is compiling properly and it looks like it's OK.
Let's try this.
Let's try reloading that page.
OK, so we need some buttons now, so let's scroll down at the bottom of our form before the closing
form tag and we'll put a horizontal ruling and I'll put three buttons in and I'm going to put two on
the left and one on the right and the two on the left are easy.
So we'll go div class equals float, start and close at the end.
And the first one will be a button that allows us to save our changes.
And so a class equals button button primary, a travel set to JavaScript
void with the zero.
So it doesn't do anything and we'll give it an ID equal to save BTM and save changes
and we'll duplicate this and I'll make this HSF equal to slash admin, slash all dash users and make
this the cancel button
cancel and we'll make that instead of putting primary we'll make a button warning.
Now I want one on the right and it's going to be a delete button.
Div class equals bloat and I'm close to give and we'll copy this.
And paste it in here and make it button danger and we'll change this to say delete ETM and make this
delete.
OK, let's see how that looks
perfect.
So obviously, once we load this form, if we're going to have a new user, we'll leave this empty.
If we're going to have an existing user, we'll call the back end with the idea of the user in question,
which we can get right from.
The URL will populate first name, last name and email and will leave these two empty.
Now, if it's a new user will hide this button because you can't delete a new user.
But if it's not a new user, then will unhide.
And that should all be pretty straightforward.
So we'll get started on editing an existing user in the next lecture.