การสร้างเฟรม(Frame) ด้วยภาษา HTML

Slides:



Advertisements
งานนำเสนอที่คล้ายกัน
ระบบจัดการคลังข้อสอบส่วนกลาง
Advertisements

การซ้อนทับกัน และคลื่นนิ่ง
E-Service รศ. ดร. อนงค์นาฏ ศรีวิหค สำนักบริการคอมพิวเตอร์ มก.
FORM อ.กันทิมา อ่อนละออ
จำนวนเต็ม จำนวนเต็ม  ประกอบด้วย                   1. จำนวนเต็มบวก    ได้แก่  1 , 2 , 3 , 4, 5 , ....                   2.  จำนวนเต็มลบ      ได้แก่  -1.
Location object Form object
การสืบค้นข้อมูลจาก Web OPAC
บทที่ 3 พื้นฐานการเขียนโปรแกรม Visual Basic
การสร้างแบบฟอร์ม <form>
การพัฒนาการใช้งานในระบบเว็บ
HTML (คืออะไร) ภาษา HTML (HyperText Markup Language) เป็นภาษาที่ใช้คำสั่งที่เรียกว่า Tag มีทั้งเปิดและปิด เพื่อกำหนดบริเวณที่มีผลของคำสั่ง คำสั่งภาษา HTML.
PHP LANGUAGE.
ทส215 การเขียนโปรแกรมบนเว็บ 1
ภาษา HTML เบื้องต้น เช่น Internet Explorer และ Netscape Navigator
ปฏิบัติการที่ 3 : การสร้างโฮมเพจอย่างง่าย
การส่งค่าและการเก็บค่า (ต่อ... )
HTTP Client-Server.
การสืบค้นข้อมูลบนระบบเครือข่าย อินเทอร์เน็ต
World Wide Web WWW.
ตัวอย่างขั้นตอนในการสืบค้นข้อมูล
กระบวนการพัฒนา เอกสารเว็บเพจ
– Web Programming and Web Database
– Web Programming and Web Database
การพัฒนาเว็บด้วยโปรแกรมสำเร็จรูป
การเขียนโปรแกรมเชิงวัตถุ ด้วยภาษาจาวา
โปรแกรม Microsoft Access
PHP with Form ฟอร์ม คือหน้าจอที่ใช้เป็นสื่อกลางในการติดต่อระหว่างผู้ใช้เว็บไซต์ กับ เจ้าของเว็บไซต์ โดยผู้ใช้สามารถกรอกข้อมูลผ่านฟอร์มส่งไปยังเซอร์เวอร์
การสืบค้นข้อมูลจาก Web OPAC
Electronic Commerce เว็บฟอร์ม (Web Form).
HTML.
Install Driver Token Key
การสร้างช่องรับข้อมูล
รายงาน เรื่อง -ส่วนประกอบที่สำคัญของ microsoft excel -การพิมพ์ข้อมูลและการสร้างสูตรเบื้องต้น จัดทำโดย.
Charter 12 1 Chapter 12 อินเทอร์เน็ต Internet.
ณัฏฐวุฒิ เอี่ยมอินทร์
HTML, PHP.
เทคนิคการสืบค้น Google
การนำเสนองานบนอินเตอร์เน็ต
Extra_08_Test_Modular_Calculator
วิชาคอมพิวเตอร์กราฟิก
บทที่ 3 การทำงานกับฟอร์ม (Form)
โปรแกรม Microsoft Access
บทที่ 3 การทำงานกับฟอร์ม (Form)
PHP for Web Programming
ฟังก์ชัน.
Web Technology & Basic Web Development
CHAPTER 12 FORM.
13 October 1. Information and Communication Technology Lab 8 Web Browser and Seach Engine โดย ผู้ช่วยศาสตราจารย์วิชัย.
บทที่ 3 การสร้าง Appication แบบ Windows Form
E-Sarabun.
HTML 1. รูปแบบพื้นฐานของ เอชทีเอ็มแอล
การลงข้อมูลแผนการสอน
รหัสวิชา บทที่ 4 การจัดรูปแบบเอกสาร.
การเขียนเว็บเพ็จด้วยโปรแกรม
1 ซอฟท์แวร์ที่ น่าสนใจ จัดทำโดย นางสาวรัชดา ณรงค์ ns B06.
บทที่ 9 การใช้งานฟอร์มและคอนโทรลต่าง ๆ
Web browser.
การสร้างฟอร์ม(Form) ด้วยภาษา HTML
จดหมายอิเล็กทรอนิกส์ ( )
Introduction to HTML, PHP – Special Problem (Database)
เอกสารประกอบการบรรยาย เรื่อง การเขียน Home page ด้วย HTML (2) ตอน... การใช้ FORM โดย ผู้ช่วยศาสตราจารย์วิชัย บุญเจือ
บทที่ 2 การเข้าสู่โปรแกรม Microsoft Office Word 2003
อาจารย์ชนิดา เรืองศิริวัฒนกุล หลักสูตรสาขาวิชาเทคโนโลยีสารสนเทศ
ฐานข้อมูลเอกสารฉบับเต็ม ThaiLIS Digital Collection (TDC)
โครงสร้างข้อมูลแบบ สแตก (stack)
การสร้าง ฟอร์มรับข้อมูล ง การเขียนเว็บไซต์ เบื้องต้น ศูนย์คอมพิวเตอร์ โรงเรียน ปลวกแดงพิทยาคม.
Mr. Winai Purikasem. Introduction  Hypertext model  Use of hypertext in World Wide Web (WWW)  WWW client-server model  Use of TCP/IP protocols in.
Form.
ใบสำเนางานนำเสนอ:

