HTML Input Attributes

บทเรียนนี้จะอธิบายแอตทริบิวต์ต่างๆ สำหรับแท็ก <input> ใน HTML value Attribute value แอตทริบิวต์ใช้ระบุค่าเริ่มต้นสำหรับฟิลด์อินพุต: ตัวอย่าง input value attribute แอตทริบิวต์ใช้ระบุค่าเริ่มต้นสำหรับฟิลด์อินพุต: ชื่อจริง: นามสกุล: readonly Attribute แอตทริบิวต์ readonly ระบุว่าฟิลด์อินพุตเป็นแบบอ่านอย่างเดียว ฟิลด์อินพุตแบบอ่านอย่างเดียวไม่สามารถแก้ไขได้ (อย่างไรก็ตาม ผู้ใช้สามารถแท็บไปยังฟิลด์นั้น เน้นสี และคัดลอกข้อความจากนั้น) ค่าของฟิลด์อินพุตแบบอ่านอย่างเดียวจะถูกส่งเมื่อทำการส่งแบบฟอร์ม ตัวอย่าง ป้อนข้อมูลแบบอ่านอย่างเดียว: input readonly attribute แอตทริบิวต์แบบอ่านอย่างเดียวระบุว่าฟิลด์อินพุตควรเป็นแบบอ่านอย่างเดียว (ไม่สามารถเปลี่ยนแปลงได้): ชื่อจริง: นามสกุล: disabled Attribute disabled แอตทริบิวต์อินพุตใช้ในการระบุว่าปิดใช้งานช่องอินพุต disabled input field จะไม่สามารถคลิกได้ โดยค่าของ disabled input field จะไม่ถูกส่งเมื่อกดส่งแบบฟอร์ม ตัวอย่าง […]

HTML Form Elements

ในบทเรียนจะอธิบายเกี่ยวกับ element form ที่ใช้งานต่างกัน HTML <form> สามารถมีองค์ประกอบแบบฟอร์มต่อไปนี้ตั้งแต่หนึ่งรายการขึ้นไป: <input> Element องค์ประกอบแบบฟอร์มที่ใช้มากที่สุดอย่างหนึ่งคือ<input> องค์ประกอบนี้สามารถแสดงได้หลายวิธี ขึ้นอยู่กับ type แอตทริบิวต์ ตัวอย่าง The input Element ชื่อ: <label> Element <label>ใช้กำหนดป้ายกำกับสำหรับองค์ประกอบหลายรูปแบบ <label>มีประโยชน์สำหรับผู้ใช้โปรแกรมอ่านหน้าจอ เนื่องจากโปรแกรมอ่านหน้าจอจะอ่านออกเสียงฉลากเมื่อผู้ใช้โฟกัสไปที่องค์ประกอบอินพุต <label>ยังช่วยผู้ใช้ที่มีปัญหาในการคลิกพื้นที่ขนาดเล็กมาก (เช่น ปุ่มตัวเลือกหรือช่องทำเครื่องหมาย) เนื่องจากเมื่อผู้ใช้คลิกข้อความภายในองค์ประกอบ องค์ประกอบดังกล่าวจะ <label> สลับปุ่มตัวเลือก/ช่องทำเครื่องหมาย แอตทริบิวต์ for ของ <label> แท็กควรเท่ากับidแอตทริบิวต์ขององค์ประกอบ <input> เพื่อผูกเข้าด้วยกัน <select> Element <select>ใช้กำหนดรายการแบบ drop-down list: ตัวอย่าง select Element select element ใช้กำหนดรายการแ drop-down list: เลือกยี่ห้อรถ: VolvoSaabFiatAudi […]

HTML Forms

แบบฟอร์ม HTML ใช้เพื่อรวบรวมอินพุตของผู้ใช้ อินพุตของผู้ใช้มักถูกส่งไปยังเซิร์ฟเวอร์เพื่อประมวลผล ตัวอย่าง HTML Forms ชื่อ: นามสกุล: หากคุณคลิกปุ่ม “ส่ง” ข้อมูลแบบฟอร์มจะถูกส่งไปยังหน้าชื่อ “/action_page.php” <form> Element แท็ก <form> ใช้เพื่อสร้างรูปแบบ HTML สำหรับการป้อนข้อมูลของผู้ใช้: <form> คือคอนเทนเนอร์สำหรับองค์ประกอบอินพุตประเภทต่างๆ เช่น: ช่องข้อความ ช่องทำเครื่องหมาย ปุ่มตัวเลือก ปุ่มส่ง ฯลฯ <input> Element <input>เป็นองค์ประกอบรูปแบบที่ใช้มากที่สุด สามารถแสดงได้หลายวิธี ขึ้นอยู่กับ type แอตทริบิวต์ ตัวอย่างบางส่วน: พิมพ์ คำอธิบาย <input type=”text”> แสดงฟิลด์ป้อนข้อความบรรทัดเดียว <input type=”radio”> แสดงปุ่มตัวเลือก (สำหรับเลือกหนึ่งในหลายตัวเลือก) <input type=”checkbox”> แสดงกล่องกาเครื่องหมาย (สำหรับการเลือกหลายตัวเลือก) <input type=”submit”> แสดงปุ่มส่ง […]

