Chapter 4_HTML Tags (Tables, Forms, and Videos)

table

An HTML table is defined with the “____’” tag. Each table row is defined with the “tr” tag.

th

A table header is defined with the “__” tag. By default, table headings are bold and centered.

td

A table data/cell is defined with the “__” tag.

table

A ____ is an arrangement of data in rows and columns, or possibly in a more complex structure. Tables are widely used in communication, research, and data analysis.

text information, numerical data

Tables are useful for various tasks such as presenting ____ and ____.

tabular

Tables can be used to compare two or more items in ____ form layout.

databases

Tables are used to create ____.

border

A ____ is set using the CSS border property. If you do not specify a border for the table, it will be displayed without borders.

CSS border-collapse property

For borders to collapse into one border, add the ____.

Cell padding

____ specifies the space between the cell content and its borders. If we do not specify a padding, the table cells will be displayed without padding.

CSS text-align property

By default the table headings are bold and centered. To left-align the table headings, we must use the ____. 

CSS border-spacing property

Border spacing specifies the space between the cells. To set the border spacing for a table, we must use the .

^colspan

Adding Cells that Span Many Columns in HTMl Tables 

To make a cell span more than one column, we must use the ^____ attribute.

rowspan

Adding Cells that Span Many Rows in HTML Tables:

To make a cell span more than one row, we must use the ____ attribute

caption

To add a caption to a table, we must use the “____” tag.

background-color

A color can be added as a background in HTML table using the “____” option.

Nesting tables

____ simply means making a Table inside another Table. 

This can lead to complex tables layouts, which are visually interesting and have the potential of introducing errors.

HTML Forms

___ are required, when you want to collect some data from the site visitor.

For example, during user registration you would like to collect information such as name, email address, credit card, etc.

back-end

A form will take input from the site visitor and then will post it to ____ application such as CGI, ASP Script or PHP script etc.

text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.

There are various form elements available like ____ (5)

<form action = "Script URL" method = "GET|POST">

form elements like input, textarea etc.

</form>

HTML Forms syntax

• Text Input Controls

• Checkboxes Controls

• Radio Box Controls

• Select Box Controls

• File Select boxes

• Hidden Controls

• Clickable Buttons

• Submit and Reset Button

HTML Form Controls (8)

• Single-line text input controls 

• Password input controls 

• Multi-line text input controls 

There are three types of text input used on forms

Single-line text input controls

This control is used for items that require only one line of user input, such as search boxes or names. They are created using HTML <input> tag.

type

indicates the type of input control and for text input control it will be set to text.

name

Used to give a name to the control which is sent to the server to be recognized and get value

value

This can be used to provide an initial value inside the control

size

Allows to specify the width of the text-input control in terms of characters.

maxlength

Allows to specify the maximum number of characters a user can enter into the text box

Password Input Controls

This is also a single-line text input but it masks the character as soon as a user enters it. They are also created using HTML <input>tag but type attribute is set to password.

Multiple-Line Text Input Controls

This is used when the user is required to give details that may be longer than a single sentence. Multi-line input controls are created using HTML <textarea> tag.

rows

Indicates the number of rows of text area box

cols

Indicates the number of columns of text area box

Checkbox Control

are used when more than one option is required to be selected. They are also created using HTML <input> tag but type attribute is set to checkbox.

value

The value that will be used if the checkbox is selected.

checked

Set to checked if you want to select it by default.

Radio Button Control

are used when out of many options, just one option is required to be selected. They are also created using HTML <input> tag but type attribute is set to radio.

Select Box Control

also called drop down box which provides option to list down various options in the form of drop down list, from where a user can select one or more options.

multiple

If set to “____" then allows a user to select multiple items from the menu.

value

The value that will be used if an option in the select box box is selected.

selected

Specifies that this option should be the initially selected value when the page loads.

label

An alternative way of labeling options

File Upload Box

If you want to allow a user to upload a file to your web site, you will need to use a file upload box, also known as a file select box. This is also created using the <input> element but type attribute is set to file.

accept

Specifies the types of files that the server accepts.

button

There are various ways in HTML to create clickable buttons. You can also create a clickable button using <input>tag by setting its type attribute to button. 

Hidden Form Controls

are used to hide data inside the page which later on can be pushed to the server. This control hides inside the code and does not appear on the actual page. For example, following hidden form is being used to keep current page number. 

The HTML <video> tag

 is used to embed video into your web page, it has several video sources.

autoplay

Specifies that the video will play automatically.

controls

Specifies that the video controls gets displayed.

height pixels

Specifies the height

loop

Specifies that the video will start again every time after finish.

muted

Specifies that the audio should be muted

poster URL

Specifies the image to be shown while the video is downloading.

auto
metadata
none

Specifies what author thinks will lead to user experience at its best.

src URL

Specifies the URL

width pixels

Specifies the width