Tables & Forms

Tables

HTML has a set of tags that are used to present text in the form of a table. these tags are:

• TABLE: marks the beginning and end of a table

• TR: marks the beginning and end of a line

• TH: marks the beginning and end of a cell at the top of the table

• TD: marks the beginning and end of a cell

• CAPTION: used to place a table with a title The code for a simple table would be:

<TABLE>

<TR>

<TH> Header 1 </TH> …

<TH> Header n </TH>

</ TR>

<TR>

<TD> Cell 1.1 </TD> …

<TD> Cell n </TD>

</TR> … <TR>

<TD> Cell 1.1 </TD> …

<TD> Cell n </TD>

</ TR>

<Caption> Title </ Caption>

</ TABLE>

As you can see in the code snippet the table is placed inside the TABLE tags. Every line needs be placed inside the <TR> and </TR> tags. To present separate cells we have two options: using the <TH> or <TD> tag. The difference is that the first option uses bold text and centralizes the column. Tag-u TABLE has some attributes that serve to give the table the format we need.

• BORDER: determines the size of the cell contour.

• CELLSPACING: determines the point size of the space between cells.

• CELLPADDING: determines the distance in points between the contents of a cell and the border.

• WIDTH: specifies the width of the table, can be represented by dots or percentages being of the browser.

• ALIGN: position the table in relation to the page, on the left (LEFT), on the right (RIGHT) or in the center (CENTER).

• BGCOLOR: determines the color of the table

<HTML>

<HEAD>

<TITLE>Document title</TITLE>

</HEAD>

<BODY>

<TABLE BORDER=1>

<TR>

<TD COLSPAN=2>1.1 dhe 1.2</TD>

<TD>1.3</TD> </TR>

<TR>

<TD ROWSPAN=2>2.1 dhe 3.1</TD>

<TD>2.2</TD>

<TD>2.3</TD>

</TR>

<TR> <TD>3.2</TD>

<TD>3.3</TD> </TR>

<CAPTION ALIGN=bottom><strong><br>Tabele e Thjeshte</strong></CAPTION>

</TABLE>

<p ><strong>Tabele me ngjyra dhe imazh</strong></p>

<TABLE BORDER=0 CELLSPACING=0 BGCOLOR=#0000FF>

<TR>

<TD>

<TABLE BORDER=0 CELLSPACING=1 CELLPADDING=2 WIDTH=400

BGCOLOR=#FFFFFF>

<TR> <TH><IMG SRC=”css_logo.png” height=”53″></TH>

<TH>Maj</TH> <TH>Qershor</TH> <TH>Korrik</TH>

<TH>Gusht</TH> </TR>

<TR>

<TD BGCOLOR=#A0A0A0>&nbsp;</TD>

<TD>22</TD>

<TD>23</TD>

<TD>3</TD>

<TD>29</TD> </TR>

<TR> <TD BGCOLOR=#A0A0A0>&nbsp;</TD>

<TD>1234</TD>

<TD>1537</TD>

<TD BGCOLOR=#FFa0a0>7</TD>

<TD>1930</TD>

</TR>

<TR>

<TD BGCOLOR=#A0A0A0>&nbsp;</TD>

<TD>11000</TD>

<TD>13000</TD>

<TD BGCOLOR=#FF4040>-500</TD>

<TD BGCOLOR=#a0a0FF>60930</TD>

</TR>

</TABLE>

</TD>

</TR>

</TABLE>

</BODY>

</HTML>

thead, tfoot, and tbody

The <thead> tag is used to group the header content of an HTML table. element thead should be used together with the elements tbody and tfoot. The tbody element is used for it group body content into an HTML table and tfoot tag is used to group footer content.

In a table the <tfoot> tag should appear before <tbody> so that a browser can display the footer before receiving the data of all rows.

Example of using thead, tfoot, and tbody tags:

<table border = “1”>

<Thead>

<Tr>

<Th> Month </ th>

<Th> Savings </ th>

</tr> </thead>

<tfoot> <tr>

<Td> Sum </ td>

<Td> $ 180 </ td>

</ Tr>

</ Tfoot>

<Tbody>

<Tr>

<Td> January </ td>

<Td> $ 100 </ td>

</ Tr>

<Tr>

<Td> February </ td>

<Td> $ 80 </ td>

</ Tr>

</ Tbody>

</ Table>

Designing the page through tables

Websites are used for two reasons:

1.To organize and display information in the form of a table, when such a thing necessary.

2. To create layouts of a page using hidden tables.

Using tables to divide a page into different sections is a very i tool powerful. Mainly in relation to layouts, tables are used to perform the following functions:

-To split the page into different sections To create a menu, one is usually used color for the header section and another for the next line where the links are located.

-To add fields of interactive forms. Example: search option.

