ตัวอย่างการนำ HTML 5 ไปใช้

samsonnaze3 · 26/05/2012 12:18 pm

10. วิธีตรวจสอบว่า Browser ของเรานั้นรองรับ HTML5 ได้มากน้อยแค่ไหน

ให้เข้าไปที่ http://html5test.com/ มันจะแสดงรายละเอียดต่างๆว่า Browser ของเรา Support ในส่วนไหนบ้าง

samsonnaze3 · 26/05/2012 3:18 pm

11 . Article , Hgroup , Aside , Header , Footer element

ในการเขียน เว๊ปไซด์แบบ HTML5 จะมี tag ใหม่ แบ่งส่วนต่างๆของเว๊ปอย่างชัดเจน โดยมีดังต่อไปนี้

<header> เป็นส่วนของหัวข้อ มักจะอยู่บนสุด
<hgroup> เป็นการรวมกลุ่มของพวกหัวข้อต่างๆที่เป็น <h1>-<h5>
<article> เป็นส่วนของเนื้อหา
<aside> โดยมากจะใช้เป็นส่วนของการใส่ Banner
<footer> เป็นส่วนล่างสุดของเว๊ป ยกตัวอย่างเว๊ปนี้ เป็น @ 2010 Design by Mindphp Templates

ตัวอย่างโค๊ดที่เอาทุกอย่างมารวมกัน+CSS ด้วย

โค้ด: เลือกทั้งหมด

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset=utf-8>
<title>Sample HTML5 Structure</title>
<style>
header, nav, article, footer, address, section {
 display: block;
}
#container {
 width:900px;
 margin:auto;
 background-color:white;
}
header {
 background-color:#666;
}
nav li {
 display:inline;
 padding-right:1em;
}
nav a {
 color:white;
 text-decoration:none; 
}
nav a:hover {
 text-decoration:overline; 
}
h1, h2 {
 margin:0px;
 font-size:1.5em;
}
h2 {
 font-size:1em;
}
footer {
 background-color:#999;
 text-align:center;
}
</style>
<script>
document.createElement("article"); 
document.createElement("footer"); 
document.createElement("header"); 
document.createElement("hgroup"); 
document.createElement("nav"); 
</script>
</head>
<body>
<div id="container">
    <header>
     <h1>Sample HTML5 Structure</h1>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
            </ul>
        </nav>
    </header>
    <section>
     <hgroup>
         <h1>Main Section</h1>
            <h2>This is a sample HTML5 Page</h2>
        </hgroup>
     <article>
         <p>This is the content for the first article</p>
        </article>
        <article>
         <p>This is the content for the second article</p>
        </article>
    </section>
    <footer>
     <p>This is the Footer</p>
    </footer>
</div>
</body>
</html>

Credit : http://www.gilbertocortez.com

samsonnaze3 · 26/05/2012 3:41 pm

12. Details and Summary element

ถ้าคุณต้องการเขียนข้อความบางอย่างให้มีลูกเล่นว่า ถ้าเราคลิ๊กที่ข้อความนี้แล้วจะให้โชว์อีกข้อความหนึ่งขึ้นมา โดยปกติ อาจจะต้องเขียนด้วย javascript และ JQuery แต่ถ้าเป็นใน HTML5 นั้นแค่เขียน tag สั้นๆ ก็สามารถ ทำได้แล้ว โดยที่จะต้องมี
<details> ครอบ ข้อความที่ท่านต้องการที่จะทำลูกเล่นนี้
<summary>ครอบหัวข้อที่จะปรากฏในครั้งแรกที่เห็น
หลังจากปิด </summary> แล้วก็ให้ใส่ข้อความหรืออะไรก็ได้ลงไป เพื่อที่ เวลากดที่ข้อความตรง summary แล้ว จะแสดงข้อความที่ซ่อนออกมา

ตัวอย่างโค๊ด

โค้ด: เลือกทั้งหมด

<!DOCTYPE html>
<html>
<body>

<details>
<summary>What is your name?</summary>
<p>My name is .......</p>
</details>

</body>
</html>

samsonnaze3 · 26/05/2012 4:22 pm

13. Input type Email และ Input type Number

ในส่วนของ input Email กับ Number นั้นจะมีความพิเศษที่เพิ่มเข้ามาตรงที่

<input type="email /> ถ้าไม่ใส่ข้อมูลรูปแบบอีเมล เช่น [email protected] มันจะแสดงข้อความมาว่า ต้องใส่ email ให้ถูก

<input type="number"> เป็นกล่องใส่ตัวเลขที่มีตัว สปินกดขึ้นลง เพื่อเลือกเลขที่ต้องการได้

ตัวอย่างโค๊ด

โค้ด: เลือกทั้งหมด

<!DOCTYPE html>
<html>
<body>
<form>
เลือกตัวเลข<input name="number" type="number"/><br />
อีเมลของคุณ<input name="email" type="email"/><br />
<input type="submit" />
</form>
</body>
</html>

samsonnaze3 · 26/05/2012 4:33 pm

14. Required และ Placeholder

14.1 required นี้ ถ้าเราใส่เข้าไปใน input เช่น <input type="text" required /> แล้วถ้าเราไม่ใส่ข้อความอะไรเลย แล้วกด submit มันจะขึ้นข้อความเตือนว่า ให้ใส่ข้อความในช่องนี้

14.2 placeholder นี้ เป็นตัวแสดงใน input ประเภทที่ใส่ข้อความลงไป เพื่อบอกว่า ช่องข้อความนี้ควรใส่อะไรลงไป เช่น <input type="text" placeholder="กรุณาใส่ชื่อ" /> เมื่อใช้แล้วเวลาเราเห็น จะเห็นเป็น ตัวอักษรสีเทาๆจางๆ อยู่ในช่องข้อความ ซึ่งไม่มีผลอะไรกับข้อมูล แค่เป็นตัวบอกว่า ให้ใส่อะไรเข้าไป

ตัวอย่างโค๊ด

โค้ด: เลือกทั้งหมด

<!DOCTYPE html>
<html>
<body>
<form>
Name : <input name="name" type="text" required/><br />
Email : <input name="email" type="email" placeholder="[email protected]"/><br />
<input type="submit" />
</form>
</body>
</html>

*ในโค๊ดตัวอย่างนี้ถ้าเข้ามาครั้งแรกจะเห็นว่าในช่อง email จะขึ้นข้อความ [email protected] เป็นตัวสีเทาๆ ในช่อง Email และถ้าเราไม่กรอกข้อมูลชื่อลงไป แล้วกด submit มันจะขึ้นแจ้งว่าให้กรอกข้อมูลใน ช่องนั้น

เว็บบอร์ด PHP เว็บส่งเสริมการเรียนรู้ Hosting CRM ERP Server Programming ถาม-ตอบปัญหา

ตัวอย่างการนำ HTML 5 ไปใช้

Re: ตัวอย่างการนำ HTML 5 ไปใ้ช้

Re: ตัวอย่างการนำ HTML 5 ไปใ้ช้

Re: ตัวอย่างการนำ HTML 5 ไปใ้ช้

Re: ตัวอย่างการนำ HTML 5 ไปใ้ช้

Re: ตัวอย่างการนำ HTML 5 ไปใ้ช้

ผู้ใช้งานขณะนี้