Tables and forms with HTML, CSS

TABLES AND FORMS 322432 WEB DESIGN TECHNOLOGY By Yaowaluck Promdee, Sumonta Kasemvilas

1

WDS CS KKU

Web Design Technology | 2015

TABLE

2

o  Tables are defined with the <table> tag. o  Tables are divided into table rows with the <tr> tag. o  Table rows are divided into table data with

the <td> tag. o  A table row can also be divided into table

headings with the <th> tag.

WDS CS KKU


TABLE

3

WDS CS KKU


TABLE HTML & CSS

4

Tag Description

<table> Defines a table

<th> Defines a header cell in a table

<tr> Defines a row in a table

<td> Defines a cell in a table

<caption> Defines a table caption

<colgroup> Specifies a group of one or more columns in a table for formatting

<col> Specifies column properties for each column within a <colgroup> element

<thead> Groups the header content in a table

<tbody> Groups the body content in a table

<tfoot> Groups the footer content in a table

http://www.w3schools.com/html/html_tables.asp


TABLE HTML & CSS

5

o  Use the HTML <table> element to define a table o  Use the HTML <tr> element to define a table row o  Use the HTML <td> element to define a table data o  Use the HTML <th> element to define a table heading o  Use the HTML <caption> element to define a table caption o  Use the CSS border property to define a border o  Use the CSS border-collapse property to collapse cell borders o  Use the CSS padding property to add padding to cells o  Use the CSS text-align property to align cell text o  Use the CSS border-spacing property to set the spacing between cells o  Use the colspan attribute to make a cell span many columns o  Use the rowspan attribute to make a cell span many rows o  Use the id attribute to uniquely define one table

WDS CS KKU


TABLE AND CSS

6

Example1. CSS table.one { table-layout: automatic } table.two { table-layout: fixed }

WDS CS KKU

Output


TABLE AND CSS (CONT.)

7

Example.1 HTML CODE <table class="one" border="1" width="100%”><tr> <td width="20%">1000000000000000000000000000</td> <td width="40%">10000000</td> <td width="40%">100</td> </tr> </table> <br /> <table class="two" border="1" width="100%”> <tr> <td width="20%">1000000000</td> <td width="40%">100000</td> <td width="40%">100</td></tr> </table>

WDS CS KKU


8

Exercise.1 Try it! In Class This table is the result. How to code HTML and CSS ? Conditions: 1. Heading is bold font. Text all of content show center and grey color. Border bottom is 2 px and black color. 2. Row1 and Row3 is light grey color. 3. Row2 is white color. 4. When mouse over will show dark color on the table.

WDS CS KKU


FORM

9

Form Elements

<form> . input elements . </form>

WDS CS KKU


10

Example Form Design WDS

CS KKU


FORM TEXT FIELDS

11

<form> First name: <input type=“gender" name="firstname"><br> Last name: <input type=“gender" name="lastname"> </form>

Password Field <form> Password: <input type="password" name="pwd"> </form>

WDS CS KKU


HTML5 TEXT FIELDS


12

<input type=“data” name=“birthday”> <input type=“time” name=“game-time”> <input type=“email” name=“email-address”> <input type=“url” name=“website”> <input type=“number” name=“cost”> <input type=“tel” name=“phonenumber”> <!- example shows the next page -->

color date datetime !

email month number!

range search tel !

time url week!

http://learn.shayhowe.com/html-css/building-forms/


13

WDS CS KKU

Example text fields

date time email

url number tel

HTML5 TEXT FIELDS


14

<progress id=“prog” max=100 value=45> 45% </progress>

<input type=“range” min=“1” max=“5” step=“1” />

<input type="color "">

<input type=“file” name=“file” >

http://cdn.sixrevisions.com/demos/0345-new_html5_form_input_types/new-html5-form-input-types.html

<input type="text" name="name" required /> <input type="text" name="email" required />

HTML FORMS

15

