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

CHAPTER 10: FORM&FORM VALIDATION 481 1.15 Month ฟลิ ด์สาหรับเลือกเดือนและปี ข้อมลู ทีเ่ ลอื กอยู่ในรปู แบบ เดือน/ปี ค.ศ. เชน่ November 2015 เปน็ ตน้ มีรปู แบบการใชง้ านดงั น้ี Syntax <input type=\"month\" name=\"birthMonthY\"> Result ตารางท่ี 10.14 แอตทรบิ วิ ต์ที่ใชส้ าหรบั Month Attribute Value Description type month ประเภทของฟลิ ด์ name text ช่ือของฟลิ ด์ 1.16 Email ฟิลด์หรือช่องสาหรับป้อนอีเมล ใช้สาหรับป้อนท่ีอยู่อีเมลโดยเฉพาะ ซึ่งจะมี การตรวจสอบรปู แบบท่ีอยู่อีเมลทีป่ ้อนลงในฟิลดว์ า่ มีความถูกต้องหรือไม่ เช่น การป้อนท่อี ยู่อีเมลท่ีไม่ มีเคร่ืองหมาย \"@\" หรือการป้อนที่อยู่อีเมลในรูปแบบที่ไม่ถูกต้อง เป็นต้น เม่ือคลิกปุ่มเพื่อยืนยันการ ส่งข้อมูล ฟอร์มจะแสดงข้อความแจ้งเตือนท่ีอยู่อีเมลไม่ถูกต้อง และจะไม่สามารถยืนยันการส่งข้อมูล ได้ ต้องทาการแก้ไขท่อี ยู่อีเมลให้มีรูปแบบท่ีถูกต้อง มีรปู แบบการใชง้ านดังนี้ Syntax <input type=\"email\" name=\"customerEmail\"> Result

482 CHAPTER 10: FORM&FORM VALIDATION ตารางท่ี 10.15 แอตทริบิวตท์ ่ีใชส้ าหรับ Email Attribute Value Description type email ประเภทของฟิลด์ name text ช่ือของฟิลด์ 1.17 Number ฟลิ ดห์ รือชอ่ งสาหรับป้อนตวั เลข ใช้สาหรบั ป้อนค่าตัวเลขโดยเฉพาะ ซ่ึงไม่ สามารถป้อนข้อความหรือเคร่ืองหมายใด ๆ ลงในฟิลด์ได้ และสามารถกาหนดช่วงของค่าตัวเลข ต่าสุด-สูงสุด ที่อนุญาตให้ป้อนลงในฟิลด์ หากป้อนค่าตัวเลขไม่อยู่ในช่วงที่กาหนด เมื่อคลิกปุ่มเพ่ือ ยนื ยนั การสง่ ข้อมูล ฟอร์มจะแสดงข้อความแจ้งเตือนคา่ ตัวเลขไม่ถูกต้อง และจะไม่สามารถยืนยันการ สง่ ขอ้ มลู ได้ ต้องทาการแกไ้ ขท่ีคา่ ตวั เลขให้ถูกต้อง มีรูปแบบการใชง้ านดงั น้ี Syntax Day: <input type=\"number\" name=\"numberDay\" min=\"1\" max=\"31\"> Month: <input type=\"number\" name=\"numberMonth\" min=\"1\" max=\"12\"> Year: <input type=\"number\" name=\"numberYear\" min=\"1999\" max=\"2018\"> Result ตารางท่ี 10.16 แอตทริบวิ ต์ที่ใชส้ าหรับ Number Attribute Value Description type number ประเภทของฟลิ ด์ name text ชอ่ื ของฟิลด์ min number คา่ ตัวเลขตา่ สุดทีอ่ นญุ าตใหป้ อ้ นลงในฟิลด์ max number ค่าตัวเลขสงู สดุ ท่ีอนญุ าตให้ปอ้ นลงในฟลิ ด์ step number ค่าตัวเลขจะเพิ่มหรอื ลดในระดับท่ีกาหนด เช่น กาหนด step=\"5\" เม่ือ คลกิ ปุ่มเพมิ่ ค่าตัวเลขจะเพ่มิ ขน้ึ คร้ังละ 5 หรอื ลดลงคร้ังละ 5 เปน็ ต้น 1.18 Range แถบเพิ่ม-ลดค่าตัวเลข ใช้สาหรับเพ่ิมหรือลดค่าตัวเลขด้วยการคลิกแถบ เลื่อน กาหนดค่าตัวเลขได้ตั้งแต่ 0 ถึง 100 เม่ือคลิกปุ่มเพื่อยืนยันการส่งข้อมูล ฟอร์มจะส่งค่าตัวเลข ตามระดับท่ีเลือกไปยงั สครปิ ต์เป้าหมาย มีรปู แบบการใชง้ านดงั น้ี

CHAPTER 10: FORM&FORM VALIDATION 483 Syntax Min 0 <input type=\"range\" name=\"points\" min=\"0\" max=\"100\">Max 100 Result ตารางท่ี 10.17 แอตทรบิ วิ ตท์ ่ีใชส้ าหรับ Range Attribute Value Description type range ประเภทของฟิลด์ name text ช่ือของฟิลด์ min number คา่ ตัวเลขต่าสดุ ในแถบเล่ือน max number คา่ ตัวเลขสงู สุดในแถบเล่ือน step number ค่าตัวเลขจะเพ่ิมหรอื ลดในระดบั ท่ีกาหนด เช่น กาหนด step=\"5\" เม่ือ เล่ือนแถบเพ่ือเพ่ิมค่า ค่าตัวเลขจะเพิ่มขึ้นครงั้ ละ 5 หรือลดลงครงั้ ละ 5 เปน็ ตน้ การแสดงผลลพั ธค์ ่าตัวเลขเมอ่ื เลื่อนแถบ Range สามารถแสดงผลด้วยอลิ เิ มนต์ \"<output>\" มรี ปู แบบการใช้งานดงั นี้ Syntax <form name=\"calculateForm\" oninput=\"show.value=parseInt(points.value)\"> 0 <input type=\"range\" name=\"points\" min=\"0\" max=\"100\"> 100 <br> Result is: <output name=\"show\" for=\"points\"></output> </form> Result ตารางท่ี 10.18 แอตทริบิวต์ที่ใชส้ าหรับ Output Attribute Value Description oninput show.value=parseInt(points.value) แอตทริบิวต์แสดงผลข้อความแบบยืดหยุ่น อยู่ใน show คือ ชื่อของฟลิ ด์ output รปู แบบของ JavaScript กาหนดในอลิ ิเมนต์ form point คอื ช่อื ของฟิลด์ range name text ช่อื ของฟิลด์ for text แอตทรบิ ิวต์อา้ งองิ การแสดงผลจากอิลิเมนต์ range

484 CHAPTER 10: FORM&FORM VALIDATION 1.19 Search ฟิลดห์ รอื ชอ่ งสาหรับป้อนคาค้นหา ใชส้ าหรับปอ้ นคาค้นหาเพ่ือสืบคน้ ข้อมูล ภายในเว็บไซต์โดยเฉพาะ ใช้งานรว่ มกบั สครปิ ต์สาหรบั การคน้ หาข้อมลู มรี ูปแบบการใชง้ านดงั น้ี Syntax <input type=\"search\" name=\"searchData\" id=\"textField\" size=\"30\" maxlength=\"100\"> <input type=\"submit\" value=\"Search\"> Result ตารางที่ 10.19 แอตทริบวิ ตท์ ่ีใชส้ าหรับ Search Attribute Value Description type search ประเภทของฟลิ ด์ name text ชือ่ ของฟลิ ด์ id text รหสั ของฟลิ ด์ ใชส้ าหรบั อ้างองิ ไปยงั ส่วนอ่ืน ๆ size number ขนาดความกวา้ งของฟิลด์ maxlength number จานวนตวั อกั ษรท่ีสามารถป้อนไดส้ งู สุด 1.20 Url ฟิลดห์ รือชอ่ งสาหรับป้อน URL (Uniform Resource Locator) ใช้สาหรบั ป้อน URL ของเว็บไซต์ โดยจะมีการตรวจสอบความถูกต้องของรูปแบบ URL หากป้อนรูปแบบท่ีไม่ถูกต้อง เม่ือคลิกปุ่มเพ่ือยืนยันการส่งข้อมูล ฟอร์มจะแสดงข้อความแจ้งเตือน URL ไม่ถูกต้อง และจะไม่ สามารถยนื ยันการส่งขอ้ มูลได้ ต้องทาการแกไ้ ข URL ให้ถกู ต้อง มีรูปแบบการใชง้ านดังน้ี Syntax <input type=\"url\" name=\"urlWebsite\"> Result ตารางท่ี 10.20 แอตทริบิวต์ท่ีใชส้ าหรับ Url Attribute Value Description type url ประเภทของฟิลด์ name text ชือ่ ของฟลิ ด์

