Welcome to Lecture 8 of our comprehensive HTML tutorial series! In this video, we'll dive deep into HTML Forms and Input Tags, essential building blocks for creating interactive websites. Whether you're a beginner or brushing up your skills, this tutorial will provide you with practical knowledge to enhance your web development journey.
In this lecture, you'll learn:
How to create HTML forms and handle user inputs.
The various input types (text, password, email, etc.).
Form attributes and how to apply them.
Best practices for form validation.
Using forms in combination with CSS and JavaScript for enhanced functionality.
By the end of this video, you'll be able to create fully functional forms for any website, from basic contact forms to complex data submission.
Why You Should Watch:
HTML forms are critical for collecting user data, handling registrations, and creating interactive features like search bars and shopping carts. Understanding how to use input tags effectively will make you a more versatile web developer.
Useful Links:
Previous Lecture: HTML Lists & Tables
Next Lecture: CSS Basics for Beginners
Full Web Development Playlist
Don't forget to Like, Comment, and Subscribe for more web development tutorials!
#HTML #WebDevelopment #Forms #InputTags #LearnHTML #WebDesign #CodingForBeginners #Programming
In this lecture, you'll learn:
How to create HTML forms and handle user inputs.
The various input types (text, password, email, etc.).
Form attributes and how to apply them.
Best practices for form validation.
Using forms in combination with CSS and JavaScript for enhanced functionality.
By the end of this video, you'll be able to create fully functional forms for any website, from basic contact forms to complex data submission.
Why You Should Watch:
HTML forms are critical for collecting user data, handling registrations, and creating interactive features like search bars and shopping carts. Understanding how to use input tags effectively will make you a more versatile web developer.
Useful Links:
Previous Lecture: HTML Lists & Tables
Next Lecture: CSS Basics for Beginners
Full Web Development Playlist
Don't forget to Like, Comment, and Subscribe for more web development tutorials!
#HTML #WebDevelopment #Forms #InputTags #LearnHTML #WebDesign #CodingForBeginners #Programming
Category
📚
LearningTranscript
00:00So welcome back guys
00:02Guys, today we are going to see what are html forms and how to utilize html forms. Let's see
00:09Foreign
00:31Input
00:39Uh input tag
00:56Input tag
01:09Is
01:40Foreign
01:55Input tag
02:09Foreign
02:37Value
02:40Is
02:44Example
02:55Foreign
03:10Foreign
03:24Foreign
03:40Label
03:52Equal
04:10Foreign
04:28Attribute
04:39we write here and min also comes here
04:42min also comes here
04:44and we can call min as minimum quantity
04:48minimum quantity types can come in this
04:51so we see here that minimum 2 can come
04:54so if we write 1 then it will accept
04:58but what is minimum
05:00we have 1,2,3,4,5,6,7,8,9,10,11
05:06we can't go more than this
05:09it won't go more than 10
05:11with that we can write
05:15we have an attribute available
05:19value attribute
05:21which we used above
05:23it is used in every tag
05:25let's suppose I have 2 value
05:27we can change it
05:29we can use placeholder
05:31we can say quantity in placeholder
05:35and quantity
05:37if you use placeholder then you won't see value
05:39if you use value then you won't see placeholder
05:41it is a simple thing
05:43here we remove value
05:45and we see quantity
05:47with that we use another tag
05:49let's replicate it
05:51we have another input type available
05:55types are different
05:57but types which we will review in this video
06:01we will see in that video
06:03here I didn't write anything in 4
06:05here I didn't write anything in 4
06:07now let's see
06:09which type we are going to use
06:11we cross this
06:13and with that
06:15we use this
06:17we use this
06:19and here
06:21we have many
06:23checkboxes
06:25date input
06:27here we use
06:29an input
06:31which is date
06:33let's suppose we want to take birthday
06:35to take birthday
06:37we will write birthday
06:39and here we will get date
06:41and here we will take date
06:43here we have submit button
06:45and reset button
06:47we will check that
06:49we have an input tag
06:51and in input tag
06:53the type will be of submit
06:55type of submit will be
06:57when we use
06:59let's say
07:01saki
07:03and when we submit
07:05it will refresh
07:07and it will become a qd
07:09we don't need to check it
07:11so with that
07:13we have action
07:15and in action
07:17we give file
07:19in which we have to submit
07:21so let's suppose
07:23I write action.php
07:25to show
07:27so here
07:29I write
07:31and here I submit
07:33so it shows me that
07:35I don't have any file
07:37so with that
07:39we have another method
07:41in form
07:43we have method in two things
07:45in post and get
07:47dialogue is not used
07:49get and post is used
07:51so why post and get
07:53are used
07:55usually
07:57input tag
07:59is used for
08:01submission
08:03but
08:05when we have password
08:07let's suppose you are making login form
08:09in login form you have
08:11an email and password
08:13like here
08:15we have
08:17price
08:19we make an email
08:21and with that
08:23we make a placeholder
08:25with that
08:27we have a password
08:29we have an input tag available
08:31we use password
08:33and show password
08:35now
08:37what is the benefit of using different types
08:39here you will
08:41get to know
08:43that in email
08:45if I write something else
08:47and try to submit
08:49then it will tell me that add the thread
08:51so this is
08:53the benefit of using different types
08:55and in password
08:57type of password is used
08:59because it is hidden
09:01so that your password
09:03is in privacy
09:05with that whenever we have
09:07password field
09:09in industry
09:11method is used
09:13we use post method
09:15to use post method
09:17benefit is
09:19here
09:21you can easily
09:23print your data
09:25without any
09:27you can print
09:29with that we have
09:31input tag
09:33like that
09:35we have submit and reset
09:37which will not do anything
09:39only
09:41whatever you have written
09:43it will reset
09:45nothing else
09:47here we have
09:49attribute
09:51which is
09:53most important
09:55attribute is
09:57required
09:59attribute is
10:01boolean value
10:03here in email
10:05I have not written anything
10:07here I am writing submit
10:09whenever I press submit
10:11it says fill out this field
10:13because I have required this field
10:15by doing this you can
10:17print form
10:19let's see
10:21what are the input tags
10:23we have an input tag
10:25whose name is
10:27radio button
10:29and radio button is used
10:31for
10:33radio button
10:35and let's suppose
10:37you have seen
10:39most of the time
10:41we have
10:43mr.
10:45or
10:47we have
10:49or
10:51mrs.
10:53or phdp
10:55here
10:57we have used radio button
10:59and as you can see
11:01I am clicking here
11:03this is also clicking
11:05but at a time
11:07only one should be selected
11:09because we have
11:11only one
11:13here we give
11:15title in form
11:17to correct this
11:19we have
11:21a name tag
11:23we use
11:25name tag
11:27in name
11:29where we use title
11:31we have to use the same
11:33which we have written
11:35so that we get only one selection
11:37not more
11:39so for this
11:41we have used attribute
11:43here also we will get a title
11:45so you can see
11:47here I can select this
11:49or this
11:51so now let's see
11:53one more thing in form
11:55which is used a lot
11:57we call it
11:59here
12:03we call it
12:05here
12:07check boxes are used a lot
12:09so check boxes
12:11we check out here
12:13type of check box
12:15in check box
12:17we write subscribe
12:19what you will do is
12:21click on subscribe button
12:23you have free of cost
12:25no tax or charges
12:27so don't subscribe
12:29so I click here
12:31it is checked
12:33with this we have
12:35many input tags
12:37let's check out
12:39this is a full fledged video
12:41so here I will
12:43fully check out
12:45with this we have
12:47color tag
12:49here we have type
12:51so color type
12:53is used here
12:55and here we say
12:57color
12:59color of the shirt
13:01when you are submitting
13:03any form
13:05you can see
13:07color of the shirt
13:09so here you can select
13:11color
13:13you don't have to do this
13:15you just have to write name
13:17and name is associated
13:19in any label
13:21so you use color here
13:23and here also
13:25with this let's see
13:27one more type
13:29and at the end of the video
13:31I will tell you
13:33a good trick
13:35that how you can make a form
13:37quickly
13:39so here we have
13:41another type
13:43we have file
13:45we write file here
13:47and here
13:49this is the most used type
13:51with this we can
13:53from our browser screen
13:55we can access
13:57our computer screen files
13:59and bring all the forms
14:01in most of the forms
14:03you can see
14:05front and back
14:07so here it is
14:09with this we use
14:11another input tag
14:13here we use
14:15br tag
14:17why br tag is used
14:19br tag is auto closing tag
14:21br tag takes you to new line
14:23so that's why
14:25we use br tag
14:27here we write file
14:29all the code is available
14:31on github
14:33so you can access from there
14:35so here
14:37in front of file
14:39we have another type
14:41let's see
14:43we have a type
14:45date and time
14:47let's suppose
14:49I want to show date and time
14:51so how I will show
14:53here
14:55date and time
14:57we have this
14:59and here
15:01we can write anything
15:03but in date and time
15:05we give only date and time
15:07so here in this format
15:09we will give date and time
15:11in this format
15:13we will use placeholder
15:15and in placeholder
15:17we will write
15:19.eg
15:212023
15:2306
15:2512
15:27anything
15:29with this
15:31we have
15:33a beautify way
15:35here we have to use date
15:37here
15:39I have associated file
15:41let's create date
15:43here we have
15:45another input tag
15:47and input type
15:49let's check out
15:51and make a label
15:53and in input tag
15:55we have another type
15:57and this type name is range
15:59we have here
16:01in any input form
16:03we can select range
16:05and in which range
16:07we can select
16:09we have a payment
16:11let's suppose 0 to 200
16:13so we can make 200 stocks
16:15from 0
16:17from 0 to 200
16:19we can keep it here
16:21we have label
16:23here we arrange label
16:25with this
16:27we use another tag
16:29basically here
16:31there is a combination of multiple tags
16:33we use label here
16:35and what we do with this label
16:37we can select drop down
16:39and what we do in drop down
16:41we have label
16:43here and with that
16:45we will use
16:47a select tag
16:49what we will use
16:51select name can be anything
16:53let's suppose
16:55we write youtube here
16:57and in select
16:59we have different options
17:01in options
17:03we give value of subscribe
17:05do it
17:07do it
17:09do subscribe
17:11so that you get my videos
17:13with that we do option
17:15and in option we write like
17:17do like
17:19do like
17:21with that we have
17:23another option
17:25we can comment
17:27now let's see
17:29like, comment and subscribe
17:31subscribe the channel
17:33see you in next video
17:47bye