Forms and input tags in HTML | Sigma Web Development Course - Tutorial #7

Summary

This 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

00:00

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

05:02

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

10:06

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

Keywords

💡Forms

In the context of web development, 'forms' are used to collect user inputs on websites. They are essential for functionalities like submitting data from the client's browser to the server. In the video, forms are discussed as a way to submit various types of data, such as contact information or flight details, which are then processed on the server side.

💡Input Tag

The 'input tag' is an HTML element used within a form to create interactive fields where users can input data. The video explains that different types of input tags can be used for various data types, such as text, date, or radio buttons, to gather the required information from the user.

💡Client-Server Communication

Client-server communication refers to the exchange of data between a client (the user's browser) and a server (the host of the website). In the script, it is mentioned that forms are crucial for this process, as they allow data to be submitted from the client to the server for further processing.

💡HTML

HTML, or HyperText Markup Language, is the standard language used to create and design web pages. The video script discusses HTML forms and input tags as fundamental components for creating interactive web pages that can collect and send data.

💡GET Request

A GET request is a method of communication between a client and a server in which the client asks for a resource by sending a request with a URL. The video script briefly mentions GET requests in the context of form submission, indicating that they are simpler and typically used for less sensitive data.

💡POST Request

A POST request is another method of client-server communication, used when the client needs to send large amounts of data to the server. In the video, it is highlighted that POST requests are used for forms that contain a lot of data, as opposed to GET requests.

💡Placeholder

The 'placeholder' attribute in an input tag provides a hint to the user about what should be entered in the input field. In the script, it is used as an example to show how users are prompted to enter their username in a form.

💡Required Attribute

The 'required' attribute in an input tag specifies that the input field must be filled out before the form can be submitted. The video script explains that this attribute ensures that the user cannot submit the form without providing the necessary information.

💡Autofocus

The 'autofocus' attribute is used in an input tag to automatically focus the cursor on that field when the page loads. The video script demonstrates this by showing how the autofocus attribute can be used to direct the user's attention to the username input field.

💡Validation Attributes

Validation attributes in HTML forms are used to define rules for user input. The video script mentions 'required' as an example of a validation attribute, which ensures that the user cannot submit the form without filling out certain fields.

💡Select Tag

The 'select' tag in HTML is used to create a drop-down list of options. In the video, it is shown how to use the select tag to provide users with a list of choices, such as different fruits, which they can select from within a form.

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!