-Headers are created which are fastened.

– Easier positioning of images which are divided into small pieces.

– An easier way to display text in columns. Analyze a web page which has the following appearance:

Forms

Forms are HTML elements that are used to obtain information from the user the form may contain input elements such as text fields, checkbox, radio-buttons, buttons submit etc.

One way to create a shape is this:

<FORM ACTION = “url process” METHOD = “POST”>

… Elements ..

</ FORM>

Attributes of Forms:

ACTION: this attribute specifies the URL where the data to be printed by the user will be sent. The action attribute indicates what happens to the data when the send button is pressed. Usually the value of attribute is a page or program on a web server that will receive and process data sent.

For example, if you have a logging form that requires a username and a password; this data that the user enters will go to a login.php page and in this case the value of the action attribute i our site will be

<form action = “http://www.siteJuaj.org/login.php”>. An email address can be used as a URL

eg: mailto: [email protected] or an HTTP URL http://www.uamd.edu/form.html.

METHOD: the method determines how the data will be sent. There are two possibilities

GET and POST. The get method sends the data as part of the URL. The post method hides the data in something known as part of the HTTP header.

ENCTYPE: specifies the type of coding used.

-Adjective id

The id attribute allows you to uniquely identify elements within an <form> element just as you uniquely identify an element on a page.

It is good practice to specify an id element for each shape element because many shapes use style files and scripts that require the use of the id attribute in order to be done their difference.

The value of the id attribute must be unique within a document. Some people put value on the id and name attribute for the form frm characters and then describe the data as e.g. of a logging form is used frmLogin or in case of a search form frmResearch etc.

Attribute name (deprecated)

As we have already seen the use of this attribute in other elements, the name attribute is the ancestor of the id attribute and its value must be unique throughout the document.

Generally you will not see the use of the name attribute but if you will need it use ath is advised that as its value you set the value you set for the id attribute.

Similar to the id attribute, it is advisable to set the frm_goal as a value in value

Forms such as frmResearch or frmLogification

Form Elements

HTML offers a wide range of elements used for input in forms. They can

used for various functions such as writing text or sending files.

<INPUT>

The INPUT element is the most used and used as a field to retrieve data. there

several different types of the INPUT element depending on the value that the attribute takes

TYPE:

• TYPE = RADIO: allows you to choose from a range of options, but only one at a time.

• TYPE = RESET: deletes the entire form.

• TYPE: allows the user to insert a text line.

• TYPE = PASSWORD: allows the user to insert a text line that appears as “*” instead of the text. It is usually used for the part where the password will be written.

• TYPE = CHECKBOX: allows us to select one or more options.

• TYPE = SUBMIT: takes the data entered in the form and performs the specified action

• TYPE = HIDDEN: a text field that does not appear to the user. Used to store values.

The INPUT element also has some optional attributes:

• NAME: names the field. This is important to use in the processing code of

others. • VALUE: sets an initial value to the field.

SELECT

SELECT is used to select one or more of the possible options. An example would to be:

<SELECT name = “destination”>

<option> Africa

<option> Antarctica

<option> America

<option> Asia

<option> Europe

<option> Oceania

</ SELECT>

The attributes of the SELECT element are:

• SIZE: If SIZE has a value of 1, only one of the options will appear, if the value is more

more than 1 user will be shown a list of choices.

• MULTIPLE: users can choose more than one option, if this is selected.

The OPTION element has two attributes:

• WEIGHT: the value to be assigned to the variable when this option is selected.

• SELECTED: this option is selected automatically.

TEXTAREA is used to get several lines of text from the user. Its format it is as follows:

<TEXTAREA name = “comments” cols = 30 rows = 6> Give your impressions about our site!

</ TEXTAREA>

The content placed between <TEXTAREA> and </TEXTAREA> constitutes the initial value of this field.

The attributes of TEXTAREA are:

• ROWS: rows to be taken from the text box.

• COLS: columns.

Buttons

Buttons are used in the most frequent cases to send data of a form as well as sometimes to clear data from a form. You can create buttons in three ways: Using the <input> element with the type attribute whose value is submit, reset or button. Creating the button using the <input> element When you use the <input> element for it create a button, the type of button you create is specified in the type attribute. The attribute type can take the following values to create the button: Submit, which creates a button that sends to Reset-shaped data, which creates a button that automatically empties form controls from their initialization values that are filled in when downloading the page.

Posted in C++

admin

Leave a Reply

Your email address will not be published. Required fields are marked *

Next Post

CSS

Fri Jul 24 , 2020
Viewing CSS sheets for cascading styles. Other notes on how to present HTML elements. This is accomplished by attaching attributes presentation in any HTML element or subclass of it. For example, we want all paragraphs to have a red background and yellow text, we would use the following code. If […]

You May Like