HTML: Tables and Forms

Objectives Use tables to structure a webpage Use forms to collect user input –Method:Get, Post –Input –Select –Textarea

In Class Keep 2 browser windows open. Try examples as we go along. Save notepad as html to desktop. (Double) click to see.

Tables To structure the page To arrange the elements on a page Contain rows of data cells

Defining a Table Structure The first step to creating a table is to specify the table structure: –the number of rows and columns –the location of column headings –the placement of a table caption Once the table structure is in place, you can start entering data into the table

,, and Tags Graphical tables are enclosed within a two-sided tag that identifies the start and ending of the table structure Each row of the table is indicated using a two-sided (for table row) Within each table row, a two-sided (for table data) tag indicates the presence of individual table cells

Simple Table First Cell Second Cell Third Cell Fourth Cell –This creates a table with two rows and two columns

Simple Table Two rows and two columns two rows

Headings HTML provides the tag for table headings Text formatted with the tag is centered within the cell and displayed in a boldface font The tag is most often used for column headings, but you can use it for any cell that you want to contain centered boldfaced text

Table Caption The syntax for creating a caption is: caption text –alignment indicates the caption placement –a value of “bottom” centers the caption below the table –a value of “top” or “center” (newer) centers the caption above the table –a value of “left” or “right” (newer) place the caption above the table to the left or right

Table... enclose a table –... enclose a table row.... enclose a table data or cell.... enclose a table header. It’s a cell whose default is bold and centered. –... enclose a caption

Cell spacing The cellspacing attribute controls the amount of space inserted between table cells … –value is the width of the interior borders in pixels –the default cell spacing is 2 pixels

Cell spacing

Cell Padding The cellpadding attribute controls the space within the cells … –value is the distance from the table text to the cell border, as measured in pixels –the default cell padding value is 1 pixel

Cell Padding

Background Color You may specify a background color for all of the cells in a table, all of the cells in a row, or for individual cells: –color is either a color name or hexadecimal color value (to be discussed)

Attributes width – width of table in pixels or % of the browser window height – height of the table in pixels or % of the browser window cellpadding –the space between the cell border and the contents in pixels cellspacing – specifies the space between cells in pixels

Attributes align – left, center, right bgcolor – Background color of table border – –The width is in pixels. –The default is zero, or no border. –Including the border attribute without a value produces a 1 pixel border. See syllabus

Attributes align bgcolor

Cell Width To set the width of an individual cell, add the width attribute to either the or tags The syntax is: width=“value” –value can be expressed either in pixels or as a percentage of the table width –a width value of 30% displays a cell that is 30% of the total width of the table

Cell Height The height attribute can be used in the or tags to set the height of individual cells The height attribute is expressed either in pixels or as a percentage of the height of the table If you include more text than can be displayed within that height value you specify, the cell expands to display the additional text

Spanning Rows and Columns To merge several cells into one, you need to create a spanning cell A spanning cell is a cell that occupies more than one row or column in a table Spanning cells are created by inserting the rowspan and colspan attribute in a or tag. The syntax for these attributes is: … –value is the number of rows or columns that the cell spans in the table

Spanning Rows and Columns When a cell spans several rows or columns, it is important to adjust the number of cell tags used in the table row When a cell spans several rows, the rows below the spanning cell must also be adjusted

Spanning Rows and Columns This cell spans three columns This cell spans three rows

Row-Spanning Cell HTML code resulting table four table cells in the first row only three table cells are required for the second and third rows

Aligning Contents By default, cell text is placed in the middle of a cell, aligned with the cell’s left edge You can specify a different horizontal alignment for a or element align=“position” position is left, center or right

Attributes align – Horizontal alignment valign – Vertical alignment (top, middle, bottom) width – Width of cell in pixels or percentage of table width height – Height of cell in pixels or percentage of table height

Attributes colspan – Makes cell take up space of one or more cells rowspan – Makes cell take up space of one or more rows bgcolor

Placeholder Insert a no-breaking space in the empty cell. Row1 Col1 Row2 Col2 Row2 Col2

Nested Tables Tables can be created within the cell of another table. Carefully work on one table at a time.

Examples and homework See simple_calculator.html See table_example.html See form_border.html Do table assignment

HTML Forms osaic/Docs/fill-out-forms/overview.htmlhttp:// osaic/Docs/fill-out-forms/overview.html Summary of HTML tags for forms and examples of simple forms Forms tutorial

HTML Forms HTML Forms were the first way for users to interact with the Web –controls (inputs) –form submission –form processing Forms collect user input … encloses a form

CGI Common Gateway Interface Programs that let HTML pages (on server) interact with the viewers (clients) via HTTP. Programs can send specific information. Programs get information from users. Written in C/C++, Java, Perl, UNIX scripts. Executed on the server

Forms E-commerce Feedback (surveys) Searching Faster More accurate Cheaper Virus free

GET -- this is the default method and causes the fill-out form contents to be appended to the URL. POST -- this method causes the fill-out form contents to be sent to the server in a data body rather than as part of the URL. ENCTYPE specifies the encoding for the fill-out form contents. This attribute applies only if METHOD is set to POST

Form Attributes Name Method –get -- this is the default method and causes the fill-out form contents to be appended to the URL. Use only when submit has no effect. e.g. pure query. –post -- this method causes the fill-out form contents to be sent to the server in a data body rather than as part of the URL.

Form Attributes Action : –The URL to which the data is sent (may be local) or –mailto: so the data just gets sent in an . Enctype: the encoding for the fill-out form contents. This attribute applies only if the method is post.