CHAPTER 10: FORM&FORM VALIDATION 485 2. Select คาสั่งสาหรับการนาเข้าข้อมูลด้วยอิลิเมนต์ \"<select>…</select>\" เป็นการกาหนด วิธีการนาเข้าข้อมูลโดยการคลิกเลือกรายการข้อมูล (List) ในรูปแบบรายการเล่ือนลง (Drop Down List) โดยสร้างรายการด้วยอลิ ิเมนต์ \"<option>…</option>\" สามารถกาหนดคณุ สมบัตแิ ละรูปแบบ ใหก้ บั รายการได้ มรี ายละเอียดของคาสัง่ ดังนี้ Syntax <select name=\"colorFavorite\" id=\"dropDown\"> <option value=\"red\">Favorite color: red</option> <option value=\"green\">Favorite color: green</option> <option value=\"yellow\">Favorite color: yeloow</option> <option value=\"pink\">Favorite color: pink</option> <option value=\"blue\">Favorite color: blue</option> </select> Result Syntax <select name=\"colorFavorite\" id=\"dropDown\" size=\"3\"> <option value=\"red\">Favorite color: red</option> <option value=\"green\">Favorite color: green</option> <option value=\"yellow\">Favorite color: yeloow</option> <option value=\"pink\">Favorite color: pink</option> <option value=\"blue\">Favorite color: blue</option> </select> Result Syntax <select name=\"colorFavorite\" id=\"dropDown\" size=\"4\" multiple> <option value=\"red\">Favorite color: red</option> <option value=\"green\">Favorite color: green</option> <option value=\"yellow\">Favorite color: yeloow</option> <option value=\"pink\">Favorite color: pink</option> <option value=\"blue\">Favorite color: blue</option> </select>

486 CHAPTER 10: FORM&FORM VALIDATION Result ตารางที่ 10.21 แอตทริบวิ ตท์ ่ีใช้สาหรับ Select Attribute Value Description name text ชอ่ื ของฟิลด์ id text รหสั ของฟลิ ด์ ใช้สาหรับอา้ งอิงไปยังส่วนอืน่ ๆ size number จานวนของรายการตวั เลอื กที่ต้องการแสดงใหเ้ ห็น multiple multiple แอตทริบิวต์สาหรับอนุญาตให้คลิกเลือกได้มากกว่า 1 รายการ โดยกด ป่มุ Ctrl บนแป้นคยี ์บอร์ดค้างไว้ ขณะคลิกรายการอ่ืน ๆ value text, number กาหนดคา่ ของตัวเลอื ก 3. Textarea คาส่ังสาหรับการนาเข้าข้อมูลด้วยอิลิเมนต์ \"<textarea>…</ textarea>\" เป็นการนาเข้า ขอ้ มูลประเภทขอ้ ความ (Text) ท่ีมลี ักษณะเปน็ ยอ่ หนา้ หลายบรรทดั มรี ายละเอยี ดของคาส่ังดังนี้ Syntax <textarea name=\"commentText\" id=\"textArea\" cols=\"30\" rows=\"5\" wrap=\"hard\"></textarea> Result ตารางท่ี 10.22 แอตทรบิ ิวตท์ ี่ใช้สาหรับ Textarea Attribute Value Description name text ช่อื ของฟิลด์ id text รหสั ของฟิลด์ ใช้สาหรับอา้ งอิงไปยงั สว่ นอื่น ๆ cols number จานวนคอลัมน์ (ความกว้าง) rows number จานวนแถว (ความสูง) wrap soft แอตทริบิวต์สาหรับอนุญาตให้ข้อความข้ึนบรรทัดใหม่ เม่ือมีการพิมพ์ hard สดุ ขอบฟิลด์ soft ไม่ต้องกาหนด cols และ hard ตอ้ งกาหนด cols maxlength number จานวนข้อความท่สี ามารถพิมพไ์ ดส้ ูงสุด placeholder text คาอธบิ ายทใ่ี ชแ้ สดงในฟิลด์

CHAPTER 10: FORM&FORM VALIDATION 487 4. Button คาสั่งสาหรับสร้างปุ่มด้วยอิลิเมนต์ \"<button>...</button>\" มีรูปแบบเช่นเดียวกับอิลิ เมนต์ <input type=\"button\"> แต่สามารถสร้างปุ่มให้อยู่ภายนอกอิลิเมนต์ \"<form>…</form>\" ได้ เชน่ กาหนดให้ปมุ่ เป็นลงิ ก์เพื่อเช่อื มโยงหนา้ เวบ็ เพจ เปน็ ตน้ มีรายละเอียดของคาสัง่ ดงั นี้ Syntax <button type=\"submit\" name=\"submit\" formaction=\"http://is.udru.ac.th\">Click Me !</button> Result ตารางท่ี 10.23 แอตทริบิวตท์ ่ีใชส้ าหรับ Button Attribute Value Description type submit ประเภทของปุ่ม reset button name text ชอื่ ของปุ่ม id number รหัสของฟลิ ด์ ใชส้ าหรบั อ้างอิงไปยงั สว่ นอื่น ๆ formtarget _blank กาหนดรูปแบบการเปิดหน้าตา่ งโปรแกรมแสดงผลเว็บ เช่นเดียวกับอิลิ _self เมนต์ <a> ใช้ไดก้ ับประเภทปุ่ม submit เทา่ นน้ั _parent _top formaction URL กาหนดตาแหนง่ ปลายทางสาหรับการสง่ ขอ้ มูล เช่น /action/form_action.php หรือ http://is.udru.ac.th เป็นต้น ใชไ้ ดก้ บั ประเภทปุ่ม submit เท่าน้นั

488 CHAPTER 10: FORM&FORM VALIDATION 5. Datalist คาส่ังสาหรับแสดงตัวอย่างรายการข้อมูลด้วยอิลิเมนต์ \"<datalist>...</datalist>\" โดย สร้างรายการด้วยอิลิเมนต์ \"<option>…</option>\" และใช้งานร่วมกับอิลิเมนต์ \"<input>\" เมื่อมี การพิมพ์ข้อความท่ีตรงกับตัวอย่างข้อมูลที่กาหนด ฟิลด์จะแสดงรายการข้อมูลที่เก่ียวข้องให้สามารถ คลิกเลอื กไดท้ ันที โดยไม่จาเปน็ ตอ้ งพมิ พข์ อ้ ความทง้ั หมด มรี ายละเอียดของคาสั่งดงั น้ี Syntax <input name=\"listFood\" list=\"selectList\" size=\"20\"> <datalist id=\"selectList\"> <option value=\"Steamed rice\"> <option value=\"Roast chicken\"> <option value=\"Pickled fish\"> <option value=\"Fried rice\"> <option value=\"Congee\"> </datalist> Result ตารางที่ 10.24 แอตทริบวิ ตท์ ่ีใชส้ าหรับ Datalist Attribute Value Description name text ชื่อของฟลิ ด์ list text ชอ่ื ของรายการท่ีอา้ งองิ ไปยัง id ของอลิ ิเมนต์ datalist size number ขนาดความกว้างของฟลิ ด์ id text รหัสของอลิ เิ มนต์ datalist ใช้สาหรบั อ้างอิงไปยัง list value text, number กาหนดคา่ ของตวั เลอื ก

CHAPTER 10: FORM&FORM VALIDATION 489 คำสง่ั เพ่มิ เตมิ สำหรับฟอร์ม คาส่ังเพิ่มเตมิ สาหรบั ฟอรม์ เพื่อให้การใช้งานฟอร์มมปี ระสิทธภิ าพมากยิ่งข้นึ ซึ่งสามารถใชไ้ ด้ กบั ฟอร์มแต่ละประเภท มีรายละเอียดดังน้ี 1. Label แทก็ \"<label>…</label>\" สาหรับสร้างป้ายกากับให้กับฟอร์ม เป็นการระบุข้อความเพื่อ ใช้เป็นข้อความอา้ งอิงใหก้ ับฟอร์ม นยิ มใช้กับฟอรม์ ประเภท Radio หรอื Checkbox เน่ืองจากจะชว่ ย ให้สามารถคลิกเลือกรายการไดส้ ะดวกมากยิ่งข้ึน และยงั สามารถใชก้ บั ฟอรม์ ประเภทอน่ื ๆ ได้ ชง่ึ การ คลกิ ท่ีป้ายกากับจะเปน็ การเลือกไปที่ฟอรม์ น้ันทันที มีรายละเอียดของคาสง่ั ดงั น้ี Syntax Gender: <label><input type=\"radio\" name=\"gender\" id=\"gender1\" value=\"male\">Male</label> <input type=\"radio\" name=\"gender\" id=\"gender2\" value=\"female\"> <label for=\"gender2\">Female</label> <br><br> <label for=\"textField\">First Name: </label> <input type=\"text\" name=\"firstName\" id=\"textField\" placeholder=\"First Name\"> Result คลิกที่ป้ายกากบั คลิกท่ีปา้ ยกากับ 2. Autofocus แอตทริบิวต์ \"autofocus\" สาหรับฟอร์มประเภท \"input\" เป็นคาสั่งเลือกฟอร์มอัตโนมัติ เมื่อเปิดเว็บเพจ โดยท่ีผู้ใช้ไม่ต้องคลิกเลือกฟอร์ม ส่งผลให้การใช้งานฟอร์มรวดเร็วยิ่งข้ึน มีรูปแบบ การใชง้ านดงั นี้ Syntax <label for=\"textField1\">Username: </label> <input type=\"text\" name=\"userName\" id=\"textField1\" placeholder=\"Username\" autofocus> <label for=\"textField2\">Password: </label> <input type=\"text\" name=\"userName\" id=\"textField2\" placeholder=\"Password\"> Result Autofocus

