Forms and input tags in HTML | Sigma Web Development Course - Tutorial #7
Summary
TLDRThis video tutorial delves into the fundamentals of HTML forms and input tags, essential for submitting data from clients to servers. It explains the importance of forms on websites, types of input tags like text, radio, and checkboxes, and the use of labels for better user interaction. The instructor also covers best practices, form attributes like action and method, and touches on the significance of placeholders and validation attributes. The video encourages viewers to engage with the content and join the Sigma web development course for a comprehensive learning experience.
Takeaways
- 📝 Forms are crucial for submitting data from clients to servers on websites, such as contact pages and inquiry forms.
- 🕒 HTML forms are used to submit details like date and time for flights or railway tickets.
- 🔑 The 'form' tag in HTML requires an 'action' attribute to specify whether to use a GET or POST request.
- 🔍 The difference between GET and POST requests is that GET is simpler and has limitations, while POST is used for sending large amounts of data.
- 🏷️ 'Input' tags within a form can include various types of data entry fields, such as text, date, and numbers.
- 🏷️ The 'label' tag is used to provide a description for input fields, improving accessibility and user experience.
- 🔑 The 'id' attribute in HTML is a unique identifier for an element, akin to a person's Aadhar number.
- 🔄 The 'for' attribute in a 'label' tag should match the 'id' of the corresponding input field to ensure proper association.
- 📦 Radio buttons and checkboxes are types of input that allow for selection of options, with radio buttons limiting selection to one option per group.
- 📝 The 'textarea' element allows for multiline text input, with attributes like 'rows' and 'cols' to define its size.
- 🔄 The 'select' tag provides a dropdown list of options, with 'option' tags defining the individual choices.
- 🔒 The 'required' attribute in an input tag makes it mandatory for the user to fill out that field before submitting the form.
- 👀 The 'autofocus' attribute places the cursor in the input field automatically when the page loads, streamlining the user input process.
- 🔒 Validation attributes like 'pattern' can be used to restrict input to a specific format or regular expression.
Q & A
What is the primary purpose of a form in web development?
-The primary purpose of a form in web development is to collect and submit data from the client to the server, which is commonly used on contact pages, Google forms, and for booking flights or railway tickets.
Why is the 'like' important for the video in the context of the script?
-The 'like' is important because the speaker requests high energy likes to maintain enthusiasm throughout the course, indicating that engagement helps in keeping the content creation process lively and motivating.
What is the difference between 'get' and 'post' requests as mentioned in the script?
-The script explains that 'get' requests are simpler and typically used for sending a simple request to the server, while 'post' requests are used for sending large amounts of data and are more common when submitting forms.
What is the function of the 'input' tag in an HTML form?
-The 'input' tag in an HTML form is used to create interactive fields where users can input data such as text, dates, or select options like gender.
What is the role of the 'label' tag in conjunction with the 'input' tag?
-The 'label' tag is used to provide a description or title for an 'input' field, improving accessibility and usability by allowing users to click the label to focus on the associated input field.
What does the 'id' attribute represent in an HTML element?
-The 'id' attribute represents a unique identifier for an HTML element, similar to a person's Aadhar number, ensuring that each element can be uniquely identified and referenced within the document.
Why does the script mention not to use the 'br' tag frequently?
-The script mentions not to use the 'br' tag frequently because it is not a recommended practice for creating layouts in HTML. It suggests that there are better, more semantic ways to structure content without relying on line breaks for layout purposes.
What is the purpose of the 'placeholder' attribute in an 'input' tag?
-The 'placeholder' attribute in an 'input' tag provides a hint to the user about what should be entered in the field, such as 'Enter your username', and disappears when the user starts typing.
What does the 'required' attribute in an 'input' tag enforce?
-The 'required' attribute in an 'input' tag enforces that the field must be filled out before the form can be submitted. It ensures that the user cannot leave the field empty.
What is the 'autofocus' attribute and what does it do?
-The 'autofocus' attribute is used in an 'input' tag to automatically focus the cursor on that field when the page loads, making it quicker and easier for the user to start typing.
What is the 'pattern' attribute used for in form validation?
-The 'pattern' attribute is used for form validation to specify a regular expression that the inputted data must match. It ensures that the data follows a particular format before the form can be submitted.
Outlines
📝 Introduction to HTML Forms and Input Tags
This paragraph introduces the concept of HTML forms and the input tag, highlighting their importance in data submission from clients to servers. It discusses the use of forms on contact pages, Google forms, and for flight or railway ticket bookings. The speaker encourages viewers to like the video for high energy throughout the course and demonstrates the process of creating an HTML file for the tutorial. The paragraph also covers the activation of live preview in a code editor for immediate feedback on code changes and explains the difference between GET and POST requests in the context of form submissions.
🔍 Exploring Form Elements and Attributes
This section delves deeper into the various elements and attributes of HTML forms. It explains the use of the label tag for accessibility and clarity, the unique identifier role of the ID attribute, and the significance of the 'for' attribute in associating labels with form controls. The paragraph covers different input types, including text, radio buttons, checkboxes, and textarea, and discusses the use of the select tag to create dropdown menus. It also touches on best practices in HTML formatting and the importance of understanding block and inline elements, as well as the use and misuse of the 'br' tag for line breaks.
🔑 Form Submission and Validation Techniques
The final paragraph wraps up the discussion on HTML forms by focusing on form submission, the role of the 'action' attribute, and the difference between GET and POST methods. It emphasizes the importance of the 'name' attribute in server-side processing and the use of 'placeholder' to guide user input. The paragraph also introduces validation attributes such as 'required', 'pattern', and 'autofocus', explaining how they enhance form usability and data integrity. The speaker concludes by encouraging viewers to engage with the course content, participate in the community, and consider the value of the free course offered despite its cost.
Mindmap
Keywords
💡Forms
💡Input Tag
💡Client-Server Communication
💡HTML
💡GET Request
💡POST Request
💡Placeholder
💡Required Attribute
💡Autofocus
💡Validation Attributes
💡Select Tag
Highlights
Introduction to forms and the input tag in HTML, emphasizing the importance of forms for data submission from client to server.
Explanation of forms on contact pages, Google forms, and inquiry forms, illustrating common use cases.
Discussion on how HTML forms are used for submitting flight or railway ticket details.
A request for high energy likes on the video to maintain enthusiasm throughout the course.
Demonstration of creating a folder and an index.html file for the 6th video in a web development series.
Explanation of the 'live preview' setting in a code editor for real-time feedback on code.
Introduction to the form tag in HTML and its basic usage with action attributes for GET or POST requests.
Brief comparison between GET and POST requests, highlighting when to use each for form data submission.
Description of input tags and their role in creating form elements such as text inputs, dates, and phone numbers.
Use of the label tag to associate text with form inputs for better accessibility and user experience.
Example of creating a form for a teaching assistant application, including input fields for username and gender.
Explanation of the unique identifier 'id' attribute in HTML and its importance for form elements.
Discussion on the use of radio buttons in forms for selecting one option from multiple choices.
Clarification on the importance of correct labeling and 'for' attribute usage for proper form functionality.
Introduction to the checkbox input type, allowing multiple selections in a form.
Demonstration of the textarea element for larger form inputs like comments or descriptions.
Explanation of the select tag and its use for dropdown menus in forms with predefined options.
Discussion on form attributes like 'action', 'method', and the difference between GET and POST methods.
Description of the 'name' attribute in form elements and how it corresponds to server-side data handling.
Introduction to the 'placeholder' attribute for providing hints within form inputs.
Explanation of the 'required' attribute to enforce mandatory form field completion before submission.
Discussion on the 'autofocus' attribute to automatically focus the cursor on a specific form input.
Introduction to validation attributes in forms, including the use of 'pattern' for input format restrictions.
Encouragement for viewers to participate in the course, highlighting the quality and value of the free educational content.
Closing remarks with a call to action for likes, subscriptions, and comments, inviting viewers to the next video in the series.
Transcripts
In this video, we will know what are forms and what is the input tag in the form.
Using a form is a very important element of some websites because through the form, you submit data from client to server.
These are the forms that you see on contact pages, Google forms or inquiry forms.
The date and time to go to the flight or railway ticket, all these details we put, they also submit through html forms. In the last video, very few people liked it, I will request you
to like this video with high energy so that we can maintain high energy throughout the course.
So let's go to the computer screen, we will see about the forms, we will see about the input tags and we will see some best practices.
Let's roll the intro.
so guys i have come to my computer screen and now see i am going to make a folder here
whose name i am going to keep video 6
because this is the 6th video
i will do it with shift right click
open with code
i have already told you all this
and here i am going to make index.html
and by putting exclamation mark in it
what i will do is i will wrap the view word
i will turn on the screen cast mode
and you see here i will write forms
let's learn it
so i have set the title of this forms page
and what happened by setting the title
that the title will be visible on our page
here i want to tell you a very important setting
of the show preview
now many people have also pointed out to me in the comment that
I have to click so many times, can I do something?
Yes you can, click on gear below, click on settings
And after clicking on settings, what you do simply
Write live preview here, live preview
And we can actually set it such that whenever we click
So what happens is that it will open on the external browser
so now I will close everything, as soon as I click here, it will open on the external browser
and I come to my browser and the playlist of the Sigma web development course is being accessed
by clicking here on the star and here on the bookmark
but now I want to tell you that as soon as we click here, you see it opened
so if you want this, then do this, but sometimes what happens is that you want to prefer side by side view.
And when would you like to do that?
When you are actually working on a design using HTML, CSS.
So whenever you are working on design,
definitely you guys would like to see live previews here.
Which is why this extension was made.
And it was made different from the live server
so that you can see the preview on the side.
Now what we will do here, we will know about the forms
What is a form? You know the name of the form, it means a railway form
We fill it and our reservation is done
Along with that, we fill the form of IIT-JEE, the form of NEET, the form of any exam
So that our data can reach those who want it
So this is the form
HTML is a form tag, as soon as you write form, you will hit enter,
in this way, the first question will ask you, what is the action of your form,
get or post, let me tell you a very quick difference between get request and post request,
that is, we will see this thing later when we will read the backend,
get request is a very simple request, and post request is when we send,
in most of the cases, when we have to give a lot of data,
like whenever our form will be posted
so in most of the cases we will use the post request
and get request is a very simple request
that we have to tell the server something
and that's it or we have to hit the server with a request
that's it
but if you don't understand this thing now
that should be fine
there is no problem
because we are going to do this in detail
so form action is equal to post I wrote, now I can show some input tags in it.
I will tell you what are input tags, that what elements will come in your form,
like you can put a date, you can put in the form, you can say name, you can say phone number,
you can say what is your age, it can be just a number you want to put such things in the form, so I want to tell you here
that the input tag that you put inside the form and there is a label tag
which is used to label that input, so what I will do here
you see the simplest input tag is type is equal to text
so I will put the input type is equal to text here
and you see here, if I zoom out and show you so see input type is equal to text here and you see here if I zoom out and show you
so see here input type is equal to text, name is equal to username
placeholder enter your username
and it will look like this
you can say here enter your username
and the user in front of you
will have to enter the username
I will write an h1 here and I will write
assume form to
apply
for ta for Sigma web dev TA.
Sigma web development course TA.
Assume we are hiring teaching assistants for Sigma web development course.
So we can write something like this here.
By the way, I have put the subtitles.
If you have not accessed the playlist, then do access it.
And with that, I will show you one more thing.
So these subtitles are very funny.
I'll show you.
Write Sigma batch OP and your village land.
And give your village land to me.
I mean, if a foreigner is watching this,
Or if someone is watching this who doesn't know Hindi at all,
He will say, what happened so far?
And give your village land to me.
I like this a lot.
Anyway, now you can see here that I have put the H1 here.
Which is our heading.
This is our main heading.
Enter your username. This is our input tag,
Along with the input tag, we use the label tag,
Now whose label is this? So I will write its id for is equal to,
For example, I will write its id username,
And what will I do in for is equal to? I will put its id in for is equal to,
Now what is this id? I will tell you later,
For now, you just understand that this is a unique identifier of an element,
To uniquely identify this element, Like your Aadhar number cannot be anyone else's, Now what is ID? I will tell you later. For now, you just understand that it is a unique identifier of an element.
To identify this element uniquely, like your Aadhar number can't be of anyone else,
in the same way, this ID username has been given to it,
now it can't be given to anyone else. This is the ID.
I will tell you more in detail later, but for now, understand this.
So I wrote label for a username.
I wrote this input and you can see here that the label will come here.
So I am seeing here, I have not put anything in the label actually
so I will put enter your username
and you can see that as soon as I put this here
you will get to see here enter your username
after this you can enter your username
along with that you can put anything here
like enter your expertise
suppose I want to ask here what is your gender
so I can do something like this here
and you see enter your gender
and as soon as I did this here i can ask you from male or female
what is it
now what happens here is that sometimes we wrap it in div
what is div?
div is our block element
okay
and what are inline and block elements
i have not told you in this course yet
but i will tell you in the coming videos
so for now you just understand that i am putting it in div to give a new space
okay, so as soon as i put it in div, it will come in a new space.
Yes, there is also a br tag, which causes line break.
But I don't prefer br tag and you will get to know why.
Why we don't want to bloat our html with br tag.
You will find out in the coming videos.
Now you see here that enter your username, male or female.
Now you see here, as soon as I click on female, this radio button is selected.
I am clicking on male, it is selected. Why is this happening?
Because the label of this, I have put for is equal to female and here I have put id female.
You can see.
And along with that, you can see, I have put the same name of both of them.
Here I have put name is equal to gender, this input tag too.
And name is equal to gender, this input radio tag too. And as soon as we have written type is equal to radio, it is gender is input radio tag
and here we have type is equal to radio
which means this is a radio button
and if we have made the name same
then only one of these two can be selected at a time
that is, if I select this, then only this will be selected
if I select this, then only this will be selected
now I will show you one thing
if I mess up the id in the label form
and here also in the form id
means I don't mess up the first one
I mess up the second one
so when I click on the female of the second one, it will not be selected.
I'm clicking, it's not being selected.
I'm clicking on the male, it's being selected.
So to select the female, I'll have to click on this.
So what I should do is, I should always put the ID of the input tag.
So you can see here, I've put the label for is equal to female.
Along with that, we have an input tag which is type is equal to female Along with that we have an input tag
Which is type is equal to check box
Now see here if I put the input of type is equal to check box
I will do this work by putting it in div
Right click and format document
As soon as I do, our document will be very good
That is, its formatting and indentation will be very good
Now see here, here subscribe to newsletter
Here I can check it
And the difference between radio button and check box is that
you can check the check box separately
here if you want to give one of the options male or female
then you can select it like this
after this we have text area and select tag
and I will show you what it is
so text area and select tag works like this
as soon as you copy the text area here
and I will show you the text area
text area input type is equal to
text but it has rows
and column attribute which helps you
to make the size small
now see here the placeholder
I've given enter your comment here
so I've given enter your comment here
ideally we'll keep it empty
or we'll not give at least new line
so I'll paste it here, enter your comment here
and now it will reach to the left side
I will show you, so it has reached to the left side
see enter your comment here
and any user can put his comment here
now see I have put the content of text area
enter your comment here
so ideally you will not want to do this
you will want to keep the text area empty
and you will want to put a label
and you can say label for is equal to comment and definitely we will put id here
whenever we put for, then the element for which it is inside the for is its id
now see here, if I write enter your comment here then what will happen
if I write enter your comment, then it will come here
now you will say that this is not styled properly.
So this style is not properly because we will style it with CSS later.
For now, I just put br tag, but I don't recommend br tag.
I am telling you again that I do not recommend br tag at all.
Because br tag has problems.
By the way, you should know br tag, there is a line break tag,
a line break comes from it, something like this.
Now you must be feeling everything right, you must be saying,
what is the problem in br tag
but i will tell you br tag is something that i don't recommend
it's not like that you don't have to use it but i don't recommend using it all the time
i mean the easiest thing is that people think that you can add br tag and add new spaces
i oppose this thing a lot so i will copy this and show you select tag
and you see here that as soon as I put select tag here
in div, so in select
you get some options, the syntax of select
is like this, make apple
and you can use any one of the three
from cherry, now you see
any one of the three can be used
and here I did value is equal to apple
first I made select tag, in that name is equal to
fruits, then option value is equal to
apple, option value is equal to fruits, then option value equal to apple, option value equal to banana, option value equal to cherry
When we will parse this form data, then I will tell you in the part of JavaScript, how to take this data and send it to the server
So there are many things about the form that are remaining, I am going to tell you, so stay tuned for that
This was about the forms, I had to tell you all the elements of the form in this video Along with that, I have told you about select tag and all these things
About the form, the rest of the attributes, like action, I told you
You can submit a form on any page with action and where it will handle the form
So you can give that data here
Then there is a method, get request or post request
I will tell you the difference in these two in the coming videos
But I have told you in a very rough way
That get request is a very rough way
GetRequest is a very simple request, PostRequest is used when you have to send big data to the server
Because there is a limit to GetRequest, you can send a lot of data in PostRequest
We never send passwords in GetRequest, we send it with the help of PostRequest
Now here I have told the method, what happens in the name? name is equal to username means we mark it with the name
if we mark it with the name, then the server will know which key value is corresponding to it
so the key value that will go to the server will go according to the name
its name and value will go, okay?
so we will see this too when we do server side processing
what is the meaning of placeholder?
placeholder means what will be written inside it
like here see enter your username, placeholder
if I click on this, then this enter your username is not written inside placeholder if I click on it, it will not say enter your username
I will write anything, see it came
but enter your username is telling me here that I have to put username in it
then what is the meaning of required, you have to require it
you have to put the value of it or else your form will not be submitted
so we will use this a lot
then after this we get autofocus
what does autofocus do? autofocus automatically focuses the cursor, so I will show you the magic of autofocus
so if you have written autofocus in the input tag
ok, so I have written autofocus in the username, now I will reload it
so now see if I type on it, it will automatically focus on it
so by autofocus, it happens that whenever you type, it will be typed here
I hope you are understanding these things
Now validation attributes, I have told you the required
You can give a pattern, in which you can give regular expression pattern
Now don't get confused, don't say what are you talking about
we don't know regular expression, so I am sitting here to teach you all
But you understand that we will accept only one particular pattern
If we have put pattern is equal to this, then you can't put anything else than this pattern
okay, so this thing you should know here
so I hope you are enjoying this video
and with that, do write sigma batch op in the comment section
and please review this course in the first video
because still many people ask me that should I do this course or not
it is a free course is not valued by people, they say this course is free
so we should watch it or take a paid course
and I would like to give a note for those people who told me that
we took a paid course, what should we do now?
they should collect money or we should join sigma batch
you guys join sigma batch, cut your losses and join sigma batch
because see what is the quality of this course, I don't think I need to tell you
so you guys come and do this, you will get everything here, I am telling you
don't think that it is free, I was going to sell you for 10,000 rupees in this course
yes that was the amount which we fixed, I was going to sell you for 10,000 rupees in this course
and I think there is nothing wrong in selling any course, anyone is selling, there is nothing wrong in selling any course
But the thing is that if you have bought any other course and you still feel from the heart that
Sigma is a very good course which is there, then you should join, cut your losses and join
Because once you make your career, you will not find all these things in the future
If you look back in the coming time, then you will also say that yes, we took a paid course
Then after that we took a paid course and then we took a free course,
which we understood and if you become a carrier, then all these things will not matter in the future.
So do what is right for you and work while understanding your rights and wrongs.
I hope you are understanding things.
So like the video, access the playlist, subscribe to the channel and write Sigma batch OP in the comment section below
and name the land name your village and town
that's it for now guys
thank you so much for watching this video
and i will see you next time Thanks for watching!
5.0 / 5 (0 votes)