HTML URL Encode

URL (Uniform Resource Locator) คือชื่อที่ใช้เรียนกที่อยู่ของเว็บไซต์ URL สามารถประกอบด้วยคำ (เช่น hostatom.com) หรือ IP (Internet Protocol) address เช่น 192.68.20.50 คนส่วนใช้ชื่อในการแทน url เพราะชื่อจำง่ายกว่าตัวเลข IP เว็บเบราว์เซอร์ใช้เรียกเพจจากเว็บเซิร์ฟเวอร์โดยใช้ URL เพื่อระบุเอกสาร (หรือข้อมูลอื่นๆ) บนเว็บที่อยู่เว็บ เช่น htttps://kb.hostatom.com/category/html/index อธิบาย: URL Schemes Scheme ย่อมาจาก ใช้กับ http HyperText Transfer Protocol เว็บเพจทั่วไป ที่ไม่มีการเข้ารหัส https Secure HyperText Transfer Protocol เว็บเพจที่ต้องการความปลอดภัย เข้ารหัส ftp File Transfer Protocol […]

การใช้อีโมจิใน HTML

อีโมจิคืออะไร ? อิโมจิดูเหมือนรูปภาพหรือไอคอน แต่ไม่ใช่ อิโมิจิเป็นตัวอักษร (อักขระ) จากชุดอักขระ UTF-8 (Unicode) UTF-8 ครอบคลุมอักขระและสัญลักษณ์เกือบทั้งหมดในโลก HTML charset Attribute หากต้องการแสดงหน้าเพจ HTML อย่างถูกต้อง เว็บเบราว์เซอร์ต้องทราบชุดอักขระที่ใช้ในเพจ สิ่งนี้ระบุไว้ในแท็ก<meta> หากไม่ได้ระบุ UTF-8 จะเป็นชุดอักขระเริ่มต้นใน HTML อักขระ UTF-8 เราไม่สามารถพิมพ์อักขระ UTF-8 จำนวนมากบนแป้นพิมพ์ได้ แต่สามารถแสดงโดยใช้ตัวเลขได้เสมอ (เรียกว่าentity numbers) เช่น A คือ 65 B คือ 66 C คือ 67 ตัวอย่าง การแสดงผล A B C การแสดงผล A B C […]

HTML Symbols

สัญลักษณ์ที่ไม่มีอยู่บนแป้นพิมพ์ของคุณสามารถเพิ่มได้โดยใช้ entities HTML Symbol Entities ต่อจากบทเรียนก่อนหน้า ในบทเรียนนี้จะพูดถึงสัญลักษณ์ทางคณิตศาสตร์ ทางเทคนิค ทางเงินตรา ปกติแล้วจะไม่ปรากฎอยู่บนคีย์บอร์ด หากต้องการเพิ่มสัญลักษณ์ดังกล่าวในหน้า HTML คุณสามารถใช้Entity Name และ Entity Number (สามารถอ้างอิงเลขฐานสิบหรือเลขฐานสิบหกได้เช่นกัน) ตัวอย่าง แสดงเครื่องหมายยูโร € พร้อมEntity Name เลขฐานสิบและค่าฐานสิบหก แสดงเครื่องหมายยูโร € แสดงเครื่องหมายยูโร € แสดงเครื่องหมายยูโร € ตัวอย่างสัญลักษณ์ทางคณิตศาสตร์ใน HTML สัญลักษณ์ Entity Number Entity Name อธิบายสัญลักษณ์ ∀ &#8704; &forall; FOR ALL ∂ &#8706; &part; PARTIAL DIFFERENTIAL ∃ &#8707; […]

HTML Entities

html entity คือ อักขระพิเศษที่ใช้ในการเขียนเว็บด้วย html สำหรับแทนที่เครื่องหมาย หากคุณใช้เครื่องหมายน้อยกว่า (<) หรือมากกว่า (>) ในข้อความของคุณ เบราว์เซอร์อาจผสมเครื่องหมายเหล่านี้กับแท็ก จึงจำเป็นต้องมีอักขระพิเศษในการแสดงเครื่องหมายแทน อักขระพิเศษ(entity)มีลักษณะดังนี้: ในการแสดงเครื่องหมายน้อยกว่า (<) เราสามารถเขียน: &lt; หรือ &#60; ข้อดีของการใช้  entity name: ชื่อentityจำง่ายข้อเสียของการใช้ entity name: :เบราว์เซอร์อาจไม่รองรับ entity nameทั้งหมด แต่จะรองรับ entity number การทำให้เนื้อหามีช่องว่างแบบไม่ตัดคำ  (Non-breaking Space) เอนทิตีที่ใช้สำหรับการทำให้เนื้อหาไม่แยกออกจากกันกันทั่วไปใน HTML คือ &nbsp; Non-breaking Space คือ ช่องว่างที่จะไม่ขึ้นบรรทัดใหม่ คำสองคำที่คั่นด้วยช่องว่างที่ไม่แบ่งจะติดกัน (ไม่แตกเป็นบรรทัดใหม่) สิ่งนี้มีประโยชน์เมื่อเกิดปัญหาการตัดคำขึ้นบรรทัดใหม่ซึ่งอาจส่งผลทำให้เนื้อหาอ่านแล้วไม่เข้าใจ ตัวอย่าง : การใช้ช่องว่างทั่วไปอีกประการหนึ่งคือการป้องกันไม่ให้เบราว์เซอร์ตัดช่องว่างในหน้า HTML หากคุณเขียนโค้ดช่องว่าง 10 ช่องในข้อความ […]