490 CHAPTER 10: FORM&FORM VALIDATION 3. Disabled แอตทริบิวต์ \"disabled\" เป็นคาสั่งสาหรับปิดการใช้งานฟอร์ม ผู้ใช้จะไม่สามารถป้อน ข้อมลู ลงในฟอร์ม หรอื คลกิ เลอื กขอ้ มลู ในฟอรม์ ได้ มีรปู แบบการใช้งานดังน้ี Syntax <label for=\"textField1\">Username: </label> <input type=\"text\" name=\"userName\" id=\"textField1\" placeholder=\"Username\" disabled> <label for=\"textField2\">Password: </label> <input type=\"text\" name=\"userName\" id=\"textField2\" placeholder=\"Password\" disabled> Result ไม่สามารถปอ้ นขอ้ มลู ได้ 4. Required แอตทริบิวต์ \"required\" เป็นคาส่ังสาหรับตรวจสอบฟอร์ม (Form Validation) เพื่อแจ้ง เตือนให้ผู้ใช้ป้อนข้อมูลหรือเลือกข้อมูลในฟอร์ม โดยจะเป็นการบังคับให้ผู้ใช้ป้อนข้อมูลหรือเลือก ข้อมูลก่อน จึงจะสามารถยืนยันการส่งข้อมูลจากฟอร์มได้ ฟอร์มไม่สามารถเป็นค่าว่างได้ มีตัวอย่าง รูปแบบการใชง้ าน ดังนี้ Syntax <label for=\"textField1\">Username: </label> <input type=\"text\" name=\"userName\" id=\"textField1\" placeholder=\"Username\" required> <label for=\"textField2\">Password: </label> <input type=\"text\" name=\"userName\" id=\"textField2\" placeholder=\"Password\" required> <select name=\"colorFavorite\" required> <option value=\"\">Please Select</option> <option value=\"green\">Favorite color: green</option> <option value=\"yellow\">Favorite color: yeloow</option> <option value=\"pink\">Favorite color: pink</option> <option value=\"blue\">Favorite color: blue</option> </select> Result

CHAPTER 10: FORM&FORM VALIDATION 491 กำรตรวจสอบฟอรม์ ด้วยจำวำสคริปต์ การตรวจสอบฟอร์มด้วยจาวาสคริปต์ (JavaScript) เป็นการตรวจสอบความถูกต้องของ ข้อมูลในฟอร์มและตรวจสอบค่าว่างในฟอร์มด้วยฟังก์ชัน (Function) ก่อนการยืนยันฟอร์ม โดยการ เขียนฟังกช์ ันตรวจสอบด้วยจาวาสครปิ ต์ การทางานจะอยู่ในลกั ษณะ Client-Side หรอื การตรวจสอบ เกิดข้ึนในเคร่ืองผู้ใช้ ซึ่งเป็นเครื่องท่ีเปิดใชง้ านเวบ็ เพจผ่านโปรแกรมแสดงผลเว็บ เม่ือเว็บเพจมีการใช้ งานฟอรม์ จาวาสคริปต์จงึ เป็นคาสั่งทชี่ ว่ ยตรวจสอบข้อผดิ พลาดในฟอรม์ ได้ การเขียนฟังก์ชันจาวาสคริปต์ สามารถเขียนลงในไฟล์เอกสาร HTML ได้ โดยสคริปต์จะอยู่ ภายใต้แท็ก \"<script>…</script>\" และนิยมเขียนฟังก์ชันให้อยู่ภายใต้แท็ก \"<head>…</head>\" ซึง่ จะสามารถจดั การได้ง่ายกวา่ การเขยี นฟงั กช์ ันไวใ้ นส่วนอน่ื มีตวั อยา่ งการใชง้ านจาวาสคริปต์ ดังนี้ JS&HTML5 <head> <script> function validateForm() { if(document.myForm.firstName.value==\"\") { alert(\"Please enter your name. !!\"); document.myForm.firstName.focus(); return false; } } </script> </head> <body> <form name=\"myForm\" method=\"post\" action=\"action.php\" onsubmit=\"return validateForm()\"> <input type=\"text\" name=\"firstName\" size=\"20\" maxlength=\"50\" placeholder=\"First Name\"> <input type=\"submit\" name=\"submitForm\" value=\"Confirm\"> </form> </body> ตารางที่ 10.25 รายละเอยี ดฟังกช์ ันและการเรยี กใชง้ านฟงั ก์ชัน Command Description function validateForm(){ } กาหนดช่อื ฟงั ก์ชนั โดยเปน็ ข้อความที่กาหนดขึ้นเอง if(document.myForm.firstName.value กาหนดเงื่อนไขในการตรวจสอบฟอร์มช่ือ \"myForm\" ตรวจสอบ ==\"\"){ } วา่ ฟลิ ด์ \"firstName\" เป็นฟิลดท์ มี่ ีค่าวา่ งหรอื ไม่ value==\" \" alert(\"Please enter your name. !!\"); กาหนดข้อความแจ้งเตือน หากตรวจสอบพบว่าฟลิ ดเ์ ป็นคา่ ว่าง document.myForm.firstName.focus(); กาหนดให้เลอื กฟิลด์ \"firstName\" ในฟอร์ม \"myForm\" อัตโนมตั ิ หลังจากแสดงข้อความแจง้ เตอื น return false; คาส่ังออกจากการทางานในฟังก์ชัน และปฏิเสธการยืนยันฟอร์ม ไมส่ ามารถยนื ยนั การส่งขอ้ มูลได้ จนกว่าเงือ่ นไขจะถกู ต้อง onsubmit=\"return validateForm()\" การเรียกใชง้ านฟังก์ชันจาวาสครปิ ตท์ ่ีมีชอ่ื วา่ \"validateForm\"

492 CHAPTER 10: FORM&FORM VALIDATION 1. กำรตรวจสอบฟอรม์ ประเภท Input การตรวจสอบฟอร์มประเภท Input โดยใช้ฟังก์ชันจาวาสคริปต์ นิยมใช้เพ่ือตรวจสอบ ความถูกต้องของข้อมูลที่ป้อนลงในฟิลด์และตรวจสอบค่าว่างในฟิลด์ เมื่อคลิกที่ปุ่มยืนยันข้อมูลแล้ว พบข้อผิดพลาด โปรแกรมแสดงผลเวบ็ จะแสดงข้อความแจ้งเตอื นทางหนา้ จอโปรแกรม 1.1 ตรวจสอบค่าว่างในฟอร์มประเภท <input type=\"text\"> ในกรณีท่ีผู้ใช้ยังไม่ป้อน ข้อมูลลงในฟิลด์ จึงทาให้ฟิลด์ที่ต้องการเก็บข้อมูลสาคัญเป็นค่าว่าง จะไม่สามารถยืนยันการส่งข้อมูล ได้ มสี ครปิ ต์การใชง้ านดังนี้ JS&HTML5 <head> <script> function validateForm() { if(document.myForm.firstName.value==\"\") { alert(\"Please enter your name. !!\"); document.myForm.firstName.focus(); return false; } } </script> </head> <body> <form name=\"myForm\" method=\"post\" action=\"action.php\" onsubmit=\"return validateForm()\"> <input type=\"text\" name=\"firstName\" size=\"20\" id=\"firstName\" placeholder=\"First Name\"> <input type=\"submit\" name=\"submitForm\" value=\"Confirm\"> </form> </body> Result

CHAPTER 10: FORM&FORM VALIDATION 493 1.2 ตรวจสอบความตรงกันของค่าในฟอร์มประเภท <input type=\"password\"> ใน กรณีท่ีต้องการให้ผู้ใช้ป้อนข้อมูลให้ตรงกันลงในฟิลด์ 2 ฟิลด์ เพื่อตรวจสอบความถูกต้องของข้อมูล เชน่ การปอ้ นรหัสผ่านและยืนยนั รหัสผา่ น เปน็ ต้น หากรหสั ผา่ นไม่ตรงกัน จะไมส่ ามารถยืนยันการส่ง ข้อมลู ได้ มีสครปิ ตก์ ารใชง้ านดังน้ี JS&HTML5 <head> <script> function validateForm() { if(document.myForm.password.value==\"\") { alert(\"Please enter your password. !!\"); document.myForm.password.focus(); return false; } if(document.myForm.confirmPassword.value==\"\") { alert(\"Please confirm password. !!\"); document.myForm.confirmPassword.focus(); return false; } if(document.myForm.password.value!= document.myForm.confirmPassword.value) { alert(\"Passwords do not match. !!\"); document.myForm.confirmPassword.focus(); return false; } } </script> </head> <body> <form name=\"myForm\" method=\"post\" action=\"action.php\" onsubmit=\"return validateForm()\"> <input type=\"password\" name=\"password\" size=\"20\" placeholder=\"Password\"> <input type=\"password\" name=\"confirmPassword\" size=\"20\" placeholder=\"Confirm Password\"> <input type=\"submit\" name=\"submitForm\" value=\"Confirm\"> </form> </body> Result

494 CHAPTER 10: FORM&FORM VALIDATION 1.3 ตรวจสอบความถูกต้องของอีเมลในฟอร์มประเภท <input type=\"text\"> ใน กรณีที่ต้องการให้ผู้ใช้ป้อนท่ีอยู่อีเมลในฟิลด์ และต้องการตรวจสอบความถูกต้องของรูปแบบอีเมลที่ ผู้ใช้ป้อน หากรปู แบบอเี มลไมถ่ กู ตอ้ ง จะไม่สามารถยืนยนั การส่งข้อมูลได้ มสี คริปตก์ ารใชง้ านดงั นี้ JS&HTML5 <head> <script> function validateForm() { var yourEmail=document.myForm.yourEmail; var format_mail =/^[_a-zA-Z0-9-]+(\\.[_a-zA-Z0-9-]+)*\\@[a-zA-Z0-9-]+(\\.[a-zA-Z0-9- ]+)*(\\.([a-zA-Z]){2,4})$/; if (!format_mail.test(yourEmail.value)) { alert(\"Invalid email format. !!\"); document.myForm.yourEmail.focus(); return false; } } </script> </head> <body> <form name=\"myForm\" method=\"post\" action=\"action.php\" onsubmit=\"return validateForm()\"> <input type=\"text\" name=\"yourEmail\" size=\"20\" placeholder=\"Email\"> <input type=\"submit\" name=\"submitForm\" value=\"Confirm\"> </form> </body> Result

CHAPTER 10: FORM&FORM VALIDATION 495 1.4 ตรวจสอบการเลือกข้อมูลในฟอร์มประเภท <input type=\"radio\"> หรือฟอร์ม ประเภท <input type=\"checkbox\"> ในกรณีที่ผู้ใช้ยังไม่คลิกเลือกตัวเลือกจากปุ่ม Radio หรือปุ่ม Checkbox โดยจะใช้การอ้างอิงไปยังฟิลด์ด้วย \"id\" แทน \"name\" หากไม่มีการคลิกเลือกปุ่ม จะไม่ สามารถยืนยันการส่งข้อมลู ได้ มีสครปิ ต์การใช้งานดังน้ี JS&HTML5 <head> <script> function validateForm() { if(document.myForm.male.checked==false&&document.myForm.female.checked== false&&document.myForm.otherGender.checked==false) { alert(\"Please select your gender. !!\"); document.myForm.male.focus(); return false; } } </script> </head> <body> <form name=\"myForm\" method=\"post\" action=\"action.php\" onsubmit=\"return validateForm()\"> <input type=\"radio\" name=\"gender\" id=\"male\" value=\"male\"> <label for=\"male\">Male</label> <input type=\"radio\" name=\"gender\" id=\"female\" value=\"female\"> <label for=\"female\">Female</label> <input type=\"radio\" name=\"gender\" id=\"otherGender\" value=\"other gender\"> <label for=\"otherGender\">Other</label> <input type=\"submit\" name=\"submitForm\" value=\"Confirm\"> </form> </body> Result

496 CHAPTER 10: FORM&FORM VALIDATION 2. กำรตรวจสอบฟอรม์ ประเภท Select การตรวจสอบฟอร์มประเภท Select โดยใช้ฟังก์ชันจาวาสคริปต์ นิยมใช้เพื่อตรวจสอบ การเลือกรายการในฟิลด์ เมื่อคลิกท่ีปุ่มยืนยันข้อมูลแล้วพบว่า ยังไม่มีการเลือกรายการที่กาหนด โปรแกรมแสดงผลเวบ็ จะแสดงข้อความแจ้งเตือนทางหน้าจอโปรแกรม โดยจะตอ้ งสร้างรายการที่มีค่า ว่าง value=\"\" จานวน 1 รายการ เพอื่ ใช้สาหรบั ตรวจสอบ มีสครปิ ตก์ ารใช้งานดงั นี้ JS&HTML5 <head> <script> function validateForm() { if(document.myForm.colorFavorite.value==\"\") { alert(\"Please select favorite color. !!\"); document.myForm.colorFavorite.focus(); return false; } } </script> </head> <body> <form name=\"myForm\" method=\"post\" action=\"action.php\" onsubmit=\"return validateForm()\"> <select name=\"colorFavorite\"> <option value=\"\">Select favorite color</option> <option value=\"red\">Favorite color: red</option> <option value=\"green\">Favorite color: green</option> <option value=\"yellow\">Favorite color: yeloow</option> <option value=\"pink\">Favorite color: pink</option> <option value=\"blue\">Favorite color: blue</option> </select> <input type=\"submit\" name=\"submitForm\" value=\"Confirm\"> </form> </body> Result

