HTML Forms - Theory and Procedure

Sep 19, 2026

Uploaded by Elsa

HTML Forms explains how to collect user data on a website using form elements and attributes. It introduces the syntax and covers common attributes such as name, action, method (GET/POST), target, and enctype with supported encoding types. The guide then details form controls used to gather inputs, including text, password, multi-line fields, checkboxes, radio buttons, select boxes, file inputs, hidden controls, and submit/reset buttons, with step-by-step examples using HTML elements like and .

LanguageEnglish

CategoryPresentations

FormatPDF

Pages12

Reading Time4 min

AccessFree to download

HTML Forms

Theory

Procedure

HTML Forms Theory: HTML Forms are required when you want to collect some data from the site visitor, for example, registration information: name, email address, credit card, etc. A form will take input from the site visitor and then will post your back-end application such as CGI, ASP Script or PHP script etc. Then your back-end application will do required processing on that data in whatever way you like. Form elements are like text fields, text-area fields, drop-down menus, radio buttons, checkboxes, etc. which are used to take information from the user. A simple syntax of using is as shown in figure 1. Figure 1: Shows A simple syntax of using Most frequently used form attributes are: • name: This is the name of the form. • action: Here you will specify any script URL which will receive uploaded data. • method: Here you will specify method to be used to upload data. It can take various values but most frequently used are GET and POST. • target: It specifies the target page where the result of the script will be displayed. It takes values like _blank, _self, _parent etc. • enctype: You can use the enctype attribute to specify how the browser encodes the data before it sends it to the server. Possible values are like: ❖ application/x-www-form-urlencoded - This is the standard method most forms use. It converts spaces to the plus sign and no alphanumeric characters into the hexadecimal code for that character in ASCII text. ❖ mutlipart/form-data-This allows the data to be sent in parts, with each consecutive part corresponding the a form control, in the order they appear in the form. Each part can have an optional content-type header of its own indicating the type of data for that form control. There are different types ofform controls that you can use to collect data from a visitor to your site. • Text input controls • Buttons • Checkboxes and radio buttons • Select boxes • File select boxes • Hidden controls • Submit and reset button There are actually three types of text input used on forms: • Single-line text input controls: Used for items that require only one line of user input, such as search boxes or names. They are created using the element. • Password input controls: Single-line text input that mask the characters a user enters. • Multi-line text input controls: Used when the user is required to give details that may be longer than a single sentence. Multi-line input controls are created with the element. Procedure: Open Notepad or another text editor to create a basic HTML document to do the following examples: 1- Single-line text input controls: Single-line text input controls are created using an element whose type attribute has a value of text. Do a basic example of a single-line text input used to take first name and last name, as shown in the following figure 2. Figure 2: Shows a single-line text input This will produce following result that is shown in the figure 3. | | | --- | | | Figure 3: Shows the execution result of using a single-line text input Following is the list of attributes for tag: • type: Indicates the type of input control you want to create. This element is also used to create other form controls such as radio buttons and checkboxes. • name: Used to give the name part of the name/value pair that is sent to the server, representing each form control and the value the user entered. • value: Provides an initial value for the text input control that the user will see when the form loads. • size: Allows you to specify the width of the text-input control in terms of characters. • maxlength: Allows you to specify the maximum number of characters a user can enter into the text box. 2- Password input controls: This is also a form of single-line text input controls are created using an element whose type attribute has a value of password. Do a basic example of a single-lin

FAQs

What is the purpose of HTML forms on a website?

HTML Forms collect data from site visitors. The submitted input is sent to a back-end script (e.g., CGI, ASP, or PHP) for processing.

Which form attributes are commonly used with <form>?

Common attributes include name, action (script URL), method (GET or POST), target (where results display), and enctype (how data is encoded before sending).

How do single-line, password, and multi-line inputs differ?

Single-line inputs are created with , password inputs with to mask characters, and multi-line inputs with for longer text entries.

Sep 19, 2026

Uploaded by Elsa