Radio Buttons <form> <input type="radio" name="sex" value="male">Male<br> <input type="radio" name="sex" value="female">Female </form>

Checkboxes <form> <input type="checkbox" name="vehicle" value="Bike">I have a bike<br> <input type="checkbox" name="vehicle" value="Car">I have a car </form>

WDS CS KKU


HTML FORMS

16

<form name="input" action="html_form_action.asp" method="get"> Username: <input type="text" name="user"> <input type="submit" value="Submit"> </form>

WDS CS KKU


HTML FORM TAGS

17

Tag Description <form> Defines an HTML form for user input <input> Defines an input control <textarea> Defines a multiline input control (text area) <label> Defines a label for an <input> element <fieldset> Groups related elements in a form <legend> Defines a caption for a <fieldset> element <select> Defines a drop-down list <optgroup> Defines a group of related options in a drop-down list <option> Defines an option in a drop-down list <button> Defines a clickable button <datalist> Specifies a list of pre-defined options for input controls <keygen> Defines a key-pair generator field (for forms) <output> Defines the result of a calculation

WDS CS KKU



18

WDS CS KKU THE METHOD ATTRIBUTE

The method attribute specifies the HTTP method (GET or POST) to be used when submitting the forms:

<form action="action_page.php" method="get">

<form action="action_page.php" method="post">

When to Use GET or POST?

Or

.textarea { width:300px; scrollbar-arrow-color:#000; scrollbar-face-color:#fff; scrollbar-highlight-color:#fff; scrollbar-3dlight-color:#fff; scrollbar-track-color:#fff; scrollbar-shadow-color:#fff; scrollbar-darkshadow-color:#fff; color:#000; border-width:0; font-size:12px }

<div style="border:1px solid #000; background:#fff;padding:4px; width:320px"> <div style="border:1px solid #000;margin-bottom:4px"> <div style="border-width:1px;border-style:solid;border-color:#fff #98cee0 #98cee0 #fff;background:#add8e6;color:#000;text-align:center;font-size:12px;padding:4px”>Topic</div> </div> <textarea rows="5" class="textarea"> Hello world. . . </textarea>

Example2

19

WDS CS KKU


20

.textarea2 { scrollbar-arrow-color:#add8e6; scrollbar-face-color:#fff; scrollbar-highlight-color:#fff; scrollbar-3dlight-color:#add8e6; scrollbar-track-color:#fff; scrollbar-shadow-color:#fff; scrollbar-darkshadow-color:#add8e6; color:#197bff; border:1px solid #add8e6; font-size:12px }

.textarea1 { scrollbar-arrow-color:#ffb090; scrollbar-face-color:#fff; scrollbar-highlight-color:#fff; scrollbar-3dlight-color:#ffb090; scrollbar-track-color:#fff; scrollbar-shadow-color:#fff; scrollbar-darkshadow-color:#ffb090; color:#ff4a19; border:1px solid #ffb090; font-size:12px }

WDS CS KKU Example2


.button_gray { font-family:Arial, Helvetica, sans-serif; font-weight:bold; color:#333333; background-color:#F7F7F7; border: 1px solid #000000; padding: 1px 0; }

Example3

<input type="button" value="Submit" class="button_gray">

21

WDS CS KKU



22

JavaScript Forms

function validateForm() { var x = document.forms["myForm"]["fname"].value; if (x == null || x == "") { alert("Name must be filled out"); return false; } }

<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post"> Name: <input type="text" name="fname"> <input type="submit" value="Submit"> </form>

HTML

JavaScript Example

WDS CS KKU

Design Form

23

WDS CS KKU


Exercise2 Try it in class!

24

WDS CS KKU


Employment Application For (*) show required “Please fill out this field.”

ASSIGNMENT #11

25

Create a Web page to follow Exercise1 and Exercise2 using CSS design Grade will be based on your CSS technique and look and feel of the web page for Exercise2 In hours time

WDS CS KKU


Tables and forms with HTML, CSS

Education

Transcript of Tables and forms with HTML, CSS