Form Examples

Form Contents A Form may contain anything except another Form. Interface elements (controls): – input tags – select tags – textarea tags

Input Attributes The attributes to INPUT are as follows: TYPE must be one of: "text" (text entry field; this is the default) "password" (text entry field; entered characters are represented as asterisks) "checkbox" (a single toggle button; on or off) "radio" (a single toggle button; on or off; other toggles with the same NAME are grouped into "one of many" behavior) "submit" (a pushbutton that causes the current form to be packaged up into a query URL and sent to a remote server) "reset" (a pushbutton that causes the various input elements in the form to be reset to their default values) NAME is the symbolic name (not a displayed name -- normal HTML within the form is used for that) for this input field. This must be present for all types but "submit" and "reset", as it is used when putting together the query string that gets sent to the remote server when the filled-out form is submitted. VALUE, for a text or password entry field, can be used to specify the default contents of the field. For a checkbox or a radio button, VALUE specifies the value of the button when it is checked (unchecked checkboxes are disregarded when submitting queries); the default value for a checkbox or radio button is "on". For types "submit" and "reset", VALUE can be used to specify the label for the pushbutton. CHECKED specifies that this checkbox or radio button is checked by default; this is only appropriate for checkboxes and radio buttons. SIZE is the physical size of the input field in characters; this is only appropriate for text entry fields and password entry fields. If this is not present, the default is 20. Multiline text entry fields can be specified as SIZE=width,height; e.g. SIZE=60,12. Note: the SIZE attribute should not be used to specify multiline text entry fields now that the TEXTAREA tag is available. MAXLENGTH is the maximum number of characters that are accepted as input; this is only appropriate for text entry fields and password entry fields (and only for single-line text entry fields at that). If this is not present, the default will be unlimited. The text entry field is assumed to scroll appropriately if MAXLENGTH is greater than SIZE.

Input: type attribute (submits data) (resets to defaults) (user defined) – (asterisks) (toggle) (toggle-only one) (isn’t displayed)

Input: type attribute Default is “text”

Other Input Attributes name value checked size maxlength

Submit Button When a user clicks on a submit button the browser submits the contents of all other fields to a web server using the method and action attributes. May have multiple submit buttons on a page (with different values). Default value is “Submit Query”

Reset Button When user presses the reset the entire form is cleared. The displays are reset to the initial values which have been saved.

Button “push button” User defined Discussed with JavaScript

Text Creates a text box into which user types. When the form contains only a single text entry field, the form can be submitted by pressing return in the text box as well as by pressing the Submit Query button. E.g. Google gives you this hint. Their submit button has the value “Google Search”.

Text <input type=“text” name=“pizza” size=“10” maxlength=“20” value=“pepperoni”>

Text please enter your name: please enter your age:

Use Table to Format Form your name: your age:

Password Text appears as asterisks on screen. Why?

Checkbox Radio A/C Global Positioning System Leather seats

Checkbox “extras” is the name of the checkbox, and links the group of checkboxes. “value” is the text that will be sent if the box has been checked. Any number of boxes may be selected. They may be initially selected or deselected.

Radio Buttons Jack Queen King Ace

Radio Buttons “card” is the name of the group and links the group of radio buttons. Every button in the group must have the same name.) “value” is the text that will be sent to the server if that button is chosen. Only one button can be selected—they are mutually exclusive.

Select Menu Dropdown list Scrolling list

Select SELECT has both opening and closing tags. Inside SELECT, only a sequence of OPTION tags -- each followed by an arbitrary amount of plain text (no HTML markup) -- is allowed. SELECTED attribute specifies that this option is selected by default. If the SELECT allows multiple selections (via the MULTIPLE attribute), multiple options can be specified as SELECTED.

Select Pick option. First option. Second option.

Attributes for Select NAME is the symbolic name for this SELECT element. This must be present, as it is used when putting together the query string for the submitted form. SIZE: if SIZE is 1 or if the SIZE attribute is missing, by default the SELECT will be represented as a Motif option menu. If SIZE is 2 or more, the SELECT will be represented as a Motif scrolled list; the value of SIZE then determines how many items will be visible.

Attributes for Select MULTIPLE, if present, specifies that the SELECT should allow multiple selections (n of many behavior). The presence of MULTIPLE forces the SELECT to be represented as a Motif scrolled list, regardless of the value of SIZE.

Select Color Red Green Yellow Blue

Textarea The textarea tag creates an area where the user can submit multiple lines of text. … attributes: –name –Rows (default is 2) –Cols (width in characters) (default is 20)

Textarea Has automatic scrollbar; any amount of text can be entered. May have default contents : Default contents go here. Newlines are respected. There will be a newline both before and after "Default contents go here."

Example please enter your address :

Hidden Nothing is displayed by the browser. Name and value are sent when submitted stores info between client/server exchanges that would otherwise be lost Not really hidden. Can see it in the source.

Examples /Mosaic/Docs/fill-out-forms/example-1.htmlhttp://archive.ncsa.uiuc.edu/SDG/Software /Mosaic/Docs/fill-out-forms/example-1.html Can you code these? His source is a nightmare. See form group example See menus.html ?

Homework

Summary Tables (rows of data cells) to arrange elements on a webpage Forms to collect user data and send it to server. –Attributes :Method, Action –Input elements – we’ve seen (what are they?): Buttons (3) Texts (2) Toggles (2) Hidden (1) –Textarea –Select