HTML Semantic Elements

Semantic elements = elements ที่มีความหมาย Semantic Elements คืออะไร ? Semantic Elements คำที่แทนกลุ่ม tag ที่มีการกำหนดเนื้อหาได้อย่างชัดเจนยกตัวอย่าง เช่น semantic elements: <form>, <table>, และ <article> – เป็นแท็กที่มีการกำหนดเนื้อหาอย่างชัดเจน non-semantic elements: <div> และ <span> – เป็นแท็กที่ไม่ได้บอกเกี่ยวกับเนื้อหา Semantic Elements ใน HTML เว็บไซต์ส่วนใหญ่ที่เขียนโดย html จะมีโค้ดเช่น <div id=”nav”> <div class=”header”> <div id=”footer”> เพื่อระบุว่าส่วนไหนคือ ส่วนหัว,ส่วนท้ายของเว็บเพจ ใน HTML มีsemantic elements บางตัวที่สามารถใช้เพื่อกำหนดส่วนต่างๆ ของหน้าเว็บ:   HTML <section> Element <section> element ใช้กำหนดส่วนในเอกสาร […]

HTML Responsive Web Design

Responsive web design คือการสร้างหน้าเว็บที่แสดงผลได้เหมาะสมกับทุกอุปกรณ์ ซึ่งจะมีการปรับขนาดหน้าจอแสดงผลของเว็บไซต์(viewport) โดยอัตโนมัติ Responsive Web Design คืออะไร ? Responsive Web Design คือการใช้ htmlและcss เพื่อปรับขนาด,ซ่อน,ย่อ/ขยาย เว็บไซต์อัตโนมัติทำให้เว็บไซต์ดูดีในทุกขนาด (เดสก์ท็อป แท็บเล็ต และโทรศัพท์) การตั้งค่า viewport ในการที่จะทำ responsive website คุณควรจะเพิ่มแท็ก <meta> ในหน้าเว็บของคุณ ตัวอย่าง การตั้งค่า Viewport ตัวอย่างนี้ไม่ได้ทำอะไรเลยนอกจากแสดงวิธีเพิ่ม viewport meta tag การตั้งค่าวิวพอร์ตของหน้าเว็บจะให้คำแนะนำแก่เบราว์เซอร์เกี่ยวกับวิธีควบคุมขนาดของหน้าเว็บ นี่คือตัวอย่างของหน้าเว็บที่ไม่มี viewport meta tag กับหน้าเว็บที่ม่ี viewport meta tag ที่ไม่มี viewport meta tag มี […]

HTML – The Head Element

<head> element คือ ส่วนที่เป็นเหมือนคอนเทนเนอร์ไว้ใส่ element อื่นๆ เช่น <style>, <meta>, <link>, <script>, <base>. <head> Element <head> element คือคอนเทนเนอร์สำหรับ meta data จะอยู่ระหว่าง Tag <html> และ <body> meta data เป็นข้อมูลเกี่ยวกับเอกสาร HTML meta data ไม่แสดงผลในเบราว์เซอร์ โดยทั่วไป meta data จะกำหนดชื่อเอกสาร ประเภทตัวอักษร สไตล์ สคริปต์ และข้อมูลเมตาอื่นๆ <title> Element <title> คือแท็กใช้ระบุชื่อเรื่องของเอกสาร ชื่อเรื่องต้องเป็นข้อความเท่านั้น และจะแสดงในแถบชื่อเรื่องของเบราว์เซอร์หรือในแท็บของหน้า แท็ก<title>นั้นสำคัญมากสำหรับการปรับแต่งเว็บไซต์ให้ติดเสิร์ช  เพราะอัลกอริทึมของเครื่องมือค้นหาใช้ชื่อหน้าเว็บเพื่อตัดสินใจลำดับเมื่อแสดงรายการหน้าในผลการค้นหา แท็ก<title>สามารถ: ดังนั้น พยายามตั้งชื่อให้ถูกต้องและมีความเหมาะสมกับเรื่องนั้นๆมากที่สุด ตัวอย่าง ชื่อเรื่องที่เป็นหัวของเนื้อหานี้ […]