ວິຊາ การออกแบบและพัฒนาเว็บไซต์เพื่อการจัดการสารสนเทศ

เอกสารอา้ งอิง เกยี รติพงษ์ บญุ จิตร. (2560). Photoshop CC 2017 Professional Guide. นนทบุรี: ไอดีซีฯ. เพียงพิศ ชะโกทอง. (ม.ป.ป.). การใช้ Path สร้างงานกราฟิกอยา่ งละเอียด. สบื คน้ เม่ือ 2 มีนำคม 2560, จำก http://elearning.nsru.ac.th/web_elearning/paingpit/pan2-5.htm. รำชวทิ ย์ ทิพย์เสนำ. (2560). การสรา้ งสรรคภ์ าพประกอบตาราวิชาการ. [ไฟล์คอมพิวเตอร์]. อุดรธำนี: สำขำวชิ ำสำรสนเทศศำสตร์ คณะมนุษยศำสตร์และสังคมศำสตร์ มหำวทิ ยำลยั รำชภัฏอุดรธำนี. Adobe. (2017b). Adobe Photoshop CC. [Computer Software]. San Jose, California, USA: Adobe. BrainBell. (n.d.). Adobe Photoshop: How to Use the Red-Eye Tool. Retrieved May 22, 2018, form http://www.brainbell.com/tutorials/Photoshop/How_to_Use_ Red-Eye_Tool.html.



บทท่ี 9 เทคนคิ การแสดงผลภาพและตวั อกั ษร ภาพและตัวอักษรเป็นองค์ประกอบด้านเนื้อหาท่ีมีความสาคัญต่อเว็บไซต์เป็นอย่างยิ่ง เนื่องจากนามาใช้เป็นเน้ือหาหลักในเว็บไซต์ การออกแบบตกแต่งภาพกราฟิกและจัดวางในตาแหน่งที่ เหมาะสม และเลือกใช้แบบอักษรท่ีอ่านง่ายหรือแบบอักษรท่ีมีความแปลกใหม่ จึงเป็นปัจจัยสาคัญที่ ส่งผลต่อการเข้าเยี่ยมชมเว็บไซต์ ซ่ึงหากการออกแบบภาพกราฟิกและการเลือกใช้แบบอักษรท่ีไม่มี ความโดดเด่น อาจส่งผลให้ผู้เข้าชมไม่ให้ความสนใจเว็บไซต์และอาจออกจากเว็บไซต์ทันที ส่งผลให้ การใช้ภาพกราฟิกเพื่อนาเสนอเน้ือหาในรูปแบบของภาพนิ่งอาจไม่เพยี งพออีกต่อไป เน่อื งจากภาพไม่ สามารถโต้ตอบกับผู้เข้าชมเว็บไซต์หรือไม่สามารถเคลื่อนไหวได้ และการใช้แบบอักษรหรือฟอนต์ที่ เป็นค่าเริ่มต้นของการแสดงผลหรือไม่มีการกาหนดแบบอักษรใด ๆ อาจไม่ดึงดูดให้ผู้ชมอ่านเน้ือหา ดังน้ัน การนาเสนอภาพกราฟิกด้วยเทคนิคการแสดงผลรูปแบบต่าง ๆ เพ่ือให้ภาพกราฟิกมีการ เคล่ือนไหวหรือตอบสนองผู้ใช้งาน ไม่ว่าจะเป็น การย่อ-ขยายภาพ การเลื่อนดูภาพจานวนมาก หรือ การแสดงภาพอัตโนมัติ และการกาหนดแบบอักษรหรือฟอนต์ให้มีความโดดเด่น แตกต่างจากแบบ อักษรท่ีมีการใช้งานท่ัวไป จึงเป็นส่ิงสาคัญท่ีจะช่วยสร้างความน่าสนใจให้กับเว็บไซต์ เน้ือหาในบทน้ี จะนาเสนอการใช้เทคนิคการแสดงผลภาพและการกาหนดแบบอักษร ด้วยคาสั่ง HTML5 และคาส่ัง สไตล์ชีต พร้อมกับแสดงตัวอย่างผลลัพธ์ที่ได้ เพ่ือให้ผู้พัฒนาสามารถนาเทคนิคไปประยุกต์ใช้ในการ นาเสนอสารสนเทศผา่ นเวบ็ ไซต์ ให้มปี ระสิทธภิ าพมากยงิ่ ข้นึ ภาพสไลด์โชว์ ภาพสไลด์โชว์ (Image Slideshow) คอื เทคนิคการแสดงภาพจานวนหลายภาพ โดยนาภาพ ทั้งหมดมาวางซ้อนทับกัน อยู่ในตาแหน่งเดียวกัน แสดงผลภาพด้วยวิธีการเปลี่ยนภาพทีละภาพ ซ่ึง อาจใช้วิธีเลื่อนเปล่ียนภาพด้วยตนเองหรือกาหนดให้ภาพเปล่ียนอัตโนมัติ โดยจะมีสัญลักษณ์หรือปุ่ม นาทางสาหรับเลื่อนภาพ นิยมใช้แสดงภาพเหตุการณ์สาคัญต่าง ๆ (Highlight) และแสดงในหน้าแรก ของเว็บไซต์ เช่น ภาพประชาสัมพันธ์ข่าวสารสาคัญขององค์กร ภาพประกาศรับสมัคร หรือภาพ โฆษณาสนิ คา้ เป็นตน้ เพื่อดึงดูดความสนใจของผเู้ ขา้ ชม ซง่ึ จะเหน็ เปน็ อับดบั แรกเม่ือเปดิ หนา้ แรกของ เว็บไซต์ โดยการสร้างภาพสไลด์โชว์จะใช้งานสไตล์ชีตร่วมกับจาวาสคริปต์ (JavaScript) มี รายละเอยี ดขนั้ ตอนการสร้างและการเขียนคาสง่ั ดงั น้ี

434 CHAPTER 9: IMAGE&FONT ข้ันตอนที่ 1 การเตรียมภาพ โดยการออกแบบและตกแต่งภาพให้ตรงตามวัตถุประสงค์หรือ แนวความคิดที่ต้องการนาเสนอ ซ่ึงอาจใช้วิธีการตัดต่อภาพหรือแทรกข้อความลงในภาพ โดยใช้ โปรแกรมตกแต่งภาพท่ัวไป และกาหนดขนาดภาพให้มีความเหมาะสมกับขนาดพ้ืนที่ท่ีกาหนดให้ แสดงในเวบ็ เพจ โดยตัวอยา่ งจะกาหนดขนาดเท่ากบั 1000x350px. ดงั ภาพที่ 9.1 W: 1000px H: 350px ภาพที่ 9.1 การเตรียมภาพสไลดโ์ ชว์ ท่ีมา: (ราชวิทย์ ทพิ ยเ์ สนา, 2560) ขั้นตอนที่ 2 กาหนดสไตล์ชีต โดยกาหนดคุณสมบัติให้กับภาพสไลด์โชว์ ประกอบด้วย คุณสมบัติหลัก คือ การกาหนดขนาดและตาแหน่งภาพ รปู แบบและตาแหน่งของปุ่มเล่ือนเปลี่ยนภาพ รูปแบบของสีพ้ืนหลังระหวา่ งเปลี่ยนภาพ จุดสาหรับเลื่อนภาพ คุณสมบัติความเร็วในการเปล่ียนภาพ รูปแบบคาอธิบายภาพ และกาหนดให้ภาพสามารถแสดงผลได้กับอุปกรณ์ท่ีมีขนาดหน้าจอต่างกัน มี รายละเอียดดังนี้

