Download HTML Forms and Its Types and more Cheat Sheet Web Design and Development in PDF only on Docsity!
FORMS AND IT’S TYPES
HTML stands for HyperText Markup Language. It is used to design web pages using a markup language. It is a combination of Hypertext and Markup language. HTML uses predefined tags and elements that tell the browser how to properly display the content on the screen, and form is one of them. So, in this article, we will learn what is exactly HTML form, what are the elements of forms and how can we use HTML form in our webpage. **HTML ** is an HTML element to collect input data containing interactive controls. It provides facilities to input text, number, values, email, password, and control fields such as checkboxes, radio buttons, submit buttons, etc., or in other words, form is a container that contains input elements like text, email, number, radio buttons, checkboxes, submit buttons, etc. Forms are generally used when you want to collect data from the user. For example, a user wants to buy a bag online, so he/she has to first enter their shipping address in the address form and then add their payment details in the payment form to place an order. Forms are created by placing input fields within paragraphs, preformatted text, lists and tables. This gives considerable flexibility in designing the layout of forms. Syntax:
These are the following HTML elements :
- : It defines label for elements.
- : It is used to get input data from the form in various types such as text, password, email, etc by changing its type.
- : It defines a clickable button to control other elements or execute a functionality.
- : It is used to create a drop-down list.
Username :
Password :
Submit
Output:
In this example, we can see the difference between type text and type password. The username will be visible but the password will not be visible. Radio Button in an HTML Form To create a radio button, we use the tag following by radio type to provide users to choose a limited number of choices. Syntax:
Note: The radio button must have shared the same name to be treated as a group. Note: The value attribute defines the unique value associated with each radio button. The value is not shown to the user, but is the value that is sent to the server on “submit” to identify which radio button that was selected. Example: In this example, we will create a radio button to choose your gender.
Checkbox in an HTML Form To create a checkbox in an HTML form, we use the tag followed by the input type checkbox. It is a square box to tick to activate this. It used to choose more options at a time. Syntax:
Note: the “name” and “value” attributes are used to send the checkbox data to the server. Example: In this example, we use checkboxes to select language. PROGRAM:
Page Title
Choose Language
Hindi
English
Sanskrit
Note: the “name” and “value” attributes are used to send the Combobox data to the server. Example: In this example, we will create a dropdown menu to select Nationality. PROGRAM:
Page Title
Select Your Nationality
Output: Submit button in an HTML Form In the HTML form, submit button is used to submit the details of the form to the form handler. A form handler is a file on the server with a script that is used to process input data. Syntax: submit
Output: TextArea in an HTML Form In the HTML form, a text area is used to add comments or reviews, or addresses to the form, in other words, the text area is a multi-line text input control. It contains an unlimited number of characters, the text renders in a fixed-width font, and the size of the text area is given by the and attributes. To create a text area in the form use the
Note: the name attribute is used to reference the textarea data after it is sent to a server. Example: In this example, we will create a textarea. PROGRAM:
Page Title
Welcome To GeeksforGeeks
Output:
GfG
Personal Details
Salutation
First name:
Last name:
Gender :
Male
Female
Email:
Output:
