lab#11 tableand form
TRANSCRIPT
LAB#11 Tables and Forms
322432 Web Design Technology
1
Table
การสรางตารางใน เว็บเพจมีประโยชนมากมาย โดยที่สามารถประยุกตนำไปใชไดหลายอยาง เพื่อเปนการเพิ่มสีสันความสวยงามของเว็บเพจ การสรางตาราง ยังเปน
ชวยในการออกรายงานตางๆ จัดรูปแบบขอความ ในกรณีออกเปนรายงาน ผลตางๆ การนำเสนอดวยตารางก็เปนที่นิยม
2
Table โครงสรางตาราง <TABLE> //เปนคำสั่งเปดปดตาราง
<TR> //ตารางตามแนวนอน เปนการกำหนดแถวในตาราง <TR>
<TH>หัวขอตาราง //หัวขอของตารางขอความที่อยูในคำสั่งจะถูกจัดใหเปน ตัวหนา
และกึ่งกลาง โดย อัตโนมัติ <TD>รายละเอียดยอย //เปนรายละเอียด ของตาราง เปนการ กำหนดจำนวน คอลัมน
ของตาราง <TH>หัวขอตาราง
<TD>รายละเอียดยอย
</TABLE> 3
คุณสมบัติตาราง
ALIGN ! !กำหนด ตำแหนงตาราง โดย ! ! !LEFT=กำหนดตารางใหอยูทางซาย ! ! !RIGHT=กำหนดตารางใหอยูทางขวา
BACKGROUND !ใสภาพกรฟก เปนพื้นหลังตาราง url เปน ตำแหนง ภาพ BGCOLOR !กำหนดสีใหตาราง BORDER ! !เสนขอบ ตาราง n เปนคา ความหนาของ ขอบตาราง BORDERCOLOR !กำหนดสี ใหขอบตาราง โดยสัมพันธกับ BORDER CELLPADDING !กำหนดระยะ หางระหวาง ตัวหนังสือและเสนแบงตาราง CELLSPACING !กำหนดขนาดของเสนตาราง WIDTH ! !กำหนดความกวางของตาราง เปนตัวเลขและเปน % HEIGHT ! !กำหนดความสูงของตารางเปนตัวเลขและเปน %
4
คุณสมบัติตาราง Table ตองใชกับเว็บเบราเซอรรุนใหมๆ เชน IE6 เปนตนไป *บาง property เมื่อทดสอบแลวไมเห็นผล
Property ! Description Values
table-layout ใชกำหนดความกวางของตารางและคอลัมน
automatic fixed
Default กวางตามที่กำหนดเทานั้น
caption-side ใชกำหนดตำแหนงของชื่อตาราง top, bottom, left, right
Default
empty-cells ใชกำหนดวาจะแสดง/ไมแสดงเสนขอบ เมื่อ cell นั้นไมมีขอความ
hide show
border-spacing ใชกำหนดระยะระหวางตารางและขอบ แนวนอน และแนวตั้ง
length
border-collapse
ใชกำหนดลักษณะเสนขอบ separate collapse
5
Table and CSS
Ex. CSS table.one
{ table-layout: automatic
}
table.two {
table-layout: fixed }
6
Table and CSS (Cont.)
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>
7
Form
Form Elements
<form> . input elements . </form>
8
Form Text Fields
<form> First name: <input type="text" name="firstname"><br> Last name: <input type="text" name="lastname"> </form>
Password Field
<form> Password: <input type="password" name="pwd"> </form>
9
HTML Forms
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>
10
HTML Forms
<form name="input" action="html_form_action.asp" method="get"> Username: <input type="text" name="user"> <input type="submit" value="Submit"> </form>
11
HTML Form Tags
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
12
.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>
Example
13
Example
.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 }
14
.button_gray { font-family:Arial, Helvetica, sans-serif; font-weight:bold; color:#333333; background-color:#F7F7F7; border: 1px solid #000000; padding: 1px 0; }
Example
<input type="button" value="Submit" class="button_gray">
15
ตัวอยาง Design Form
16
pseudo-classes
v :active ในที่นี้ จะทำงานในขณะที่ click mouse v :focus จะทำหนาที่บอกตำแหนงของตัวรับขอมูลของแบบฟอรมที่ cursor ของ
ผูใชงานทำงานอยู และ สถานะที่พรอมใชงาน (พรอมรับขอมูลที่จะกรอก) v :checked เปน pseudo-classes ที่ทำการเช็คคาความเปนจริงของ
input[type='checkbox'], input[type='radio'] วาไดทำการเลือกไปแลว
17
pseudo-classes
18
input[type="checkbox"]:checked+label, input[type="radio"]:checked+label { color: green; border-bottom: 1px solid green; }
input[type='text']:active, textarea:active { background: green;
input[type='text']:focus, textarea:focus { color: gray; -moz-box-shadow: 0px 0px 5px green; -webkit-box-shadow: 0px 0px 5px green; } input[type='text']:focus+p, textarea:focus+p { visibility: visible; }
Example
19
คำสั่ง LAB#11
ใหนักศึกษาออกแบบฟอรม และตารางการเก็บขอมูลที่จัดเตรียมไวให โดยสวยงาม และใหเขียนคอมเมนโคด อธิบายเปนสวนๆ ดวย
20