 Hello, myself, Sampreet Patel, assistant professor, department of computer science and engineering, Vulture Institute of Technology, Sholapur. Today, we are going to learn about how to create a form for a web page in HTML. So after this video, students will be able to recognize and apply different elements required to create a form in an HTML page. So forms are required by almost all the websites or web pages you design. So form, it may be a registration form, a login form, a form that requires you to create a contact details of your user. So these are the forms which are implemented in a website. So HTML forms are required when you want data from the user or your site visitors. So these forms take the input from the HTML page. And then the HTML page passes this information to some backend application, like CGI. It might be an ASP script or a PHP script. Now these backend applications are responsible for processing this data, which is coming from an HTML page, and pass it on depending on what logic it has been implemented. So it can be passed to a database and stored in the database, or it might mail the details that are getting from the HTML form to the mail ID of some particular person, et cetera. So to create the form, we have a number of elements, like text field, text area, we have dropdown menus, we have radio buttons, checkboxes, et cetera. So before we go to elements, first thing we require is to create a form tag. So form tag will have two attributes. One is action, and second is method. These are the two important attributes that are mandatory to be given in a form tag. So action attribute will have a property, or rather will be giving a source of the backend application script. It might be ASP.NET script, or PHP script, or CGI. So this will tell the HTML page where the data is to be sent. And the second one is method, which is used to upload this data. So most frequently we use either the get method or the post method. So form tags have different elements. One of it, which is required on a larger end, is the text area. Now text area is where you want to get the information of the user or a site visitor to be typed in a text area by the user. So we have three types of text input available. First is single line text input, which takes the value as a single line. So the example where single line text input is used is the first name, last name. You can take the contact number of the user, the email ID. So these type of inputs, which require a single line, we can use a single line text input controls in the text area. So we have an HTML tag called input through which you can create a single line text input control. The other one is password input control. So this is also a single line text input input where the characters are masked so that no one sitting with you or besides you can see the password what you are typing or they cannot shoulder surf your password and use it. So this is also created by input tag. The third one is multi-line text input control. So here, the user or the site visitor can input or give the data in multiple lines. So for the best examples for this is giving the input as an address or passing on some message, et cetera, where multiple lines are required. So this multi-line text input is implemented through text area HTML tag. So this is the example. See, we are taking two inputs from the user, its first name and last name. So we have taken an HTML tag inside the HTML tag. There is a body tag and then the form tag. In form tag, the first name colon is the label for that particular input. Then we are using the input tag where we are defining its type to be a text input and we are giving the name as first name. So this first name will be required by the backend script to get the data from this HTML page. So this is an example for a text area. After that, the attributes that are available for text area are first is type, which indicates the input control and for text input control, it will be set to text. The name is used to give the name of the control which is sent to the server to be recognized and get the value that will be the backend application that is either a ASP.NET script or the PHP script. The value is used to provide an initial value inside the control. For example, you want to give a hint that what is to be entered at this particular text area then there you can give the value. Size specifies the number of characters that can be input in the element and maximum length allows this to specify maximum number of characters the user can enter into the text box. So moving forward is checkbox control. Checkbox is used when more than one option is required to be selected by the user. So for that, the input tag is used and the type will be checkbox. So in the place of text, we'll use checkbox and the name will specify what option is to be selected. So the name math will go to the server as an input of maths and physics will go to the server as an input for physics. So this is an example for checkbox. The next is radio button. Radio button are used when out of many option only one option is required to be selected. So here the type will be equal to radio. So radio is a keyword to define the radio button for the form. So see the two tags form and inside form there is an input tag. So these tags are same. Only the changing is of type and name. So here under subject you're giving maths and physics. So previous slide checkbox, the name of two inputs were different maths and physics. Here the name of both the inputs is same as subject but the values are different that is maths and physics. Next is select box. We can also call this a drop-down menu. So drop-down box which provides the list of all the options available to be selected. So here in the place of input, we are using a select tag where the name of the tag will be drop-down or whatever you will give and its options. So what all menu options are available in that particular drop-down menu. So options we have to value as maths and physics. So initially maths will be selected as we have given selected as its attribute. After that, many a times the user is required to upload some file. So the best example is when you are registering for some job application, you are required to upload a resume. So here the input type will be file where it will give you a button to browse your local system to select the file that you want to upload. So these are the elements that can be used for an HTML tag. Just try and give the answer. What are the different elements of form tag? So the elements we have seen for the form tag are one is the text box or the text area. The second was radio button. The third was select that is drop-down. After that we have seen a file upload a file type of data. So these are the elements available in a form tag. After that, when you create a form, it is absolutely necessary to give some button so that an action can take place. So there are four types in which you can implement a button. Submit creates a button that automatically submits a form. Reset, this creates a button that automatically resets form controls to their initial value. So if you want to re-enter all the data and you want to clear all the data of your form, you can put and reset button over there. After that, a simple button that creates a button that is used to trigger a client-side script when a user clicks that button. So this particular button will have an on-click action to be given to redirect it to some client-side script. And after that, you can also give an action for image. This creates a clickable button that can use an image as a background for that button. So see, this is the example where the buttons are implemented. So input type is submit. The name of that particular button is submit and the value is submit. So the value will be displayed on that particular button. After that, type reset. So these two types will define what the functioning of the button will be. After that, the type is button where you have to give some action. So on-click action will be given for this particular input. And the last is input type image. Name is image button, and you have to specify the source from where the image is to be displayed. So this is an example of buttons. This is a form that we have created where we are taking a name and the email ID. After that, we are taking an option of radio as maths and physics and also an option of a drop-down menu for maths and physics itself. And we are giving an option to upload the file. So these are the, this is the form that we have created. I'll run this file. So see, the form is created. So now here I can enter a name and say .com. So when I'll select all the forms, I'll choose a file to be uploaded. So see, after clicking choose file, it will give you an option to select what file you want to upload it. So you can select the file from your local system and then you can submit. So here, after submitting, it will trigger this welcome.php where it will say welcome and it will take the name from your HTML page. So see this name and the name of that particular input should be same to get the value processed. After that, your email ID is you are taking the value of email. Your subject through a radio button is you will take a subject and your subject through drop down is drop down. So these are the names in name, email ID, value. So see here the name is subject. So for radio button, we are taking subject and here the name is drop down which will be taken as drop down. So to execute this script or this particular HTML page, this page should be put on some server to be executed. So you will get the output as welcome, the given name in the input, your email ID from the given email ID and your selected subjects through radio button and drop down menu. So these are some references I've used to create this video. Head first HTML5 programming by O'Reilly media and HTML5 and CSS3 second edition by Pragmatic Bookshelf. Thank you.