HYPER TEXT MARKUP LANGUAGE HTML HYPER TEXT MARKUP LANGUAGE
FRAME
การสร้างเฟรม เฟรม (Frame) คือการแบ่งพื้นที่ของหน้าจอของบราวเซอร์ให้สามารถแสดงไฟล์ได้หลายไฟล์ในหนึ่งจอภาพ โดยมีการแบ่งจอภาพออกเป็นส่วนๆ ทำให้พื้นที่ทั้งหมดของจอภาพถูกใช้งานอย่างเต็มที่ประกอบด้วยไฟล์ที่เกี่ยวข้อง 2 ไฟล์ คือ ไฟล์ควบคุม และไฟล์ที่นำข้อมูลมาแสดงในไฟล์ควบคุม
1.ไฟล์ควบคุม <HTML><FRAMESET>........</FRAMESET></HTML> โดยที่ <FRAMESET>.........</FRAMESET> จะทำหน้าที่แทน <BODY>.........</BODY> เพื่อเป็นตัวกำหนดการแสดงผลในบราวเซอร์ การแบ่งหน้าจอสามารถแบ่งได้เป็น 2 แนวคือแนวนอน (Rows) และแนวตั้ง (Cols)
1.1) การแบ่งพื้นที่ของจอภาพตามแนวนอน <FRAMESET ROWS="พิกเซล/เปอร์เซ็นต์/*"> <FRAME SRC="ชื่อไฟล์ที่ต้องการให้แสดงผลในเฟรม หรือ URL"> </FRAMESET>
ตัวอย่างการแบ่งพื้นที่ของจอภาพตามแนวนอน <FRAMESET ROWS="20%,30%,*"> <FRAME SRC=""></FRAME> <FRAME SRC=""></FRAME> <FRAME SRC=""></FRAME> </FRAMESET>
2 การแสดงผลการแบ่งพื้นที่ของจอภาพตามแนวนอน
1.2) การแบ่งพื้นที่ของจอภาพตามแนวตั้ง <FRAMESET COLS="พิกเซล/เปอร์เซ็นต์/*"> <FRAME SRC="ชื่อไฟล์ที่ต้องการให้แสดงผลในเฟรม หรือ URL"> <FRAME SRC="ชื่อไฟล์ที่ต้องการให้แสดงผลในเฟรม หรือ URL"> </FRAMESET>
การแบ่งพื้นที่ของจอภาพตามแนวตั้ง <FRAMESET COLS="20%,30%,*"> <FRAME SRC=""></FRAME> </FRAMESET>
การแสดงผลการแบ่งพื้นที่ของจอภาพตามแนวตั้ง
ตัวอย่างการแบ่งพื้นที่ของจอภาพแบบผสม <FRAMESET COLS="20%,*"> <FRAME SRC=""></FRAME> <FRAMESET ROWS="100,* "> </FRAMESET>
การแสดงผลการแบ่งพื้นที่หน้าจอแบบผสม
2. ไฟล์แสดง เป็นไฟล์ที่นำมาแสดงในเฟรมต่างๆ จะถูกอ้างถึงใน Tag <FRAME SRC=""> โดยที่ SRC="ชื่อไฟล์หรือที่อยู่ของรูปภาพ"
การกำหนด 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 แบบอัตโนมัติ
การเชื่อมโยงระหว่างเฟรม การเชื่อมโยงระหว่างเฟรม จะช่วยทำให้ผู้ใช้รู้สึกเหมือนยังอยู่หน้าเว็บเพจเดิม โดยเมื่อทำการแบ่งเฟรม ให้ระบุ NAME="ชื่อของเฟรม" ใน Tag <FRAME> เพื่อกำหนดชื่อเฟรมให้เฟรมอื่นอ้างอิงในการแสดงผล ได้ และในการเชื่อมโยง ให้กำหนดการเชื่อมโยงโดย ระบุ Attribute TARGET ของการเชื่อมโยงไปยังเฟรมที่ต้องการให้แสดงผล คือ TARGET="ชื่อของเฟรมที่ต้องการแสดงผล" โดยหากบราวเซอร์ไม่พบเฟรมที่กล่าวถึงจะเชื่อมโยงไปยังวินโดว์หรือแท็บใหม่
ไฟล์ควบคุมการแบ่งเฟรม <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>
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>
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>
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>
การแสดงผลไฟล์ควบคุม
IFRAME
การสร้างไอเฟรม เนื่องจากการแบ่งหน้าจอโดยการสร้างเฟรม มีข้อจำกัดตรงที่จะต้องระบุ Tag Frame แทน Tag Body จึงทำให้ในไฟล์นั้นไม่สามารถแสดงข้อความใดๆได้ นอกจากการแบ่งพื้นที่หน้าจอออกเป็นส่วนๆ เท่านั้น แต่ถ้าหากต้องการแบ่งพื้นที่เพียงบางส่วนของจอภาพจะไม่สามารถกระทำได้ แต่ถ้าเปลี่ยนเป็นการสร้างไอเฟรมจะสามารถทำให้การแบ่งพื้นที่จอภาพเป็นไปตามที่ต้องการมากขึ้น เนื่องจากไอเฟรมไม่ต้องมีการสร้างไฟล์ควบคุม ก็สามารถนำข้อมูลจากไฟล์อื่น หรือเว็บเพจอื่นมาแสดงในตำแหน่งของจอภาพตามที่ต้องการได้
IFRAME รูปแบบการใช้งาน <IFRAME SRC="ชื่อไฟล์ที่ต้องการให้แสดงผลในเฟรม หรือ URL " NAME="=ชื่อไอเฟรม" WIDTH="ตัวเลขหรือ%" HEIGHT="ตัวเลขหรือ%"></IFRAME>
การกำหนด Attribute ให้กับ Tag iframe ค่าที่กำหนดให้ คำอธิบาย ALIGN LEFT/RIGHT TOP/MIDDLE BOTTOM กำหนดตำแหน่งการจัดวางข้อความรอบๆ iframe โดยที่ LEFT=ซ้าย RIGHT=ขวา TOP=ส่วนบน MIDDLE=กึ่งกลางแนวนอนแนวตั้ง BOTTOM=ข้างล่าง WIDTH ตัวเลข % กำหนดความกว้างในการแสดง iframe สามารถกำหนดเป็นตัวเลขหน่วยเป็นพิกเซล หรือ เปอร์เซ็นต์ ตามความกว้างของบราวเซอร์ HEIGHT กำหนดความสูงในการแสดง iframe สามารถกำหนดเป็นตัวเลขหน่วยเป็นพิกเซล หรือ เปอร์เซ็นต์ ตามความสูงของบราวเซอร์
ตัวอย่างการใช้งานไอเฟรมเพื่อแบ่งพื้นที่จอภาพ <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>
การแสดงผลการใช้งาน Tag iframe
การสร้างฟอร์มรับข้อมูล
การสร้างฟอร์มรับข้อมูล เพื่อเป็นการสื่อสารระหว่างเว็บกับผู้ใช้ หรือเรียกว่า Common Gateway Interface (CGI) ทำหน้าที่ส่งข้อมูลที่ผู้ใช้ป้อน ไปยังเครื่องเซิร์ฟเวอร์ <FORM NAME="ชื่อฟอร์ม" METHOND="GET หรือ POST" ACTION="FILEหรือ URL"> ............. </FORM>
การกำหนด Attribute ให้กับ Tag FORM ค่าที่กำหนดให้ คำอธิบาย NAME ชื่อฟอร์ม กำหนดชื่อฟอร์ม ACTION ชื่อไฟล์/URL ระบุชื่อไฟล์ หรือ URL ที่ต้องการส่งข้อมูลไป METHOD GET POST ระบุวิธีการส่งข้อมูลไปยังเซิร์ฟเวอร์ GET จะส่งค่าผ่านทาง URLได้สูงสุดไม่เกิน 255 ตัวอักษร และ POST จะข้อมูลไปเป็นข้อความได้ไม่จำกัดตัวอักษร
การกำหนด NAME ให้กับเครื่องมือรับข้อมูล การกำหนด Name หรือ ชื่อที่ใช้สำหรับการเรียกเครื่องมือนั้นๆ เพื่อที่นำไปใช้ในการอ้างอิงในขั้นตอนการเขียนโปรแกรม โดยระบุ Attribute Name ตัวอย่างเช่น <INPUT TYPE="TEXTBOX" NAME="NAME1" >
ประเภทของเครื่องมือที่ใช้สำหรับรับค่าในฟอร์ม (1) <INPUT> เป็นคำสั่งที่ใช้สำหรับป้อนข้อมูลแบบต่างๆ (2) <TEXTAREA>...</TEXTAREA> เป็นกล่องสำหรับป้อนข้อมูลได้หลายบรรทัด (3) <SELECT>…</SELECT> เป็นกล่องคำสั่งผสมหรือกล่องรายการ
<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"> กล่องป้อนที่อยู่อีเมล์ (E-mail) <INPUT TYPE="EMAIL" NAME="NAME9">
การสร้างกล่องข้อความ (Text Box) <INPUT TYPE="TEXT" NAME="NAME1" >
การกำหนด Attribute ในการสร้างกล่องข้อความ ค่าที่กำหนดให้ คำอธิบาย NAME ชื่อกล่องข้อความ กำหนดชื่อกล่องข้อความ TYPE TEXT กำหนดชนิดเครื่องมือเป็นกล่องข้อความ SIZE ตัวเลข กำหนดความกว้างของกล่องข้อความ VALUE ข้อความหรือตัวเลข ค่าเริ่มต้นที่แสดงในกล่องข้อความ MAXLENGTH จำนวนตัวอักษรสูงสุดที่ป้อนในกล่องข้อความ PLACEHOLDER ข้อความ แสดงข้อความแบบลายน้ำ READONLY กำหนดให้ไม่สามารถแก้ไขข้อมูลได้
ตัวอย่างการสร้างกล่องข้อความ <FORM NAME="FORM1" METHOD="GET" > FIRST NAME<INPUT TYPE="TEXT" NAME="NAME1" SIZE="100" VALUE=" " MAXLENGTH="20" PLACEHOLDER="Enter FIRST NAME"> </FORM>
การสร้างกล่องรหัสผ่าน (Password) <INPUT TYPE="PASSWORD" NAME="PASSWORD" >
การกำหนด Attribute ในการสร้างกล่องรหัสผ่าน ค่าที่กำหนดให้ คำอธิบาย NAME ชื่อกล่องรหัสผ่าน กำหนดชื่อกล่องรหัสผ่าน TYPE PASSWORD กำหนดชนิดเครื่องมือเป็นกล่องรหัสผ่าน SIZE ตัวเลข กำหนดความกว้างของกล่องรหัสผ่าน VALUE ข้อความหรือตัวเลข ค่าเริ่มต้นที่แสดงในกล่องรหัสผ่าน MAXLENGTH จำนวนตัวอักษรสูงสุดที่ป้อนในกล่องรหัสผ่าน PLACEHOLDER ข้อความ แสดงข้อความแบบลายน้ำ
ตัวอย่างการสร้างกล่องรหัสผ่าน <FORM NAME="FORM1" METHOD=="GET" > FIRST PASSWORD<INPUT TYPE="PASSWORD" NAME="PASSWORD" SIZE="20" VALUE="" MAXLENGTH="20" PLACEHOLDER="Enter PASSWORD"></FORM>
การสร้างกล่องกาเครื่องหมาย (CHECKBOX) <INPUT TYPE="CHECKBOX" NAME="CHECKBOX1" >
การกำหนด Attribute ในการสร้างกล่องกาเครื่องหมาย ค่าที่กำหนดให้ คำอธิบาย NAME ชื่อกล่องกาเครื่องหมาย กำหนดชื่อกล่องกาเครื่องหมาย TYPE CHECKBOX กำหนดชนิดเครื่องมือเป็นกล่องกาเครื่องหมาย VALUE ข้อความหรือตัวเลข ค่าข้อมูลของกล่องกาเครื่องหมาย CHECKED กำหนดให้ถูกเลือกเป็นค่าเริ่มต้น
ตัวอย่างการสร้างกล่องกาเครื่องหมาย <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>
การสร้างกล่องตัวเลือก (Radio) <INPUT TYPE="RADIO" NAME="RADIO1" >
การกำหนด Attribute ในการสร้างกล่องตัวเลือก ค่าที่กำหนดให้ คำอธิบาย NAME ชื่อกล่องตัวเลือก กำหนดชื่อกล่องตัวเลือก TYPE RADIO กำหนดชนิดเครื่องมือเป็นกล่องตัวเลือก VALUE ข้อความหรือตัวเลข ค่าข้อมูลของกล่องตัวเลือก CHECKED กำหนดให้ถูกเลือกเป็นค่าเริ่มต้น
ตัวอย่างการสร้างกล่องตัวเลือก <FORM NAME="FORM1" METHOD=="GET" > เลือกเพศ <INPUT TYPE="RADIO" NAME="SEX" VALUE="ชาย" CHECKED> ชาย<INPUT TYPE="RADIO" NAME="SEX" VALUE="หญิง"> หญิง </FORM>
การสร้างกล่องซ่อนข้อมูล (Hidden Data) <INPUT TYPE="HIDDEN" NAME="NAME1" >
การกำหนด Attribute ในการสร้างกล่องซ่อนข้อมูล ค่าที่กำหนดให้ คำอธิบาย NAME ชื่อกล่องซ่อนข้อมูล กำหนดชื่อกล่องซ่อนข้อมูล TYPE HIDDEN กำหนดชนิดเครื่องมือเป็นกล่องซ่อนข้อมูล VALUE ข้อความหรือตัวเลข ค่าเริ่มต้นกล่องซ่อนข้อมูล
การสร้างกล่องซ่อนข้อมูล <FORM NAME="FORM1" METHOD="GET" > <INPUT TYPE="HIDDEN" NAME="NAME1" VALUE="P001"> </FORM>
การสร้างปุ่มยืนยันการส่งข้อมูล (Submit Button) ปุ่มยืนยันการส่งข้อมูล หรือ Submit Button เป็นปุ่มที่ใช้สำหรับยืนยันการส่งข้อมูลที่อยู่ในเครื่องมือที่ใช้สำหรับรับข้อมูลใน Tag Form ไปให้กับเซิร์ฟเวอร์ <INPUT TYPE="SUBMIT" NAME="NAME6">
การกำหนด Attribute ในการสร้างปุ่มยืนยันการส่งข้อมูล ค่าที่กำหนดให้ คำอธิบาย NAME ชื่อปุ่มยืนยันการส่งข้อมูล กำหนดชื่อปุ่มยืนยันการส่งข้อมูล TYPE SUBMIT กำหนดชนิดเครื่องมือเป็นปุ่มยืนยันการส่งข้อมูล VALUE ข้อความ ค่าที่แสดงบนปุ่มยืนยันการส่งข้อมูล
ตัวอย่างการสร้างกล่องตัวเลือก <FORM NAME="FORM1" METHOD=="GET" > FIRST NAME<INPUT TYPE="TEXT" NAME="FIRSTNAME" VALUE=""> <BR> <INPUT TYPE="SUBMIT" NAME="SUBMIT" VALUE="SUBMIT"></FORM>
การสร้างปุ่มยกเลิกการป้อนข้อมูล (Reset Button) ปุ่มยกเลิกการป้อนข้อมูล หรือ Reset Button เป็นปุ่มที่ใช้สำหรับการยกเลิกการป้อนข้อมูลในเครื่องมือที่ใช้สำหรับรับข้อมูลใน Tag Form <INPUT TYPE="RESET" NAME="NAME7">
การกำหนด Attribute ในการสร้างปุ่มยกเลิกการป้อนข้อมูล ค่าที่กำหนดให้ คำอธิบาย NAME ชื่อปุ่ม กำหนดชื่อปุ่มยกเลิกการป้อนข้อมูล TYPE RESET กำหนดชนิดเครื่องมือเป็นปุ่มยกเลิกการป้อนข้อมูล VALUE ข้อความ ค่าที่แสดงบนปุ่มยกเลิกการป้อนข้อมูล
ตัวอย่างการสร้างปุ่มยกเลิกการป้อนข้อมูล <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>
การกล่องรับตัวเลข (Number Box) กล่องรับตัวเลข หรือ Number Box ใช้สำหรับรับข้อมูลตัวเลข สามารถกำหนดค่าต่ำสุดและค่าสูงสุดที่กล่องข้อมูลสามารถรับได้ บราวเซอร์ที่รองรับคือ Google chrome, Opera ,Mozilla Firefox, Safari <INPUT TYPE="NUMBER" NAME="NUMBER1">
การกำหนด Attribute ในการสร้างกล่องรับตัวเลข ค่าที่กำหนดให้ คำอธิบาย NAME ชื่อกล่องรับตัวเลข กำหนดชื่อกล่องรับตัวเลข TYPE NUMBER กำหนดชนิดเครื่องมือเป็นกล่องรับตัวเลข VALUE ตัวเลข ค่าข้อมูลตัวเลขปัจจุบันที่แสดงในกล่องรับตัวเลข MIN ค่าต่ำสุดที่กล่องรับตัวเลขสามารถรับได้ MAX ค่าสูงสุดที่กล่องรับตัวเลขสามารถรับได้ STEP จำนวนที่เพิ่มขึ้นในแต่ละครั้ง
ตัวอย่างการสร้างกล่องรับตัวเลข <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>
การสร้างกล่องรับที่อยู่อีเมล์ (Email Box) กล่องรับที่อยู่อีเมล์ หรือ Email Box ใช้สำหรับรับข้อมูลในรูปแบบที่อยู่อีเมล์ หากเป็น HTMLในเวอร์ชั่นที่ต่ำกว่า HTML5 การรับข้อมูลที่อยู่อีเมล์จะต้องเขียนโปรแกรมตรวจสอบชนิดข้อมูล <INPUT TYPE=" EMAIL" NAME="EMAIL1">
การกำหนด Attribute ในการสร้างกล่องรับที่อยู่อีเมล์ ค่าที่กำหนดให้ คำอธิบาย NAME ชื่อกล่องรับที่อยู่อีเมล์ กำหนดชื่อกล่องรับที่อยู่อีเมล์ TYPE EMAIL กำหนดชนิดเครื่องมือเป็นกล่องรับที่อยู่อีเมล์ VALUE ที่อยู่อีเมล์ ค่าข้อมูลปัจจุบันที่แสดงในกล่องรับที่อยู่อีเมล์ SIZE ตัวเลข ขนาดของกล่องรับที่อยู่อีเมล์
ตัวอย่างการสร้างกล่องรับที่อยู่อีเมล์ <FORM NAME="FORM1" METHOD=="GET" > EMAIL:<INPUT TYPE="EMAIL" NAME="EMAIL" VALUE="E-mail Address" SIZE="40"><BR><INPUT TYPE="SUBMIT" NAME="SUBMIT" VALUE="SUBMIT"><INPUT TYPE="RESET" NAME="RESET" VALUE="RESET"></FORM>
การบังคับให้ผู้ใช้ป้อนข้อมูลด้วย Attribute Required ใช้กรณีที่กำหนดให้ผู้ใช้ป้อนข้อมูลในรายการที่ต้องการ สามารถใช้ได้กับ กล่องข้อความ (Text box), กล่องรหัสผ่าน (Password), กล่องกาเครื่องหมาย (Check box), กล่องตัวเลือก (Radio) กล่องรับตัวเลข (Number) และกล่องป้อนที่อยู่อีเมล์
ตัวอย่างการใช้การบังคับการป้อนข้อมูล <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>
การกำหนดให้โฟกัสช่องรับข้อมูลที่ต้องการโดยอัตโนมัติ ใช้กรณีที่กำหนดให้โฟกัสในช่องข้อมูลที่ต้องการโดยอัตโนมัติ สามารถใช้ได้กับ กล่องข้อความ (Text box), กล่องรหัสผ่าน (Password), กล่องกาเครื่องหมาย (Check box), กล่องตัวเลือก (Radio) กล่องรับตัวเลข (Number) กล่องป้อนที่อยู่อีเมล์ ปุ่มยืนยันการส่งข้อมูลและปุ่มยกเลิกการป้อนข้อมูล
ตัวอย่างการใช้การกำหนดโฟกัสช่องรับข้อมูล <FORM NAME="FORM1" METHOD=="GET" >FIRST NAME<INPUT TYPE="TEXT" NAME="NAME1" SIZE="20" AUTOFOCUS="AUTOFOCUS" > <INPUT TYPE="SUBMIT" NAME="SUBMIT" VALUE="SUBMIT"></FORM>
การแสดงข้อความแบบลายน้ำด้วย Attribute placeholder การแสดงข้อความแบบลายน้ำ ใช้เป็นเครื่องมือที่ช่วยอธิบายการรับข้อมูล สามารถใช้ได้กับ กล่องข้อความ (Text box), กล่องรหัสผ่าน (Password), กล่องรับตัวเลข (Number) และกล่องป้อนที่อยู่อีเมล์
ตัวอย่างการสร้างข้อความแบบลายน้ำ <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>
การสร้างกล่องสำหรับป้อนข้อมูลหลายบรรทัด กล่องป้อนข้อมูลหลายบรรทัด หรือ TEXTAREA เป็นกล่องรับข้อมูลที่สามารถป้อนข้อมูลได้หลายบรรทัด <TEXTAREA NAME="NAME1">….. </TEXTAREA>
การกำหนด Attribute ในการสร้างกล่องป้อนข้อมูลหลายบรรทัด ค่าที่กำหนดให้ คำอธิบาย NAME ชื่อกล่องป้อนข้อมูล กำหนดชื่อกล่องป้อนข้อมูล ROWS ตัวเลข จำนวนแถวกล่องป้อนข้อมูล COLS จำนวนความกว้างของกล่องป้อนข้อมูล WRAP OFF/SOFT/ HARD การตัดคำ OFF คือไม่มีการตัดคำขึ้นบรรทัดใหม่ SOFT=ตัดคำขึ้นบรรทัดใหม่เฉพาะตอนป้อนข้อมูล HARD=ตัดคำขึ้นบรรทัดใหม่ในการจัดเก็บ ALIGN LEFT/CENTER/ RIGHT จัดตำแหน่งการจัดวางข้อความ LEFT=ซ้าย CENTER=กึ่งกลาง RIGHT=ขวา
ตัวอย่างการสร้างกล่องป้อนข้อมูลหลายบรรทัด <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>
การสร้างกล่องคำสั่งผสมหรือกล่องรายการ กล่องคำสั่งผสม หรือ Select เป็นคำสั่งที่มีรายการให้ผู้ใช้เลือก ซึ่งมีลักษณะเป็นกล่องรายการเมื่อคลิกเลือกจะมีรายการหล่นลงมาให้เลือก <SELECT NAME="NAME1"> <OPTION VALUE="VALUE1">VALUE1</OPTION> <OPTION VALUE="VALUE2">VALUE2</OPTION> <OPTION VALUE="VALUE3">VALUE3</OPTION> </SELECT>
การกำหนด Attribute ในการสร้างกล่องคำสั่งผสม ค่าที่กำหนดให้ คำอธิบาย NAME ชื่อกล่องป้อนข้อมูล กำหนดชื่อกล่องป้อนข้อมูล SIZE ตัวเลข จำนวนแถวที่แสดงรายการ MULIPLE กำหนดให้สามารถเลือกได้หลายรายการ SELECTED กำหนดให้เลือกรายการนั้น
ตัวอย่างการสร้างกล่องคำสั่งผสม <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>
ตัวอย่างการสร้างฟอร์มด้วยภาษา 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="email" name="email" placeholder="Email or mobile number" required="required" class="one"></td></tr><TR><TD><input type="reemail" name="reemail" placeholder="Re-enter email 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