การสร้างเฟรม(Frame) ด้วยภาษา HTML

Computer and Internet (310101) คำสั่งกำหนดเฟรม ใช้ Tag <FRAMSET>…</FRAMESET> กำหนดให้ Browser แสดงผลแบบเฟรม กำหนดขนาดของเฟรม ใช้ attributes 2 ตัวคือ ROWS และ COLS ROWS เป็น attribute แบ่งเฟรมตามแนวนอนตามค่า ที่กำหนด ROWS = “lists” COLS เป็น attribute แบ่งเฟรมตามแนวตั้งตามค่า ที่กำหนด COLS = “lists” Lists เป็นชุดค่าตัวเลขที่ใช้กำหนดขนาดให้กับเฟรมตามแนวนอนหรือแนวตั้ง ถ้ามีหลายค่าจะคั่นด้วยเครื่องหมายจุลภาค Computer and Internet (310101)

Computer and Internet (310101) การแบ่งจอภาพ เป็นการแบ่งจอภาพเป็นส่วนๆ แต่ละส่วนมีข้อมูลและการทำงานที่เป็นอิสระจากกัน การสร้างเฟรม มีคำสั่งที่ใช้ร่วมกันอยู่ 3 คำสั่ง ดังนี้ <FRAMESET> …</FRAMESET> กำหนดการแสดงผลแบบเฟรม <FRAME> กำหนดการแสดงเฟรมแต่ละเฟรม <NOFRAME>…</NOFRAME> เป็นแท็กที่จะแสดงก็ต่อเมื่อ โปรแกรม Browser ไม่สนับสนุนการแสดงผลแบบเฟรม สามารถสร้างเฟรมซ้อนภายใน <FRAMESET> ได้ หรืออาจจะมี แท็ก <FRAME> หรือ <NOFRAME> อยู่ภายในได้ ในเอกสาร HTML ที่มีการใช้แท็ก <FRAMESET> แล้วจะไม่มี แท็ก <BODY> Computer and Internet (310101)

Computer and Internet (310101) ตัวอย่าง <HTML> <HEAD> <TITLE> This is frame Demo </TITLE> </HEAD> <FRAMESET> </FRAMESET> </HTML> Computer and Internet (310101)

Computer and Internet (310101) การกำหนดขนาดของเฟรม การกำหนดค่าของ lists มีวิธีกำหนด 3 แบบคือ 1. กำหนดค่าด้วย pixel ต้องดูความละเอียดของจอภาพที่ใช้ (640 x 480 หรือ 1024 x 768 ) <FRAMESET ROWS = “200, 140, 100”> <FRAMESET COLS = “200, 200,150 “> 2. กำหนดค่าด้วยหน่วยเปอร์เซ็นต์ <FRAMESET ROWS = “25%, 25%, 50%”> <FRAMESET COLS = “60%,40%”> Computer and Internet (310101)

