I The proposal This weapons is created user registration form similar to the one presented
now containing input fields,
namely the name,
E mile,
gender and finally,
user name and password.
Being this information submitted by a registration button at the bottom of the page,
I will start with creation off the different elements of the page using the HTML code,
all the elements of the farm will be placed inside the Deve with class name container in
order to allow centering dif and all form elements on the page.
So before creating the form I m diff container which at the top contained the text register
inserted inside an adding tag.
Next,
I have an H R tech that in certain horizontal line used to separate the different types of
content,
namely my entitled and form with respective elements.
Now I start my form using the form tech that defines the farm used to get user input.
This element receives action attributes that tell us where to send form data when data is
submitted for this page.
This attribute is not very important because the exercises intended on Lee to create a
formally out and not out to receive the data coming from the form.
I will then put just a Demi file name in the action at Root.
The first thing put field is now added to place the name.
So I used the level tag for the first input element to match with the I D.
Off the input they are labeling using for disguise Name value in four at root and text name
between open and close tech with bold format to appear along with input field that receives
the name.
The next step is to define the input element using type texts.
Debt receives the place.
Older attributes.
We'd value name text that appears inside input field,
working as a shar tint that describes the expected value.
And finally,
the attributes I d.
With name value being equal to the value used into four attributes off the label.
Tech two related label with the respective input element.
Like I said previously,
so is expected that when I click in my label,
it jumps to the respective input field.
As you can see now individual.
To finish this first input element I used to required at route that is used,
decide that element Best Byfield out before submitting the farm for this guy's.
A warning message appears if the element is not field now,
the second input element that receives information from the mail having a cold very similar
to the one created previously,
I didn't copy this same cult changing in the level tack the value off the fort attributes
for email as well.
The respective texts in the element input I now receive in the type,
attribute the male value to ensure that input value as an email address format into place.
Older,
I write email,
address,
text and finally die de email and the required attribute,
like in the previous field.
Clicking on the level,
will make female field active and entering text without the at symbol in the mail field.
It's suspected to get a warning telling death email address needs this single,
but we'll see the situation at the end.
Before moving to the next step,
I had to line break tags to give spice between the different elements of the farm.
For the next input fields,
I defined user gender with male or female value,
using the type radio for this input field that defines a radio button to select one off the
two options.
First,
I created my label with the gender texts to identify the type of information that I want
from the user.
Now,
for the first option,
I used the radio type with name Gender I D.
Male and finally do required attributes like in the previous inputs for the level tech for
at Your Roots,
with the same name given to the I.
D.
Tooling these two elements label and radio button for when I click on level,
the radio button becomes active for the second radio button.
I said it again with gender name,
leaving the two radio buttons with the same name so that we can combine the two radio
buttons together and get the choosen value.
But this is a part off server side programming.
Finally,
we have the female I D.
And for the label we create before attribute with the value equal to the I D.
So setting this values clicking.
One of the levels will feel the respective choice mile are female.
In the last street input fields,
I received the user name and password definition that has to be confirmed in the left field
.
I didn't make a copy off the cold already used having to change to the first guys.
The attribute.
Far from the libel tech to the value user and writing text.
User name to be used s level.
Indian put steak.
I have the type text with the user name texts in the place older i d.
We'd value user and finally,
the required attribute to make this field needed.
Now the best words for the first input field where the password will be set.
I use best value too far attributes and text best words to appear as label into farm in the
input tag.
I use type password so that the characters are not visible.
The place older at roots this time f the enter password texts value,
while the I D as the best value similar to for a tribute to end the best word.
Repeat fields that as the value best repeats in the far after route and the label texts
repeat best words.
Do type Attitude reminds passwords,
while the place older contains the text repeat password to wind the I D as the value best
repeat now to finish form at the bottom,
I set a submit button using button tag with type,
submit end class rashes that used to define style for this element.
I know if all form elements and it's on Lee necessary to define the style for each one.
Starting with body,
that's I define with Ariel fund family and apply a burly would background color now
container that has inside form elements.
I defined wit with the value off 50% related to the width off the body and Centre de Steve
,
using the marching property with values zero and outer giving equal values to the left and
right margin.
Two F some space between the elements and each side of the container.
I used the petting property with value off 20 pixels and finally define white as the
containers.
Background color funding put elements,
namely with type,
text,
best word and email.
I create the specific formats that will not be applied to the radio buttons,
which is why I have to declare the type off input elements that will be changed.
For this situation,
I define input with type dext inputs,
type passwords and input type email in my CSS selector,
separated by commas being a great methods to choose.
Ali specific attributes values.
I can now define the style for these elements with the wheat off 95% bedding 15% and stop
and bottom margin with 15 pixels and 25 pixels s background color for the input element.
I used the color light gray and for the barter property I use about their wheat off one
pixel.
We'd solid line and caller represented by the exit decimal number BBB to finish.
I use the property barter radios that allows to make a rounded corners.
Indian put element using a value off three pixels,
the Eiger Devalue Doumar,
a rounded input fields will be next.
I defined style for the class button in order to change the layout off the submit button,
giving a wit off 20% big round color green white color to the debts ends up heading off 15
pixels to finish horizontal rule element that is used to separate the title and form that I
defined with the bottom margin with 20 pixels to add some spice between this line and the
first farm element,
I know we have the final layouts being only necessary to do some tests to remember some
details that I talked previously,
starting by clicking on the levels of each input fields,
giving the user access to the corresponding text field,
Onley having to write the respective text in case off data to be field.
We see the warning message that tell us that fields are military.
A message debt was only possible because we used the required attribute.
Another detail that I have already mentioned is the use off the male type in the second
input field that will be very useful to it in the fire texts with the mail formats,
namely,
having to contain the at character situation visible.
Now where I write an email address without that character receiving an error warning to
wind the password.
Information that is isn't due to the use off the type passwords that is used in the input
element.
Thanks for watching.