Web Systems and Technologies

HTML FORMS
Prepared by:
John Ivan C. Maurat, MIT

1
Intended Learning Outcomes:
By the end of this module, students will be able to:

● Explain the structure and purpose of HTML form elements such as <form>, <input>, <label>,
<select>, and <textarea>.
● Differentiate various input types (e.g., text, email, password, checkbox, radio, file) and their
use cases in form development.
● Apply essential form attributes (action, method, enctype) and input attributes (required,
placeholder, readonly, etc.) to improve form functionality and validation.
● Utilize the form attribute to link form controls to a <form> element when they are not nested
within it.
● Design and create a fully functional HTML form that captures and validates user input
effectively.

2
1.0 HTML Forms

3
HTML Form
• An HTML form is used to collect user input. The user input is
most often sent to a server for processing.

4
<form> Element
• The HTML <form> element is used to create an HTML form for user input.

• The <form> element is a container for different types of input elements, such as: text fields,
checkboxes, radio buttons, submit buttons, etc.

5
<input> Element
• The HTML <input> element is the most used form element.

• An <input> element can be displayed in many ways, depending on the type attribute.

6
Text Fields
• The <input type="text"> defines a single-line input field for text input.

7
Text Fields

8
<label> Element
• The <label> tag defines a label for many form elements.

• The <label> element is useful for screen-reader users, because the screen-reader will read out loud
the label when the user focuses on the input element.

• The <label> element also helps users who have difficulty clicking on very small regions (such as
radio buttons or checkboxes) - because when the user clicks the text within the <label> element, it
toggles the radio button/checkbox.

• The for attribute of the <label> tag should be equal to the id attribute of the <input> element to
bind them together.

9
Radio Buttons
• The <input type="radio"> defines a radio button.

• Radio buttons let a user select ONE of a limited number of choices.

10
Radio Buttons

11
Checkboxes
• The <input type="checkbox"> defines a checkbox.

• Checkboxes let a user select ZERO or MORE options of a limited number of choices.

12
Checkboxes

13
The Submit Button
• The <input type="submit"> defines a button for submitting the form data to a form-handler.

• The form-handler is typically a file on the server with a script for processing input data.

• The form-handler is specified in the form's action attribute.

14
The Submit Button

15
Name Attribute for <input>
• Notice that each input field must have a name attribute to be submitted.

• If the name attribute is omitted, the value of the input field will not be sent at all.

16
Name Attribute for <input>

17
2.0 HTML Forms Attribute

18
The Action Attribute
• 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.

• In the example below, the form data is sent to a file called "action_page.php". This file contains a
server-side script that handles the form data:

19
The Action Attribute

Tip: If the action attribute is omitted, the action is set to the current page.

20
The Target Attribute
• The target attribute specifies where to display the response that is received after submitting the
form.

• The target attribute can have one of the following values:

21
The Target Attribute

22
The Method Attribute
• The method attribute specifies the HTTP method to be used when submitting the form data.

• The form-data can be sent as URL variables (with method="get") or as HTTP post transaction
(with method="post").

• The default HTTP method when submitting form data is GET.

23
The Method Attribute

24
The Method Attribute

25
The Method Attribute
Notes on 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

26
The Method Attribute
Notes on 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

Tip: Always use POST if the form data contains sensitive or personal information!

27
The Autocomplete Attribute
• The autocomplete attribute specifies whether a form should have
autocomplete on or off.

• When autocomplete is on, the browser automatically complete values based

28
The Autocomplete Attribute

29
The Novalidate Attribute
• The novalidate attribute is a boolean attribute.

• When present, it specifies that the form-data (input) should not be validated
when submitted.

30
The Novalidate Attribute

31
The formnovalidate Attribute
The input formnovalidate attribute specifies that an <input> element should not be validated when
submitted.

Note: This attribute overrides the novalidate attribute of the <form> element.

The formnovalidate attribute works with the following input types: submit.

32
3.0 HTML Forms Element

33
The HTML <form> Elements
• The HTML <form> element can contain one or more of the following form elements:

• <input> <label>

• <select> <textarea>

• <button> <fieldset>