การกำหนดขนาดของเฟรม(2) 3. กำหนดโดยใช้ความสัมพันธ์ของแต่ละเฟรม ใช้เครื่องหมาย * เป็นตัวกำหนด <FRAMESET ROWS = “40%, *”> แบ่งเป็น 2 ส่วนตามแนวนอน ส่วนบนสูง 40% ของเนื้อที่ทั้งหมด และส่วนล่างใข้เนื้อที่ ๆเหลือทั้งหมด <FRAMESET COLS = “60,80, *”> แบ่งจอภาพเป็น 3 ส่วน ส่วนซ้ายกว้าง 60 pixel ส่วนกลางกว้าง 80 pixel และส่วนขวาใช้เนื้อที่ที่เหลือทั้งหมด Computer and Internet (310101)

Computer and Internet (310101) Tag <FRAME> เป็นแท็กที่ใส่ระหว่างแท็ก <FRAMESET>…</FRAMESET> ใช้สำหรับใส่ชื่อเอกสารหรือรูปภาพไว้ในส่วนของจอภาพที่แบ่งไว้ด้วยแท็ก<FRAMESET> มีรูปแบบดังนี้ <FRAME SRC = “URL” NAME = “windows_name” MARGINWIDTH=value1 MARGINHEIGHT = value2 SCROLLING=choice NORESIZE FRAMEBORSER=choice2 FRAMESPACING=value2> Computer and Internet (310101)

Attribute ของ <FRAME> SRC= “url” บอกถึงไฟล์รูปภาพ หรือไฟล์ HTMLที่ต้องการแสดงในเฟรม NAME = “windows_name” ตั้งชื่อให้กับเฟรม เพื่อนำไฟล์รูปภาพหรือไฟล์เอกสารอื่นๆ มาแสดง MARGINWIDTH กำหนดช่องว่างทางซ้ายและขวาระหว่างข้อมูลและเฟรม MARGINHEIGHT กำหนดช่องว่างด้านบนและล่างระหว่างข้อมูลและเฟรม SCROLLING =“YES/NO/AUTO” ใช้กำหนดให้เฟรมมี Scrollbar หรือไม่มี (auto browser เป็นตัวกำหนด) FRAMEBORDER กำหนดให้ browser สร้างกรอบให้กับเฟรม FRAMEBORDER = 0 ซ่อนเส้นกรอบเฟรม ปกติค่า default ของกรอบเฟรมเป็น 5 FRAMESPACING กำหนดระยะห่างระหว่างเฟรม NORESIZE กำหนดไม่ให้ผู้ใช้เปลี่ยนแปลงขนาดเฟรมในขณะที่ใช้งาน Computer and Internet (310101)

Computer and Internet (310101) ตัวอย่างการแบ่งเฟรม <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> Computer and Internet (310101)

ตัวอย่างการแบ่งเฟรมให้มีขนาดแน่นอน <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 > SRC=“web3.html” NORESIZE > </FRAMESET> </HTML> Computer and Internet (310101)

การกำหนดแถบเลื่อนในเฟรม โดยปกติเฟรมที่มีพื้นที่ไม่เพียงพอสำหรับแสดงเนื้อหา จะมีแถบเลื่อนเพื่อให้ผู้ใช้เลื่อนดูข้อมูลในส่วนที่เหลือได้ ถ้าไม่ต้องการให้แสดงแถบเลื่อนจะต้องกำหนดแอตทริบิวต์ SCROLLING=“NO” ใน <FRAME> Computer and Internet (310101)

ตัวอย่างการใช้แถบเลื่อนในเฟรม <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> Computer and Internet (310101)

