Tables and Forms. HTML5 with forms, CSS design with tables and forms. Javascript with form. The method GET and POST, Example

1. TABLES AND FORMS
322432 WEB DESIGN TECHNOLOGY
By Yaowaluck Promdee, Sumonta Kasemvilas
1
WDS
CS KKU
Web Design Technology | 2015

2. 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
Web Design Technology | 2015

3. TABLE
3
WDS
CS KKU
Web Design Technology | 2015

4. 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
Web Design Technology | 2015

5. 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
Web Design Technology | 2015

6. TABLE AND CSS
6
Example1. CSS
table.one
{
table-layout: automatic
}
table.two
{
table-layout: fixed
}
WDS
CS KKU
Output
Web Design Technology | 2015

7. 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
Web Design Technology | 2015

8. 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
Web Design Technology | 2015

9. FORM
9
Form Elements
<form>
.
input elements
.
</form>
WDS
CS KKU
Web Design Technology | 2015

10. 10
Example Form Design
WDS
CS KKU
Web Design Technology | 2015

11. 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
Web Design Technology | 2015

12. HTML5 TEXT FIELDS
Web Design Technology | 2015
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. Web Design Technology | 2015
13
WDS
CS KKU
Example text fields
date time email
url number tel

14. HTML5 TEXT FIELDS
Web Design Technology | 2015
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 />

15. 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
Web Design Technology | 2015

16. 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
Web Design Technology | 2015

17. 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
Web Design Technology | 2015

18. Web Design Technology | 2015
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

19. .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
Web Design Technology | 2015

20. 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 KKUExample2
Web Design Technology | 2015

21. .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
Web Design Technology | 2015

22. Web Design Technology | 2015
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

23. Design Form
23
WDS
CS KKU
Web Design Technology | 2015

24. Exercise2 Try it in class!
24
WDS
CS KKU
Web Design Technology | 2015
Employment Application
For (*) show required “Please fill out this field.”

25. 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
Web Design Technology | 2015