Transcript XML เพื่อการแลกเปลี่ยนข่าวสาร

ภาษามาร์กอัป
เอกสารประกอบการสอนรายวิชาภาษามาร์กอัป
ระดับมัธยมศึกษาตอนปลาย
การสร้างฟอร์ม (form)
ด้วยภาษา html
การสร้างแบบฟอร์ม (form)
• html form เป็ นลักษณะของระบบการสอบถามข้อมูลแบบหนึ่งทีใ่ ช้ในระบบเครือ
ข่ายอินเทอร์เน็ต
• รูปแบบ
<form method=“methodname”
action=“urlsname”>
ข้อความและฟิลด์ของฟอร์ม
ข้อความและฟิลด์ของฟอร์ม
ข้อความและฟิลด์ของฟอร์ม
……
</form>
การสร้างแบบฟอร์ม(2)
• ฟอร์ม (form) ใช้ในการรับข้อมูลจากผูใ้ ช้ และทำางานร่วมกับโปรแกรมย่อยๆ หรือ
Script ทีเ่ รียกว่า Common Gateway Interface(CGI)
• CGI เป็ นโปรแกรมตัวกลางทีท่ าำ หน้าทีเ่ ชือ่ มโยงข้อมูลระหว่างเครือ่ งคอมพิวเตอร์
ของผูใ้ ช้กบั เครือ่ ง Server โดย Server รวบรวมข้อมูลทีผ่ ใู้ ช้ป้อนมา เพือ่ ประมวล
ผล เมือ่ เสร็จแล้วส่งผลลัพธ์กลับไปยังผูใ้ ช้
การสร้างแบบฟอร์ม(3)
• ตัวเลือกทีใ่ ช้ในร่วมกับแท็ก form
• method = ”get” หรือ ”post” ใช้บอก Browser ว่าจะส่งข้อมูลไปที่ Server ด้วยวิธใี ด
• get เป็ นการนำาข้อมูลทัง้ หมดในฟอร์มไปต่อท้ายสุดแล้วประมวลผลครัง้ เดียว
• post จะนำาข้อมูลส่งไปที่ server แยกกันไปเป็ นแต่ละ transaction
• action = “urlsname” ใช้ระบุurl ของ CGI script ทีเ่ รียกมาใช้งาน
• encrypt ใช้สาำ หรับเข้ารหัส โดยระบุเป็ น mine type
คำาสัง่ input
่ บข้อมูลในฟอร์มโดยการสร้างปุม่ หรือตัวเช็ค หรือ ช่องกรอกข้อความ
• เป็ นคำาสังรั
ตาม attribute ของ type
• รูปแบบ
• <input type=”ชนิดการรับข้อมูล”
name=“ชือ่ ตัวแปร“ [ตัวเลือกเพิม่ เติม]>
• type ใช้บอกชนิดของข้อมูลนำาเข้าประกอบด้วย
• text, password, checkbox, radio, submit, reset
• ตัวเลือกเพิม่ เติมมีดงั นี้
• align, checked, rows, cols, size, maxlength, src, value
คำาสัง่ input กับแบบข้อมูลชนิด text
• เป็ นแบบข้อมูลทีผ่ ใู้ ช้ป้อนข้อความลงในช่องรับข้อมูลในแบบฟอร์มเพียงบรรทัด
เดียว
่ อ
• มีตวั เลือกทีใ่ ช้รว่ มกับคำาสังคื
• size กำาหนดขนาดของช่องรับข้อมูล
• name กำาหนดชือ่ ข้อมูล (ตัวแปร) ทีใ่ ช้เก็บข้อมูล
• value บอกค่าทีก่ าำ หนดไว้แล้ว ถ้าไม่ป้อนค่าเข้ามาจะถือว่าเป็ น default
• ตัวอย่าง
• ชือ่ : <input type=”text”
name = “fname” size = 40 />
คำาสัง่ input กับข้อมูลแบบ password
• password เป็ นรูปแบบรับข้อมูลคล้าย text แต่จะแสดงเป็ นเครือ่ งหมาย “*” ขณะ
พิมพ์ขอ้ มูล
• รูปแบบ
• <input type=”password”
size=8 name=“password” />
• ตัวอย่าง
• password : <input type= “password” size = 8 name = “mycode” />
คำาสัง่ input กับข้อมูลแบบ radio
• radio button มีลกั ษณะ เป็ นปุม่ กลม
• เป็ นรูปแบบการรับข้อมูลทีก่ าำ หนดให้ผใู้ ช้เลือกตัวเลือกเพียงอย่างเดียว เมือ่
เลือกจะเป็ นจุดดำา
• ตัวเลือก checked เป็ นการกำาหนดให้รายการนัน้ เป็ นค่าปริยาย
• รูปแบบ
<input type= “radio” name =“rname” value= “rvalue /> ข้อความ
ตัวอย่างการใช้ radio button
<form>
Please choose one of the following :<p>
<input type = “radio” name = “sex”
value="male" /> Male <br />
<input type = “radio” name = “sex”
value="female" /> Female <br />
</form>
คำาสัง่ input กับแบบข้อมูลชนิด checkbox
•
•
•
•
•
เป็ นรูปแบบการเลือกทีผ่ ใู้ ช้เลือกตัวเลือกได้มากกว่า 1 รายการ
value เป็ น attribute ทีก่ าำ หนดค่าให้แต่ละตัวเลือกทีผ่ ใู้ ช้เลือก
ชือ่ ตัวแปรทีใ่ ช้เก็บค่าจะต้องแตกต่างกัน
ตัวเลือก checked เป็ นการกำาหนดให้รายการนัน้ เป็ นค่าปริยาย
รูปแบบ
<input type= “checkbox” name =“cname” value= “cvalue” />
ตัวอย่างการใช้ checkbox
<form>
<input type= ”checkbox” name = “FRUIT1”
value = “mango” /> Mango <br />
<input type= ”checkbox” name = “FRUIT2”
value = “orange” /> Orange <br />
<input type= ”checkbox” name = “FRUIT3”
value = “banana” /> Banana <br />
<input type= ”checkbox” name = “FRUIT4”
value = “durian” /> Durian <br />
</form>
การสร้างปุม่ ส่งข้อมูลในแบบฟอร์ม
• submit เป็ นปุม่ ใช้สาำ หรับส่งข้อมูลทีก่ รอกหรือเลือกในแบบฟอร์มไปยัง
Server
• รูปแบบ
<input type = “submit”
name = “message”/>
 เมือ่ message คือข้อความทีป่ รากฏบนปุม่ เลือก