Computer and Internet (310101) การสร้างเฟรมซ้อน แต่ละคอลัมน์สามารถแบ่งเป็นแถวและแต่ละแถวสามารถแบ่งเป็นคอลัมน์ได้เช่นกัน ตัวอย่าง แบ่งจอภาพเป็น 2 เฟรมตามแนวดิ่งขนาด 40% และ60% โดย เฟรมแรกแบ่งตามแนวนอนเป็น 2 เฟรม โดยเฟรมแรกสูง 30% และส่วนที่เหลือสูง 70% <FRAMESET COLS = “40%, *”> ... <FRAMESET ROWS = “30%, 70%”> </FRAMESET> Computer and Internet (310101)

ตัวอย่างการสร้างเฟรมซ้อน 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> </FRAMESET> </HTML> Computer and Internet (310101)

ตัวอย่างการสร้างเฟรมซ้อน 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> Computer and Internet (310101)

tag <NOFRAME>…</NOFRAME> ใช้กำหนดส่วนของเอกสารที่จะให้แสดงโดย browser ที่ไม่สามารถแสดงเฟรมได้ มีรูปแบบดังนี้ ถ้ามีการใช้เฟรมควรใส่ส่วน <NOFRAME> ไว้เสมอเพื่อให้ผู้ใช้ที่ใช้ browser ที่ไม่สามารถแสดงเฟรมได้ ใช้ได้ตามปกติเหมือนไม่มีเฟรม <NOFRAME>…</NOFRAME> Computer and Internet (310101)

การเชื่อมโยงให้สัมพันธ์กันในเฟรม Targeting Frame เป็นการส่งเอกสารไปแสดงในเฟรมอื่น โดยเฟรมเป้าหมายต้องมีการตั้งชื่อสำหรับอ้างอิง ระบุเฟรมเป้าหมายในแท็ก anchor กำหนดbase (default) target ให้กับทุก Link ที่ไม่ได้ระบุชื่อ target ด้วยคำสั่ง <A HREF = “page1.html” TARGET = “ชื่อเฟรมเป้าหมาย”> <BASE TARGET = “ชื่อเฟรมเป้าหมาย”> Computer and Internet (310101)

การเชื่อมโยงให้สัมพันธ์กันในเฟรม(2) ถ้าไม่มีชื่อเฟรมในวินโดว์ที่เปิดอยู่ browser จะเปิดวินโดว์ใหม่ให้โดยถือว่าเป็นวินโดว์ลูก ชื่อเฉพาะแสดงความสัมพันธ์ระหว่างเอกสารระหว่างเอกสารปัจจุบันกับเอกสารอื่น _blank โหลด link นี้ไปที่หน้าจอที่บราวเซอร์เปิดหน้าต่างใหม่ _self โหลด link นี้ทับเฟรมที่กำลังถูกใช้งานอยู่ _parent โหลด link นี้ทับพื้นที่ของทุกเฟรมที่ถูกกำหนด ภายใต้แท็ก<FRAMESET> เดียวกันกับเฟรม ที่กำลังถูกใช้งานอยู่ _top โหลด link นี้ไปยังพื้นที่ทั้งหมดของหน้าจอบราวเซอร์ ปัจจุบัน ตัวอย่าง <A HREF = “mypage.html” TARGET= “_parent”> Computer and Internet (310101)

Computer and Internet (310101) ตัวอย่าง <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> Computer and Internet (310101)

Computer and Internet (310101) ตัวอย่าง แฟ้ม toc.html <HTML> <HEAD> <TITLE> Table of Content</TITLE> </HEAD> <BODY> <B>เวบไซต์ที่สนใจ</B>Click mouse เพื่อไปยังเวบไซต์ที่ต้องการ<BR> <A HREF=“http://www.yahoo.com” TARGET=“main”>Yahoo Search</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> Computer and Internet (310101)

ตัวอย่าง แฟ้ม first.html <HEAD> <TITLE> first file Content</TITLE> </HEAD> <BODY> <H1>หน้าจอแรกนะจ๊ะ</H1> <H2>ภาควิชาวิทยาการคอมพิวเตอร์</H2> <H2>คณะวิทยาศาสตร์</H2> <H3>มหาวิทยาลัยบูรพา</H3> </BODY> </HTML> Computer and Internet (310101)

