An HTML form is used to collect user input and consists of form fields, labels, and buttons. Forms can be processed using client-side programming, which performs tasks within the browser, or server-side programming, which runs on the server. Common client-side languages include JavaScript and CSS, while common server-side languages include PHP, ASP.NET, and Python. The <form> tag creates an HTML form and contains input elements like text fields, checkboxes, and submit buttons. Forms are submitted using either the GET or POST method, with POST being preferable for sensitive data since it does not display submitted values in the URL.

1. Forms
In HTML

2. M Vishnuvardhan
Introduction
An HTML form is used to collect user input.
There are two basic parts of a form:
 Designing of form using fields, labels, buttons etc.,
 Processing of the form after submit.

3. M Vishnuvardhan
Processing Forms
A form can be processed with the help of client side and
sever side programming.

4. M Vishnuvardhan
Client side programming:
Here many tasks are done without interacting with the
server. They are great for manipulating the browser window,
checking that all the data has been entered before submitting
a form, and other tasks that happen without the server
E.g. JavaScript, VBScript, CSS (Designing), AJAX, jQuery etc.,
Processing Forms

5. M Vishnuvardhan
Sever side programming:
It is the general name for the kind of program that runs
directly on the server.
Server-side Uses:
 Displays the requested pages
 Structure of web applications
 Interaction with servers/storages
E.g. PHP, ASP.NET (C# OR Visual Basic), C++, Java and JSP,
Python, Ruby on Rails and so on.
Processing Forms
 Interaction with databases
 Querying the database
 Encoding of data into HTML
 Operations over databases like
delete, update.

6. M Vishnuvardhan
<form> tag
The HTML <form> element is used to create an HTML form
for user input:
Syntax:
<form>
.
form elements
.
</form>
The <form> element is a container for different types of input
elements, such as: text fields, checkboxes, radio buttons,
submit buttons, etc.

7. M Vishnuvardhan
<form> attributes
 The action attribute defines the action to be performed
when the form is submitted. Usually, the form data is sent
to a file on the server when the user clicks on the submit
button. The script can log the information to a database on
the server, send the information via email, or perform any
number of other functions.

8. M Vishnuvardhan
<form> attributes contd.
 The target attribute specifies where to display the response
that is received after submitting the form (values -
_self,_blank..).
 The method attribute specifies the HTTP method to be used
when submitting the form data.

9. M Vishnuvardhan
Methods
 get: The form-data can be sent as URL variables
 post: The form-data can be sent as HTTP post transaction.
The default HTTP method when submitting form data is GET.
e.g.
<form action="/action_page.php" method="get">
<form action="/action_page.php" method="post">

10. M Vishnuvardhan
get vs. post
get:
 Appends the form data to the URL, in name/value pairs
 NEVER use GET to send sensitive data! (the submitted form
data is visible in the URL!)
 The length of a URL is limited (2048 characters)
 Useful for form submissions where a user wants to bookmark
the result
 GET is good for non-secure data, like query strings in Google

11. M Vishnuvardhan
get vs. post
post:
 Appends the form data inside the body of the HTTP request
(the submitted form data is not shown in the URL)
 POST has no size limitations, and can be used to send large
amounts of data.
 Form submissions with POST cannot be bookmarked

12. M Vishnuvardhan
Form elements
The HTML <form> element can contain one or more of the
following form elements:
 <input>
 <label>
 <select>
 <textarea>
 <button>
 <fieldset>
 <legend>
 <option>
 <optgroup>

13. M Vishnuvardhan
<input> element
Most used form element is the <input> element.
The <input> element can be displayed in several ways,
depending on the type attribute.
E.g: text, password, email, tel, radio, checkbox so on

14. M Vishnuvardhan
<input> element type attribute
 text:defines a single-line text input field.
Syntax: <input type="text">
 password: defines a password field
Syntax: <input type=“password">
 email: is used for input fields that should contain an e-mail
address.
Syntax: <input type="email">
Depending on browser support, the e-mail address can be
automatically validated when submitted.

15. M Vishnuvardhan
<input> element type attribute
 tel: is used for input fields that should contain a telephone
number.
Syntax: <input type="tel">
 url:used for input fields that should contain a URL address.
Syntax: <input type="url">
Depending on browser support, the url field can be
automatically validated when submitted.

16. M Vishnuvardhan
<input> element type attribute
 radio: defines a radio button. Radio buttons let a user select
ONLY ONE of a limited number of choices. The name
attribute of radio buttons must be same for mutually
exclusive option
Syntax: <input type="radio">
 checkbox: defines a checkbox. Checkboxes let a user select
ZERO or MORE options of a limited number of choices.
Syntax: <input type="checkbox">
Note: selected attribute can be used to select the option

17. M Vishnuvardhan
<input> element type attribute
 color: used for input fields that should contain a color.
Depending on browser support, a color picker can show up in
the input field
Syntax:<input type="color">
 date:used for input fields that should contain a date.
Depending on browser support, a date picker can show up in
the input field.
Syntax: <input type="date">

18. M Vishnuvardhan
<input> element type attribute
 file: defines a file-select field and a "Browse" button for file
uploads.
Syntax:<input type="file">
 hidden: defines a hidden input field. A hidden field let web
developers include data that cannot be seen or modified by
users when a form is submitted. A hidden field often stores
what database record that needs to be updated when the
form is submitted.
Syntax: <input type=“hidden”>

19. M Vishnuvardhan
<input> element type attribute
 submit: defines a button for submitting form data to a form-
handler. The form-handler is typically a server page with a
script for processing input data.
Syntax: <input type="submit">
 reset: defines a button for reset all the form controls.
Syntax: <input type=“reset">

20. M Vishnuvardhan
<input> element other attributes
 value: specifies an initial value for an input field
 readonly: specifies that an input field is read-only.
 disabled: specifies that an input field should be disabled.
 size: specifies the visible width, in characters, of an input
field.
 maxlength: specifies the maximum number of characters
allowed in an input field.

21. M Vishnuvardhan
<input> element other attributes
 placeholder: specifies short a hint that describes the
expected value of an input field
 required: specifies that an input field must be filled out
before submitting the form.
 autofocus: specifies that an input element should
automatically get focus when the page loads

22. M Vishnuvardhan
<form> elements
 <label>: element defines a label for several form elements.
 <select>: element defines a drop-down list. For every option
in the list <option> is used
Syntax: <select>
<option></option> . .. . .. .
</select>
Note: selected attribute of option is used to set the default
selected option. By default first option is selecte.
<optgroup> is used to group the options

23. M Vishnuvardhan
<form> elements
 <textarea>: element defines a multi-line input field
Syntax: <textarea rows=“r” cols=“c”>
</textarea>
 <button>: defines a clickable button
Syntax: <button type="button|submit|reset">
button label</button>
Note: if type is not specified it behaves like submit button

24. M Vishnuvardhan
<form> elements
 <fieldset>: element is used to group related data in a form.
 <legend>: element defines a caption for the <fieldset>
element.

25. M Vishnuvardhan
Questions