• <legend> <datalist>

• <output> <option> <optgroup>

34
The <input> Element
• One of the most used form elements is the <input> element.

• The <input> element can be displayed in several ways, depending on the type attribute.

35
The <input> Element
• One of the most used form elements is the <input> element.

• The <input> element can be displayed in several ways, depending on the type attribute.

36
The <label> Element
• The <label> element defines a label for several form elements.

• The <label> element is useful for screen-reader users, because the screen-reader will read
out loud the label when the user focus on the input element.

• The <label> element also help users who have difficulty clicking on very small regions (such
as radio buttons or checkboxes) - because when the user clicks the text within the <label>
element, it toggles the radio button/checkbox.

• The for attribute of the <label> tag should be equal to the id attribute of the <input> element
to bind them together.

37
The <select> Element
• The <select> element defines a drop-down list:

38
The <select> Element

The <option> element defines an option that can be selected.

By default, the first item in the drop-down list is selected.

39
The <select> Element
To define a pre-selected option, add the selected attribute to the option:

40
The <select> Element
Use the size attribute to specify the number of visible values:

41
The <select> Element
Use the multiple attribute to allow the user to select more than one value:

42
The <textarea> Element
The <textarea> element defines a multi-line input field (a text area):

43
The <button> Element
The <button> element defines a clickable button:

44
The <fieldset> and <legend> Elements
The <fieldset> element is used to group related data in a form.

The <legend> element defines a caption for the <fieldset> element.

45
The <datalist> Element
The <datalist> element specifies a list of pre-defined options for an <input> element.

Users will see a drop-down list of the pre-defined options as they input data.

The list attribute of the <input> element, must refer to the id attribute of the <datalist> element.

46
The <output> Element
The <output> element represents the result of a calculation (like one performed by a script).

47
4.0 HTML Input Types

48
Input Type Reset
<input type="reset"> defines a reset button that will reset all form values to their default values:

49
Input Type Color
The <input type="color"> is used for input fields that should contain a color.

Depending on browser support, a color picker can show up in the input field.

50
Input Type Date
The <input type="date"> is used for input fields that should contain a date.

Depending on browser support, a date picker can show up in the input field.

51
Input Type Date
You can also use the min and max attributes to add restrictions to dates:

52
Input Type Datetime-local
The <input type="datetime-local"> specifies a date and time input field, with no time zone.

Depending on browser support, a date picker can show up in the input field.

53
Input Type File
The <input type="file"> defines a file-select field and a "Browse" button for file uploads.

54
5.0 HTML Input Attributes

55
The disabled Attribute
The input disabled attribute specifies that an input field should be disabled.

A disabled input field is unusable and un-clickable.

The value of a disabled input field will not be sent when submitting the form!

56
The size Attribute
The input size attribute specifies the visible width, in characters, of an input field.

The default value for size is 20.

Note: The size attribute works with the following input types: text, search, tel, url, email, and
password.

57
The maxlength Attribute
The input maxlength attribute specifies the maximum number of characters allowed in an input field.

Note: When a maxlength is set, the input field will not accept more than the specified number of
characters. However, this attribute does not provide any feedback. So, if you want to alert the user, you
must write JavaScript code.

58
The min and max Attributes
The input min and max attributes specify the minimum and maximum values for an input field.

The min and max attributes work with the following input types: number, range, date, datetime-local,
month, time and week.

Tip: Use the max and min attributes together to create a range of legal values.

59
The pattern Attribute
The input pattern attribute specifies a regular expression that the input field's value is checked against,
when the form is submitted.

The pattern attribute works with the following input types: text, date, search, url, tel, email, and
password.

60
The placeholder Attribute
The input placeholder attribute specifies a short hint that describes the expected value of an input field
(a sample value or a short description of the expected format).

The short hint is displayed in the input field before the user enters a value.

The placeholder attribute works with the following input types: text, search, url, number, tel, email,
and password.

61
The required Attribute
The input required attribute specifies that an input field must be filled out before submitting the form.

The required attribute works with the following input types: text, search, url, tel, email, password, date
pickers, number, checkbox, radio, and file.

62
END

63