การสร้างปุม่ ยกเลิกข้อมูลในแบบฟอร์ม
• reset เป็ นปุม่ ทีใ่ ช้กดสำาหรับยกเลิกข้อมูลทีป่ ้ อนเข้าไปทัง้ หมดในแบบฟอร์ม
เพือ่ ให้กบั ไปใช้คา่ เริม่ ต้นใหม่
• รูปแบบ
<input type = “reset”
name = “message” />
 เมือ่ message คือข้อความทีป่ รากฏบนปุม่ reset
การใช้ปุม่ submit และ reset
<form>
<input type = “submit”
value =“Sent form” />
<input type = “reset”
value =“Cancel form” />
</form>
แสดงผลดังนี้
Send form
Cancel form
textarea
• เป็ นการรับข้อความหลายบรรทัด (Multiline text input)บนแบบฟอร์มใน
บริเวณทีก่ าำ หนดไว้
• รูปแบบ
<textarea
name = “ชือ่ ตัวแปร“
rows = “จำานวนบรรทัด”
cols = “จำานวนคอลัมน์”>
ข้อความ
</textarea>
• ตัวแปรแทนชือ่ พืน้ ทีท่ เ่ี รากำาหนด
ตัวอย่าง
<form>
Please enter any comments here <p>
<textarea name = “comments” rows=”8” cols=”60”>
This is comments
</textarea>
</form>
การสร้าง select box
• select แสดงตัวเลือกทัง้ หมดให้ผใู้ ช้เลือกโดยอาจแสดงในรูปของ dropdown list หรือแสดงตัวเลือกตามปกติ
• รูปแบบ
<select name = “ชือ่ ตัวแปร“>
<option [value = “ข้อมูล“ ] />ข้อความ
</select>
…………..
ตัวอย่าง
<form>
<select name = “sport” >
<option value = “tennis” /> Tennis
<option value = “basketball” />Basketball
<option value = “football” />Football
<option value = “volleyball” />Volleyball
</select>
</form>
การใช้ multiple ใน selection box
• สามารถใช้ multiple เพือ่ แสดงผลลัพธ์ตวั เลือกทัง้ หมด โดยไม่ตอ้ งคลิกทีล่ กู ศร
เลือ่ นแสดง
<form>
<select name = “sport” multiple >
<option value = “tennis” /> Tennis
<option value = “basketball” />Basketball
<option value = “football” />Football
<option value = “volleyball” />Volleyball
</select>
</form>
การใช้ size กำาหนดจำานวนตัวเลือก
• size ใช้แสดงจำานวนตัวเลือกทีต่ อ้ งการให้เห็นใน drop-down lists
<form>
<select name = “sport” size = 3 >
<option value = “tennis” /> Tennis
<option value = “basketball” />Basketball
<option value = “football” />Football
<option value = “volleyball” />Volleyball
</select>
</form>
การส่งข้อมูลในแบบฟอร์มด้วย Mailto
• เราสามารถส่งข้อมูลจากแบบฟอร์มทีเ่ ราสร้างขึน้ โดยใช้ไปรษณียอ์ เิ ล็ก ทรอ
นิกส์ได้ โดยใช้คาำ สัง่ mailto ใน action ของแบบฟอร์ม
• เมือ่ ผูใ้ ช้กดปุม่ submit ข้อมูลทีก่ รอกในแบบฟอร์มจะถูกส่งเป็ น ไปรษณียอ์ ี
เลกทรอนิกส์ไปยังผูร้ บั ตามทีอ่ ยูท่ ก่ี าำ หนดทันที
• รูปแบบ
<form method=“post”
action=“mailto:user@hostname”>
:
</form>
การสร้ างเฟรม (frame)
ด้ วยภาษา html
คำาสังกำ
่ าหนดเฟรม
• ใช้ Tag <frameset>…</frameset> กำาหนดให้ Browser แสดงผลแบบเฟรม
• กำาหนดขนาดของเฟรม ใช้ attributes 2 ตัวคือ rows และ cols
• rows เป็ น attribute แบ่งเฟรมตามแนวนอนตามค่า ทีก่ าำ หนด
rows = “lists”
• cols เป็ น attribute แบ่งเฟรมตามแนวตัง้ ตามค่า ทีก่ าำ หนด
cols = “lists”
คำาสังกำ
่ าหนดเฟรม
• lists เป็ นชุดค่าตัวเลขทีใ่ ช้กาำ หนดขนาดให้กบั เฟรมตามแนวนอนหรือแนวตัง้ ถ้า
มีหลายค่าจะคันด้
่ วยเครือ่ งหมายจุลภาค
การแบ่งจอภาพ
• เป็ นการแบ่งจอภาพเป็ นส่วนๆ แต่ละส่วนมีขอ้ มูลและการทำางานทีเ่ ป็ นอิสระ
จากกัน
่ ใ่ ช้รว่ มกันอยู่ 3 คำาสัง่ ดังนี้
• การสร้างเฟรม มีคาำ สังที
• <frameset> …</frameset> กำาหนดการแสดงผลแบบเฟรม
• <frame> กำาหนดการแสดงเฟรมแต่ละเฟรม
• <noframe>…</noframe> เป็ นแท็กทีจ่ ะแสดงก็ต่อเมือ่ โปรแกรม Browser ไม่
สนับสนุนการแสดงผลแบบเฟรม
• สามารถสร้างเฟรมซ้อนภายใน <frameset> ได้ หรืออาจจะมี แท็ก <frame>
หรือ <noframe> อยูภ่ ายในได้
• ในเอกสาร html ทีม่ กี ารใช้แท็ก <frameset> แล้วจะไม่ม ี แท็ก <body>
• ตัวอย่าง
<html>
<head>
<title> This is frame Demo </title>
</head>
<frameset>
</frameset>
</html>
การกำาหนดขนาดของเฟรม
• การกำาหนดค่าของ lists มีวธิ กี าำ หนด 3 แบบคือ
1. กำาหนดค่าด้วย pixel
ต้องดูความละเอียดของจอภาพทีใ่ ช้ (640 x 480 หรือ 1024 x 768 )
<frameset rows = “200, 140, 100” >
<frameset cols = “200, 200,150 “ >
การกำาหนดขนาดของเฟรม(2)
2. กำาหนดค่าด้วยหน่วยเปอร์เซ็นต์
<frameset rows = “25%, 25%, 50%” >
<frameset cols = “60%,40%” >
การกำาหนดขนาดของเฟรม(3)
3. กำาหนดโดยใช้ความสัมพันธ์ของแต่ละเฟรม
• ใช้เครือ่ งหมาย * เป็ นตัวกำาหนด
• <frameset rows = “40%, *” > แบ่งเป็ น 2 ส่วนตามแนวนอน ส่วนบนสูง 40% ของ
เนื้อทีท่ งั ้ หมด และส่วนล่างใข้เนื้อที่ ๆเหลือทัง้ หมด
• <frameset cols = “60,80, *” > แบ่งจอภาพเป็ น 3 ส่วน ส่วนซ้ายกว้าง 60 pixel
ส่วนกลางกว้าง 80 pixel และส่วนขวาใช้เนื้อทีท่ เ่ี หลือทัง้ หมด
Tag <frame>
• เป็ นแท็กทีใ่ ส่ระหว่างแท็ก <frameset>…</frameset> ใช้สาำ หรับใส่ชอ่ื เอกสาร
หรือรูปภาพไว้ในส่วนของจอภาพทีแ่ บ่งไว้ดว้ ยแท็ก<frameset>
• มีรปู แบบดังนี้
<frame src = “url” name = “windows_name” marginwidth=value1
marginheight = value2
scrolling=choice noresize
frameborser=choice2
framespacing=value2>
Attribute ของ <frame>
• src= “url” บอกถึงไฟล์รปู ภาพ หรือไฟล์ htmlทีต่ อ้ งการแสดงในเฟรม
• name = “windows_name” ตัง้ ชือ่ ให้กบั เฟรม เพือ่ นำาไฟล์รปู ภาพหรือไฟล์เอก
สารอืน่ ๆ มาแสดง
• marginwidth กำาหนดช่องว่างทางซ้ายและขวาระหว่างข้อมูลและเฟรม
• marginheight กำาหนดช่องว่างด้านบนและล่างระหว่างข้อมูลและเฟรม
Attribute ของ <frame>(2)
• scrolling =“yes/no/auto” ใช้กาำ หนดให้เฟรมมี Scrollbar หรือไม่ม ี
• yes มี scrollbar
• no ไม่มี scrollbar
• auto browser เป็ นตัวกำาหนด
• frameborder กำาหนดให้ browser สร้างกรอบให้กบั เฟรม
• frameborder = 0 ซ่อนเส้นกรอบเฟรม
• ปกติคา่ default ของกรอบเฟรมเป็ น 5
• framespacing กำาหนดระยะห่างระหว่างเฟรม
• noresize กำาหนดไม่ให้ผใู้ ช้เปลีย่ นแปลงขนาดเฟรมในขณะทีใ่ ช้งาน
ตัวอย่างการแบ่งเฟรม
<html>
<head>
<title> Using frame demo</title>
</head>
<frameset rows=“30%,40%,30%”>
<frame name=“frame1” src=“web1.html” />
<frame name=“frame2” src=“web2.html” />
<frame name=“frame1” src=“web3.html” />
</frameset>
</html>
ตัวอย่างการแบ่งเฟรมให้มขี นาดแน่นอน
<html>
<head>
<title> Using frame demo</title>
</head>
<frameset rows=“30%,40%,30%”>
<frame name=“frame1”
src=“web1.html” noresize />
<frame name=“frame2”
src=“web2.html” noresize />
<frame name=“frame1”
src=“web3.html” noresize / >
</frameset>
</html>
การกำาหนดแถบเลือ่ นในเฟรม
• โดยปกติเฟรมทีม่ พี น้ื ทีไ่ ม่เพียงพอสำาหรับแสดงเนื้อหา จะมีแถบเลือ่ นเพือ่
ให้ผใู้ ช้เลือ่ นดูขอ้ มูลในส่วนทีเ่ หลือได้
• ถ้าไม่ตอ้ งการให้แสดงแถบเลือ่ นจะต้องกำาหนดแอตทริบวิ ต์
scrolling=“no” ใน <frame>
ตัวอย่างการใช้แถบเลือ่ นในเฟรม
<html>
<head>
<title> Using frame demo</title>
</head>
<frameset rows=“30%,*”>
<frame name=“frame1” src=“web1.html” noresize />
<frame name=“frame3” src=“web3.html” scrolling=“no” />
</frameset>
</html>
การสร้างเฟรมซ้อน
• แต่ละคอลัมน์สามารถแบ่งเป็ นแถวและแต่ละแถวสามารถแบ่งเป็ นคอลัมน์ได้เช่น
กัน
• ตัวอย่าง
แบ่งจอภาพเป็ น 2 เฟรมตามแนวดิง่ ขนาด 40% และ60% โดย เฟรมแรกแบ่งตามแนวนอน
เป็ น 2 เฟรม โดยเฟรมแรกสูง 30% และส่วนทีเ่ หลือสูง 70%
<frameset cols = “40%, *”>
...
<frameset rows = “30%, 70%”>
...
</frameset>
</frameset>
ตัวอย่างการสร้างเฟรมซ้อน 1
<html>
<head>
<title> Using nested frame demo</title>
</head>
<frameset cols=“30%,*”>
<frame name=“frame1” src=“web1.html” />
<frameset rows=“40%,*”>
<frame name=“frame2” src=“web2.html” />
<frame name=“frame3” src=“web3.html” />
</frameset>
</html>
</frameset>
ตัวอย่างการสร้างเฟรมซ้อน 2
<html>
<head>
<title> Using nested frame demo</title>
</head>
<frameset rows=“30%,*”>
<frame name=“frame1” src=“web1.html” />
<frameset cols=“20%,*”>
<frame name=“frame2” src=“web2.html” />
<frame name=“frame3” src=“web3.html” /> </frameset>
</frameset>
</html>
tag <noframe>…</noframe>
• ใช้กาำ หนดส่วนของเอกสารทีจ่ ะให้แสดงโดย browser ทีไ่ ม่สามารถแสดง
เฟรมได้ มีรปู แบบดังนี้
<noframe>…</noframe>
• ถ้ามีการใช้เฟรมควรใส่สว่ น <noframe> ไว้เสมอเพือ่ ให้ผใู้ ช้ทใ่ี ช้ browser
ทีไ่ ม่สามารถแสดงเฟรมได้ ใช้ได้ตามปกติเหมือนไม่มเี ฟรม
การเชือ่ มโยงให้สมั พันธ์กนั ในเฟรม
• targeting frame เป็ นการส่งเอกสารไปแสดงในเฟรมอืน่ โดยเฟรมเป้าหมาย
ต้องมีการตัง้ ชือ่ สำาหรับอ้างอิง
• ระบุเฟรมเป้าหมายในแท็ก anchor
<a href = “page1.html”
target = “ชือ่ เฟรมเป้าหมาย”> </a>
• กำาหนดbase (default) target ให้กบั ทุก Link ทีไ่ ม่ได้ระบุชอ่ื target ด้วยคำา
สัง่
<base target = “ชือ่ เฟรมเป้าหมาย”>
การเชือ่ มโยงให้สมั พันธ์กนั ในเฟรม(2)
• ถ้าไม่มชี อ่ื เฟรมในวินโดว์ทเ่ี ปิ ดอยู่ browser จะเปิ ดวินโดว์ใหม่ให้โดยถือว่าเป็ น
วินโดว์ลกู
• ชือ่ เฉพาะแสดงความสัมพันธ์ระหว่างเอกสารระหว่างเอกสารปจั จุบนั กับเอกสาร
อื่น
_blank โหลด link นี้ไปทีห่ น้าจอทีบ่ ราวเซอร์เปิดเป็ นหน้าต่างใหม่
_self โหลด link นี้ทบั เฟรมทีก่ าำ ลังถูกใช้งานอยู่
_parent โหลด link นี้ทบั พืน้ ทีข่ องทุกเฟรมทีถ่ กู กำาหนดภายใต้แท็ก<frameset>
เดียวกันกับเฟรม ทีก่ าำ ลังถูกใช้งานอยู่
• _top โหลด link นี้ไปยังพืน้ ทีท่ งั ้ หมดของหน้าจอบราวเซอร์ปจั จุบนั
•
•
•
การเชือ่ มโยงให้สมั พันธ์กนั ในเฟรม(3)
• ตัวอย่าง
<a href = “mypage.html”
target= “_parent”> </a>
ตัวอย่าง
<html>
<head>
<title> Using nested frame demo</title>
</head>
<frameset cols=“30%,*”>
<frame name=“frame1” src=“toc.html” />
<frame name=“main” src=“first.html” />
</frameset>
</html>
ตัวอย่าง แฟ้ม toc.html
<html>
<head> <title> table of content</title> </head>
<body>
<b>เวบไซต์ทส่ี นใจ</b>Click mouse เพือ่ ไปยังเว็บไซต์ทต่ี อ้ งการ<br />
<a href=“http://www.google.com” target=“main”>google</a><br />
<a href=“http://www.sci.buu.ac.th” target=“main”>Science
BUU</a><br />
<a href=“http://www.compsci.buu.ac.th” target=“main”>Computer
Science</a>
<br /> </body>
</html>
ตัวอย่าง แฟ้ม first.html
<html>
<head>
<title> first file content</title>
</head>
<body>
<h1>หน้าแรก</h1>
<h2>ภาควิชาวิทยาการคอมพิวเตอร์</h2>
<h2>คณะวิทยาศาสตร์</h2>
<h3>มหาวิทยาลัยบูรพา</h3>
</body>
</html>