ดาวน์โหลดงานนำเสนอ
งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ
1
HYPER TEXT MARKUP LANGUAGE
HTML HYPER TEXT MARKUP LANGUAGE
2
FRAME
3
การสร้างเฟรม เฟรม (Frame) คือการแบ่งพื้นที่ของหน้าจอของบราวเซอร์ให้สามารถแสดงไฟล์ได้หลายไฟล์ในหนึ่งจอภาพ โดยมีการแบ่งจอภาพออกเป็นส่วนๆ ทำให้พื้นที่ทั้งหมดของจอภาพถูกใช้งานอย่างเต็มที่ประกอบด้วยไฟล์ที่เกี่ยวข้อง 2 ไฟล์ คือ ไฟล์ควบคุม และไฟล์ที่นำข้อมูลมาแสดงในไฟล์ควบคุม
4
1.ไฟล์ควบคุม <HTML><FRAMESET> </FRAMESET></HTML> โดยที่ <FRAMESET> </FRAMESET> จะทำหน้าที่แทน <BODY> </BODY> เพื่อเป็นตัวกำหนดการแสดงผลในบราวเซอร์ การแบ่งหน้าจอสามารถแบ่งได้เป็น 2 แนวคือแนวนอน (Rows) และแนวตั้ง (Cols)
5
1.1) การแบ่งพื้นที่ของจอภาพตามแนวนอน
<FRAMESET ROWS="พิกเซล/เปอร์เซ็นต์/*"> <FRAME SRC="ชื่อไฟล์ที่ต้องการให้แสดงผลในเฟรม หรือ URL"> </FRAMESET>
6
ตัวอย่างการแบ่งพื้นที่ของจอภาพตามแนวนอน
<FRAMESET ROWS="20%,30%,*"> <FRAME SRC=""></FRAME> <FRAME SRC=""></FRAME> <FRAME SRC=""></FRAME> </FRAMESET>
7
2 การแสดงผลการแบ่งพื้นที่ของจอภาพตามแนวนอน
8
1.2) การแบ่งพื้นที่ของจอภาพตามแนวตั้ง
<FRAMESET COLS="พิกเซล/เปอร์เซ็นต์/*"> <FRAME SRC="ชื่อไฟล์ที่ต้องการให้แสดงผลในเฟรม หรือ URL"> <FRAME SRC="ชื่อไฟล์ที่ต้องการให้แสดงผลในเฟรม หรือ URL"> </FRAMESET>
9
การแบ่งพื้นที่ของจอภาพตามแนวตั้ง
<FRAMESET COLS="20%,30%,*"> <FRAME SRC=""></FRAME> </FRAMESET>
10
การแสดงผลการแบ่งพื้นที่ของจอภาพตามแนวตั้ง
11
ตัวอย่างการแบ่งพื้นที่ของจอภาพแบบผสม
<FRAMESET COLS="20%,*"> <FRAME SRC=""></FRAME> <FRAMESET ROWS="100,* "> </FRAMESET>
12
การแสดงผลการแบ่งพื้นที่หน้าจอแบบผสม
13
2. ไฟล์แสดง เป็นไฟล์ที่นำมาแสดงในเฟรมต่างๆ จะถูกอ้างถึงใน Tag <FRAME SRC=""> โดยที่ SRC="ชื่อไฟล์หรือที่อยู่ของรูปภาพ"
14
การกำหนด Attribute ให้กับ Tag Frameset
ค่าที่กำหนดให้ คำอธิบาย SRC ชื่อไฟล์ URL กำหนดไฟล์ที่แสดงใน Frame หรือกำหนดเป็น URL FRAMEBORDER 0 หรือ 1 กำหนดเส้นขอบให้กับเฟรม โดยที่ 0 คือไม่แสดงเส้นขอบของเฟรม หรือ 1 คือแสดงเส้นขอบของเฟรม NAME ชื่อเฟรม กำหนดชื่อของเฟรม เพื่ออ้างอิงในการแสดงผลจากเฟรมอื่น NORESIZE กำหนดว่าไม่ให้เฟรมเปลี่ยนแปลงขนาดได้ SCROLLING Yes/No/Auto การกำหนด Scrollbar ให้กับเฟรม โดยที่ Yes คือกำหนดให้มี Scrollbar, No คือ ไม่มี Scrollbar และ Auto คือกำหนดให้มี Scrollbar แบบอัตโนมัติ
15
การเชื่อมโยงระหว่างเฟรม
การเชื่อมโยงระหว่างเฟรม จะช่วยทำให้ผู้ใช้รู้สึกเหมือนยังอยู่หน้าเว็บเพจเดิม โดยเมื่อทำการแบ่งเฟรม ให้ระบุ NAME="ชื่อของเฟรม" ใน Tag <FRAME> เพื่อกำหนดชื่อเฟรมให้เฟรมอื่นอ้างอิงในการแสดงผล ได้ และในการเชื่อมโยง ให้กำหนดการเชื่อมโยงโดย ระบุ Attribute TARGET ของการเชื่อมโยงไปยังเฟรมที่ต้องการให้แสดงผล คือ TARGET="ชื่อของเฟรมที่ต้องการแสดงผล" โดยหากบราวเซอร์ไม่พบเฟรมที่กล่าวถึงจะเชื่อมโยงไปยังวินโดว์หรือแท็บใหม่
16
ไฟล์ควบคุมการแบ่งเฟรม
<HTML><HEAD><TITLE>เมนูใบงานที่ 1</TITLE><META HTTP-EQUIV="CONTENT-TYPE" CONTENT="TEXT/HTML; CHARSET=UTF-8"></HEAD> <FRAMESET ROWS="10%,*"> <FRAME SRC="MENU.HTML" NAME="MENU"> <FRAME SRC="PAGE1.HTML" NAME="MAIN"> </FRAMESET></HTML>
17
MENU.HTML <HTML><HEAD><TITLE>MENU</TITLE><META HTTP-EQUIV="CONTENT-TYPE" CONTENT="TEXT/HTML; CHARSET=UTF-8"></HEAD> <BODY> <H2> <A HREF="PAGE1.HTML" TARGET="MAIN">ประวัติส่วนตัว</A> <A HREF="PAGE2.HTML" TARGET="MAIN">สูตรหน้าใส</A> </H2></BODY></HTML>
18
PAGE1.HTML <HTML><HEAD><TITLE>การสร้างเว็บเพจด้วย HTML</TITLE> <META HTTP-EQUIV="CONTENT-TYPE" CONTENT="TEXT/HTML; CHARSET=TIS-620"> </HEAD><BODY BGCOLOR="GhostWhite"> <UL TYPE="CIRCLE">ข้าพเจ้าชื่อ เว็บเพจ นามสกุล สมมุติ <LI>เรียนสาขาคอมพิวเตอร์</LI> <LI TYPE="SQUARE">มหาวิทยาลัยราชภัฏเชียงราย</LI> </UL></BODY></HTML>
19
PAGE2.HTML <HTML><HEAD><TITLE>การสร้างเว็บเพจด้วย HTML</TITLE> <META HTTP-EQUIV="CONTENT-TYPE" CONTENT="TEXT/HTML; CHARSET=TIS-620"> </HEAD><BODY BGCOLOR="GhostWhite"> <UL TYPE="CIRCLE">สูตรหน้าใสไร้สิว <LI>นำผ้าที่ชุบน้ำอุ่นโป๊ะที่บริเวณใบหน้า</LI> <LI TYPE="SQUARE">จากนั้นก็ใช้ "โยเกิร์ต"พอกที่หน้า (บางๆ)</LI> </UL></BODY></HTML>
20
การแสดงผลไฟล์ควบคุม
21
IFRAME
22
การสร้างไอเฟรม เนื่องจากการแบ่งหน้าจอโดยการสร้างเฟรม มีข้อจำกัดตรงที่จะต้องระบุ Tag Frame แทน Tag Body จึงทำให้ในไฟล์นั้นไม่สามารถแสดงข้อความใดๆได้ นอกจากการแบ่งพื้นที่หน้าจอออกเป็นส่วนๆ เท่านั้น แต่ถ้าหากต้องการแบ่งพื้นที่เพียงบางส่วนของจอภาพจะไม่สามารถกระทำได้ แต่ถ้าเปลี่ยนเป็นการสร้างไอเฟรมจะสามารถทำให้การแบ่งพื้นที่จอภาพเป็นไปตามที่ต้องการมากขึ้น เนื่องจากไอเฟรมไม่ต้องมีการสร้างไฟล์ควบคุม ก็สามารถนำข้อมูลจากไฟล์อื่น หรือเว็บเพจอื่นมาแสดงในตำแหน่งของจอภาพตามที่ต้องการได้
23
IFRAME รูปแบบการใช้งาน
<IFRAME SRC="ชื่อไฟล์ที่ต้องการให้แสดงผลในเฟรม หรือ URL " NAME="=ชื่อไอเฟรม" WIDTH="ตัวเลขหรือ%" HEIGHT="ตัวเลขหรือ%"></IFRAME>
24
การกำหนด Attribute ให้กับ Tag iframe
ค่าที่กำหนดให้ คำอธิบาย ALIGN LEFT/RIGHT TOP/MIDDLE BOTTOM กำหนดตำแหน่งการจัดวางข้อความรอบๆ iframe โดยที่ LEFT=ซ้าย RIGHT=ขวา TOP=ส่วนบน MIDDLE=กึ่งกลางแนวนอนแนวตั้ง BOTTOM=ข้างล่าง WIDTH ตัวเลข % กำหนดความกว้างในการแสดง iframe สามารถกำหนดเป็นตัวเลขหน่วยเป็นพิกเซล หรือ เปอร์เซ็นต์ ตามความกว้างของบราวเซอร์ HEIGHT กำหนดความสูงในการแสดง iframe สามารถกำหนดเป็นตัวเลขหน่วยเป็นพิกเซล หรือ เปอร์เซ็นต์ ตามความสูงของบราวเซอร์
25
ตัวอย่างการใช้งานไอเฟรมเพื่อแบ่งพื้นที่จอภาพ
<HTML><HEAD><TITLE>การใช้ iframe</TITLE> <META HTTP-EQUIV="CONTENT-TYPE" CONTENT="TEXT/HTML; CHARSET=UTF-8"> </HEAD><BODY> <H2><A HREF="PAGE1.HTML" TARGET="MAIN">ประวัติส่วนตัว</A> <A HREF="PAGE2.HTML" TARGET="MAIN">สูตรหน้าใส</A></H2> <IFRAME SRC="PAGE1.HTML" NAME="MAIN" WIDTH="500" HEIGHT="200"></IFRAME> </BODY></HTML>
26
การแสดงผลการใช้งาน Tag iframe
27
การสร้างฟอร์มรับข้อมูล
28
การสร้างฟอร์มรับข้อมูล
เพื่อเป็นการสื่อสารระหว่างเว็บกับผู้ใช้ หรือเรียกว่า Common Gateway Interface (CGI) ทำหน้าที่ส่งข้อมูลที่ผู้ใช้ป้อน ไปยังเครื่องเซิร์ฟเวอร์ <FORM NAME="ชื่อฟอร์ม" METHOND="GET หรือ POST" ACTION="FILEหรือ URL"> </FORM>
29
การกำหนด Attribute ให้กับ Tag FORM
ค่าที่กำหนดให้ คำอธิบาย NAME ชื่อฟอร์ม กำหนดชื่อฟอร์ม ACTION ชื่อไฟล์/URL ระบุชื่อไฟล์ หรือ URL ที่ต้องการส่งข้อมูลไป METHOD GET POST ระบุวิธีการส่งข้อมูลไปยังเซิร์ฟเวอร์ GET จะส่งค่าผ่านทาง URLได้สูงสุดไม่เกิน 255 ตัวอักษร และ POST จะข้อมูลไปเป็นข้อความได้ไม่จำกัดตัวอักษร
30
การกำหนด NAME ให้กับเครื่องมือรับข้อมูล
การกำหนด Name หรือ ชื่อที่ใช้สำหรับการเรียกเครื่องมือนั้นๆ เพื่อที่นำไปใช้ในการอ้างอิงในขั้นตอนการเขียนโปรแกรม โดยระบุ Attribute Name ตัวอย่างเช่น <INPUT TYPE="TEXTBOX" NAME="NAME1" >
31
ประเภทของเครื่องมือที่ใช้สำหรับรับค่าในฟอร์ม
(1) <INPUT> เป็นคำสั่งที่ใช้สำหรับป้อนข้อมูลแบบต่างๆ (2) <TEXTAREA>...</TEXTAREA> เป็นกล่องสำหรับป้อนข้อมูลได้หลายบรรทัด (3) <SELECT>…</SELECT> เป็นกล่องคำสั่งผสมหรือกล่องรายการ
32
<INPUT> เป็นคำสั่งที่ใช้สำหรับป้อนข้อมูลแบบต่างๆ ประกอบด้วย
กล่องข้อความ (Text box) <INPUT TYPE="TEXT" NAME="NAME1" > กล่องรหัสผ่าน (Password) <INPUT TYPE="PASSWORD" NAME="NAME2" > กล่องกาเครื่องหมาย (Check box) <INPUT TYPE="CHECKBOX" NAME="NAME3" > กล่องตัวเลือก (Radio) <INPUT TYPE="RADIO" NAME="NAME4" > กล่องซ่อนข้อมูล (Hidden Data) <INPUT TYPE="HIDDEN" NAME="NAME5"> ปุ่มยืนยันการส่งข้อมูล (Submit Button) <INPUT TYPE="SUBMIT" NAME="NAME6"> กล่องยกเลิกการป้อนข้อมูล (Reset Button) <INPUT TYPE="RESET" NAME="NAME7"> กล่องรับตัวเลข (NUMBER) <INPUT TYPE=" NUMBER" NAME="NAME13"> กล่องป้อนที่อยู่อีเมล์ ( ) <INPUT TYPE=" " NAME="NAME9">
33
การสร้างกล่องข้อความ (Text Box)
<INPUT TYPE="TEXT" NAME="NAME1" >
34
การกำหนด Attribute ในการสร้างกล่องข้อความ
ค่าที่กำหนดให้ คำอธิบาย NAME ชื่อกล่องข้อความ กำหนดชื่อกล่องข้อความ TYPE TEXT กำหนดชนิดเครื่องมือเป็นกล่องข้อความ SIZE ตัวเลข กำหนดความกว้างของกล่องข้อความ VALUE ข้อความหรือตัวเลข ค่าเริ่มต้นที่แสดงในกล่องข้อความ MAXLENGTH จำนวนตัวอักษรสูงสุดที่ป้อนในกล่องข้อความ PLACEHOLDER ข้อความ แสดงข้อความแบบลายน้ำ READONLY กำหนดให้ไม่สามารถแก้ไขข้อมูลได้
35
ตัวอย่างการสร้างกล่องข้อความ
<FORM NAME="FORM1" METHOD="GET" > FIRST NAME<INPUT TYPE="TEXT" NAME="NAME1" SIZE="100" VALUE=" " MAXLENGTH="20" PLACEHOLDER="Enter FIRST NAME"> </FORM>
36
การสร้างกล่องรหัสผ่าน (Password)
<INPUT TYPE="PASSWORD" NAME="PASSWORD" >
37
การกำหนด Attribute ในการสร้างกล่องรหัสผ่าน
ค่าที่กำหนดให้ คำอธิบาย NAME ชื่อกล่องรหัสผ่าน กำหนดชื่อกล่องรหัสผ่าน TYPE PASSWORD กำหนดชนิดเครื่องมือเป็นกล่องรหัสผ่าน SIZE ตัวเลข กำหนดความกว้างของกล่องรหัสผ่าน VALUE ข้อความหรือตัวเลข ค่าเริ่มต้นที่แสดงในกล่องรหัสผ่าน MAXLENGTH จำนวนตัวอักษรสูงสุดที่ป้อนในกล่องรหัสผ่าน PLACEHOLDER ข้อความ แสดงข้อความแบบลายน้ำ
38
ตัวอย่างการสร้างกล่องรหัสผ่าน
<FORM NAME="FORM1" METHOD=="GET" > FIRST PASSWORD<INPUT TYPE="PASSWORD" NAME="PASSWORD" SIZE="20" VALUE="" MAXLENGTH="20" PLACEHOLDER="Enter PASSWORD"></FORM>
39
การสร้างกล่องกาเครื่องหมาย (CHECKBOX)
<INPUT TYPE="CHECKBOX" NAME="CHECKBOX1" >
40
การกำหนด Attribute ในการสร้างกล่องกาเครื่องหมาย
ค่าที่กำหนดให้ คำอธิบาย NAME ชื่อกล่องกาเครื่องหมาย กำหนดชื่อกล่องกาเครื่องหมาย TYPE CHECKBOX กำหนดชนิดเครื่องมือเป็นกล่องกาเครื่องหมาย VALUE ข้อความหรือตัวเลข ค่าข้อมูลของกล่องกาเครื่องหมาย CHECKED กำหนดให้ถูกเลือกเป็นค่าเริ่มต้น
41
ตัวอย่างการสร้างกล่องกาเครื่องหมาย
<FORM NAME="FORM1" METHOD=="GET" > เลือกผลไม้ที่ชื่นชอบ<BR> <INPUT TYPE="CHECKBOX" NAME="FRUIT1" VALUE="MANGO" CHECKED> MANGO<BR> <INPUT TYPE="CHECKBOX" NAME="FRUIT2" VALUE="APPLE"> APPLE<BR> <INPUT TYPE="CHECKBOX" NAME="FRUIT3" VALUE="BANANA"> BANANA<BR></FORM>
42
การสร้างกล่องตัวเลือก (Radio)
<INPUT TYPE="RADIO" NAME="RADIO1" >
43
การกำหนด Attribute ในการสร้างกล่องตัวเลือก
ค่าที่กำหนดให้ คำอธิบาย NAME ชื่อกล่องตัวเลือก กำหนดชื่อกล่องตัวเลือก TYPE RADIO กำหนดชนิดเครื่องมือเป็นกล่องตัวเลือก VALUE ข้อความหรือตัวเลข ค่าข้อมูลของกล่องตัวเลือก CHECKED กำหนดให้ถูกเลือกเป็นค่าเริ่มต้น
44
ตัวอย่างการสร้างกล่องตัวเลือก
<FORM NAME="FORM1" METHOD=="GET" > เลือกเพศ <INPUT TYPE="RADIO" NAME="SEX" VALUE="ชาย" CHECKED> ชาย<INPUT TYPE="RADIO" NAME="SEX" VALUE="หญิง"> หญิง </FORM>
45
การสร้างกล่องซ่อนข้อมูล (Hidden Data)
<INPUT TYPE="HIDDEN" NAME="NAME1" >
46
การกำหนด Attribute ในการสร้างกล่องซ่อนข้อมูล
ค่าที่กำหนดให้ คำอธิบาย NAME ชื่อกล่องซ่อนข้อมูล กำหนดชื่อกล่องซ่อนข้อมูล TYPE HIDDEN กำหนดชนิดเครื่องมือเป็นกล่องซ่อนข้อมูล VALUE ข้อความหรือตัวเลข ค่าเริ่มต้นกล่องซ่อนข้อมูล
47
การสร้างกล่องซ่อนข้อมูล
<FORM NAME="FORM1" METHOD="GET" > <INPUT TYPE="HIDDEN" NAME="NAME1" VALUE="P001"> </FORM>
48
การสร้างปุ่มยืนยันการส่งข้อมูล (Submit Button)
ปุ่มยืนยันการส่งข้อมูล หรือ Submit Button เป็นปุ่มที่ใช้สำหรับยืนยันการส่งข้อมูลที่อยู่ในเครื่องมือที่ใช้สำหรับรับข้อมูลใน Tag Form ไปให้กับเซิร์ฟเวอร์ <INPUT TYPE="SUBMIT" NAME="NAME6">
49
การกำหนด Attribute ในการสร้างปุ่มยืนยันการส่งข้อมูล
ค่าที่กำหนดให้ คำอธิบาย NAME ชื่อปุ่มยืนยันการส่งข้อมูล กำหนดชื่อปุ่มยืนยันการส่งข้อมูล TYPE SUBMIT กำหนดชนิดเครื่องมือเป็นปุ่มยืนยันการส่งข้อมูล VALUE ข้อความ ค่าที่แสดงบนปุ่มยืนยันการส่งข้อมูล
50
ตัวอย่างการสร้างกล่องตัวเลือก
<FORM NAME="FORM1" METHOD=="GET" > FIRST NAME<INPUT TYPE="TEXT" NAME="FIRSTNAME" VALUE=""> <BR> <INPUT TYPE="SUBMIT" NAME="SUBMIT" VALUE="SUBMIT"></FORM>
51
การสร้างปุ่มยกเลิกการป้อนข้อมูล (Reset Button)
ปุ่มยกเลิกการป้อนข้อมูล หรือ Reset Button เป็นปุ่มที่ใช้สำหรับการยกเลิกการป้อนข้อมูลในเครื่องมือที่ใช้สำหรับรับข้อมูลใน Tag Form <INPUT TYPE="RESET" NAME="NAME7">
52
การกำหนด Attribute ในการสร้างปุ่มยกเลิกการป้อนข้อมูล
ค่าที่กำหนดให้ คำอธิบาย NAME ชื่อปุ่ม กำหนดชื่อปุ่มยกเลิกการป้อนข้อมูล TYPE RESET กำหนดชนิดเครื่องมือเป็นปุ่มยกเลิกการป้อนข้อมูล VALUE ข้อความ ค่าที่แสดงบนปุ่มยกเลิกการป้อนข้อมูล
53
ตัวอย่างการสร้างปุ่มยกเลิกการป้อนข้อมูล
<FORM NAME="FORM1" METHOD=="GET" > FIRST NAME<INPUT TYPE="TEXT" NAME="FIRSTNAME" VALUE=""> <BR> <INPUT TYPE="SUBMIT" NAME="SUBMIT" VALUE="SUBMIT"><INPUT TYPE="RESET" NAME="RESET" VALUE="RESET"></FORM>
54
การกล่องรับตัวเลข (Number Box)
กล่องรับตัวเลข หรือ Number Box ใช้สำหรับรับข้อมูลตัวเลข สามารถกำหนดค่าต่ำสุดและค่าสูงสุดที่กล่องข้อมูลสามารถรับได้ บราวเซอร์ที่รองรับคือ Google chrome, Opera ,Mozilla Firefox, Safari <INPUT TYPE="NUMBER" NAME="NUMBER1">
55
การกำหนด Attribute ในการสร้างกล่องรับตัวเลข
ค่าที่กำหนดให้ คำอธิบาย NAME ชื่อกล่องรับตัวเลข กำหนดชื่อกล่องรับตัวเลข TYPE NUMBER กำหนดชนิดเครื่องมือเป็นกล่องรับตัวเลข VALUE ตัวเลข ค่าข้อมูลตัวเลขปัจจุบันที่แสดงในกล่องรับตัวเลข MIN ค่าต่ำสุดที่กล่องรับตัวเลขสามารถรับได้ MAX ค่าสูงสุดที่กล่องรับตัวเลขสามารถรับได้ STEP จำนวนที่เพิ่มขึ้นในแต่ละครั้ง
56
ตัวอย่างการสร้างกล่องรับตัวเลข
<FORM NAME="FORM1" METHOD=="GET" > SALARY <INPUT TYPE="NUMBER" NAME="SALARY" MIN="1" MAX="10001" STEP="500" VALUE="1000"> <BR> <INPUT TYPE="SUBMIT" NAME="SUBMIT" VALUE="SUBMIT"> <INPUT TYPE="RESET" NAME="RESET" VALUE="RESET"></FORM>
57
การสร้างกล่องรับที่อยู่อีเมล์ (Email Box)
กล่องรับที่อยู่อีเมล์ หรือ Box ใช้สำหรับรับข้อมูลในรูปแบบที่อยู่อีเมล์ หากเป็น HTMLในเวอร์ชั่นที่ต่ำกว่า HTML5 การรับข้อมูลที่อยู่อีเมล์จะต้องเขียนโปรแกรมตรวจสอบชนิดข้อมูล <INPUT TYPE=" " NAME=" 1">
58
การกำหนด Attribute ในการสร้างกล่องรับที่อยู่อีเมล์
ค่าที่กำหนดให้ คำอธิบาย NAME ชื่อกล่องรับที่อยู่อีเมล์ กำหนดชื่อกล่องรับที่อยู่อีเมล์ TYPE กำหนดชนิดเครื่องมือเป็นกล่องรับที่อยู่อีเมล์ VALUE ที่อยู่อีเมล์ ค่าข้อมูลปัจจุบันที่แสดงในกล่องรับที่อยู่อีเมล์ SIZE ตัวเลข ขนาดของกล่องรับที่อยู่อีเมล์
59
ตัวอย่างการสร้างกล่องรับที่อยู่อีเมล์
<FORM NAME="FORM1" METHOD=="GET" > <INPUT TYPE=" " NAME=" " VALUE=" Address" SIZE="40"><BR><INPUT TYPE="SUBMIT" NAME="SUBMIT" VALUE="SUBMIT"><INPUT TYPE="RESET" NAME="RESET" VALUE="RESET"></FORM>
60
การบังคับให้ผู้ใช้ป้อนข้อมูลด้วย Attribute Required
ใช้กรณีที่กำหนดให้ผู้ใช้ป้อนข้อมูลในรายการที่ต้องการ สามารถใช้ได้กับ กล่องข้อความ (Text box), กล่องรหัสผ่าน (Password), กล่องกาเครื่องหมาย (Check box), กล่องตัวเลือก (Radio) กล่องรับตัวเลข (Number) และกล่องป้อนที่อยู่อีเมล์
61
ตัวอย่างการใช้การบังคับการป้อนข้อมูล
<FORM NAME="FORM1" METHOD=="GET" >FIRST NAME<INPUT TYPE="TEXT" NAME="NAME1" SIZE="100" MAXLENGTH="20" PLACEHOLDER="ENTER FIRST NAME" REQUIRED><INPUT TYPE="SUBMIT" NAME="SUBMIT" VALUE="SUBMIT"></FORM>
62
การกำหนดให้โฟกัสช่องรับข้อมูลที่ต้องการโดยอัตโนมัติ
ใช้กรณีที่กำหนดให้โฟกัสในช่องข้อมูลที่ต้องการโดยอัตโนมัติ สามารถใช้ได้กับ กล่องข้อความ (Text box), กล่องรหัสผ่าน (Password), กล่องกาเครื่องหมาย (Check box), กล่องตัวเลือก (Radio) กล่องรับตัวเลข (Number) กล่องป้อนที่อยู่อีเมล์ ปุ่มยืนยันการส่งข้อมูลและปุ่มยกเลิกการป้อนข้อมูล
63
ตัวอย่างการใช้การกำหนดโฟกัสช่องรับข้อมูล
<FORM NAME="FORM1" METHOD=="GET" >FIRST NAME<INPUT TYPE="TEXT" NAME="NAME1" SIZE="20" AUTOFOCUS="AUTOFOCUS" > <INPUT TYPE="SUBMIT" NAME="SUBMIT" VALUE="SUBMIT"></FORM>
64
การแสดงข้อความแบบลายน้ำด้วย Attribute placeholder
การแสดงข้อความแบบลายน้ำ ใช้เป็นเครื่องมือที่ช่วยอธิบายการรับข้อมูล สามารถใช้ได้กับ กล่องข้อความ (Text box), กล่องรหัสผ่าน (Password), กล่องรับตัวเลข (Number) และกล่องป้อนที่อยู่อีเมล์
65
ตัวอย่างการสร้างข้อความแบบลายน้ำ
<FORM NAME="FORM1" METHOD=="GET" > FIRST NAME<INPUT TYPE="TEXT" NAME="NAME1" SIZE="25" PLACEHOLDER="Enter FIRST NAME"> <INPUT TYPE="SUBMIT" NAME="SUBMIT" VALUE="SUBMIT"><INPUT TYPE="RESET" NAME="RESET" VALUE="RESET"></FORM>
66
การสร้างกล่องสำหรับป้อนข้อมูลหลายบรรทัด
กล่องป้อนข้อมูลหลายบรรทัด หรือ TEXTAREA เป็นกล่องรับข้อมูลที่สามารถป้อนข้อมูลได้หลายบรรทัด <TEXTAREA NAME="NAME1">….. </TEXTAREA>
67
การกำหนด Attribute ในการสร้างกล่องป้อนข้อมูลหลายบรรทัด
ค่าที่กำหนดให้ คำอธิบาย NAME ชื่อกล่องป้อนข้อมูล กำหนดชื่อกล่องป้อนข้อมูล ROWS ตัวเลข จำนวนแถวกล่องป้อนข้อมูล COLS จำนวนความกว้างของกล่องป้อนข้อมูล WRAP OFF/SOFT/ HARD การตัดคำ OFF คือไม่มีการตัดคำขึ้นบรรทัดใหม่ SOFT=ตัดคำขึ้นบรรทัดใหม่เฉพาะตอนป้อนข้อมูล HARD=ตัดคำขึ้นบรรทัดใหม่ในการจัดเก็บ ALIGN LEFT/CENTER/ RIGHT จัดตำแหน่งการจัดวางข้อความ LEFT=ซ้าย CENTER=กึ่งกลาง RIGHT=ขวา
68
ตัวอย่างการสร้างกล่องป้อนข้อมูลหลายบรรทัด
<FORM NAME="FORM1" METHOD=="GET" >Comment<br><TEXTAREA NAME="COMMENT" ROWS="5" COLS="40" WRAP="HARD">ข้อความในกล่องป้อนข้อมูลหลายบรรทัด </TEXTAREA><br><INPUT TYPE="SUBMIT" NAME="SUBMIT" VALUE="SUBMIT"><INPUT TYPE="RESET"NAME="RESET"VALUE="RESET"></FORM>
69
การสร้างกล่องคำสั่งผสมหรือกล่องรายการ
กล่องคำสั่งผสม หรือ Select เป็นคำสั่งที่มีรายการให้ผู้ใช้เลือก ซึ่งมีลักษณะเป็นกล่องรายการเมื่อคลิกเลือกจะมีรายการหล่นลงมาให้เลือก <SELECT NAME="NAME1"> <OPTION VALUE="VALUE1">VALUE1</OPTION> <OPTION VALUE="VALUE2">VALUE2</OPTION> <OPTION VALUE="VALUE3">VALUE3</OPTION> </SELECT>
70
การกำหนด Attribute ในการสร้างกล่องคำสั่งผสม
ค่าที่กำหนดให้ คำอธิบาย NAME ชื่อกล่องป้อนข้อมูล กำหนดชื่อกล่องป้อนข้อมูล SIZE ตัวเลข จำนวนแถวที่แสดงรายการ MULIPLE กำหนดให้สามารถเลือกได้หลายรายการ SELECTED กำหนดให้เลือกรายการนั้น
71
ตัวอย่างการสร้างกล่องคำสั่งผสม
<select name="select" size="2.> <option value="value1">Value 1</option> <option value="value2" selected>Value 2</option> <option value="value3">Value 3</option> </select>
72
ตัวอย่างการสร้างฟอร์มด้วยภาษา HTML
<html><head><meta http-equiv=Content-Type content="text/html; charset=UTF-8"><title>SIGN UP</title></head><body><form name="signup"><table boder="2" cellpadding="10px" width="800px"> <TR><TD width="300px" align="center"><img src="1.png" width="100px"></TD> <TD><table width="101%"><TR><TD><H1>Sign Up</H1><h4>It's free and always will be.</h4> <input type="text" placeholder="First name" name="firstname" required="required"> <input type="text" placeholder="First name" name="lastname" required="required"></TD></TR> <TR><TD><input type=" " name=" " placeholder=" or mobile number" required="required" class="one"></td></tr><TR><TD><input type="re " name="re " placeholder="Re-enter or mobile number" required="required" class="one"></TD></TR><TR><TD><input type="password" name="password" placeholder="New password" required="required" class="one"></TD></TR><TR><TD><select name="month"> <option>มกราคม</option><option>กุมภาพันธ์</option><option>มีนาคม</option><option>เมษายน</option> <option>พฤษภาคม</option><option>มิถุนายน</option><option>กรกฏาคม</option><option>สิงหาคม</option> <option>กันยายน</option><option>ตุลาคม</option><option>พฤศจิกายน</option><option>ธันวาคม</option> </select><select name="day"> <option>1</option><option>2</option><option>3</option><option>4</option><option>5</option> <option>6</option><option>7</option><option>8</option><option>9</option><option>10</option> <option>11</option><option>12</option><option>13</option><option>14</option><option>15</option> <option>16</option><option>17</option><option>18</option><option>19</option><option>20</option> <option>21</option><option>22</option><option>23</option><option>24</option><option>25</option> <option>26</option><option>27</option><option>28</option><option>29</option><option>30</option> <option>31</option></select> พ.ศ.<input type="text" name="year"></TD></TR> <TR><TD><input type="submit" value="Sign Up" class="btn1"></TD></TR></table> </td></tr></table></form></body></html> ตัวอย่างการสร้างฟอร์มด้วยภาษา HTML
งานนำเสนอที่คล้ายกัน