CHAPTER 10: FORM&FORM VALIDATION 497 3. กำรตรวจสอบฟอรม์ ประเภท Textarea การตรวจสอบฟอร์มประเภท Textarea โดยใช้ฟังก์ชันจาวาสครปิ ต์ นิยมใช้เพ่ือตรวจสอบ ค่าว่างในฟิลด์ เม่ือคลิกท่ีปุ่มยืนยันข้อมูลแล้วพบข้อผิดพลาด โปรแกรมแสดงผลเวบ็ จะแสดงข้อความ แจ้งเตือนทางหนา้ จอโปรแกรม จะไม่สามารถยืนยนั การสง่ ขอ้ มลู ได้ มสี คริปต์การใช้งานดังนี้ JS&HTML5 <head> <script> function validateForm() { if(document.myForm.commentText.value==\"\") { alert(\"Please enter text. !!\"); document.myForm.commentText.focus(); return false; } } </script> </head> <body> <form name=\"myForm\" method=\"post\" action=\"action.php\" onsubmit=\"return validateForm()\"> <textarea name=\"commentText\" id=\"textArea\" cols=\"30\" rows=\"5\" wrap=\"hard\"></textarea> <input type=\"submit\" name=\"submitForm\" value=\"Confirm\"> </form> </body> Result

498 CHAPTER 10: FORM&FORM VALIDATION ปรบั แตง่ ฟอร์มดว้ ยสไตลช์ ีต การปรับแต่งฟอร์มด้วยสไตล์ชีต (Style Sheet) เปน็ การนาสไตล์ชตี มาใช้กาหนดคุณลักษณะ ต่าง ๆ ให้กับฟอร์ม เพื่อเพิ่มประสิทธิภาพการทางานของฟอร์มให้มีปฏิสัมพันธ์กับผู้ใช้ (Interactive) มากย่ิงข้ึน อีกทั้งยังเป็นการปรับแต่ฟอร์มให้มีความสวยงาม รวมถึงความสามารถในการตอบสนอง การใช้งานกับทุกอุปกรณ์ (Responsive) โดยการเขียนสไตล์ชีตเพ่ือปรับแต่งฟอร์ม สามารถเขียนลง ในไฟล์เอกสาร HTML ได้ โดยสไตล์ชีตจะอยู่ภายใต้แท็ก \"<style>…</style>\" และนิยมเขียน สไตล์ชีตให้อยู่ภายใต้แท็ก \"<head>…</head>\" ซึ่งจะสามารถจัดการได้ง่ายกว่าการเขียนไว้ในส่วน อนื่ มีตัวอยา่ งการใชง้ านสไตล์ชตี ดงั นี้ CSS3 <head> <style> body {display: grid;} #formFrame { border-radius: 5px; background-color: #f2f2f2; padding: 20px; } /*text, password, file, number, select, & textarea field*/ input[type=text], input[type=password], input[type=file], input[type=number], select, textarea { width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } /*submit button*/ input[type=submit] { width: 100%; background-color: #4CAF50; color: white; padding: 14px 20px; margin: 8px 0; border: none; border-radius: 4px; cursor: pointer; } input[type=submit]:hover {background-color: #45a049;} </style> </head> ทีม่ า: (W3Schools, 1999: 1)

CHAPTER 10: FORM&FORM VALIDATION 499 CSS3 <head> <style> /*radio*/ .radio { margin: 0.5rem; } .radio input[type=\"radio\"] { position: absolute; opacity: 0; } .radio input[type=\"radio\"] + .radio-label:before { content:\"\"; background: #f4f4f4; border-radius: 100%; border: 1px solid #b4b4b4; display: inline-block; width: 1.4em; height: 1.4em; position: relative; top: -0.2em; margin-right: 0.5em; vertical-align: top; cursor: pointer; text-align: center; transition: all 250ms ease; } .radio input[type=\"radio\"]:checked + .radio-label:before { background-color: #3197EE; box-shadow: inset 0 0 0 4px #f4f4f4; } .radio input[type=\"radio\"]:focus + .radio-label:before { outline: none; border-color: #3197EE; } .radio input[type=\"radio\"]:disabled + .radio-label:before { box-shadow: inset 0 0 0 4px #f4f4f4; border-color: #b4b4b4; background: #b4b4b4; } .radio input[type=\"radio\"] + .radio-label:empty:before { margin-right: 0; } </style> </head> ที่มา: (White, 2016: 1)

500 CHAPTER 10: FORM&FORM VALIDATION CSS3 <head> <style> /*checkbox*/ .cbx {margin: auto; -webkit-user-select: none; user-select: none; cursor: pointer;} .cbx span { display: inline-block; vertical-align: middle; transform: translate3d(0, 0, 0); } .cbx span:first-child { position: relative; width: 18px; height: 18px; border-radius: 3px; transform: scale(1); vertical-align: middle; border: 1px solid #9098A9; transition: all 0.2s ease; } .cbx span:first-child svg { position: absolute; top: 3px; left: 2px; fill: none; stroke: #FFFFFF; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16px; stroke-dashoffset: 16px; transition: all 0.3s ease; transition-delay: 0.1s; transform: translate3d(0, 0, 0); } .cbx span:first-child:before { content: \"\"; width: 100%; height: 100%; background: #506EEC; display: block; transform: scale(0); opacity: 1; border-radius: 50%; } .cbx span:last-child {padding-left: 8px;} .cbx:hover span:first-child {border-color: #506EEC;} .inp-cbx:checked + .cbx span:first-child { background: #506EEC; border-color: #506EEC; animation: wave 0.4s ease; } .inp-cbx:checked + .cbx span:first-child svg {stroke-dashoffset: 0;} .inp-cbx:checked + .cbx span:first-child:before {transform: scale(3.5); opacity: 0; transition: all 0.6s ease; } @keyframes wave { 50% {transform: scale(0.9);} } </style> </head> ทม่ี า: (Storm, 2018: 1)

CHAPTER 10: FORM&FORM VALIDATION 501 HTML5 <body> <div id=\"formFrame\"> <form name=\"myForm\" method=\"post\" action=\"action.php\" onsubmit=\"return validateForm()\"> <label for=\"fristName\">First Name</label> <input type=\"text\" name=\"fristName\" id=\"fristName\" placeholder=\"Frist Name\"> <label for=\"lastName\">Last Name</label> <input type=\"text\" name=\"lastName\" id=\"lastName\" placeholder=\"Last Name\"> <label>Gender</label> <div class=\"radio\"> <input type=\"radio\" id=\"g1\" name=\"gn\" value=\"m\"><label for=\"g1\" class=\"radio-label\">Male</label> <input type=\"radio\" id=\"g2\" name=\"gn\" value=\"f\"><label for=\"g2\" class=\"radio-label\">Female</label> </div> <label for=\"address\">Address</label> <textarea name=\"address\" id=\"address\" cols=\"30\" rows=\"5\" placeholder=\"Address\"></textarea> <label for=\"telephone\">Telephone Number</label> <input type=\"number\" name=\"telephone\" id=\"telephone\" placeholder=\"Telephone Number\"> <label for=\"photo\">Photo</label> <input type=\"file\" name=\"photo\" id=\"photo\"> <label for=\"colorFavorite\">Your Favorite Color</label> <select name=\"colorFavorite\" id=\"colorFavorite\"> <option value=\"\">Select favorite color</option> <option value=\"red\">color: red</option> <option value=\"green\">color: green</option> <option value=\"yellow\">color: yeloow</option> <option value=\"pink\">color: pink</option> <option value=\"blue\">color: blue</option> </select> <label>Your Favorite Food</label><br> <input type=\"checkbox\" class=\"inp-cbx\" id=\"omelet\" style=\"display: none;\"> <label class=\"cbx\" for=\"omelet\"><span><svg width=\"12px\" height=\"10px\" viewbox=\"0 0 12 10\"> <polyline points=\"1.5 6 4.5 9 10.5 1\"></polyline></svg></span><span>Omelet</span></label> <input type=\"checkbox\" class=\"inp-cbx\" id=\"soup\" style=\"display: none;\"> <label class=\"cbx\" for=\"soup\"><span><svg width=\"12px\" height=\"10px\" viewbox=\"0 0 12 10\"> <polyline points=\"1.5 6 4.5 9 10.5 1\"></polyline></svg></span><span>Soup</span></label> <input type=\"checkbox\" class=\"inp-cbx\" id=\"pizza\" style=\"display: none;\"> <label class=\"cbx\" for=\"pizza\"><span><svg width=\"12px\" height=\"10px\" viewbox=\"0 0 12 10\"> <polyline points=\"1.5 6 4.5 9 10.5 1\"></polyline></svg></span><span>Pizza</span></label> <input type=\"checkbox\" class=\"inp-cbx\" id=\"sausage\" style=\"display: none;\"> <label class=\"cbx\" for=\"sausage\"><span><svg width=\"12px\" height=\"10px\" viewbox=\"0 0 12 10\"> <polyline points=\"1.5 6 4.5 9 10.5 1\"></polyline></svg></span><span>Sausage</span></label> <br><br> <input type=\"submit\" name=\"sumit\" value=\"Send\"> </form> </div> </body> ทีม่ า: (ราชวิทย์ ทพิ ย์เสนา, 2560)

502 CHAPTER 10: FORM&FORM VALIDATION หน้าจอโปรแกรมแสดงผลเว็บ หน้าจอโทรศพั ท์สมาร์ทโฟน ภาพที่ 10.3 ตวั อยา่ งการปรับแตง่ ฟอร์มดว้ ยสไตลช์ ตี ทม่ี า: (ราชวิทย์ ทพิ ย์เสนา, 2560)

CHAPTER 10: FORM&FORM VALIDATION 503 สรุป การใช้งานฟอร์มถือเป็นช่องทางในการติดต่อส่ือสารผ่านเว็บไซต์ ท่ีช่วยอานวยความสะดวก ให้กับผู้ใช้และเจ้าของเว็บไซต์ได้เป็นอย่างดี ทั้งในด้านของความรวดเร็วในการเข้าถึง ความสะดวกใน การป้อนข้อมูล และประหยัดค่าใช้จ่าย อีกทั้งยังสามารถประยุกต์ใช้ฟอร์มเพื่อเป็นเคร่ืองมือในการ ตรวจสอบข้อมูลหรือการยืนยันตัวตนของผู้ใช้ ในการเข้าสู่ระบบต่าง ๆ ซ่ึงใน HTML5 มีการเพิ่มขีด ความสามารถของฟอร์มให้สามารถตรวจสอบข้อมูลได้หลายรูปแบบ ดังนั้น ผู้พัฒนาจึงควรกาหนด ประเภทของฟอร์มให้เหมาะสมกับข้อมูลท่ีต้องการ และอาจใช้จาวาสคริปต์เพื่อตรวจสอบความ ถูกต้องของขอ้ มลู เพม่ิ เติม เพ่อื ให้ไดข้ อ้ มลู ท่ตี รงตามความต้องการ สามารถนาไปใชป้ ระโยชน์ได้อยา่ งมี ประสิทธิภาพ รวมถึงการออกแบบฟอร์มให้มีความสวยงาม ทันสมัย ใช้งานได้ง่าย และสนับสนุนการ ใชง้ านกบั ทุกอุปกรณ์ อยา่ งไรกต็ าม ผพู้ ัฒนาจะตอ้ งศึกษาภาษาคอมพิวเตอร์ท่ีใช้เป็นคาส่งั สาหรบั บันทึกข้อมูลและ ส่งข้อมูลไปยังเว็บเซิร์ฟเวอร์ โดยเฉพาะภาษา PHP ซึ่งเป็นภาษาท่ีได้รับความนิยมในการใช้งานคาสัง่ ควบคูไ่ ปกบั การสร้างฟอร์มดว้ ย HTML5 จึงจะเป็นการประโยชนจ์ ากฟอรม์ ไดอ้ ยา่ งสมบรู ณ์

504 CHAPTER 10: FORM&FORM VALIDATION

เอกสำรอำ้ งอิง ดวงพร เกย๋ี งคำ. (2560). คู่มอื ออกแบบและสร้างเว็บไซต์ ฉบับสมบูรณ์. นนทบุรี: ไอดีซีฯ. รำชวิทย์ ทิพยเ์ สนำ. (2560). การสร้างสรรค์ภาพประกอบตาราวิชาการ. [ไฟล์คอมพิวเตอร์]. อุดรธำนี: สำขำวชิ ำสำรสนเทศศำสตร์ คณะมนุษยศำสตร์และสังคมศำสตร์ มหำวิทยำลยั รำชภัฏอดุ รธำนี. Storm, A. (2018). CSS material design checkbox. Retrieved January 26, 2017, from https://freefrontend.com/css-checkboxes. W3Schools. (1999m). CSS Form. Retrieved August 1, 2017, from https://www.w3schools.com/css/css_form.asp. White, T. (2016). A simple and elegant CSS radio button. Retrieved August 14, 2017, https://freefrontend.com/css-radio-buttons.



บรรณานุกรม กรรณิการ์ สวรรคโ์ พธพิ นั ธิ์. (2550). ออกแบบเว็บใหน้ ่าใช้ (Designing Web Usability). กรุงเทพฯ: เคทีพี คอมพ์ แอนด์ คอนซลั ท์. กรวี ธุ อศั วคุปตานนท.์ (2556). เรียนร้เู ทคนิคและพัฒนาเวบ็ ไซตด์ ว้ ย HTML5. กรุงเทพฯ: เน็ตดีไซน์ พับลิชชงิ่ . กษิรา ศิรวิ ฒั นากลุ และวราคณา ธนสิริตระกูล. (2551). Computer arts & graphic design : เสน้ ทางสูน่ กั กราฟกิ มืออาชีพ. กรุงเทพฯ: สถาบันอินเทอร์เน็ทและการออกแบบ. เกียรติพงษ์ บญุ จิตร. (2560). Photoshop CC 2017 Professional Guide. นนทบรุ ี: ไอดซี ฯี . จรงุ ยศ อรัญยะนาค. (2560). การออกแบบเว็บไซต์ Website Design. กรุงเทพฯ: จุฬาลงกรณ์ มหาวทิ ยาลัย. จฬุ าลงกรณ์มหาวทิ ยาลยั . (ม.ป.ป.). Hompage: จฬุ าลงกรณ์มหาวิทยาลัย. สืบค้นเม่ือ 18 ธันวาคม 2560, จาก https://www.chula.ac.th. ชาตพล นภาวารี. (2554). Photoshop Web Design. กรุงเทพฯ: ซมิ พลิฟาย. ดวงพร เกยี๋ งคา. (2560). คมู่ อื ออกแบบและสร้างเว็บไซต์ ฉบับสมบูรณ์. นนทบรุ ี: ไอดซี ีฯ. พชิ ติ วิจิตรบญุ ยรกั ษ์. (2554). สอ่ื สังคมออนไลน์: สื่อแหง่ อนาคต Social media: Future media. วารสารนกั บรหิ าร มหาวิทยาลัยกรุงเทพ, 31 (4), 99-103. พริ พร หมุนสนทิ และอจั จิมา เล้ยี งอยู่. (2553). การพฒั นาเวบ็ ไซต์ดว้ ย XHTML, CSS และ Javascript. กรงุ เทพฯ: เคทีพ.ี เพยี งพิศ ชะโกทอง. (ม.ป.ป.). การใช้ Path สร้างงานกราฟกิ อยา่ งละเอียด. สบื ค้นเม่ือ 2 มนี าคม 2560, จาก http://elearning.nsru.ac.th/web_elearning/paingpit/pan2-5.htm. ฟอนต์.คอม. (2552). Homepage: ฟอนต์.คอม. สบื ค้นเมือ่ 16 สงิ หาคม 2560, จาก https://www.f0nt.com/release. มนัสวิน แสนคา. (2557). การเลอื กใช้ Font ในการออกแบบเว็บไซต์. สืบค้นเมอ่ื 5 ธันวาคม 2560, จาก http://www.siamhttp.com/site/article/how-to-use-fonts-for-web- design.html. ราชวิทย์ ทิพย์เสนา. (2560). การสรา้ งสรรค์ภาพประกอบตาราวชิ าการ. [ไฟล์คอมพิวเตอร์]. อุดรธานี: สาขาวิชาสารสนเทศศาสตร์ มหาวทิ ยาลยั ราชภัฏอุดรธานี. วฤษาย์ ร่มสายหยุด. (2556). พัฒนาเว็บไซตด์ ้วย HTML5 ฉบบั มืออาชพี . กรงุ เทพฯ: ซเี อ็ด ยูเคชน่ั . วนั บลี ีฟ. (2560). หลกั การออกแบบเว็บขนั้ พน้ื ฐาน พร้อมองค์ประกอบและรูปแบบโครงสรา้ ง. สบื ค้นเม่ือ 18 ธันวาคม 2560, จาก https://www.1belief.com/article/website- design. วโิ รจน์ ชัยมลู และสพุ รรษา ยวงทอง. (2558). ความรู้เบ้อื งต้นเกีย่ วกบั คอมพิวเตอร์และเทคโนโลยี สารสนเทศ ฉบบั ปรบั ปรุง 2015-2016. กรงุ เทพฯ: โปรวชิ ัน่ . ศุภชยั สมพานชิ . (2556). Basic HTML5 with CSS3 & jQuery. นนทบรุ ี: ไอดีซฯี . สมชาย มโนธรารักษ์ และอัจจมิ า เลย้ี งอย.ู่ (2553). ใชง้ าน CSS ใหเ้ ต็มประสิทธิภาพ. กรงุ เทพฯ: เคทีพี คอมพ์ แอนด์ คอนซัลท์.

508 BIBLIOGRAPHY สุธี พงศาสกุลชัย และณรงค์ ลา่ ดี. (2551). เวบ็ เทคโนโลยี (Web Technology). กรุงเทพฯ: เคทีพี คอมพ์ แอนด์ คอนซัลท์. สุรเชษฐ์ วงศ์ชัยพรพงษ์. (2549). เทคนิคการประยกุ ตใ์ ช้งานสไตล์ชที (CSS). กรงุ เทพฯ: เคทีพี คอมพ์ แอนด์ คอนซัลท์. อนนั วาโซะ. (2558). Graphic Design for Printing & Publishing. นนทบุรี: ไอดีซฯี . อวยพร โกมลวิจติ รกุล. (2558). สร้าง Mobile App ขา้ มแพลตฟอรม์ ด้วย PhoneGap. กรุงเทพฯ: วิตตี้กรปุ๊ . Aaditri Technology. (2016). Aaditri Technology - A Perfect Web Hosting Company in Delhi for Launching a Website. Retrieved February 10, 2018, from http://www.aaditritechnology.com/blog/aaditri-technology-a-perfect-web- hosting-company-in-delhi-for-launching-a-website. Adobe. (2017a). Adobe Dreamweaver CC. [Computer Software]. San Jose, California, USA: Adobe. _______. (2017b). Adobe Photoshop CC. [Computer Software]. San Jose, California, USA: Adobe. _______. (2018). Creative Cloud Plans & Pricing. Retrieved February 12, 2018, from https://www.adobe.com/creativecloud/plans.html. Adobe Color CC. (n.d.). Explore | Most Popular Adobe Color CC. Retrieved February 13, 2018, from https://color.adobe.com/create. Aliehous1. (n.d.). Neutral colors Color Palette. Retrieved February 5, 2018, from https://www.color-hex.com/color-palette/19619. Am2b. (2560). เรียนรู้ 9 ประเภทของเวบ็ ไซต์ ทีใ่ ช้งานแตกต่างกนั . สบื ค้นเมอื่ 12 กันยายน 2560, จาก https://www.am2bmarketing.co.th/web-development-article/9- types-websites. Android. (2014). Homepage: Android. Retrieved February 15, 2018, from https://www.android.com. Balkhi, S. (2017). How to Display Different Sidebar for Each Post and Page in WordPress. Retrieved February 10, 2018, from https://www.wpbeginner.com/wp-themes/display-different-sidebar-for-each- post-and-page-for-wordpress. Befonts. (n.d.). Homepage: Befonts. Retrieved October 23, 2018, from https://befonts.com. Berrington, K. (2018). Where The Vogue Editors Are Going This Winter. Retrieved October 23, 2018, from https://www.vogue.co.uk/gallery/where-the-vogue- editors-are-going-this-winter. Bishop, C. (2003). What is a Web Application Server ?. Retrieved February 22, 2018, from http://www.resultantsys.com/index.php/general/what-is-a-web- application-server.

BIBLIOGRAPHY 509 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. Burnham, A. (2018). What are ‘Responsive Logos’ and Why are They the Way Forward?. Retrieved May 30, 2018, from https://diony.co.uk/uncategorised/responsive-logos-way-forward. Candelita. (n.d.). Finding The Perfect Font. Retrieved February 30, 2018, from https://candelita.is/finding-perfect-font. Cann, M. (2017). 10 inspirational graphic design trends for 2018. Retrieved February 15, 2018, from https://99designs.com/blog/trends/graphic-design- trends-2018. Chapman, C. (2010). Color Theory for Designers: How To Create Your Own Color Schemes. Retrieved February 30, 2018, from https://www.smashingmagazine.com/2010/02/color-theory-for-designer-part-3- creating-your-own-color-palettes. Computerworld. (2018). Hompage: Computerworld. Retrieved February 13, 2018, from https://www.computerworld.com. CS Loxinfo. (2560). รจู้ กั เทคโนโลยี Cloud Computing. สืบค้นเมื่อ 25 เมษายน 2560, จาก http://dccloud.csloxinfo.com/th/wecloud01. Davis, B. (2017). 23 examples of duotones and colour filters in web design. Retrieved August 20, 2017, from https://econsultancy.com/23-examples-of- duotones-and-colour-filters-in-web-design. Enjoyday. (2552). การออกแบบระบบนาทาง (Site Navigation Design). สบื ค้นเม่อื 20 พฤษภาคม 2560, จาก http://www.enjoyday.net/site-navigation-design.html. Flaticon. (n.d.). Travel App. Retrieved August 12, 2017, from https://www.flaticon.com/packs/travel-app-14. Fowler, J. & Rodd, E. (2013). Web 4.0: The Ultra-Intelligent Electronic Agent is Coming. Retrieved August 23, 2017, from https://bigthink.com/big-think- tv/web-40-the-ultra-intelligent-electronic-agent-is-coming. Funemployed. (n.d.). Homepage: funemployed. Retrieved August 23, 2017, from http://funemployed.life. Fylan, J. (2018). 35+ Best Slideshow WordPress Themes 2018. Retrieved March 16, 2018, from https://www.theme-junkie.com/best-slideshow-wordpress- themes. GitHub. (2018). ATOM. [Computer Software]. San Francisco, California, USA: GitHub. Google Fonts. (n.d.). Homepage: Google Fonts. Retrieved March 12, 2018, from https://fonts.google.com.

510 BIBLIOGRAPHY Gumtree. (2016). Homepage: Gumtree. Retrieved April 15, 2018, from https://www.gumtreejobs.sg. Hardwick, J. (2017). 75 Actionable SEO Tips (That Work Like A Charm in 2018). Retrieved March 23, 2018, from https://ahrefs.com/blog/seo-tips. Hostinglotus. (2018). Register Domain. Retrieved February 10, 2018, from https://www.hostinglotus.com/hosting/cart.php?a=add&domain=register. IBM Knowledge Center. (2014). TCP/IP concepts. Retrieved March 10, 2018, from https://www.ibm.com/support/knowledgecenter/ru/SSLTBW_2.1.0/com.ibm.z os.v2r1.hala001/itctcpipcon.htm. Joshi, B. (2014). Understanding the Proper Way to Lay Out a Page with HTML5. Retrieved May 10, 2017, from https://www.developer.com/lang/understanding-the-proper-way-to-lay-out-a- page-with-html5.html. Krauss. (2015). File: CSS3 taxonomy and status-v2.png. Retrieved May 2, 2017, from https://commons.wikimedia.org/wiki/File:CSS3_taxonomy_and_status- v2.png. Lu, L. (2018). How to Increase ROI Through Your Website’s Footer. Retrieved August 3, 2018, from https://envato.com/blog/how-to-increase-roi-through- your-websites-footer. Mickey. (2018). Các Máy Chủ Phân Giản DNS Miễn Phí Tốt Nhất. Retrieved August 10, 2018, from https://www.vouu-blog.site/archives/dns-free. Microsoft. (2018). Microsoft Notepad. [Computer Software]. Redmond, Washington, USA: Microsoft. Moreno, H. (2011). Warm and Cool – Color Psychology in Web Design. Retrieved August 30, 2017, from https://www.templatemonster.com/blog/warm-cool- color-psychology-web-design. Nice, B. (2017). Best Practices of Responsive Web Design. Retrieved August 20, 2018, from https://medium.com/level-up-web/best-practices-of-responsive- web-design-6da8578f65c4. Nurture Digital. (2016). Homepage: Nurture Digital. Retrieved May 5, 2018, from http://www.nurturedigital.com. NYCPride. (n.d.). Hompage: NYC PRIDE WORLD. Retrieved August 4, 2017, from https://2019-worldpride-stonewall50.nycpride.org. Parboonpasent, W. (2560). เทคนคิ ทาภาพ DUOTONES ทาง่ายไดภ้ าพสวย. สบื คน้ เม่อื 25 เมษายน 2560, จาก https://www.grappik.com/duotones. Pengadprinting. (2012). Introduction and the Color Wheel. Retrieved May 14, 2018, form http://www.pengadprinting.com/content/color-theory-part-i- primer-1.

BIBLIOGRAPHY 511 Pitithanarith, P. (2557). [Infographic] ข้อแตกตา่ งระหว่างฟอนต์ Serifs กบั Sans Serifs. สบื คน้ เมื่อ 23 เมษายน 2560, จาก https://www.marketingoops.com/reports/infographic-reports/infographic-serifs- vs-sans. Politico. (2018). Homepage: Politico. Retrieved March 6, 2018, from https://www.powderlife.com. Powerlife. (2018). Homepage: Powderlife. Retrieved May 20, 2018, from https://www.powderlife.com. RapidTables. (n.d.). HTML Color Codes. Retrieved February 20, 2018, from https://www.rapidtables.com/web/color/html-color-codes.html. Rawpixel. (n.d.). Free creative resources. Retrieved February 20, 2018, from https://www.creativebloq.com/features/10-website-navigation-trends-for-2017. Rocheleau, J. (2018). Top web navigation trends. Retrieved February 22, 2018, from https://www.creativebloq.com/features/10-website-navigation-trends-for- 2017. Saikam, W. (2559). 7 วธิ ี เลือกฟอนต์อย่างไร ให้เข้ากับเว็บไซต์คุณ. สบื คน้ เม่ือ 5 พฤษภาคม 2560, จาก https://blog.readyplanet.com/15773079/content-marketing-how-to- choose-perfect-fonts-for-your-website. Sherwin, K. (2016). Universal Navigation: Connecting Subsites to Main Sites. Retrieved January 23, 2017, from https://www.nngroup.com/articles/universal-navigation. Snell, S. (2016). Web Design Mega Menu Examples for Design Inspiration. Retrieved January 23, 2017, from https://www.vandelaydesign.com/mega- menus. Storm, A. (2018). CSS material design checkbox. Retrieved January 26, 2017, from https://freefrontend.com/css-checkboxes. Suman, D. (2016). HTTP Protocol. Retrieved January 13, 2016, from http://blogs.innovationm.com/http-protocol. Svensson, S. (n.d.). Homepage: Insidethehead. Retrieved August 18, 2018, from https://insidethehead.co. Triaetc. (2018). Homepage: Triaetc. Retrieved August 20, 2018, from https://www.triaetc.com. Vecteezy. (n.d.). Avatar Icons Vector. Retrieved May 3, 2018, form https://www.vecteezy.com/vector-art/133253-avatar-icons-vector. W3Schools. (1999a). HTML Introduction. Retrieved January 22, 2016, from https://www.w3schools.com/html/html_intro.asp. _______. (1999b). HTML File Paths. Retrieved January 22, 2016, from https://www.w3schools.com/html/html_filepaths.asp.

512 BIBLIOGRAPHY W3Schools. (1999c). HTML Symbols. Retrieved January 23, 2016, from https://www.w3schools.com/html/html_symbols.asp. _______. (1999d). HTML5 Semantic Elements. Retrieved January 22, 2016, from https://www.w3schools.com/html/html5_semantic_elements.asp. _______. (1999e). CSS Units. Retrieved December 23, 2016, from https://www.w3schools.com/cssref/css_units.asp. _______. (1999f). Responsive Web Design - Media Queries. Retrieved January 28, 2018, from https://www.w3schools.com/css/css_rwd_mediaqueries.asp. _______. (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 _______. (1999m). CSS Form. Retrieved August 1, 2017, from https://www.w3schools.com/css/css_form.asp. WebFontGenerator. (n.d.). Web Font Generator. Retrieved January 23, 2017, from https://www.web-font-generator.com. White, T. (2016). A simple and elegant CSS radio button. Retrieved August 14, 2017, https://freefrontend.com/css-radio-buttons. YETI. (n.d.). Homepage: YETI Cycles. Retrieved January 22, 2018, from https://www.yeticycles.com.

ดชั นี ก คุณสมบตั ิ.......71, 80, 104, 155, 160, 170, 175, 180, 199, 201, 210, 222, 230, กราฟิก .......23, 35, 47, 50, 52, 60, 63, 65, 357, 364, 391, 429, 431, 433 240, 248, 250, 254, 259, 260 กล่องแกลเลอร่ีภาพ................................. 446 เครือข่าย...1, 2, 3, 4, 5, 6, 7, 8, 12, 15, 19 กลอ่ งเครอ่ื งมือ ................................359, 360 เครอ่ื งมือเคลื่อนย้าย ................................367 การกาหนดค่า ...................................71, 115 เครอ่ื งมือดูดสี...........................................391 การขยายภาพ ......................................... 454 เครื่องมือตกแตง่ ภาพ ...............................383 การจดั วางตาแหน่งวตั ถุ........................... 199 เครื่องมือตดั ภาพ......................................382 การประกาศคุณสมบตั ิ............................. 115 เครอ่ื งมือเติมสี .........................................381 การสร้างเว็บไซต์ ........................................23 เครอ่ื งมอื พิมพ์ตัวอักษร ............................379 แกลเลอรภี่ าพ.......................................... 440 เครอ่ื งมือลบภาพ......................................389 เครื่องมอื เลือกพื้นที่..................................368 ข เคร่ืองมอื วาดรปู ร่าง .................................372 เครื่องมือวาดรปู ร่างอสิ ระ ........................374 ขอ้ ความ ..... 155, 157, 219, 229, 230, 239, เคร่ืองแม่ขา่ ย ............................................. 18 240, 241, 259, 261 เคา้ โครงเว็บเพจ................................ 28, 278 เค้ารา่ ง.....................................................249 ค โครงขา่ ย ...................................................... 1 โครงสรา้ งแบบตาราง ................................. 27 คน้ คนื ...........................................................1 โครงสร้างแบบใยแมงมุม ............................ 27 ความกวา้ ง............................................... 188 โครงสรา้ งแบบเรียงลาดับ........................... 26 ความคดิ เห็น............................................ 142 โครงสร้างแบบลาดับชัน้ ............................. 26 ความละเอียดของภาพ................................47 โครงสรา้ งเวบ็ ไซต์..........................23, 24, 25 ความสงู ................................................... 188 โครงสีสามเหลี่ยม....................................... 58 คอมพวิ เตอร์แมข่ ่าย......................................6 คอมพิวเตอร์ลูกข่าย......................................6 จ คา่ แรกเริ่ม ............................................... 258 คา่ สืบทอด ............................................... 258 จดั การ ...............1, 2, 5, 10, 12, 18, 19, 23 คาส่งั ......69, 70, 77, 78, 80, 90, 102, 104, จดั เกบ็ .......... 1, 5, 6, 9, 10, 12, 14, 17, 19 จาวาสคริปต์ ............................................491 108, 109 จดุ เชอ่ื มโยง.....................................345, 346

514 INDEX ฉ ป เฉดสี .......................................................... 23 ปฏิสัมพนั ธ์...................................... 471, 498 ประมวลผลแบบกลมุ่ เมฆ..............................9 ช ปัญญาประดิษฐ์ ............................................9 แปลงพิกเซล............................................ 421 เช่ือมต่อ ..1, 3, 4, 5, 6, 7, 8, 10, 15, 18, 19 โปรแกรมแสดงผลเวบ็ ............................4, 69 ซ ผ ซอฟต์แวร์ .....................................1, 7, 9, 16 ผู้ให้บริการเว็บ..............................................5 เผยแพร่......1, 3, 9, 10, 11, 12, 13, 15, 19, ด 23, 24, 25, 61, 63 ดจิ ิทลั .................................................. 1, 2, 7 โดเมนเนม..............................12, 13, 14, 15 แผนผงั เวบ็ ไซต์........................................... 25 ต พ ตราสัญลกั ษณ์..................................... 29, 53 พาณชิ ย์อเิ ล็กทรอนิกส์..................................2 ตัวกรองภาพ ...................................412, 461 พาเนล ....... 317, 318, 321, 333, 341, 348, ตัวชี้เมาส์..................................................255 ตวั อักษร...................................................222 352, 363, 381, 391, 399, 400, 406 ตาราง 315, 320, 326, 327, 330, 335, 336, พกิ เซล.................................................34, 47 337, 338, 339, 342, 344 พน้ื ทท่ี ่ีสามารถมองเหน็ ............................ 264 พน้ื หลงั .................................................... 155 ท แพ็กเกจ........................................................4 โพรโทคอล...........................1, 3, 4, 5, 6, 16 เทคโนโลยี...................1, 2, 7, 9, 10, 19, 21 แท็ก...............69, 71, 78, 89, 98, 102, 103 ฟ แทรกเน้ือหา ............................................241 ฟอนต์............................................. 433, 464 น ฟอรม์ ........471, 476, 477, 481, 482, 484, นักพฒั นาเว็บ .............................................74 489, 490, 491, 496, 497, 498, 502 บ ภ บิดภาพ .................................................... 418 ภาพบิตแมพ .............................................. 47 บูลีน ........................................................... 72 ภาพเวกเตอร์ ............................................. 48 เบลอภาพ.................................................412 ภาพสไลด์ .................................................. 31 แบบอักษร ...................... 60, 433, 464, 466 ภาพสไลด์โชว์ .......................................... 433 ภาษาทางคอมพิวเตอร์............................... 24

ภาษามารค์ อพั ............................................69 INDEX 515 ภาษาสครปิ ต์....................... 18, 36, 70, 471 ไวยากรณ์...........................69, 74, 104, 109 ม ส เมทาดาทา.........................................10, 102 แม่แบบสาเร็จรปู ..................................... 323 สไตล์ชีต... 31, 37, 61, 75, 80, 81, 88, 101, 278, 498, 502 ร สงั เคราะห์.................................................... 1 รหสั แอสกี ..................................................69 สารสนเทศ................1, 2, 7, 15, 21, 23, 65 ระบบนาทาง...........................23, 30, 35, 36 สี 23, 24, 29, 33, 36, 51, 52, 55, 56, 57, ระยะห่างของขอบดา้ นนอก ..................... 194 ระยะหา่ งจากขอบด้านใน ........................ 196 58, 59, 63 รายการ ................243, 245, 246, 248, 261 รูปแบบ....155, 160, 161, 163, 1 170, 180, สีกลาง........................................................ 59 สีใกล้เคียงกัน ............................................. 58 181, 182, 184, 188, 190, 198, 199, สใี กลเ้ คียงกับสคี ู่ตรงข้าม............................ 57 สคี ่ตู รงขา้ ม................................................. 57 201, 203, 208, 210, 222, 229, 230, สีโทนเดยี ว ................................................. 59 สืบค้น ......... 1, 2, 8, 11, 21, 30, 65, 66, 67 231, 240, 246, 254, 255, 257, 261 สื่อสังคมออนไลน์......................................... 8 เส้นขอบ ................................................... 178 ล เสียง.............................. 341, 342, 343, 344 แสดงภาพทับเน้ือหาหลัก .........................457 เลเยอร์ ............................................392, 393 ห ว หน่วยวดั ค่า..............................................150 วงลอ้ สี........................................................55 หมายเลขประจาเครอื่ ง................................. 4 วรรณะของสี ..............................................56 หมายเลขประจาอุปกรณ์.............................. 4 วิเคราะห์ ......................................................1 วดิ ีโอ ......................................341, 343, 344 อ เว็บเชิงความหมาย .....................................10 เวบ็ เซิรฟ์ เวอร์.............................................16 ออกแบบเวบ็ ไซต์................................. 23, 70 เวบ็ ไซต์.. 1, 2, 3, 5, 7, 8, 9, 10, 11, 12, 13, ออกแบบเว็บเพจ........................................ 24 อัตราส่วน............. 264, 266, 267, 297, 298 14, 15, 16, 17, 18, 19, 21, 23, 24, 25, อินเทอร์เนต็ .....1, 2, 3, 5, 6, 7, 8, 9, 18, 19 อิลเิ มนต์...............................72, 74, 75, 296 26, 27, 29, 30, 36, 37, 38, 39, 40, 41, อิลเิ มนต์เชิงความหมาย.............................. 98 อีเมล......................................5, 6, 8, 17, 18 49, 50, 52, 53, 54, 55, 56, 57, 59, 60 เว็บเพจ......13, 26, 27, 29, 39, 47, 69, 471 เวบ็ โฮสต้ิง............................................17, 18

516 INDEX อุปกรณ์.......263, 264, 265, 266, 268, 278, D 279, 288, 292, 300, 301, 304, 309 Data Center ............................................ 18 แอตทริบิวต์...................................71, 72, 76 Datalist .................................................. 488 แอปพลิเคชัน.............................. 40, 41, 313 Declaration ........................................... 115 ไอคอน .....................................................317 Descendant .......................................... 125 ฮ Disabled ................................................ 490 โฮมเพจ ...................................................... 13 ไฮเปอรล์ ิงก์.................................................. 9 E A Elastic Layout....................................... 279 Absolute Length ..................................150 Element ................................................ 123 Adjacent Sibling ..........................127, 128 External Style Sheet........................... 118 Adobe Dreamweaver CC. 313, 319, 320, F 348, 355 Adobe Photoshop CC...... 357, 364, 367, Fixed Layout ........................................ 279 Footer.................................................... 287 429, 431 Artificial Intelligence..........................9, 10 G Attribute .............................. 114, 130, 135 Autofocus..............................................489 General Sibling............................ 128, 129 avaScript................................................471 Gothic ...................................................... 60 Gradients................................................. 51 B Greater-than bracket ............................ 71 Grouping................................................ 141 Big Data...................................................... 1 Button.................................. 474, 476, 487 H C Header................................................... 280 Homepage .......................... 26, 65, 66, 67 Cascading Style Sheets .... 113, 114, 151 HTML5 . 70, 79, 81, 88, 95, 98, 101, 104, Case-Insensitive...................................... 74 Child..................................... 125, 126, 127 109, 111, 121, 123, 130, 141, 151, Class............................ 115, 119, 120, 137 471, 503 Content .................................................282 I ID ................................................. 115, 121 Information.................................. 1, 11, 16 Inline Style .................................. 116, 117

INDEX 517 Input ..............................................473, 492 Selector....115, 119, 120, 130, 133, 134, Interactive.....................................471, 498 135, 139, 142 Internal Style Sheet ........................... 117 Selectors .................... 348, 350, 351, 352 L Serif ................................................... 60, 61 Label ..................................................... 489 T Less-than bracket ..................................71 Liquid Layout....................................... 279 Tag............................... 69, 71, 73, 92, 102 Textarea .......................................486, 497 M Transparency.......................................... 49 Media Queries..............................265, 311 U N Universal ......................................122, 123 Navigation Bar..............................281, 304 V O Value ...................................................... 115 Viewport.......................................264, 265 OWL ..........................................................10 W P W3C............................. 113, 114, 115, 151 Package ...................................................... 4 Web 1.0 ................................................... 10 Properties ..........326, 330, 338, 342, 351 Web 2.0 ................................................... 10 Property................................................ 115 Web 3.0 ................................................... 10 Pseudo-Classes...................136, 137, 138 Web 4.0 ............................................ 10, 21 Pseudo-Elements........................139, 140 WYSIWYG ............................................... 313 R Relative Length ................................... 150 Required ............................................... 490 Responsive .....42, 50, 66, 263, 288, 296, 297, 300, 306, 309, 311 Responsive Web Design.............263, 311 S Sans Serif ..........................................60, 61 Select ...................................485, 486, 496