HELPING SEARCH ENGINES FIND YOUR WEBSITE สามารกำหนดแท็ก <META> เพื่อใช้จัดทำ index เอาไว้สำหรับให้ Search Engine ต่างๆเช่น Infoseek, AltaVista ค้นหาข้อมูลจาก index ได้ แท็กที่ใช้สร้างคือ Meta Tag มีรูปแบบดังนี้ ต้องเขียนแท็ก <META>ไว้ภายในแท็ก <HEAD>…</HEAD> เสมอ <META NAME=“description” CONTENT=“ คำบรรยายทีแสดงว่าโฮมเพจเราเป็นอย่างไร?”> <META NAME=“Key word” CONTENT=“key1, key2, key3,…”> Computer and Internet (310101)

HELPING SEARCH ENGINES FIND YOUR WEBSITE (2) DESCRIPTION เป็นส่วนที่ใช้สรุปย่อถึงการอธิบายเว็บเพจ KEYWORD เป็นรายการของคีย์เวิร์ดที่เราคาดว่าผู้ที่เข้ามาเยี่ยมชมจะค้นหาเว็บไซต์ ตัวอย่าง <META NAME=“description” CONTENT=“ How to promote website.”> <META NAME=“Key word” CONTENT=“announcing website, web submittion, Burapha University, Eastern Seaboard”> Computer and Internet (310101)

HELPING SEARCH ENGINES FIND YOUR WEBSITE (3) ใน Infoseek จะใช้ชื่อ title ของเว็บเพจเป็นการค้นหาอันดับแรก ใน yahoo จะใช้ title ของเว็บเพจพร้อมทั้ง description ในการค้นหา ใน Excite จะค้นหาจากแท็ก Comment และเนื้อหาของเว็บเพจ สรุป ต้องจัดทำคีย์เวิร์ดไว้ในแท็ก TITLE, META และ COMMENT Computer and Internet (310101)

การสร้างฟอร์ม(Form) ด้วยภาษา HTML

การสร้างแบบฟอร์ม (Form) HTML Form เป็นลักษณะของระบบการสอบถามข้อมูลแบบหนึ่งที่ใช้ในระบบเครือข่ายอินเทอร์เน็ต รูปแบบ <FORM METHOD=“methodname” ACTION=“URLsname”> ข้อความและฟิลด์ของฟอร์ม …… </FORM> Computer and Internet (310101)

Computer and Internet (310101) การสร้างแบบฟอร์ม(2) ฟอร์ม (Form) ใช้ในการรับข้อมูลจากผู้ใช้ และทำงานร่วมกับโปรแกรมย่อยๆ หรือ Script ที่เรียกว่า Common Gateway Interface(CGI) CGI เป็นโปรแกรมตัวกลางที่ทำหน้าที่เชื่อมโยงข้อมูลระหว่างเครื่องคอมพิวเตอร์ของผู้ใช้กับเครื่อง Server โดย Server รวบรวมข้อมูลที่ผู้ใช้ป้อนมา เพื่อประมวลผล เมื่อเสร็จแล้วส่งผลลัพธ์กลับไปยังผู้ใช้ Computer and Internet (310101)

Computer and Internet (310101) การสร้างแบบฟอร์ม(3) ตัวเลือกที่ใช้ในร่วมกับแท็ก Form METHOD = ”GET” หรือ ”POST” ใช้บอก Browser ว่าจะส่งข้อมูลไปที่ Server ด้วยวิธีใด GET เป็นการนำข้อมูลทั้งหมดในฟอร์มไปต่อท้ายสุดแล้วประมวลผลครั้งเดียว POST จะนำข้อมูลส่งไปที่ server แยกกันไปเป็นแต่ละ transaction ACTION = “URLsname” ใช้ระบุURL ของ CGI script ที่เรียกมาใช้งาน ENCRYPT ใช้สำหรับเข้ารหัส โดยระบุเป็น MINE Type Computer and Internet (310101)

