Learn HTML Forms In 25 Minutes
Summary
TLDRThis video tutorial offers a comprehensive guide to creating HTML forms, starting with the essential login form. It covers various input types, including text, email, number, date, and password, highlighting browser-based validation and user experience features. The tutorial also explores checkboxes, radio buttons, select elements, textareas, and hidden inputs, explaining their uses and configurations. Additionally, it touches on file uploads andๅฐ่ง input types like telephone and URL, concluding with practical tips for enhancing form functionality and user interaction.
Takeaways
- ๐ Forms are crucial for user interaction on websites, allowing data submission.
- ๐ The 'form' tag is used to define where inputs will be submitted, with the 'action' attribute specifying the destination.
- ๐ Input elements within a form do not require closing tags and are self-closing.
- ๐ท๏ธ The 'label' element improves accessibility and usability by linking text to form controls.
- ๐ Div elements can be used to organize form inputs into a multi-line layout.
- ๐ The 'type' attribute in input tags defines the type of data expected, such as 'text', 'password', 'email', etc.
- ๐ The 'submit' button in a form triggers data submission, and 'reset' can clear form inputs to default values.
- ๐ The 'required' attribute enforces mandatory field completion before form submission.
- ๐ The 'name' attribute in input tags identifies the data for processing on submission.
- ๐ The 'for' attribute in 'label' tags associates the label with a specific form control.
- ๐ Date and time input types provide built-in validation and user interfaces for date selection.
- ๐ข Number input types restrict input to numeric values and can include attributes like 'min', 'max', and 'step' for range and increment control.
- ๐ธ Checkboxes and radio buttons are used for multiple-choice questions, with the same 'name' attribute ensuring single selection in radio buttons.
- ๐๏ธ The 'select' element allows users to choose one or multiple options from a dropdown list.
- ๐ The 'textarea' element is for inputting large amounts of text, including new lines.
- ๐ The 'hidden' input type is used for data that should not be visible to the user but is submitted with the form.
- ๐ The 'file' input type enables file uploads, requiring the form to be set to 'multipart/form-data' for proper submission.
- ๐ Specialized input types like 'tel' for telephone numbers and 'url' for URLs optimize mobile keypads for easier data entry.
- ๐จ The 'color' input type provides a color picker for users to select a color.
Q & A
What is the purpose of forms in a website?
-Forms are one of the most important parts of a website as they allow users to input and submit information to the site, facilitating user interaction and data collection.
How do you create a basic HTML page for a form?
-You can create a basic HTML page for a form by using Emmet or by manually writing the boilerplate code, starting with a 'form' tag and including input elements within it.
What is the default action of a form if left unspecified?
-If the action attribute is left unspecified in a form tag, the form will submit to the current page that the user is on.
How do you create a label for an input element?
-You create a label for an input element by using the 'label' tag and associating it with the input field using the 'for' attribute, which matches the input's 'id'.
What is the purpose of the 'submit' button in a form?
-The 'submit' button in a form is used to send the form data to a server for processing. It triggers the submission of the form.
Why is it necessary to specify the 'name' attribute for input elements?
-The 'name' attribute for input elements is necessary to identify the data submitted by the form, making it accessible for processing on the server side.
What is the difference between 'get' and 'post' methods in forms?
-The 'get' method appends form data to the URL and is used for simple data retrieval, while the 'post' method sends data in the body of the request and is used for secure transmission of sensitive information.
How can you validate email addresses using form input elements?
-You can validate email addresses by specifying the type of an input element as 'email', which enables built-in browser validation to ensure the input is in a valid email format.
What is the purpose of the 'required' attribute in form input elements?
-The 'required' attribute is used to enforce that the user must fill out a specific field before the form can be submitted, preventing the submission of incomplete data.
How can you make an input element default to a certain value?
-You can set a default value for an input element by using the 'value' attribute, which pre-fills the input field with the specified value when the page loads.
What is the function of the 'placeholder' attribute in input elements?
-The 'placeholder' attribute provides a hint or example text within an input field that describes the expected value, which disappears when the user starts typing.
How do you create a checkbox input element?
-A checkbox input element is created using the 'input' tag with the type set to 'checkbox'. It is typically associated with a 'label' for better accessibility and user experience.
What is the difference between checkboxes and radio buttons?
-Checkboxes allow users to select multiple options, while radio buttons are used when only one option can be selected at a time from a group of choices.
How do you create a select element with multiple options?
-A select element is created with the 'select' tag, and options are added using the 'option' tag. To allow multiple selections, the 'multiple' attribute can be added to the 'select' element.
What is a textarea used for in a form?
-A textarea is used for inputting larger amounts of text, including multiple lines, and is ideal for collecting information that requires more space than a single-line input.
What is the purpose of the 'hidden' input type?
-The 'hidden' input type is used to include data in the form submission that should not be visible or interactable by the user, typically used for server-side processing or JavaScript manipulation.
How can you enable file uploads in a form?
-File uploads can be enabled in a form by using an 'input' element with the type set to 'file' and ensuring the form has the 'enctype' attribute set to 'multipart/form-data'.
What are some of the less common input types mentioned in the script?
-Some of the less common input types mentioned include 'tel' for telephone numbers, 'url' for URLs, and 'color' for color selection, each providing specific keyboard layouts or validation.
Outlines
๐ Introduction to HTML Forms
The paragraph introduces the importance of information and forms in web development. It outlines the process of creating a basic login form, including setting up an HTML page, using the form tag, and adding input elements for user data submission. The video demonstrates how to use input elements for user names and passwords, and how to include a submit button. It also covers the use of div tags for layout and the concept of form submission through the 'action' attribute, highlighting the difference between GET and POST methods.
๐ Enhancing Form Usability
This section delves into improving form usability with labels and IDs, explaining how to associate labels with input fields for accessibility and screen reader support. It also discusses the use of input types, such as 'password' to hide input characters, and 'submit' for form submission. The paragraph further explores the use of the 'value' attribute for default values and 'placeholder' for providing hints to users. It concludes with the importance of the 'required' attribute to ensure form fields are not left empty.
๐ Form Input Types and Validation
The paragraph explores various HTML input types, including 'email' for email address validation, 'number' for numeric input with min/max constraints, and 'date' for date selection with built-in date pickers. It also touches on the 'checkbox' and 'radio' input types, explaining their use for multiple choices and single selections, respectively. The 'select' element is introduced for dropdown menus, and 'textarea' for multi-line text inputs. The paragraph concludes with a brief mention of the 'hidden' input type.
๐ผ๏ธ Advanced Form Elements
This section focuses on advanced form elements such as 'file' input for uploading files, 'tel' for telephone number input with a specialized keypad on mobile, 'url' for website URLs, and 'color' for color selection. It emphasizes the 'enctype' attribute necessary for file uploads to ensure the form data is sent in multiple parts. The paragraph also mentions the 'text' input type, which is not explicitly detailed but is implied to be for general text entry.
๐ Wrapping Up HTML Forms
The final paragraph summarizes the video's coverage of HTML forms, highlighting the variety of input types and form elements discussed. It encourages viewers to explore more resources and subscribe for further web development tutorials, thanking them for their time and interest in the topic.
Mindmap
Keywords
๐กForms
๐กInput Elements
๐กLabel Element
๐กAction Attribute
๐กMethod Attribute
๐กPlaceholder
๐กRequired Attribute
๐กType Attribute
๐กButton Element
๐กValidation
๐กFile Input
๐กHidden Input
๐กTextArea
๐กSelect Element
๐กRadio Button
๐กCheckbox
Highlights
Introduction to the importance of forms in web development.
Demonstration of creating a basic login form using HTML.
Explanation of how to use the form tag to group inputs for submission.
Use of input elements for user input without the need for closing tags.
Inclusion of label elements to improve accessibility and user experience.
Creation of a submit button to allow form submission.
Utilization of div tags for layout purposes to organize form elements.
Discussion on setting the action attribute to define form submission destination.
Clarification on the use of GET vs POST methods for form submission.
Introduction of JavaScript for rendering form results on a results page.
The necessity of specifying input names for form data retrieval.
Use of the 'for' attribute to associate labels with form inputs.
Different types of input elements like email, number, and date for specific data validation.
The functionality of checkboxes and radio buttons for multiple or single selections.
Explanation of the select element for choosing one option from multiple.
Introduction of the textarea element for larger text inputs.
Use of the hidden input element for including data not visible to the user.
File input element for uploading files and setting the enctype attribute.
Additional input types like tel for phone numbers and color for color selection.
Conclusion summarizing the comprehensive coverage of HTML forms in the video.
Transcripts
information is key which is why forms
are one of the most important parts of a
website in today's video I'm going to
show you everything you need to know
about how to create forms and elements
inside of those forms and if you're new
around here make sure to subscribe for
more videos where I simplified the web
for you let's get started now
to get started with forms let's build
one of the most common types of forms
which is a login form to do that we
first need to create a page to load it
on so we're just create a page called
index.html and in here if you're envious
code or you're using Emmet if you just
type exclamation point and hit enter
it'll generate all the boilerplate code
you need for a basic HTML page
we could just change the title here to
form because this is going to be
demonstrated in forms now to use a form
the first thing you need to do is open
up a form tag so you can just type in
here form close it off and this is going
to be a form tag in all the inputs that
you put inside of this form are going to
be submitted to wherever your form goes
to by default if you just leave your
form tag blank like this it's going to
submit to the page that you're currently
on so in a study here let's put our
different inputs so we can use the input
element which is going to allow us to
input into our page from our user and
what we want to do is we want an input
element and this one's going to be the
name and the thing with input elements
is they don't actually need to be closed
because they don't actually allow you to
specify anything inside of the tags
there are self closing tags so if we
want to add a label to our input we need
to do is we need to use what's called a
label element so let's have our first
one beat our user name so what you're
going to put a name here and we can just
copy this down because we're going to
need a second one which is going to be
for our password so we can type and
password here and now we're almost
complete with the basics of our form but
we need some way to submit our form so
we're going to create a button to do
that so let's just create a button here
and we're just going to call this submit
for the text of our button now to
actually test this page we can just
right click and open with live server
which is an extension from Visual Studio
code that you can download once we have
that open we can see over here that if
we expand this a little bit we have our
name field we have our password field
and we have our submit button and right
now they're all clobbered onto the same
line so let's use some divs which is
just another basic tag which will allow
us to separate these onto multiple lines
so if we put some code inside of this
div it's going to end up on the next
line and we can do the exact same thing
down here with our password let's create
another div to wrap our password element
in oops copy this paste it in there and
when we save you see it populates over
here on new lines now we can enter name
information password information and
click Submit and you'll see it'll submit
it to the page that we're already on but
while technically this does work it's
not at all
you want to build forms in actuality
almost always when you build the form
you're going to want your form to submit
somewhere other than the page that
you're currently on so in order to do
that we have a keyword here in attribute
which is called action and the action is
going to be where your form is
submitting to and in our case we're just
going to create a page here which is
called results HTML and this is going to
be where we want our form to submit to
the next thing that you almost always
are going to specify on a form is the
method you want your form to use and
this is either going to be get or a post
with a get request it's going to append
things to the URL and it's going to send
it to another page in your site while
the post is going to be useful for when
you have a server where you need to save
some information if for example we were
to use post here so if we change this to
post and we try to submit something you
see that we're immediately going to get
an error because browsers can't render
post requests they can only render get
requests and we don't have a server so
what we need to do is we need to use a
get request here instead of a post
request and now this is going to work as
soon as we create our actual page so
let's create that results HTML page and
I'm actually just going to copy over
here
it results HTML page this is a very
basic page all it has is a link that
goes back to our form and it has a
little bit of JavaScript which is going
to render the results from our HTML form
from before so now let's go back over
here refresh our page and we want to
just make sure we click Submit and
you'll see that nothing is being shown
up for our form fields but we do have
that button to go back and the reason
nothing is showing up for our form
fields is because in order for an input
to actually show up as a form what we
need to do is we need to specify the
name for that input so let's do that now
the name here is just going to be a name
for this first one because we just want
it to be whatever we're submitting to
our form so we're gonna use this as name
and down here for our password we're
gonna set the name of this one equal to
password now if we say bet and come over
here and we type in for example a
username and we type in a password let's
just say that's that and we click Submit
you'll see name is set to username and
password is set to password if you can
see in the URL it's setting those
parameters here name equals user name
and password equals password and that's
what a get request does is it sets it in
the URL here while if we did the post
request here this is actually going to
set it in the body so if we refresh this
enter in some information and click
Submit again we're going to get that
error because we don't have a server
accepting any requests so you need a
server if you're going to use post so
for the rest of this example we're going
to be using git for all of our different
requests so now with that out of the way
we have our form set up properly we have
our inputs with actual names so that we
can use these and render them later when
we submit our form but our labels aren't
actually doing anything very useful
because normally if you click on a label
it should actually highlight the field
that's being labeled for this is really
helpful for not only users but also for
screen readers in order to do this we
just need a set of four attribute here
and we said it's the idea the element
that we want to highlight whenever we
click on the label so in our case we're
gonna say name and then we need to give
our element here that ID which is just
going to be named now if we click on our
label it's actually going to highlight
the input element that that label is for
another way that you can do this is if
you don't want to have that four
attribute you can actually nest your
element inside the label so if we come
in here and we wrap our label around our
input element so we have both our
password string and our input element
inside of the label now when we click
the label you see it's going to
highlight that password field for us
almost always you're going to see people
use the for attribute instead of
wrapping inside of it just because it's
cleaner and easier to style but just so
you know that you can do this and a lot
of people do this when it comes to
checkboxes and radio buttons which we're
going to get to later in this tutorial
and speaking of different types of input
elements one thing you only knows is
that our input here does not have any
type specified for it which is why it's
defaulting to a text input here but you
always want to be explicit in what type
of input you're using so you always want
to specify a type field and the input
tag is very versatile because you can
have many many different types of inputs
but in our example we just want to have
a text input here for the name but for
the password normally when you're on a
website when you type in your password
it's actually hidden and that's because
there's a type which is called password
which actually by default hides the
characters for you so now if we save
this and we enter our username you see
it works just fine when we enter a
password
you see it's hiding our characters for
us and that's because we're using type
of password for our input element and
lastly the only thing left to make this
login form correct is that we need to
change our button down here because we
want this to be a submit button so we
can just come in here we can type in the
type of submit and what this says is
this as it's going to submit our form
and when we hit enter for example
anywhere
our form so if I type in something here
and I click the enter key it's also
going to submit our form which is why
having type submit' on your button is
really useful and it also allows you to
have other buttons in your form that
don't necessarily submit your form
because this one right here is
submitting it since it has the type of
submit another type of button that's
really useful and really under no one is
going to be a button with a type of
reset and if we just set that here we're
just going to set the text here to reset
and we go back to our form and we just
type in some text
if we click reset it sets everything
back to its defaults and as you can see
our defaults for us are just going to be
completely blank but what happens if for
example you want to default the field
for the user let's say you already know
what the user name is for that user and
you want to set that by default that's
where the value property is going to
come in so you just type in a value and
anything you set in here is going to be
the default value for that property so
let's set the default here to just be
user now when we refresh our page you
see the user is being the defaulted name
and the best part is is if we change
this and click reset it goes back to the
default value we have set in our code
for the HTML another thing that's really
useful is to have a placeholder value
for example if we have this user's name
here let's say that we don't actually
know what their name is but we want to
put in a placeholder this is just
something that's going to show up to
kind of let the user know a little bit
more information about what they want to
put in here so we're gonna say our place
while there is just user name and as you
can see it fills that in in a lightish
grade text and as soon as the user typed
something else it completely removes the
placeholder and if they remove
everything it goes back to having that
placeholder just to reiterate a little
bit on the points that we touched on a
placeholder is really useful for when
you want to give a little bit more
information to your user while value
that you set so for example we change
this here to value this is really useful
if you already know what the value is or
you want to default this as something
that is going to be submitted with your
form because if we click Submit it
submits that user name value but if we
change this to be placeholder for
example instead and we click submit it
does not submit the placeholder only the
value another thing you'll notice is
that we're able to submit a blank name
and a blank password which in a login
form you would want to throw some kind
of error to the user telling them they
can't submit blank information and
luckily this is really easy to do
there's an attribute which is called
required and this is required attribute
is
or seeing the user to actually enter
this information let's remove this
placeholder so it's a little easier to
see and if we save it and click Submit
you'll see that we get an error that
says please fill out this field and if
we fill it out and click Submit now
it'll let it go through so we want to
add that required attribute to both our
password and to our name field here so
now they even if they enter just a name
no password it's still going to give
them that error until they enter that
password as well now as I mentioned
earlier in this video the input element
here has many many different types that
it can be so let's go through and
analyze some of the different types that
we have by starting with one of the most
common types which is going to be the
email type let's create another div here
this Dib is going to be used to ask for
the email so we're gonna have a label
we're gonna use for email and in here
we're just going to put email as the
label and then we're gonna create
another input and this is going to have
a type here of email and this is going
to verify email addresses for us by
default let's make sure we set the name
to email so we can use it when we submit
it and we also need the ID here to match
what we set for our for so we're going
to use email in there and let's just
make it required because we always want
our user to send an email now if we say
that you see our email field is showing
up here and if we type in something for
example I was typing everything and we
click Submit you see that it says to
please actually make sure that this is a
valid email address so by default our
browser is doing email validation for us
now it's not the greatest email
validation in the entire world but it's
a whole lot better than having nothing
and also when a users on a phone it's
going to give them a keyboard which is
actually specified for entering emails
as opposed to just the generic text
keyboard other than that though email is
very similar to the text field that
we've already covered now let's move on
to a little bit more complicated of a
field which is the number field so let's
again enter another div in here with a
label this is going to be for what we're
going to put as our age because we want
to ask the user for their age and we're
going to create an input again for doing
that and this is going to have a type
here of a number and let's make sure we
set a name which is going to say age and
an ID which is going to be age and let's
just not make this from a required
because we don't think that they need to
enter this and if we save you see we get
aged and immediately you'll notice we
have up and down arrows to be able to
specify where our age is going as well
as where you can use the arrow keys to
modify this and that's because we're
using the type of number when we specify
this input also if I try to enter
different characters that are not
numbers it won't allow me to
to them another really useful thing that
we can do when specifying number
elements as we can specify minimum and
maximum so obviously we don't want our
age to be below zero so we're going to
set the minimum here to be one and we
also don't want it to be above a certain
number so we're gonna set the maximum to
just say 200 no one's over 200 years old
so now if we save that and come over
here and we try to decrease this you see
that one is the lowest we can go if for
example I enter negative 10 make sure
all the required fields are entered and
hit submit
let's make sure this is actually an
email and now we click Submit you'll see
that says the value must be greater than
10 but let's say we put 201 in here
click Submit you'll see that it must be
less than 200 so these validations are
built into the browser another
interesting thing we can do is what's
called step and by default the step is
going to be equal to 1 so that means
when we click our up and down arrow keys
it's going to increase and decrease by 1
well for example we could change us what
if we wanted to be by 5 so if we save
this now when I click up it's going to
increase by 5 at a time as you can see
the next input element we want to cover
is going to be the date input element
and again this is going to be just like
all of our other input elements we're
going to have a label which we're going
to set up for to in our case we're going
to say for date and we're just going to
come in here and we're going to say this
is going to be a birthdate for example
so now let's go down here we're gonna
create an input and this is going to
have a type I just want to set this to
date to specify it's a date I'm gonna
make sure we set the name to date the ID
to date so that we match our 4 for our
label over here and we're just gonna
close that off and now if we save you
see that we get a date input which
already has some defaults for us as well
as a nice little date picker we can
select what date we want inside of here
just like with the number field we can
for example specify a minimum and a
maximum if we want so let's come in here
and specify minimum which is going to be
2019 June 10th let's save that and come
in here and if I try to select the date
before that it won't let me but it will
allow me to select the day after that
and if I come in here and manually
change this for example I want to change
it to the first and I try to submit it
after making sure all the other fields
are submitted properly make sure all the
required ones are click Submit and
you'll see that the value must be
greater than that date that I specified
as the minimum and again we could do
maximum if we want but we already did
that with numbers so we're going to skip
that now let's move on to the next type
of input which is going to be completely
different than all the
we've covered so far this is going to be
the checkbox element so let's create a
div and inside of this div we're just
going to let's apply a little bit of
text this is going to be outside of a
label and this is just going to be for
favorite food because we want checkboxes
for all of our different favorite foods
and now inside of here we're going to
put all of our different checkboxes
we're gonna do each one of these inside
of their own div so firstly if we're
gonna have a label which we need for all
of our different elements we have a four
and this first option that we want to
have is going to be banana make sure we
close that off put in banana here and
then we actually want to create the
input for that so this input is going to
be a type here of checkbox
we're going to specify here our name
which is just going to be banana and
we're going to specify lastly the ID
which is again going to be banana close
it off and save it you see we get a
checkbox here for banana now let's say
we want to add another favorite food
let's just copy this div so that we can
do the exact same thing but we just want
to change this so we're going to change
this to be Apple change the text to the
Apple click and spell properly and make
sure of course we update our name and
our ID to be properly set now if we say
that you see that we have banana and
apple and we can check box both of this
if we want or just one or none of them
but what if we only want to be able to
allow a user to check one box at a time
instead of all of the boxes because with
check boxes you can check as many or as
little the boxes as you want but if you
want to allow them only to specify one
favorite food we need to use what's
called a radio button so let's go down
here and we're going to create another
div and inside this one we're going to
ask the user for gender because they can
only have one gender and we're going to
use a radio button for that so let's
close this off here we're gonna create
our div get a label inside of that and
this label is going to be for our first
one which is going to be male and we can
just say male and then we need to create
our input so the input is going to have
a type here which is going to be radio
and now you would be thinking that the
name here should be male that's actually
incorrect because these radio buttons
all need to share the exact same name
which is how we know that there can only
be one selected so in our case this is
actually going to be gender for our name
and we want to also put in here our ID
which is male which again corresponds
with our for element for our label now I
say that and you see we get a radio
button for a male let's add the exact
same thing for a female what's copied
this
down make sure that everything's
indented properly and this is going to
be female female and lastly our ID is
going to be a female now if we say that
and we click male that's all good but if
we click female you see it unselect male
and selects female for us and that's
because we share the exact same name of
gender between both our male label and
our female label inputs down here you
see they have the exact same name which
means that we can only select one of
them at a single time as opposed to be
almost like multiple of that one thing
that you need to do additionally with
radio buttons though is actually specify
a value so when you submit it to your
form you know what you're getting back
so in our case we want to put a value
here which is going to be male and for
female we want to put a value which is
going to be female now I've saved that
and actually enter in some information
for our form so that we have some valid
information and let's select male and we
click Submit and you'll see we get
gender here set to male which
corresponds with the value that we
selected here for our radio button
now the next element that we want to
look at is actually not an input element
it's actually a select element but it
works very similarly to the other input
element let's go down here a little ways
before our password and we want to come
in here with our div and inside of this
instead of an input like I said we're
going to be using a select and of course
we still want to label our select so
we're going to make sure our label is
specified here and inside of our select
we're gonna select eye color so we can
just say here our eye color and we want
our label to say that eye color and
inside of the select what we're going to
do is we're actually going to put
options inside of here so to do that we
come down here we type an option and our
option is going to have a value whoops a
value so in our case we're going to put
green as the value and it's also going
to have that in here as the actual text
so we can just put that here you could
also use what's called the labels
section and specify green here so we'll
do that on another option was copy this
down we're gonna do a red option so
we'll say red but instead of putting our
value inside the option like that we'll
just say our label here is going to be
red and also on our select we need to of
course make sure we have a name here
which we're just going to set to eye
color and again our ID which is going to
correspond with that label for that we
have so ID here
is going to be eye color now let's save
that and you can see we have our
selector which decides green and red as
are two different values that we can
select from and again we have green
specified inside the option for the
label or we can use the label attribute
of our option either way allows us to
set the actual value that we have seen
inside of the select here now by default
a select only allows you to select one
option but you can come in here and you
can use the attribute which is called
multiple and if we say that we can now
select multiple values by just holding
down ctrl and clicking on them like this
and now we have both of our values
selected and if we fill in everything
else on our form just so we can see what
this looks like and makes our passwords
there and we submit you see that has eye
color showing up twice both for green
and for red because we selected both of
those values from our previous form now
if we go back to our form you may notice
that we don't have any form elements
that allow us to specify lots of text
and text with new lines in them and etc
so in order to do that we're going to
use another element wrap it inside of a
div here and this one is called a text
area and this again is not actually from
an input it's its own element called
text area and this is one of the few
elements that has an actual closing tag
because the value actually goes inside
of the text area here as opposed to on a
value attribute so now it's first before
we get carried away put a label which is
going to have four here and this is
going to be a file for our user and we
can just say bio and again we want to
make sure we have an ID on here which is
going to match the four from our label
and a name so we can actually use this
inside of our form and now let's put a
bio inside of here so we're going to say
my name is Kyle and if we save that you
see that we have a bunch of extra space
being added into our element here and
that's because this text area converts
all of the white space so all this white
space before the my name is Kyle in this
new line that we have here all that's
being added in so if you have a default
value for your text area you want to
make sure there's no white space between
the opening and closing tags now if we
save this you said is properly not
adding extra space force which is what
we want but let's just remove that
default value for now and we save that
you see we can enter in our value as we
want but we can also hit enter and do
that and enter in multiple lines of text
very easily and we can even expand this
if we need to to make it larger to work
with now select and text area are the
only two anomaly type of elements that
don't actually use the input for their
element so now let's go back to the in
to talk about another really interesting
element which is called the hidden input
element we don't even need to create a
div for this because it's actually just
completely hidden we won't even need a
label we just need an input and you
specify the type of hidden and that's it
we're gonna give it a name so let's just
say this is going to be called hidden
and we're going to give it here a value
and we're just going to set the value to
high now if we say that you see nothing
actually shows up on our form but if we
do submit this form so let's make sure
we submit it with all of our different
required values and click Submit you see
we get that hidden it attribute being
passed along with the value we specified
inside of our HTML but it doesn't
actually show up on our page which is
why it's a hidden input and users are
not able to interact at all with hidden
inputs which is exactly what they're
used for they're really great when
you're trying to do some fancy
manipulation in JavaScript or you want
to send something down from your server
but if you're just creating a generic
HTML form like this the hidden attribute
is almost never going to be useful
unless you're doing something fancy in
JavaScript or on your server the next
interesting element that we have to take
a look at is actually going to be the
file input so let's create a div so we
can wrap this in here let's create a
label for it first this is just going to
be for what we'll just call file and we
can just specify it as file then we're
going to have our input tag we want to
say that this is going to be an ID of
file just so it has the same as our
label the type here is it going to be a
file type and again we're just going to
give it a name a file so we can know
what it's actually looking for when we
submit our form and now you can see down
here we can actually choose a file to
submit to our browser but the first
thing we need to do to make it so that
when we submit this to a server that
it's actually useful for our server we
need to specify a new attribute on our
form here and this is going to be called
the E&C
type just like this and inside of here
what we want is multi-part form data and
what this essentially says as files are
very large we can't send them all at
once it's going to send that file in
multiple parts so we need to tell our
server that we're sending in multi parts
our form data into multiple different
sections so that it knows to look for
multiple sections of an upload as
opposed to just one single form upload
and this will actually allow us though
can submit our files to our servers so
now let's test that out let's come in
here choose a file we'll just choose one
of my channel arts
type this in here make sure we have all
the different information for our form
submitted and if we click Submit you'll
see our file is showing up as our
channel art 1 PNG which is what we
selected when we uploaded our file next
let's kind of try to rapid-fire here
through some of the lesser used input
elements let's make sure we create our
div and inside of this div we want to
make sure we have our label and this is
going to be for a phone we're gonna ask
our user for their phone number so we'll
say for phone gonna say phone is the
label and we just want an input and the
actual type of this is going to be tell
te L just like this stands for telephone
name here is going to be phone whoops
phone cannot type today this is bed
phone and an ID which is going to match
our four of phone close that off and
there we have our phone field and the
really great thing about this phone
field is that if a user is on a phone
entering this information it'll give
them a nice keypad which is specifically
meant for entering phone numbers and not
just for entering generic text next
we're gonna have another input here
which is going to be for URLs so let's
create our div create our label for it
which is going to say for URL close this
off URL and we want to make sure we have
our input which is going to have a type
here of URL a name of URL and it's going
to have an ID of URL close that off oops
there we go and you can see we get our
URL entering down here and another great
thing about this again on mobile phones
it's going to give them a special keypad
but specifically meant for entering URLs
lastly I want to cover just a kind of
fun input element here which you
probably won't ever see anywhere but
it's just fun to use every once in a
while this was going to be for color so
we're gonna say here for color make sure
it says color here and again as you
guessed it this is going to be an input
which is going to have a type of color
whoops type color a name which is going
to be color and it's going to have an ID
which is color close this off and now
you see here we have a color selector we
can select any color that we want and
click OK and it will actually select
that color for us let's say we want to
have this blue color click OK and it
changes it to blue and finally after
that long video we've covered everything
you need to know about HTML forms make
sure to click over here for more
where I simplify the web for you and
subscribe to the channel for more videos
just like this thank you very much for
watching and have a good day
Browse More Related Video
HTML - Forms - W3Schools.com
HTML Forms and Inputs | HTML5 Tutorial for Beginners
Forms and input tags in HTML | Sigma Web Development Course - Tutorial #7
Selenium Tutorial for Beginners 6 - Using XPath In Selenium With Examples
How to Create A simple Login Form in HTML - Easy Tutorial
Auth Page Logic | To Do App | FlutterFlow for Beginners
5.0 / 5 (0 votes)