HTML Essentials

Table & Form

10/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 1

Overview
1. HTML Table
2. HTML Form
3. Structure HTML Form
4. Sending form data
5. Form validation (HTML5)

10/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 2

1. HMTL Table
Ø Table: A structured set of data made up of rows and columns (tabular data).

10/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 3

1. HMTL Table
Ø Attributes:
§ Align: This enumerated attribute indicates how the table must be aligned
inside the containing document. It may have the following values: (letf,
center, right)
§ Bgcolor: Specifies the background color of the table.
§ Border: This integer attribute defines, in pixels, the size of the frame
surrounding the table. If set to 0, the frame attribute is set to void.

10/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 4

1. HMTL Table
Ø Attributes:
§ border-collapse: Sets whether the table borders should be collapsed into
a single border

§ padding: Control the space between the border and the content in a table

10/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 5

2. HTML Form
Ø Overview: The HTML <form> element defines a form that is used to collect
user input. An HTML form contains form elements.
Ø Form elements: Are different types of input elements, like: text fields,
checkboxes, radio buttons, submit buttons, and more.

10/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 6

3. Structure HTML Form
Ø Structure HTML Form: The tags you use to manage the general structure of
the form include:
§ <form>: Defines a form and attributes that determine the form's
behavior. Form element can contain one or more of the following form
elements
=> Some attributes of form:
o action: Specifies where to send the form-data when a form is
submitted.
o method: Specifies the HTTP method to use when sending form-
data.
o target: Specifies where to display the response that is received
after submitting the form
10/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 7
3. Structure HTML Form
Ø Structure HTML Form: The tags you use to manage the general structure of
the form include:
§ <fieldset>: Groups a series of input elements together
§ <legend>: Describes the purpose of the <fieldset>
§ <lable>: Defines a label for an HTML form widget
§ <button>: Defines a clickable button

10/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 8

3. Structure HTML Form
Ø Structure HTML Form: The tags you use to manage the general structure of
the form include:
§ <input>: Can be displayed in several ways, depending on the type
attribute.
type=“number”

type=“date”

type=“color”
type=“range”

10/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 9

3. Structure HTML Form
Ø Structure HTML Form: The tags you use to manage the general structure of
the form include:
§ <select>: Defines a drop-down list, the <option> tags inside the
<select> element define the available options in the list.
Þ Some attributes of select:
o disabled: Specifies that a drop-down list should be disabled
o form: Defines which form the drop-down list belongs to
o multiple: Specifies that multiple options can be selected at once
o required: Specifies that the user is required to select a value
before submitting the form

10/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 10

4. Sending form fata
Ø Sending form data
Let remember client-server architecture

An HTML form on a web page is a way to

configure an HTTP request to send data to a
server. This enables the user to provide
information to be delivered in the HTTP
request.

10/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 11

4. Sending form fata
Ø Sending form data:
§ On client side: Defining how to send the data
o Action attribute: Defines where the data gets sent. Its value must
be a valid relative or absolute URL

o Method attribute: Defines how data is sent. HTML form data can
be transmitted via Post method or Get method.

10/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 12

4. Sending form fata
Ø GET method: The method used by the browser to ask the server to send back
a given resource. In this case, the browser sends an empty body. Because the
body is empty, if a form is sent using this method the data sent to the server is
appended to the URL.
Ø POST method: The method the browser uses to talk to the server when asking
for a response that takes into account the data provided in the body of the
HTTP request. When the form is submitted using the POST method, you get no
data appended to the URL

10/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 13

5. Form validation
Ø Form validation (HTML5)
§ ‘required’: Specifies whether a form field needs to be filled in before the
form can be submitted.
§ ‘minlength’ and ‘maxlength’: Specifies the minimum and maximum
length of textual data (strings).
§ ‘min’ and ‘max’: Specifies the minimum and maximum values of
numerical input types.
§ ‘type’: Specifies whether the data needs to be a number, an email
address, or some other specific preset type.
§ ‘pattern’: Specifies a regular expression that defines a pattern the
entered data needs to follow.

10/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 14

5. Form validation
Ø Form validation (HTML5)
ü When an element is valid: The element matches the :valid CSS pseudo-
class, which lets you apply a specific style to valid elements.
ü When an element is invalid: The element matches the :invalid CSS
pseudo-class, and sometimes other UI pseudo-classes (e.g., :out-of-range)
depending on the error, which lets you apply a specific style to invalid
elements.

10/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 15

5. Quiz 1
Ø Fill in the blanks:

10/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 16

5. Quiz 2
Ø Fill in the blanks and align the table to the center of the page:

10/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 17

5. Quiz 3
Ø Which of these tags are table tags?

A. <table><tr><td>
B. <table><tr><tt>
C. <thead><body><tr>
D. <tr><tt><dd>

10/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 18

 Thank you

10/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 19