Computer and Internet (310101) คำสั่ง INPUT เป็นคำสั่งรับข้อมูลในฟอร์มโดยการสร้างปุ่ม หรือตัวเช็ค หรือ ช่องกรอกข้อความ ตาม attribute ของ TYPE รูปแบบ TYPE ใช้บอกชนิดของข้อมูลนำเข้าประกอบด้วย TEXT, PASSWORD, CHECKBOX, RADIO, SUBMIT, RESET ตัวเลือกเพิ่มเติมมีดังนี้ ALIGN, CHECKED, ROWS, COLS, SIZE, MAXLENGTH, SRC, VALUE <INPUT TYPE=ชนิดการรับข้อมูล NAME=“ชื่อตัวแปร“ [ตัวเลือกเพิ่มเติม]> Computer and Internet (310101)

คำสั่ง INPUT กับแบบข้อมูลชนิด TEXT เป็นแบบข้อมูลที่ผู้ใช้ป้อนข้อความลงในช่องรับข้อมูลในแบบฟอร์มเพียงบรรทัดเดียว มีตัวเลือกที่ใช้ร่วมกับคำสั่งคือ SIZE กำหนดขนาดของช่องรับข้อมูล NAME กำหนดชื่อข้อมูล (ตัวแปร) ที่ใช้เก็บข้อมูล VALUE บอกค่าที่กำหนดไว้แล้ว ถ้าไม่ป้อนค่าเข้ามาจะถือว่าเป็น default ตัวอย่าง ชื่อ: <INPUT TYPE=TEXT NAME = “fNAME” SIZE = 40> Computer and Internet (310101)

คำสั่ง INPUT กับข้อมูลแบบ PASSWORD Password เป็นรูปแบบรับข้อมูลคล้าย Text แต่จะแสดงเป็นเครื่องหมาย “*” ขณะพิมพ์ข้อมูล รูปแบบ ตัวอย่าง <INPUT TYPE=PASSWORD SIZE=8 NAME=“password”> Password : <INPUT TYPE= PASSWORD SIZE = 8 NAME = “mycode”> Computer and Internet (310101)

ตัวอย่างการใช้ PASSWORD <FORM> Enter text:<INPUT TYPE=TEXT NAME=“NAME” SIZE=25> <BR> Enter password : <INPUT TYPE=PASSWORD NAME=“PASSWORD” SIZE=8 MAXLENGTH=8> </FORM> แสดงผลดังนี้ Enter text: Enter password : uraiwan ******** Computer and Internet (310101)

คำสั่ง INPUT กับข้อมูลแบบ RADIO RADIO BUTTON มีลักษณะ เป็นปุ่มกลม เป็นรูปแบบการรับข้อมูลที่กำหนดให้ผู้ใช้เลือกตัวเลือกเพียงอย่างเดียว เมื่อเลือกจะเป็นจุดดำ ตัวเลือก CHECKED เป็นการกำหนดให้รายการนั้นเป็นค่าปริยาย รูปแบบ <INPUT TYPE= Radio NAME =“rName” VALUE= “rValue> ข้อความ Computer and Internet (310101)

ตัวอย่างการใช้ radio button <FORM> Please choose one of the following :<p> <INPUT TYPE = RADIO NAME = “sex” VALUE=“Male”> Male <BR> VALUE=“Female”> Female <BR> </FORM> Computer and Internet (310101)

คำสั่ง INPUT กับแบบข้อมูลชนิด CHECKBOX เป็นรูปแบบการเลือกที่ผู้ใช้เลือกตัวเลือกได้มากกว่า 1 รายการ VALUE เป็น attribute ที่กำหนดค่าให้แต่ละตัวเลือกที่ผู้ใช้เลือก ชื่อตัวแปรที่ใช้เก็บค่าจะต้องแตกต่างกัน ตัวเลือก CHECKED เป็นการกำหนดให้รายการนั้นเป็นค่าปริยาย รูปแบบ <INPUT TYPE= CHECKBOX NAME =“cName” VALUE= “cValue”> Computer and Internet (310101)

ตัวอย่างการใช้ 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 = “DURAIN”> Durian <BR> </FORM> Computer and Internet (310101)

การสร้างปุ่มส่งข้อมูลในแบบฟอร์ม Submit เป็นปุ่มใช้สำหรับส่งข้อมูลที่กรอกหรือเลือกในแบบฟอร์มไปยัง Server รูปแบบ เมื่อ message คือข้อความที่ปรากฏบนปุ่มเลือก <INPUT TYPE = “SUBMIT” Name = “message”> Computer and Internet (310101)

