Learn HTML Forms In 25 Minutes

Summary

This 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

00:00

🌐 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.

05:01

🔑 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.

10:02

📊 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.

15:02

🖼️ 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.

20:03

🎉 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.

Keywords

💡Forms

Forms in the context of web development are used to collect user inputs and are a fundamental aspect of user interaction with websites. In the video, forms are the central theme, with a focus on creating and understanding various form elements and their attributes.

💡Input Elements

Input elements are HTML tags used within forms to capture user data. The video script discusses different types of input elements such as text, password, email, and number, each serving a specific purpose in data collection and providing examples of how they are implemented in a form.

💡Label Element

The label element is used to define a label for an input element and is crucial for accessibility. In the script, it is mentioned that clicking on a label should highlight the associated input field, which is important for screen readers and user experience.

💡Action Attribute

The action attribute in a form tag specifies where to send the form-data when a form is submitted. The video explains how to use the action attribute to direct the form submission to a specific page, such as 'results.html'.

💡Method Attribute

The method attribute defines the HTTP method used when sending form-data. The script covers 'GET' and 'POST' methods, explaining that 'GET' appends form data to the URL, while 'POST' sends data in the request body, and the implications of each for form submission.

💡Placeholder

The placeholder attribute provides a hint to the user about what should be entered in the input field. The video script uses the placeholder to give an example of how to guide users on filling out form fields, such as 'user name' in the username input field.

💡Required Attribute

The required attribute is a boolean attribute that makes an input field mandatory to fill out before submitting the form. The script demonstrates its use to ensure that users cannot submit the form without providing necessary information, such as a username or password.

💡Type Attribute

The type attribute of the input element defines the type of data expected, such as 'text', 'password', 'email', or 'number'. The video script explains how different types of input fields are used for different kinds of data, affecting both user interface and data validation.

💡Button Element

The button element in HTML is used to create clickable buttons. The script distinguishes between 'submit' and 'reset' types of buttons, explaining their functions in the context of a form — submitting form data or resetting form fields to default values.

💡Validation

Validation in the context of forms refers to the process of checking that the entered data conforms to specified rules. The video script discusses built-in browser validation for email and number inputs, as well as custom validation using the required attribute.

💡File Input

A file input allows users to upload files through a form. The script explains how to implement a file input and mentions the need for setting the 'enctype' attribute of the form to 'multipart/form-data' to handle file uploads properly.

💡Hidden Input

A hidden input is an input element that is not displayed to the user but is sent along with the form data. The script describes the use of hidden inputs for sending data that the user does not need to see or interact with.

💡TextArea

The textarea element allows for multi-line input from the user, unlike single-line input fields. The video script demonstrates how to create a textarea for users to enter longer text, such as a biography or feedback.

💡Select Element

The select element creates a drop-down list of options. The script explains how to use the select element to provide users with a list of choices, such as different eye colors, and how to allow multiple selections using the 'multiple' attribute.

💡Radio Button

Radio buttons are used when only one option can be selected from a group of choices. The video script illustrates how radio buttons with the same name attribute ensure that only one option can be chosen, such as selecting a gender.

💡Checkbox

Checkboxes allow users to select multiple options from a group. The script shows how to implement checkboxes for selecting favorite foods and contrasts them with radio buttons, which require the same name attribute for a single selection.

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