CHAPTER 9: IMAGE&FONT 435 CSS3 /* css file: mystyle.css */ * {box-sizing: border-box;} img {vertical-align: middle;} .mySlides {display: none;} .slideshow-container { max-width: 1000px; position: relative; margin: auto; } .prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -22px; color: white; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; } .next { right: 0; border-radius: 3px 0 0 3px; } .prev:hover, .next:hover { background-color: rgba(0,0,0,0.8); } .text { color: #f2f2f2; font-size: 15px; padding: 8px 12px; position: absolute; bottom: 8px; width: 100%; text-align: center; }

436 CHAPTER 9: IMAGE&FONT CSS3 /* css file: mystyle.css cont’d*/ .numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; } .dot { cursor: pointer; height: 15px; width: 15px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; } .active, .dot:hover { background-color: #717171; } .fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; } @-webkit-keyframes fade { form {opacity: .4} to {opacity: 1} } @keyframes fade { form {opacity: .4} to {opacity: 1} } @media only screen and (max-width: 300px) { .prev, .next,.text {font-size: 11px} } ทมี่ า: (W3Schools, 1999g: 1)

CHAPTER 9: IMAGE&FONT 437 ข้ันตอนที่ 3 การกาหนด HTML โดยเรียกใช้งานแท็ก \"meta\" กาหนดแอตทริบิวต์ \"name\" เป็น \"viewport\" เพ่ือให้สามารถแสดงผลเวบ็ เพจในหน้าจออุปกรณ์ท่ีมีขนาดแตกต่างกัน เรียกใช้งาน รปู แบบและคณุ สมบัติท่ีกาหนดในสไตลช์ ีต และกาหนด JavaScript โดยแทรกสคริปตภ์ ายใตอ้ ิลิเมนต์ \"<script>…</script>\" ในตาแหน่งถัดจากอิลิเมนต์ที่ใช้แสดงผลภาพ เพ่ือใช้ควบคุมการแสดงภาพ เมอื่ ผ้ใู ช้คลิกเลือ่ นเปล่ียนภาพ มรี ายละเอยี ดดังน้ี HTML5&JavaScript <!doctype html> <html> <head> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <div class=\"slideshow-container\"> <div class=\"mySlides fade\"> <div class=\"numbertext\">1 / 3</div> <img src=\"images/slide1.jpg\" style=\"width:100%\"> <div class=\"text\">Caption: A</div> </div> <div class=\"mySlides fade\"> <div class=\"numbertext\">2 / 3</div> <img src=\"images/slide2.jpg\" style=\"width:100%\"> <div class=\"text\">Caption: B</div> </div> <div class=\"mySlides fade\"> <div class=\"numbertext\">3 / 3</div> <img src=\"images/slide3.jpg\" style=\"width:100%\"> <div class=\"text\">Caption: C</div> </div> <a class=\"prev\" onclick=\"plusSlides(-1)\">&#10094;</a> <a class=\"next\" onclick=\"plusSlides(1)\">&#10095;</a> </div><!-- class=\"slideshow-container\" --> <br> <div style=\"text-align:center;\"> <span class=\"dot\" onclick=\"currentSlide(1)\"></span> <span class=\"dot\" onclick=\"currentSlide(2)\"></span> <span class=\"dot\" onclick=\"currentSlide(3)\"></span> </div> <!-- Javascript -->

438 CHAPTER 9: IMAGE&FONT HTML5&JavaScript <!-- cont’d --> <script> var slideIndex = 1; showSlides(slideIndex); function plusSlides(n) { showSlides(slideIndex += n); } function currentSlide(n) { showSlides(slideIndex = n); } function showSlides(n) { var i; var slides = document.getElementsByClassName(\"mySlides\"); var dots = document.getElementsByClassName(\"dot\"); if (n > slides.length) {slideIndex = 1} if (n < 1) {slideIndex = slides.length} for (i = 0; i < slides.length; i++) { slides[i].style.display = \"none\"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(\" active\", \"\"); } slides[slideIndex-1].style.display = \"block\"; dots[slideIndex-1].className += \" active\"; } </script> </body> </html> ที่มา: (W3Schools, 1999g: 1)

CHAPTER 9: IMAGE&FONT 439 Previous Next ภาพท่ี 9.2 ภาพสไลดโ์ ชว์ ทีม่ า: (ราชวิทย์ ทพิ ย์เสนา, 2560) หากต้องการใหภ้ าพสไลดโ์ ชว์ แสดงภาพโดยการเปลี่ยนภาพอัตโนมัติ ดว้ ยการกาหนดเวลาให้ เล่อื นภาพ สามารถกาหนดจาวาสครปิ ต์ ดงั นี้ JavaScript <script> var slideIndex = 0; showSlides(); function showSlides() { var i; var slides = document.getElementsByClassName(\"mySlides\"); var dots = document.getElementsByClassName(\"dot\"); for (i = 0; i < slides.length; i++) { slides[i].style.display = \"none\"; } slideIndex++; if (slideIndex > slides.length) {slideIndex = 1} for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(\" active\", \"\"); } slides[slideIndex-1].style.display = \"block\"; dots[slideIndex-1].className += \" active\"; setTimeout(showSlides, 5000); /* Change image every 5 seconds */ } </script> ทีม่ า: (W3Schools, 1999g: 1)

440 CHAPTER 9: IMAGE&FONT แกลเลอรภี่ าพ แกลเลอรี่ภาพ (Image Gallery) คือ เทคนิคการแสดงภาพจานวนหลายภาพ โดยนาภาพ ทั้งหมดมาแสดงในลักษณะภาพขนาดย่อหรือภาพตัวอย่าง (Thumbnail) และแสดงผลภาพขนาด ใหญ่เมื่อคลิกที่ภาพตัวอย่าง สามารถเล่ือนเปล่ียนภาพได้ เหมาะสาหรับการนาเสนอภาพจานวนมาก และต้องการให้แสดงภาพอยู่ภายในเว็บเพจหน้าเดียว เช่น ภาพกิจกรรม ภาพข่าว เป็นต้น โดยการ สร้างแกลเลอร่ีภาพจะใช้งานสไตล์ชีตร่วมกับจาวาสคริปต์ (JavaScript) มีรายละเอียดขั้นตอนการ สร้างและการเขยี นคาสั่ง ดงั น้ี ข้ันตอนที่ 1 การเตรียมภาพ โดยการออกแบบและตกแต่งภาพตามความเหมาะสม และ กาหนดให้ภาพเดียวกันมี 2 ขนาด ประกอบด้วย ภาพขนาดใหญ่ (1000x500px) และภาพตัวอย่าง (400x200px) ดงั ภาพท่ี 9.1 W: 1000px W: 400px H: 500px H: 200px ภาพที่ 9.3 การเตรียมภาพสาหรบั แกลเลอร่ีภาพ ทม่ี า: (ราชวทิ ย์ ทพิ ยเ์ สนา, 2560)

CHAPTER 9: IMAGE&FONT 441 ขั้นตอนที่ 2 กาหนดสไตล์ชีต โดยกาหนดรูปแบบให้กับแกลเลอรี่ภาพ ประกอบด้วย คุณสมบัตหิ ลัก คอื การกาหนดตาแหน่งและขนาดภาพ รูปแบบและตาแหน่งของปุ่มเลื่อนเปลี่ยนภาพ รูปแบบเมาส์เม่ือวางเหนือภาพ คอลัมน์ภาพตัวอย่าง รูปแบบสีเมื่อวางเมาส์เหนือภาพตัวอย่าง และ รปู แบบคาอธบิ ายภาพ มรี ายละเอยี ดดังน้ี CSS3 /* css file: mystyle.css */ * {box-sizing: border-box;} img { vertical-align: middle; } .container { position: relative; } .mySlides { display: none; } .cursor { cursor: pointer; } .prev, .next { cursor: pointer; position: absolute; top: 40%; width: auto; padding: 16px; margin-top: -50px; color: white; font-weight: bold; font-size: 20px; border-radius: 0 3px 3px 0; user-select: none; -webkit-user-select: none; } .next { right: 0; border-radius: 3px 0 0 3px; } .prev:hover, .next:hover { background-color: rgba(0, 0, 0, 0.8); }

442 CHAPTER 9: IMAGE&FONT CSS3 /* css file: mystyle.css cont’d */ .numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; } .caption-container { text-align: center; background-color: #222; padding: 2px 16px; color: white; } .row:after { content: \"\"; display: table; clear: both; } .column { float: left; width: 16.66%; } .demo { opacity: 0.6; } .active, .demo:hover { opacity: 1; } ทมี่ า: (W3Schools, 1999h: 1) ขั้นตอนที่ 3 การกาหนด HTML โดยเรียกใช้งานแท็ก \"meta\" กาหนดแอตทริบิวต์ \"name\" เป็น \"viewport\" เพื่อให้สามารถแสดงผลเวบ็ เพจในหน้าจออุปกรณ์ท่ีมีขนาดแตกต่างกัน เรียกใช้งาน รูปแบบและคุณสมบัติที่กาหนดในสไตล์ชตี และกาหนด JavaScript โดยแทรกสคริปต์ภายใต้อลิ ิเมนต์ \"<script>…</script>\" ในตาแหน่งถัดจากอิลิเมนต์ที่ใช้แสดงผลภาพ เพ่ือใช้ควบคุมการแสดงภาพ เมือ่ ผใู้ ช้คลกิ เลอื่ นเปลีย่ นภาพและคลกิ ภาพตวั อยา่ ง มรี ายละเอียดดงั น้ี

CHAPTER 9: IMAGE&FONT 443 HTML5&JavaScript <!doctype html> <html> <head> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <h1 style=\"text-align:center;\">Image Gallery</h1> <div class=\"container\"> <div class=\"mySlides\"> <div class=\"numbertext\">1 / 6</div> <img src=\"images/img01wide.jpg\" style=\"width:100%\"> </div> <div class=\"mySlides\"> <div class=\"numbertext\">2 / 6</div> <img src=\"images/img02wide.jpg\" style=\"width:100%\"> </div> <div class=\"mySlides\"> <div class=\"numbertext\">3 / 6</div> <img src=\"images/img03wide.jpg\" style=\"width:100%\"> </div> <div class=\"mySlides\"> <div class=\"numbertext\">4 / 6</div> <img src=\"images/img04wide.jpg\" style=\"width:100%\"> </div> <div class=\"mySlides\"> <div class=\"numbertext\">5 / 6</div> <img src=\"images/img05wide.jpg\" style=\"width:100%\"> </div> <div class=\"mySlides\"> <div class=\"numbertext\">6 / 6</div> <img src=\"images/img06wide.jpg\" style=\"width:100%\"> </div> <a class=\"prev\" onclick=\"plusSlides(-1)\">&#10094;</a> <a class=\"next\" onclick=\"plusSlides(1)\">&#10095;</a> <div class=\"caption-container\"> <p id=\"caption\"></p> </div> <!-- Thumbnail images --> <div class=\"row\"> <div class=\"column\"> <img class=\"demo cursor\" src=\"images/img01thumb.jpg\" style=\"width:100%\" onclick=\"currentSlide(1)\" alt=\"Flower 1\"> </div> <div class=\"column\"> <img class=\"demo cursor\" src=\"images/img02thumb.jpg\" style=\"width:100%\" onclick=\"currentSlide(2)\" alt=\"Flower 2\"> </div>

444 CHAPTER 9: IMAGE&FONT HTML5&JavaScript <!-- cont’d --> <div class=\"column\"> <img class=\"demo cursor\" src=\"images/img03thumb.jpg\" style=\"width:100%\" onclick=\"currentSlide(3)\" alt=\"Flower 3\"> </div> <div class=\"column\"> <img class=\"demo cursor\" src=\"images/img04thumb.jpg\" style=\"width:100%\" onclick=\"currentSlide(4)\" alt=\"Flower 4\"> </div> <div class=\"column\"> <img class=\"demo cursor\" src=\"images/img05thumb.jpg\" style=\"width:100%\" onclick=\"currentSlide(5)\" alt=\"Flower 5\"> </div> <div class=\"column\"> <img class=\"demo cursor\" src=\"images/img06thumb.jpg\" style=\"width:100%\" onclick=\"currentSlide(6)\" alt=\"Flower 6\"> </div> </div><!-- class: row --> </div><!-- class: container --> <script> var slideIndex = 1; showSlides(slideIndex); function plusSlides(n) {showSlides(slideIndex += n);} function currentSlide(n) {showSlides(slideIndex = n);} function showSlides(n) { var i; var slides = document.getElementsByClassName(\"mySlides\"); var dots = document.getElementsByClassName(\"demo\"); var captionText = document.getElementById(\"caption\"); if (n > slides.length) {slideIndex = 1} if (n < 1) {slideIndex = slides.length} for (i = 0; i < slides.length; i++) { slides[i].style.display = \"none\"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(\" active\", \"\"); } slides[slideIndex-1].style.display = \"block\"; dots[slideIndex-1].className += \" active\"; captionText.innerHTML = dots[slideIndex-1].alt; } </script> </body> </html> ทีม่ า: (W3Schools, 1999h: 1)

CHAPTER 9: IMAGE&FONT 445 Previous Next Thumbnail ภาพท่ี 9.4 ภาพแกลเลอร่ี ท่มี า: (ราชวิทย์ ทิพยเ์ สนา, 2560)

446 CHAPTER 9: IMAGE&FONT กล่องแกลเลอร่ภี าพ กล่องแกลเลอร่ีภาพ (Image Lightbox) คือ เทคนิคการแสดงภาพในเว็บเพจจานวนหลาย ภาพ โดยนาภาพทั้งหมดมาแสดงในลักษณะภาพขนาดย่อหรือภาพตัวอย่าง (Thumbnail) จะแสดง ภาพขนาดใหญ่เต็มพน้ื ท่ีหน้าจอเม่ือคลิกทภ่ี าพตัวอยา่ ง สามารถเลื่อนเปลี่ยนภาพได้ และแสดงปุ่มปิด ภาพ เหมาะสาหรับการนาเสนอภาพจานวนมาก และต้องการให้แสดงภาพอยู่ภายในเว็บเพจหน้า เดียว เช่น ภาพกิจกรรม ภาพข่าว เป็นต้น โดยการสรา้ งกล่องแกลเลอร่ภี าพจะใช้งานสไตลช์ ีตร่วมกับ จาวาสครปิ ต์ (JavaScript) มีรายละเอียดขั้นตอนการสรา้ งและการเขียนคาสง่ั ดังนี้ ข้ันตอนท่ี 1 การเตรียมภาพ โดยการออกแบบและตกแต่งภาพตามความเหมาะสม และ กาหนดให้ภาพเดียวกันมี 2 ขนาด ประกอบด้วย ภาพขนาดใหญ่ (1000x500px) และภาพตัวอย่าง (400x200px) ดงั ภาพที่ 9.5 W: 1000px W: 400px H: 500px H: 200px ภาพที่ 9.5 การเตรยี มภาพสาหรบั กลอ่ งแกลเลอรีภ่ าพ ทีม่ า: (ราชวิทย์ ทิพย์เสนา, 2560)

CHAPTER 9: IMAGE&FONT 447 ขั้นตอนท่ี 2 การกาหนดสไตล์ชีต โดยกาหนดคุณสมบัติให้กับกล่องแกลเลอร่ีภาพ ประกอบด้วยคุณสมบัติหลัก คือ การกาหนดตาแหน่งและขนาดภาพ รูปแบบและตาแหน่งของปุ่ม เล่ือนเปลี่ยนภาพ รูปแบบเมาส์เม่ือวางเหนือภาพ คอลัมน์ภาพตัวอย่าง รูปแบบสีเม่ือวางเมาส์เหนือ ภาพตัวอยา่ ง รปู แบบคาอธบิ ายภาพ และปมุ่ ปิดภาพเม่อื แสดงภาพเต็มหน้าจอ มีรายละเอียดดังนี้ CSS3 /* css file: mystyle.css */ * {box-sizing: border-box;} .row > .column {padding: 0 8px;} .row:after { content: \"\"; display: table; clear: both; } .column { float: left; width: 25%; } .modal { display: none; position: fixed; z-index: 1; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: black; } .modal-content { position: relative; background-color: #fefefe; margin: auto; padding: 0; width: 90%; max-width: 1200px; }

448 CHAPTER 9: IMAGE&FONT CSS3 /* css file: mystyle.css cont’d */ .close { color: white; position: absolute; top: 10px; right: 25px; font-size: 35px; font-weight: bold; } .close:hover, .close:focus { color: #999; text-decoration: none; cursor: pointer; } .mySlides { display: none; } .cursor { cursor: pointer; } .prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -50px; color: white; font-weight: bold; font-size: 20px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; -webkit-user-select: none; } .next { right: 0; border-radius: 3px 0 0 3px; } .prev:hover, .next:hover { background-color: rgba(0, 0, 0, 0.8); }

CHAPTER 9: IMAGE&FONT 449 CSS3 /* css file: mystyle.css cont’d */ .numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; } img { margin-bottom: -4px; } .caption-container { text-align: center; background-color: black; padding: 2px 16px; color: white; } .demo { opacity: 0.6; } .active, .demo:hover { opacity: 1; } img.hover-shadow { transition: 0.3s; } .hover-shadow:hover { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } ท่ีมา: (W3Schools, 1999i: 1)

450 CHAPTER 9: IMAGE&FONT ขั้นตอนที่ 3 การกาหนด HTML โดยเรียกใช้งานแท็ก \"meta\" กาหนดแอตทริบิวต์ \"name\" เป็น \"viewport\" เพ่ือให้สามารถแสดงผลเว็บเพจในหน้าจออุปกรณ์ที่มีขนาดแตกต่างกัน เรียกใช้งาน รปู แบบและคุณสมบตั ิที่กาหนดในสไตล์ชีต และกาหนด JavaScript โดยแทรกสครปิ ต์ภายใตอ้ ลิ ิเมนต์ \"<script>…</script>\" ในตาแหน่งถัดจากอิลิเมนต์ท่ีใช้แสดงผลภาพ เพ่ือใช้ควบคุมการแสดงภาพ เมื่อผใู้ ชค้ ลกิ เลอ่ื นภาพหรอื คลกิ ปดิ ภาพ มรี ายละเอยี ดดังน้ี HTML5&JavaScript <!doctype html> <html> <head> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <h1 style=\"text-align:center;\">Image Lightbox</h1> <div class=\"row\"> <div class=\"column\"> <img src=\"cup1thumb.jpg\" style=\"width:100%\" onclick=\"openModal();currentSlide(1)\" class=\"hover-shadow cursor\"> </div> <div class=\"column\"> <img src=\"cup2thumb.jpg\" style=\"width:100%\" onclick=\"openModal();currentSlide(2)\" class=\"hover-shadow cursor\"> </div> <div class=\"column\"> <img src=\"cup3thumb.jpg\" style=\"width:100%\" onclick=\"openModal();currentSlide(3)\" class=\"hover-shadow cursor\"> </div> <div class=\"column\"> <img src=\"cup4thumb.jpg\" style=\"width:100%\" onclick=\"openModal();currentSlide(4)\" class=\"hover-shadow cursor\"> </div> </div> <!-- class: row -->

CHAPTER 9: IMAGE&FONT 451 HTML5&JavaScript <div id=\"myModal\" class=\"modal\"> <span class=\"close cursor\" onclick=\"closeModal()\">&times;</span> <div class=\"modal-content\"> <div class=\"mySlides\"> <div class=\"numbertext\">1 / 4</div> <img src=\"cup1wide.jpg\" style=\"width:100%\"> </div> <div class=\"mySlides\"> <div class=\"numbertext\">2 / 4</div> <img src=\"cup2wide.jpg\" style=\"width:100%\"> </div> <div class=\"mySlides\"> <div class=\"numbertext\">3 / 4</div> <img src=\"cup3wide.jpg\" style=\"width:100%\"> </div> <div class=\"mySlides\"> <div class=\"numbertext\">4 / 4</div> <img src=\"cup4wide.jpg\" style=\"width:100%\"> </div> <a class=\"prev\" onclick=\"plusSlides(-1)\">&#10094;</a> <a class=\"next\" onclick=\"plusSlides(1)\">&#10095;</a> <div class=\"caption-container\"> <p id=\"caption\"></p> </div> <div class=\"column\"> <img class=\"demo cursor\" src=\"cup1wide.jpg\" style=\"width:100%\" onclick=\"currentSlide(1)\" alt=\"Coffee Cup 1\"> </div> <div class=\"column\"> <img class=\"demo cursor\" src=\"cup2wide.jpg\" style=\"width:100%\" onclick=\"currentSlide(2)\" alt=\"Coffee Cup 2\"> </div> <div class=\"column\"> <img class=\"demo cursor\" src=\"cup3wide.jpg\" style=\"width:100%\" onclick=\"currentSlide(3)\" alt=\"Coffee Cup 3\"> </div> <div class=\"column\"> <img class=\"demo cursor\" src=\"cup4wide.jpg\" style=\"width:100%\" onclick=\"currentSlide(4)\" alt=\"Coffee Cup 4\"> </div> </div> <!-- class=\"modal-content\"--> </div> <!-- class: modal -->

452 CHAPTER 9: IMAGE&FONT HTML5&JavaScript <!-- JavaScript --> <script> function openModal() { document.getElementById('myModal').style.display = \"block\"; } function closeModal() { document.getElementById('myModal').style.display = \"none\"; } var slideIndex = 1; showSlides(slideIndex); function plusSlides(n) { showSlides(slideIndex += n); } function currentSlide(n) { showSlides(slideIndex = n); } function showSlides(n) { var i; var slides = document.getElementsByClassName(\"mySlides\"); var dots = document.getElementsByClassName(\"demo\"); var captionText = document.getElementById(\"caption\"); if (n > slides.length) {slideIndex = 1} if (n < 1) {slideIndex = slides.length} for (i = 0; i < slides.length; i++) { slides[i].style.display = \"none\"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(\" active\", \"\"); } slides[slideIndex-1].style.display = \"block\"; dots[slideIndex-1].className += \" active\"; captionText.innerHTML = dots[slideIndex-1].alt; } </script> </body> </html> ทม่ี า: (W3Schools, 1999i: 1)

CHAPTER 9: IMAGE&FONT 453 คลกิ ภาพ แสดงภาพเตม็ หนา้ จอและสามารถเลือ่ นภาพได้ ภาพที่ 9.6 กลอ่ งแกลเลอรภ่ี าพ ที่มา: (ราชวิทย์ ทพิ ย์เสนา, 2560)

454 CHAPTER 9: IMAGE&FONT การขยายภาพ การขยายภาพ (Image Zoom) คือ เทคนิคการแสดงภาพ โดยการขยายขนาดภาพใน ตาแหน่งที่ต้องการโดยใช้วิธีวางเมาส์เหนือภาพ โดยการสร้างภาพให้สามารถขยายได้ จะใช้งาน สไตล์ชีตร่วมกับจาวาสคริปต์ (JavaScript) เรียกใช้งานผ่านเว็บเพจ มีรายละเอียดข้ันตอนการสร้าง และการเขียนคาสงั่ ดังน้ี ขั้นตอนที่ 1 การกาหนดสไตล์ชีต โดยกาหนดคุณสมบัติให้กับการขยายภาพ ประกอบด้วย คุณสมบัติหลัก คือ การกาหนดตาแหน่งและขนาดเม่ือขยายภาพ และกาหนดขนาดพ้ืนท่ีแสดงผล มี รายละเอยี ดดังนี้ CSS3 /* css file: mystyle.css */ * {box-sizing: border-box;} .img-zoom-container { position: relative; } .img-zoom-lens { position: absolute; border: 1px solid #d4d4d4; width: 50px; height: 50px; } .img-zoom-result { border: 1px solid #d4d4d4; width: 300px; height: 260px; } ที่มา: (W3Schools, 1999j: 1) ขั้นตอนที่ 2 การกาหนด HTML โดยเรียกใช้งานแท็ก \"meta\" กาหนดแอตทริบิวต์ \"name\" เป็น \"viewport\" เพื่อให้สามารถแสดงผลเว็บเพจในหน้าจออุปกรณ์ท่ีมีขนาดแตกต่างกัน เรียกใช้งาน รูปแบบและคณุ สมบตั ิท่ีกาหนดในสไตลช์ ตี และกาหนด JavaScript โดยแทรกสคริปตภ์ ายใต้อลิ ิเมนต์ \"<script>…</script>\" และกาหนดใหส้ คริปต์ท้ังหมดอยู่ภายใต้อิลิเมนต์ \"<head>…</head>\" เพ่ือ ใชค้ วบคุมการขยายภาพเมือ่ ผู้ใช้วางเมาส์เหนือภาพ มรี ายละเอยี ดดงั นี้

CHAPTER 9: IMAGE&FONT 455 HTML5&JavaScript <!doctype html> <html> <head> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> <script> function imageZoom(imgID, resultID) { var img, lens, result, cx, cy; img = document.getElementById(imgID); result = document.getElementById(resultID); lens = document.createElement(\"DIV\"); lens.setAttribute(\"class\", \"img-zoom-lens\"); img.parentElement.insertBefore(lens, img); cx = result.offsetWidth / lens.offsetWidth; cy = result.offsetHeight / lens.offsetHeight; result.style.backgroundImage = \"url('\" + img.src + \"')\"; result.style.backgroundSize = (img.width * cx) + \"px \" + (img.height * cy) + \"px\"; lens.addEventListener(\"mousemove\", moveLens); img.addEventListener(\"mousemove\", moveLens); lens.addEventListener(\"touchmove\", moveLens); img.addEventListener(\"touchmove\", moveLens); function moveLens(e) { var pos, x, y; e.preventDefault(); pos = getCursorPos(e); x = pos.x - (lens.offsetWidth / 2); y = pos.y - (lens.offsetHeight / 2); if (x > img.width - lens.offsetWidth) {x = img.width - lens.offsetWidth;} if (x < 0) {x = 0;} if (y > img.height - lens.offsetHeight) {y = img.height - lens.offsetHeight;} if (y < 0) {y = 0;} lens.style.left = x + \"px\"; lens.style.top = y + \"px\"; result.style.backgroundPosition = \"-\" + (x * cx) + \"px -\" + (y * cy) + \"px\"; } function getCursorPos(e) { var a, x = 0, y = 0; e = e || window.event; a = img.getBoundingClientRect(); x = e.pageX - a.left; y = e.pageY - a.top; x = x - window.pageXOffset; y = y - window.pageYOffset; return {x : x, y : y}; } } </script> </head>

456 CHAPTER 9: IMAGE&FONT HTML5&JavaScript <!-- cont’d --> <body> <h1>Image Zoom</h1> <div class=\"img-zoom-container\"> <img id=\"myimage\" src=\"images/flowerbug.jpg\" width=\"600\" height=\"340\"> <div id=\"myresult\" class=\"img-zoom-result\"></div> </div> <script>imageZoom(\"myimage\", \"myresult\");</script> </body> </html> ที่มา: (W3Schools, 1999j: 1) วางเมาส์เหนือตาแหน่งทต่ี ้องการขยาย ภาพที่ 9.7 การขยายภาพ ทมี่ า: (ราชวิทย์ ทพิ ย์เสนา, 2560)

CHAPTER 9: IMAGE&FONT 457 การแสดงภาพทบั เนือ้ หาหลัก การแสดงภาพทับเนื้อหาหลัก (Image Modal) คือ เทคนิคการแสดงภาพทับเนื้อหาหลักใน เว็บเพจ โดยคลิกที่ภาพขนาดย่อหรือภาพตัวอย่าง จากน้ันภาพจะแสดงเต็มพ้ืนท่ีหน้าจอ ในลักษณะ ของ POPUP เพ่ือให้ผู้ใช้สามารถดูภาพขนาดใหญ่ได้ สามารถแสดงข้อความบรรยายใต้ภาพ โดยใช้ ข้อความจากแอตทริบิวต์ \"alt\" ในอิลิเมนต์ \"<img>\" และแสดงปุ่มปิดภาพขนาดใหญ่ ซ่ึงไม่สามารถ เลื่อนเปลี่ยนภาพได้ โดยการแสดงภาพทับเน้ือหาหลัก จะใช้งานสไตล์ชีตร่วมกับจาวาสคริปต์ (JavaScript) มีรายละเอยี ดขัน้ ตอนการสรา้ งและการเขยี นคาสง่ั ดังนี้ ข้ันตอนที่ 1 การกาหนดสไตล์ชีต โดยการกาหนดคุณสมบัติให้กับการแสดงภาพทับเนื้อหา หลัก ประกอบด้วยคุณสมบัติหลัก คือ การกาหนดรูปแบบเมาส์เมื่อวางเมาส์เหนือภาพ รูปแบบความ โค้งของมุมภาพ รูปแบบสีพื้นหลังภาพเม่ือขยายภาพ รูปแบบคาอธิบายภาพ รูปแบบการเคล่ือนไหว ภาพ รปู แบบปุ่มปิดภาพ และกาหนดให้ภาพสามารถแสดงผลได้กบั อปุ กรณท์ ี่มีขนาดหน้าจอตา่ งกัน มี รายละเอยี ดดงั นี้ CSS3 /* css file: mystyle.css */ #myImg { border-radius: 5px; cursor: pointer; transition: 0.3s; } #myImg:hover {opacity: 0.7;} .modal { display: none; position: fixed; z-index: 1; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.9); } .modal-content { margin: auto; display: block; width: 80%; max-width: 700px; }

458 CHAPTER 9: IMAGE&FONT CSS3 /* css file: mystyle.css cont’d*/ #caption { margin: auto; display: block; width: 80%; max-width: 700px; text-align: center; color: #ccc; padding: 10px 0; height: 150px; } .modal-content, #caption { animation-name: zoom; animation-duration: 0.6s; } @keyframes zoom { from {transform:scale(0)} to {transform:scale(1)} } .close { position: absolute; top: 15px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; transition: 0.3s; } .close:hover, .close:focus { color: #bbb; text-decoration: none; cursor: pointer; } @media only screen and (max-width: 700px){ .modal-content { width: 100%; } } ที่มา: (W3Schools, 1999k: 1)

CHAPTER 9: IMAGE&FONT 459 ข้ันตอนท่ี 2 การกาหนด HTML โดยเรียกใช้งานแท็ก \"meta\" กาหนดแอตทริบิวต์ \"name\" เป็น \"viewport\" เพื่อให้สามารถแสดงผลเวบ็ เพจในหน้าจออุปกรณ์ที่มีขนาดแตกต่างกัน เรียกใช้งาน รปู แบบและคุณสมบัตทิ ี่กาหนดในสไตลช์ ตี และกาหนด JavaScript โดยแทรกสคริปต์ภายใต้อิลิเมนต์ \"<script>…</script>\" ในตาแหน่งถัดจากอิลิเมนต์ท่ีใช้แสดงผลภาพ เพ่ือใช้ควบคุมการแสดงภาพ เมอื่ ผใู้ ชค้ ลกิ แสดงภาพหรอื คลิกปดิ ภาพ มรี ายละเอยี ดดงั น้ี HTML5&JavaScript <!doctype html> <html> <head> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <h1>Image Modal</h1> <p>Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</p> <img id=\"myImg\" src=\"images/flower.jpg\" alt=\"White Flower\" style=\"width:100%; max- width:300px;\"> <!-- Modal --> <div id=\"myModal\" class=\"modal\"> <span class=\"close\">&times;</span> <img class=\"modal-content\" id=\"img01\"> <div id=\"caption\"></div> </div> <script> var modal = document.getElementById('myModal'); var img = document.getElementById('myImg'); var modalImg = document.getElementById(\"img01\"); var captionText = document.getElementById(\"caption\"); img.onclick = function(){ modal.style.display = \"block\"; modalImg.src = this.src; captionText.innerHTML = this.alt; } var span = document.getElementsByClassName(\"close\")[0]; span.onclick = function() { modal.style.display = \"none\"; } </script> </body> </html> ทีม่ า: (W3Schools, 1999k: 1)

460 CHAPTER 9: IMAGE&FONT คลิกเมาส์บนภาพ ปุม่ ปดิ ภาพเมือ่ แสดงภาพขนาดใหญ่ ภาพท่ี 9.8 การแสดงภาพทบั เน้ือหาหลกั ท่มี า: (ราชวิทย์ ทพิ ยเ์ สนา, 2560)

CHAPTER 9: IMAGE&FONT 461 ตัวกรองภาพ ตัวกรองภาพ (Image Filter) คือ เทคนิคการสร้างเอฟเฟ็กต์ให้กับภาพด้วยสไตล์ชีต ซึ่ง โดยทั่วไปจะต้องอาศัยเครื่องมือในโปรแกรมตกแต่งภาพ เช่น การปรับแสง ปรับสี ปรับความคมชัด การสร้างเงาขอบภาพ เป็นต้น ผู้พัฒนาสามารถกาหนดด้วยสไตล์ชีต โดยการประกาศคุณสมบัติ \"filter\" กาหนดเอฟเฟ็กต์ให้กับภาพโดยการกาหนดค่าให้กับคุณสมบัติ จึงช่วยลดระยะเวลาในการ ตกแต่งภาพ และยังเป็นการรักษาภาพต้นฉบับไม่ให้เกิดการตกแต่งหรือแก้ไข นอกจากนี้ การใช้ตัว กรองภาพยังช่วยลดการใช้พืน้ ท่ีจัดเกบ็ ข้อมูล เนื่องจากภาพ 1 ภาพ สามารถนาไปใช้งานกับเอฟเฟ็กต์ ต่าง ๆ ได้ โดยที่ไมต่ อ้ งสรา้ งเป็นไฟล์ภาพใหม่ มรี ปู แบบการกาหนดค่าดังตารางท่ี 9.1 ตารางท่ี 9.1 การกาหนดคา่ ใหก้ บั คณุ สมบัติ Filter Filter Descriptions none ไม่มกี ารกาหนดเอฟเฟก็ ต์ blur(px) เอฟเฟ็กต์สาหรบั เบลอภาพ โดยกาหนดคา่ เป็นพิกเซล ระดับความเบลอ ข้ึนอยู่ กบั การกาหนดคา่ พิกเซล brightness(%) การปรบั ความสวา่ งของภาพ โดยกาหนดคา่ เปน็ รอ้ ยละ ใช้ค่าเร่ิมต้นเป็น 100% หากกาหนดค่าน้อยกว่า จะส่งผลให้ภาพมดื ลง และหากกาหนดค่ามากกว่า จะ ส่งผลให้ภาพสวา่ งข้นึ contrast(%) การปรับความคมชัดของภาพ โดยกาหนดค่าเป็นร้อยละ ใช้ค่าเร่ิมต้นเป็น 100% หากกาหนดค่าน้อยกว่า จะส่งผลให้ความคมชัดลดลง และหาก กาหนดค่ามากกว่า จะสง่ ผลใหค้ วามคมชัดเพม่ิ ขึน้ drop-shadow(h-shadow เอฟเฟ็กต์สาหรับสร้างเงาให้กับภาพ โดยกาหนดค่าเป็นพิกเซล สาหรับเงา v-shadow blur spread แนวนอน (h) และเงาแนวตงั้ (v) กาหนดระดับความเบลอของเงา และกาหนดสี color) ของเงา เชน่ drop-shadow(8px 8px 10px gray) เป็นตน้ grayscale(%) แปลงภาพให้เป็นโทนสีเทา โดยกาหนดค่าเป็นร้อยละ หากกาหนดเป็น 100% ภาพจะอยูใ่ นโทนสีเทาในระดับ 100% hue-rotate(deg) เอฟเฟ็กต์สาหรับหมุนเฉดสีบนภาพ โดยกาหนดค่าเป็นองศารอบวงกลมภาพ ค่าสงู สดุ ที่สามารถกาหนดได้ คอื 360deg invert(%) เอฟเฟ็กต์สาหรับปรับค่าสีตรงข้ามในภาพ โดยกาหนดค่าเป็นร้อยละ หาก กาหนดเปน็ 100% สขี องภาพจะตรงข้ามในระดบั 100% opacity(%) การปรับความทึบแสงของภาพ โดยกาหนดค่าเป็นร้อยละ ใช้ค่าเริ่มต้นเป็น 100% หากกาหนดคา่ น้อยกว่า จะส่งผลให้ภาพแสดงความโปร่งใสตามระดับท่ี กาหนด และหากกาหนดคา่ เปน็ 0% ภาพจะโปร่งใสอย่างสมบูรณ์ saturate(%) การปรับความอิ่มตัวของภาพ โดยกาหนดค่าเป็นร้อยละ ใช้ค่าเร่ิมต้นเป็น 100% หากกาหนดค่าน้อยกว่า จะส่งผลให้ภาพลดระดับความอิ่มตัว และหาก กาหนดคา่ มากกว่า จะส่งผลใหภ้ าพเพิ่มระดับความอ่ิมตวั

462 CHAPTER 9: IMAGE&FONT Filter Descriptions sepia(%) แปลงภาพให้เป็นโทนสีซีเปียหรือโทนสีน้าตาล โดยกาหนดค่าเป็นร้อยละ หาก กาหนดเปน็ 100% ภาพจะอย่ใู นโทนสซี ีเปยี ในระดับ 100% ทีม่ า: (W3Schools, 1999l: 1) CSS3 /* css file: mystyle.css */ .none { filter: none; } .blur { filter: blur(5px); } .brightness { filter: brightness(150%); } .contrast { filter: contrast(150%); } .dropshadow { filter: drop-shadow(10px 10px 10px gray); } .grayscale{ filter: grayscale(100%); } .hue_rotate { filter: hue-rotate(80deg); } .invert { filter: invert(100%); } .opacity { filter: opacity(35%); } .saturate { filter: saturate(40%); } .sepia { filter: sepia(80%); } .cont_bright { filter: contrast(150%) brightness(120%); } img { margin: 6px; }

CHAPTER 9: IMAGE&FONT 463 HTML5 <!doctype html> <html> <head> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <h1>Image Filter</h1> <img src=\"images/flower.jpg\" width=\"300\" height=\"200\" class=\"none\"> <img src=\"images/flower.jpg\" width=\"300\" height=\"200\" class=\"blur\"> <img src=\"images/flower.jpg\" width=\"300\" height=\"200\" class=\"brightness\"> <img src=\"images/flower.jpg\" width=\"300\" height=\"200\" class=\"contrast\"> <img src=\"images/flower.jpg\" width=\"300\" height=\"200\" class=\"dropshadow\"> <img src=\"images/flower.jpg\" width=\"300\" height=\"200\" class=\"grayscale\"> <img src=\"images/flower.jpg\" width=\"300\" height=\"200\" class=\"hue_rotate\"> <img src=\"images/flower.jpg\" width=\"300\" height=\"200\" class=\"invert\"> <img src=\"images/flower.jpg\" width=\"300\" height=\"200\" class=\"opacity\"> <img src=\"images/flower.jpg\" width=\"300\" height=\"200\" class=\"saturate\"> <img src=\"images/flower.jpg\" width=\"300\" height=\"200\" class=\"sepia\"> <img src=\"images/flower.jpg\" width=\"300\" height=\"200\" class=\"cont_bright\"> </body> </html> ภาพท่ี 9.9 การใชง้ านตวั กรองภาพ ทีม่ า: (ราชวทิ ย์ ทพิ ยเ์ สนา, 2560)

464 CHAPTER 9: IMAGE&FONT การกาหนดแบบอกั ษร การกาหนดแบบอักษรหรือฟอนต์ (Font) สาหรับใช้แสดงข้อความในเว็บเพจ โดยเป็นแบบ อักษรที่ต้องการใช้งานเป็นพิเศษ นอกเหนือจากแบบอักษรทั่วไปหรือแบบอักษรท่ีโปรแกรมแสดงผล เว็บสนบั สนนุ ซง่ึ จะช่วยให้ข้อความในเวบ็ เพจอยูใ่ นลักษณะทตี่ ้องการ เปน็ เอกลกั ษณ์ มีความแตกต่าง จากเว็บไซต์อ่ืน และมคี วามน่าสนใจมากยงิ่ ขน้ึ ซง่ึ ผูพ้ ัฒนาจะตอ้ งเตรยี มไฟลแ์ บบอักษรหรือไฟล์ฟอนต์ และจัดเก็บไวใ้ นโฟลเดอร์จดั เก็บไฟล์เวบ็ ไซต์ การกาหนดแบบอักษร โดยการประกาศคุณสมบัติในสไตล์ชีต โดยใช้คาส่ัง \"@font-face{…}\" จากน้ันกาหนดช่ือตระกูลแบบอักษรด้วยคุณสมบัติ \"font-family\" โดยสามารถกาหนดช่ือข้ึนเองได้ และอ้างอิงตาแหน่งจัดเก็บแบบอักษรด้วยคุณสมบัติ \"src\" โดยแบบอักษรท่ีสามารถแสดงผลได้ใน โปรแกรมแสดงผลเว็บทั่วไป ประกอบด้วย TrueType Fonts (.ttf) OpenType Fonts (.otf) และ The Web Open Font Format (.woff) สามารถกาหนดคุณสมบัติเพ่ิมเติมให้กับข้อความได้ เช่น กาหนดน้าหนัก \"font-weight\" หรอื กาหนดรปู แบบ \"font-style\" เป็นตน้ มีตัวอยา่ งการใชง้ าน ดังนี้ CSS3 /* css file: mystyle.css */ @font-face { font-family: ThaiFontNiramit; src: url(THNiramitAS.tiff); } @font-face { font-family: ThaiFontNiramit; src: url(THNiramitASBold.ttf); font-weight: bold; } @font-face { font-family: ThaiFontSrisakdi; src: url(THSrisakdi.tiff); } @font-face { font-family: ThaiFontSrisakdi; src: url(THSrisakdiBold.ttf); font-weight: bold; } /* using for elements */ h1, p { font-family: ThaiFontNiramit; text-align: justify; } div { font-family: ThaiFontSrisakdi; text-align: justify; }

CHAPTER 9: IMAGE&FONT 465 HTML5 <!doctype html> <html> <head> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <h1>สารสนเทศศาสตร์</h1> <p>สารสนเทศ เป็นทรัพยากรที่มีค่าและมีความสาคัญต่อมนุษย์ <b>เป็นรากฐานสาคัญและจาเป็นสาหรับ ความก้าวหน้าทางอารยธรรม สังคม และ เศรษฐกิจ</b> โดยเฉพาะอย่างย่ิงในการพัฒนาทรัพยากรบุคคล บุคคลทุก ระดับต้องได้รับการเสริมสร้างความรู้และใช้สารสนเทศในการดารงชีวิต ใช้ในการแก้ปัญหา การตัดสินใจ ตลอดจนการ ทางาน</p> <div>สารสนเทศ เป็นทรัพยากรที่มีค่าและมีความสาคัญต่อมนุษย์ เป็นรากฐานสาคัญและจาเป็นสาหรับ ความก้าวหน้าทางอารยธรรม สังคม และ เศรษฐกิจ โดยเฉพาะอย่างยิ่งในการพัฒนาทรัพยากรบุคคล บุคคลทุกระดับ ต้องไดร้ บั การเสรมิ สร้างความรู้และใช้สารสนเทศในการดารงชีวิต ใช้ในการแก้ปัญหา การตดั สินใจ ตลอดจนการทางาน </div> <div>Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</div> </body> </html> ภาพที่ 9.10 การใชง้ าน Webfonts ทม่ี า: (ราชวิทย์ ทิพยเ์ สนา, 2560)

466 CHAPTER 9: IMAGE&FONT หากผู้พัฒนาต้องการแปลงไฟล์แบบอักษรที่มีอยู่ ให้เป็นไฟล์แบบอักษรประเภทอ่ืน ๆ ท่ี สามารถใชง้ านกับเวบ็ เพจได้ ผู้พฒั นาสามารถใช้งานเว็บไซต์ท่ีให้บริการแปลงไฟล์แบบอักษร โดยการ ค้นหาเว็บไซต์ประเภท Web Font Genertor เช่น www.web-font-generator.com เป็นต้น จากน้ันทาการอัพโหลดไฟล์แบบอักษร แล้วคลิกเมนู Generate Web Font เว็บไซต์จะประมวลผล แปลงเป็นไฟล์แบบอักษรประเภทต่าง ๆ และสร้างไฟล์สไตล์ชีตที่ใช้งานคาสั่ง \"@font-face\" ให้ อตั โนมตั ิ ผพู้ ัฒนาสามารถดาวน์โหลดไฟลม์ าใชง้ านไดท้ ันที ดงั ภาพท่ี 9.11 อัพโหลดไฟลแ์ บบอักษร คลิกเมนู Generate web font คลกิ เมนู Download Package ภาพท่ี 9.11 เว็บไซต์ Web Font Genertor ที่มา: (WebFontGenerator, n.d.: 1)

CHAPTER 9: IMAGE&FONT 467 หลังจากการดาวน์โหลดไฟล์ Package จากเว็บไซต์ www.web-font-generator.com ผู้พัฒนาจะได้ไฟล์แบบอักษรประเภทต่าง ๆ และไฟล์สไตล์ชีตสาหรับนาไปใช้งานได้ทันที ดังภาพท่ี 9.12 ภาพท่ี 9.12 ไฟล์แบบอกั ษรและไฟล์สไตล์ชตี ทมี่ า: (ราชวิทย์ ทิพย์เสนา, 2560) สรปุ ภาพและข้อความ ถือเป็นเน้ือหาหลักท่ีมีความสาคัญต่อเว็บไซต์ หากภาพและข้อความขาด ความน่าสนใจหรือจัดรูปแบบอย่างไม่เหมาะสม อาจส่งผลต่อการเข้าชมเว็บไซต์ของผู้ใช้งาน ดังนั้น การนาเทคนิคการแสดงผลภาพและตัวอักษรมาใช้งาน จึงเป็นองค์ประกอบท่ีจะช่วยสร้างความ น่าสนใจให้กับเว็บไซต์ได้เป็นอย่างดี โดยจะต้องเลือกรูปแบบที่เหมาะสมกับเนื้อหาท่ีต้องการนาเสนอ และจะตอ้ งไม่ใช้ในปริมาณมากจนเกินไป เนอื่ งจากอาจสง่ ผลต่อความเรว็ ในการแสดงผลเว็บไซต์ โดย ผู้พัฒนาสามารถปรับแต่งคาสั่งหรือองค์ประกอบต่าง ๆ หรือกาหนดคุณสมบัติเพิ่มเติม เพื่อจัด ตาแหน่งให้เหมาะสมกับเนื้อหาในเว็บเพจ ทั้งน้ี หากผู้พัฒนาไม่มีพ้ืนฐานการเขียนคาส่ังควบคุมการ แสดงรูปแบบต่าง ๆ หรือต้องการใช้งานเทคนิคแบบเร่งด่วน ผู้พัฒนาสามารถค้นหาและดาวน์โหลด คาสงั่ ไดจ้ ากเวบ็ ไซต์ต่าง ๆ ซงึ่ มีทง้ั เสียค่าใช้จ่ายและไมเ่ สยี ค่าใชจ้ า่ ย

468 CHAPTER 9: IMAGE&FONT

เอกสารอา้ งอิง ราชวทิ ย์ ทพิ ย์เสนา. (2560). การสร้างสรรคภ์ าพประกอบตาราวชิ าการ. [ไฟล์คอมพิวเตอร์]. อุดรธานี: สาขาวชิ าสารสนเทศศาสตร์ มหาวิทยาลัยราชภัฏอุดรธานี. W3Schools. (1999g). How TO - Slideshow. Retrieved January 23, 2016, from https://www.w3schools.com/howto/howto_js_slideshow.asp. _______. (1999h). How TO - Slideshow Gallery. Retrieved January 28, 2016, from https://www.w3schools.com/howto/howto_js_slideshow_gallery.asp. _______. (1999i). How TO - Lightbox. Retrieved January 28, 2016, from https://www.w3schools.com/howto/howto_js_lightbox.asp. _______. (1999j). How TO - Image Zoom. Retrieved January 28, 2016, from https://www.w3schools.com/howto/howto_js_image_zoom.asp _______. (1999k). How TO - Modal Images. Retrieved January 28, 2016, from https://www.w3schools.com/howto/howto_css_modal_images.asp. _______. (1999l). How TO - Add Image Effects. Retrieved January 30, 2016, from https://www.w3schools.com/howto/howto_css_image_effects.asp WebFontGenerator. (n.d.). Web Font Generator. Retrieved January 23, 2017, from https://www.web-font-generator.com.



บทท่ี 10 ฟอรม์ และการตรวจสอบฟอร์ม การเก็บข้อมูลผ่านเว็บเพจด้วยฟอร์ม (Form) เป็นการสร้างปฏิสัมพันธ์ (Interactive) หรือ การโต้ตอบระหว่างผู้ใช้งานกับเว็บไซต์ โดยผู้ใช้จะเป็นผู้นาเข้าข้อมูลหรือป้อนข้อมูลต่าง ๆ ผ่าน แบบฟอร์มท่ีผู้พัฒนาเว็บไซต์ได้ออกแบบไว้ เพ่ือนาข้อมูลไปใช้ในการประมวลผลหรือจัดเก็บลง ฐานข้อมูล เช่น การลงทะเบียนสมาชิก การตอบแบบสอบถาม การทาแบบทดสอบ การแสดงความ คิดเห็น หรือการลงช่ือเข้าใช้งานระบบ เป็นต้น ซึ่งการสร้างแบบฟอร์มสาหรับใช้งานในเว็บเพจ ต้อง อาศัยคาส่ังทางด้านการสร้างฟอร์มเพ่ือให้สามารถนาเข้าข้อมูลในรูปแบบของข้อความหรือไฟล์ เอกสารรูปแบบต่าง ๆ และใช้งานภาษาสคริปต์ เชน่ PHP หรือ ASP เปน็ ต้น ซงึ่ จะเปน็ คาสงั่ สาหรับส่ง ข้อมูลไปยังเว็บเซิร์ฟเวอร์ แล้วจึงนาข้อมูลไปประมวลผลและใช้ประโยชน์ตามที่ต้องการ โดยในบทน้ี จะนาเสนอเน้ือหาเกี่ยวกับการสร้างฟอร์มและความสามารถของฟอร์มรูปแบบต่าง ๆ ในรูปแบบของ HTML5 การตรวจสอบความถูกต้องของข้อมูลที่ป้อนลงในฟอร์มด้วย JavaScript และการปรับแต่ง ฟอร์มด้วย Style Sheet (ดวงพร เกยี๋ งคา, 2560: 170-171) ภาพท่ี 10.1 แบบฟอร์มในเว็บเพจ ทีม่ า: (ราชวทิ ย์ ทพิ ย์เสนา, 2560)

472 CHAPTER 10: FORM&FORM VALIDATION ฟอร์มอลิ ิเมนต์ คาส่ังสาหรับสร้างฟอร์ม (Form) โดยใช้อิลิเมนต์ \"<form>...</form>\" เป็นอิลิเมนต์หลัก สาหรับการสร้างฟอร์ม และจะมีอิลิเมนต์ประเภทของฟอร์มอยู่ภายใต้อิลิเมนต์ \"form\" มีรูปแบบการ ใชง้ านดงั น้ี Syntax <form name=\"\" method=\"\" action=\"\" enctype=\"\"> . form elements . </form> Example <form name=\"register\" method=\"post\" action=\"reg.php\" enctype=\"multipart/form-data\"> <input type=\"text\" name=\"fname\" size=\"20\" maxlength=\"50\" placeholder=\"First Name\"> <input type=\"text\" name=\"lname\" size=\"20\" maxlength=\"50\" placeholder=\"Last Name\"> <label><input type=\"checkbox\" name=\"food\" id=\"food1\" value=\"omelet\">Omelet</label> <label><input type=\"checkbox\" name=\"food\" id=\"food2\" value=\"soup\">Soup</label> <input type=\"submit\" name=\"submitForm\" value=\"Confirm\"> </form> การใช้งานแท็ก Form จะต้องใช้งานร่วมกับแอตทริบิวต์ต่าง ๆ เพื่อให้การทางานของฟอร์ม มปี ระสทิ ธิภาพ โดยแอตทริบิวตท์ สี่ าคญั มดี ังตารางที่ 10.1 ตารางท่ี 10.1 แอตทรบิ วิ ต์ที่ใช้สาหรบั Form Attribute Value Description name text ชือ่ ของฟอร์ม method post การสง่ ตัวแปรหรือขอ้ มูลในฟอรม์ ไปยงั สครปิ ต์โดยตรง get การส่งตัวแปรหรือข้อมูลในฟอร์มไปยังสคริปต์พร้อมกับ URL โดย ข้อมูลท่ีสง่ จะต่อทา้ ย URL action URL ตาแหนง่ ปลายทางทจ่ี ะให้ฟอร์มส่งขอ้ มลู ไป enctype application/x-www- อักขระจะถูกเข้ารหัสก่อนส่งผ่านฟอร์มให้อยู่ในรูปแบบของรหัส form-urlencoded ASCII ฐาน 16 และเวน้ วรรคจะแปลงเป็นสัญลกั ษณ์ \"+\" multipart/form-data ฟอร์มสามารถส่งข้อความพร้อมกับไฟล์เอกสารได้ โดยจะไม่มีการ เขา้ รหัสอกั ขระ text/plain ไมม่ กี ารเขา้ รหัสอักขระ และเว้นวรรคจะแปลงเป็นสญั ลกั ษณ์ \"+\"

CHAPTER 10: FORM&FORM VALIDATION 473 ประเภทของฟอร์ม การสร้างฟอร์มเพื่อการจัดเก็บข้อมูลจากผู้ใช้ผ่านเว็บเพจ ฟอร์มสามารถจัดเก็บข้อมูลได้ หลายรูปแบบ ไมว่ า่ จะเปน็ ข้อความ ตวั เลข หรอื ไฟล์ข้อมูล ซึ่งผ้พู ัฒนาควรเลอื กประเภทของฟอร์มให้ ตรงกับข้อมูลท่ีต้องการจัดเก็บ เพ่ือให้สามารถบันทึกข้อมูลได้อย่างถูกต้อง และนาไปใช้ประโยชน์ได้ ตรงตามความต้องการ โดยแบ่งประเภทของฟอร์มออกเป็น 6 ประเภท โดยแต่ละประเภทจะอยู่ ภายใต้อิลเิ มนต์ \"<form>…</form>\" มรี ายละเอยี ดดังนี้ 1. Input คาสั่งสาหรับการนาเข้าข้อมูลด้วยอิลิเมนต์ \"<input>\" สามารถกาหนดวธิ ีการนาเข้าข้อมูล ได้หลายวิธีการ ข้นึ อยูก่ ับลักษณะของข้อมลู ที่ต้องการ เช่น ใหผ้ ู้ใช้กรอกขอ้ มูลด้วยตนเอง ให้ผูใ้ ช้เลือก จากตวั เลอื ก หรือให้ผใู้ ช้อพั โหลดไฟล์ขอ้ มลู เป็นตน้ มีรายละเอยี ดของคาส่งั ดงั น้ี 1.1 Text Input Field ฟิลด์หรือช่องสาหรับป้อนข้อความ โดยเป็นข้อความบรรทัดเดียว นิยมใช้เพ่ือเก็บข้อมูลที่เป็นข้อความสั้น เช่น ช่ือ นามสกุล อายุ อาชีพ หมายเลขโทรศัพท์ เป็นต้น มี รูปแบบการใช้งานดังน้ี Syntax <input type=\"text\" name=\"fname\" id=\"textField\" size=\"30\" maxlength=\"50\" placeholder=\"First Name\"> Result ตารางที่ 10.2 แอตทรบิ วิ ตท์ ่ีใช้สาหรบั Text Input Field Attribute Value Description type text ประเภทของฟิลด์ name text ช่ือของฟลิ ด์ id text รหัสของฟิลด์ ใช้สาหรบั อา้ งอิงไปยงั สว่ นอ่นื ๆ size number ขนาดความกวา้ งของฟลิ ด์ maxlength number จานวนตัวอกั ษรท่สี ามารถพิมพ์ได้สูงสุด placeholder text คาอธบิ ายท่ีใชแ้ สดงในฟิลด์ 1.2 Password Field ฟลิ ดห์ รอื ชอ่ งสาหรบั ป้อนรหัสผ่าน ใช้สาหรบั การป้อนรหัสผ่านเพื่อ เขา้ ส่รู ะบบ ป้อนรหัสผ่านเพื่อลงทะเบียนสมาชิก หรอื ป้อนข้อความทีต่ ้องการปิดบงั เมื่อป้อนข้อมูลลง ในฟิลด์ ฟิลดจ์ ะไมแ่ สดงอักขระที่ป้อน ซง่ึ จะปิดบงั อักขระดว้ ยเครื่องหมายจดุ () มีรปู แบบการใช้งาน ดงั น้ี

474 CHAPTER 10: FORM&FORM VALIDATION Syntax <input type=\"password\" name=\"passLogin\" id=\"passField\" size=\"30\" placeholder=\"Passowrd\"> Result ตารางที่ 10.3 แอตทรบิ ิวต์ที่ใชส้ าหรับ Password Field Attribute Value Description type password ประเภทของฟลิ ด์ name text ชื่อของฟิลด์ id text รหัสของฟิลด์ ใชส้ าหรบั อา้ งอิงไปยังส่วนอื่น ๆ size number ขนาดความกว้างของฟลิ ด์ placeholder text คาอธบิ ายท่ีใช้แสดงในฟลิ ด์ 1.3 Radio Button ปุ่มสาหรับคลิกเลือกข้อมูล ใช้สาหรับการคลิกเลือกตัวเลือกในกลุ่ม ข้อมูลชุดเดียวกัน โดยสามารถเลือกได้เพียง 1 ตัวเลือกเท่านั้น เช่น การเลือกข้อมูลเพศชายหรือเพศ หญิง สามารถเลือกได้เพียงตัวเลือกเดียว ซ่ึงจะต้องกาหนดค่าของแอตทริบิวต์ \"name\" ให้เป็นชื่อ เดียวกนั ทง้ั 2 ตัวเลอื ก จึงจะถือเป็นข้อมูลชุดเดียวกัน เป็นตน้ มรี ูปแบบการใชง้ านดังน้ี Syntax <input type=\"radio\" name=\"gender\" id=\"gender1\" value=\"male\" checked> Male <input type=\"radio\" name=\"gender\" id=\"gender2\" value=\"female\"> Female Result ตารางท่ี 10.4 แอตทริบวิ ต์ที่ใชส้ าหรบั Radio Button Attribute Value Description type radio ประเภทของฟลิ ด์ name text ชือ่ ของฟิลด์ id text รหัสของฟิลด์ ใช้สาหรบั อ้างอิงไปยงั สว่ นอน่ื ๆ value number, text กาหนดค่าของตัวเลือก checked checked กาหนดให้มีการเลือกตัวเลอื กล่วงหนา้

CHAPTER 10: FORM&FORM VALIDATION 475 1.4 Checkbox ปุ่มสาหรบั คลิกเลือกข้อมูล ใชส้ าหรบั การคลิกเลือกตวั เลือกในกลุ่มข้อมูล ชุดเดียวกัน โดยสามารถเลือกได้หลายตัวเลือก เช่น การเลือกข้อมูลอาหารท่ีชอบ สามารถเลือกได้ มากกว่า 1 ตัวเลือก ซึ่งจะต้องกาหนดค่าของแอตทริบิวต์ \"name\" ให้เป็นช่ือเดียวกันในทุกตัวเลือก จึงจะถือเป็นขอ้ มลู ชดุ เดยี วกัน เปน็ ต้น มีรปู แบบการใชง้ านดังนี้ Syntax <input type=\"checkbox\" name=\"food\" id=\"food1\" value=\"omelet\"> Omelet <input type=\"checkbox\" name=\"food\" id=\"food2\" value=\"soup\"> Soup <input type=\"checkbox\" name=\"food\" id=\"food3\" value=\"fried chicken\"> Fried chicken <input type=\"checkbox\" name=\"food\" id=\"food4\" value=\"pizza\"> Pizza <input type=\"checkbox\" name=\"food\" id=\"food5\" value=\"sausage\"> Sausage Result ตารางท่ี 10.5 แอตทรบิ วิ ต์ท่ีใช้สาหรับ Checkbox Attribute Value Description type radio ประเภทของฟลิ ด์ name text ชอ่ื ของฟิลด์ id text รหัสของฟิลด์ ใช้สาหรบั อ้างองิ ไปยังส่วนอนื่ ๆ value number, text กาหนดค่าของตวั เลอื ก 1.5 Submit ปุ่มสาหรับยืนยันการส่งข้อมูล ใช้สาหรับคลิกเพ่ือส่งข้อมูลไปยังสคริปต์ ปลายทางท่กี าหนด หลังจากทาการปอ้ นขอ้ มูลในฟอร์มทกุ ส่วนเรยี บร้อยแล้ว มีรูปแบบการใช้งานดงั นี้ Syntax <input type=\"submit\" name=\"submit\" id=\"button\" value=\"Confirm Register\"> Result

476 CHAPTER 10: FORM&FORM VALIDATION 1.6 Reset ปุ่มสาหรับล้างข้อมูลหรือยกเลิกข้อมูลในฟอร์มให้กลับไปเป็นค่าเริ่มต้น ใช้ สาหรับคลิกเพื่อล้างข้อมูลในฟอร์มให้เป็นค่าว่างเพ่ือป้อนข้อมูลใหม่ หรือยกเลิกการป้อนข้อมูลใน แบบฟอร์ม มีรูปแบบการใช้งานดังน้ี Syntax <input type=\"reset\" name=\"reset\" id=\"button\" value=\"Reset Form\"> Result 1.7 Button ปุ่มสาหรับใช้งานท่ัวไป เช่น กาหนดให้ปุ่มเป็นลิงก์เพ่ือเช่ือมโยงหน้าเว็บเพจ เป็นตน้ มรี ูปแบบการใช้งานดงั นี้ Syntax <input type=\"button\" name=\"buttonP\" id=\"button\" value=\"<< Previous\"> <input type=\"button\" name=\"buttonN\" id=\"button\" value=\"Next >>\"> Result ตารางที่ 10.6 แอตทริบิวต์ที่ใช้สาหรับ Submit Reset และ Button Attribute Value Description type submit ประเภทของปมุ่ reset button name text ชอ่ื ของปุ่ม id text รหัสของปุ่ม ใช้สาหรบั อ้างองิ ไปยังสว่ นอ่นื ๆ value text กาหนดค่าของปุม่ ซ่งึ จะแสดงเป็นขอ้ ความในปุ่ม formtarget _blank กาหนดรูปแบบการเปิดหน้าต่างโปรแกรมแสดงผลเว็บ เม่ือคลิกท่ีปุ่ม มี _self รปู แบบเช่นเดยี วกบั อลิ เิ มนต์ <a> ใชไ้ ด้กับประเภทปมุ่ submit เท่านน้ั _parent _top

CHAPTER 10: FORM&FORM VALIDATION 477 1.8 File Upload ปุ่มสาหรับอัพโหลดไฟล์ ใช้สาหรับอัพโหลดไฟล์รูปแบบต่าง ๆ เพื่อ ส่งไปยังเคร่ืองแม่ข่าย โดยจะแสดงปุ่ม Choose File เพื่อเลือกไฟล์จากเคร่ืองคอมพิวเตอร์ เช่น ไฟล์ ภาพถ่าย ไฟล์เอกสาร ไฟล์วิดีโอ เป็นต้น โดยสามารถระบุรูปแบบไฟล์เฉพาะที่ต้องการให้เครื่องแม่ ข่ายยอมรับ และการอัพโหลดไฟล์จะสาเร็จได้ จะต้องมีการยืนยันการส่งข้อมูลจากฟอร์มด้วยปุ่ม Submit มีรูปแบบการใชง้ านดงั น้ี Syntax <input type=\"file\" name=\"fileUpload\" id=\"file1\" accept=\"image/*\"> <input type=\"submit\" value=\"Upload Now\"> Result ตารางท่ี 10.7 แอตทรบิ ิวตท์ ี่ใช้สาหรบั File Upload Attribute Value Description type submit ประเภทของฟิลด์ reset button name text ชอ่ื ของฟลิ ด์ id text รหัสของฟิลด์ ใช้สาหรบั อา้ งอิงไปยงั สว่ นอื่น ๆ accept audio/* กาหนดรูปแบบไฟล์เฉพาะที่ต้องการให้เครื่องแม่ข่ายยอมรับได้ หากไม่ video/* กาหนดแอตทริบิวต์ accept ฟิลด์จะสามารถอพั โหลดไฟล์ไดท้ ุกรูปแบบ image/* 1.9 Hidden Field การส่งค่าข้อมูลด้วยวิธีการซ่อนค่าข้อมูลที่ส่งผ่านฟอร์ม โดยจะไม่ แสดงฟอร์มในเว็บเพจ ซง่ึ โดยส่วนใหญ่จะเป็นคา่ ทถ่ี กู กาหนดไวแ้ ลว้ มีรปู แบบการใช้งานดังน้ี Syntax <input type=\"hidden\" name=\"majorID\" value=\"IS20304\"> ตารางที่ 10.8 แอตทริบวิ ตท์ ี่ใช้สาหรบั Hidden Field Attribute Value Description type hidden ประเภทของฟลิ ด์ name text ช่อื ของฟิลด์ value number, text กาหนดคา่ ข้อมูลที่ตอ้ งการให้ส่งไปพรอ้ มกับการยืนยันฟอร์ม

478 CHAPTER 10: FORM&FORM VALIDATION 1.10 Color เมนูสาหรับเลือกสีที่ต้องการจากแถบสีเพ่ือนาสีไปใช้งาน โดยรูปแบบการ เลือกสีจะข้ึนอยู่กับการสนับสนุนของโปรแกรมแสดงผลเว็บ ซ่ึงจะแสดงแถบสีในรูปแบบที่แตกตา่ งกัน มีรูปแบบการใช้งานดงั นี้ Syntax <input type=\"color\" name=\"pickerColor\" value=\"#FF6347\"> Result Google Chrome Mozilla Firefox Internet Explorer ภาพท่ี 10.2 ตวั อยา่ งการแสดงแถบสีของโปรแกรมแสดงผลเว็บ ทม่ี า: (ราชวิทย์ ทพิ ยเ์ สนา, 2560) ตารางท่ี 10.9 แอตทริบวิ ต์ที่ใชส้ าหรบั Color Attribute Value Description type color ประเภทของฟลิ ด์ name text ชอ่ื ของฟลิ ด์ value html color ระบรุ หัสสที ีต่ ้องการให้แสดงเปน็ สเี ริม่ ต้น 1.11 Date เมนูสาหรับเลือกวันที่ อยู่ในรปู แบบของ เดือน/วันที/่ ปี ค.ศ. เชน่ 12/01/2018 หรือ 01/09/2018 เปน็ ต้น มีรูปแบบการใชง้ านดังนี้ Syntax <input type=\"date\" name=\"birthDate\"> Result

CHAPTER 10: FORM&FORM VALIDATION 479 ตารางท่ี 10.10 แอตทริบิวต์ที่ใช้สาหรับ Date Attribute Value Description type date ประเภทของฟลิ ด์ name text ชื่อของฟลิ ด์ min date จากัดการเลือกวันที่ ให้เลือกได้เฉพาะก่อนวันที่ที่กาหนด เช่น กาหนด max date min=\" 1979-12-31\" เลือกวันที่ได้ตง้ั แต่ปี ปี 1979 เดือน 12 วันท่ี 31 ลง ไป เปน็ ตน้ จากัดการเลือกวันที่ ให้เลือกได้เฉพาะหลักวันที่ที่กาหนด เช่น กาหนด max=\"2000-01-01\" เลือกวันทไี่ ดต้ ้งั แต่ปี 2000 เดอื น 1 วนั ท่ี 1 เป็นตน้ ไป เปน็ ตน้ 1.12 Time เมนสู าหรับเลอื กเวลา ใช้สาหรบั เลือกเวลาด้วยปมุ่ เพ่มิ -ลด หรือพิมพค์ า่ ตวั เลข ลงในฟลิ ด์ อยใู่ นรูปแบบของ ชัว่ โมง: นาที AM/PM เชน่ 01: 01 PM เป็นต้น มีรูปแบบการใช้งานดังน้ี Syntax Start: <input type=\"time\" name=\"startTime\"> End: <input type=\"time\" name=\"EndTime\"> Result ตารางที่ 10.11 แอตทริบิวต์ท่ีใช้สาหรบั Time Attribute Value Description type time ประเภทของฟิลด์ name text ชือ่ ของฟลิ ด์ 1.13 Datetime-Local ฟิลด์สาหรับเลือกวันท่ีและกาหนดเวลา ข้อมูลท่ีเลือกอยู่ใน รปู แบบ เดือน/วนั ที่/ปี ค.ศ. ชว่ั โมง: นาที AM/PM เช่น 12/01/2018 05: 00 PM หรอื 01/09/2018 11.00 AM เปน็ ต้น มีรปู แบบการใช้งานดังน้ี Syntax <input type=\"datetime-local\" name=\"birthDateTime\">

480 CHAPTER 10: FORM&FORM VALIDATION Result ตารางท่ี 10.12 แอตทริบวิ ต์ที่ใชส้ าหรับ Datetime-Local Attribute Value Description type datetime-local ประเภทของฟิลด์ name text ชอื่ ของฟลิ ด์ 1.14 Week ฟิลด์สาหรับเลือกตัวเลขสัปดาห์และปี ข้อมูลที่เลือกอยู่ในรปู แบบ สัปดาห์/ปี ค.ศ. เช่น 47, 2018 เปน็ ตน้ มีรปู แบบการใชง้ านดังน้ี Syntax <input type=\"week\" name=\"weekYear\"> Result ตารางที่ 10.13 แอตทรบิ ิวตท์ ่ีใชส้ าหรบั Week Attribute Value Description type week ประเภทของฟลิ ด์ name text ชื่อของฟิลด์