การสร้างปุ่มยกเลิกข้อมูลในแบบฟอร์ม Reset เป็นปุ่มที่ใช้กดสำหรับยกเลิกข้อมูลที่ป้อนเข้าไปทั้งหมดในแบบฟอร์ม เพื่อให้กับไปใช้ค่าเริ่มต้นใหม่ รูปแบบ เมื่อ message คือข้อความที่ปรากฏบนปุ่ม RESET <INPUT TYPE = “RESET” Name = “message”> Computer and Internet (310101)

การใช้ปุ่ม submit และ reset <FORM> <INPUT TYPE = SUBMIT VALUE =“Sent Form”> <INPUT TYPE = RESET VALUE =“Cancel Form”> </FORM> แสดงผลดังนี้ Sent Form Cancel Form Computer and Internet (310101)

Computer and Internet (310101) TEXTAREA เป็นการรับข้อความหลายบรรทัด (Multiline text input)บนแบบฟอร์มในบริเวณที่กำหนดไว้ รูปแบบ <TEXTAREA NAME = “ชื่อตัวแปร“ ROWS = จำนวนบรรทัด COLS = จำนวนคอลัมน์> ข้อความ </TEXTAREA> ตัวแปรแทนชื่อพื้นที่ที่เรากำหนด Computer and Internet (310101)

Computer and Internet (310101) ตัวอย่าง <FORM> Please enter any comments here <p> <TEXTAREA NAME = “comments” ROWS=8 COLS=60> This is comments </TEXTAREA> </FORM> Computer and Internet (310101)

Computer and Internet (310101) การสร้าง SELECT BOX SELECT แสดงตัวเลือกทั้งหมดให้ผู้ใช้เลือกโดยอาจแสดงในรูปของ Drop-down list หรือแสดงตัวเลือกตามปกติ รูปแบบ <SELECT NAME = “ชื่อตัวแปร“> <OPTION [VALUE = “ข้อมูล“ ] >ข้อความ … </SELECT> Computer and Internet (310101)

Computer and Internet (310101) ตัวอย่าง <FORM> <SELECT NAME = “sport” > <OPTION VALUE = “tennis”> Tennis <OPTION VALUE = “basketball”> Basketball <OPTION VALUE = “football”>Football <OPTION VALUE = “volleyball”>Volleyball </SELECT> </FORM> Computer and Internet (310101)

การใช้ MULTIPLE ใน SELECTION BOX <FORM> <SELECT NAME = “sport” MULTIPLE > <OPTION VALUE = “tennis”> Tennis <OPTION VALUE = “basketball”>Basketball <OPTION VALUE = “football”>Football <OPTION VALUE = “volleyball”>Volleyball </SELECT> </FORM> Computer and Internet (310101)

การใช้ 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> Computer and Internet (310101)

การส่งข้อมูลในแบบฟอร์มด้วย Mailto เราสามารถส่งข้อมูลจากแบบฟอร์มที่เราสร้างขึ้น โดยใช้ไปรษณีย์อีเลก ทรอนิกส์ได้ โดยใช้คำสั่ง mailto ใน ACTIONของแบบฟอร์ม เมื่อผู้ใช้กดปุ่ม SUBMIT ข้อมูลที่กรอกในแบบฟอร์มจะถูกส่งเป็น ไปรษณีย์อีเลกทรอนิกส์ไปยังผู้รับตามที่อยู่ที่กำหนดทันที รูปแบบ <FORM METHOD=“POST” ACTION=“mailto:user@hostname”> : </FORM> Computer and Internet (310101)

Computer and Internet (310101) เอกสารอ้างอิง http://www.w3.org/ http://www.w3shcools.com/ Bryan Pfaffenberger. (2002), Computers in your future 2003., New Jersy , Prentice Hall. H.M Deitel, P.J. Deitel, T.R. Nieto, (2002), Internet & World Wide Web How to Program, Prentice Hall. Computer and Internet (310101)