Media, Forms & Semantic

HTML Form คืออะไร

HTML form คือกลุ่มของชุดคำสั่งที่สร้างขึ้นเพื่อรับ input จากผู้ใช้ การสร้าง form เริ่มจาก tag <form>...</form> แล้วจึงใส่ form element ต่างๆ เช่น <input>, <button> ไว้ระหว่าง tag เปิดและปิดของ form

ตัวอย่าง form สมบูรณ์จากสไลด์ (Application Form) ประกอบด้วยกรอบ <fieldset> ที่มีหัวข้อ "Student Information" ช่องกรอก Student ID และ Name (type text) ช่องเลือกวันเกิด (type date) และปุ่ม Submit ทุก <label> ผูกกับช่องกรอกของตัวเองผ่าน for ที่ตรงกับ id

<form>
    <fieldset>
        <legend>Student Information</legend>
        <label for="txtStudentID">Student ID</label><br>
        <input type="text" id="txtStudentID"><br>
        <label for="txtName">Name</label><br>
        <input type="text" id="txtName"><br>
        <label for="cldBD">Birth Date</label><br>
        <input type="date" id="cldBD">
        <button type="submit">Submit</button>
    </fieldset>
</form>

Form Elements ภาพรวม

<input> เป็นชุดคำสั่งหลักสำหรับรับค่าใน form และระบุประเภทด้วย attribute type ประเภทที่เรียนในบทนี้คือ text, password, radio, checkbox, email, tel และ date (รวมถึงตัวแปรอื่นของวันเวลา เช่น month, week, datetime-local)

type="text" และ type="password"

type="text" สร้างช่องกรอกข้อความบรรทัดเดียว (one-line text input field) ใช้คู่กับ <label> ที่มี attribute for เพื่อกำหนดป้ายชื่อให้ form element โดยค่าของ for ต้องตรงกับ id ของช่องที่ต้องการผูก

<label for="txtFN">First name</label>
<input type="text" id="txtFN"><br>
<label for="txtLN">Last name</label>
<input type="text" id="txtLN">

type="password" สร้างช่องกรอกบรรทัดเดียวที่ปิดบังตัวอักษร (masked) ใช้สำหรับรหัสผ่าน

<label for="txtLogin">Login</label>
<input type="text" id="txtLogin"><br>
<label for="txtPwd">Password</label>
<input type="password" id="txtPwd">

type="radio" และ type="checkbox"

type="radio" สร้างปุ่มตัวเลือกที่ใช้เมื่อเลือกได้เพียงตัวเลือกเดียว ตัวอย่างในสไลด์เป็นการเลือกกรุ๊ปเลือด 4 ตัวเลือก ทุกปุ่มมี name="bloodGr" เหมือนกัน แต่ value ต่างกัน และปุ่ม A มี checked จึงถูกเลือกไว้ตั้งแต่แรก

Blood Group: <br>
<input type="radio" name="bloodGr" value="A" checked>A<br>
<input type="radio" name="bloodGr" value="B">B<br>
<input type="radio" name="bloodGr" value="AB">AB<br>
<input type="radio" name="bloodGr" value="O">O<br>

type="checkbox" สร้างกล่องเลือกที่ใช้เมื่อเลือกได้หลายตัวเลือกพร้อมกัน (multiple-choice) หลักการตั้ง name ให้เหมือนกันเพื่อจัดกลุ่ม และใช้ checked กำหนดกล่องที่ถูกเลือกไว้ตั้งแต่แรก (กี่กล่องก็ได้) เหมือนกับ radio

What should I have for lunch? <br>
<input type="checkbox" name="food" value="SW">Sandwich<br>
<input type="checkbox" name="food" value="FC">Fried Chicken<br>
<input type="checkbox" name="food" value="HB">Hamburger<br>

type="tel", type="email" และ type="date"

type="tel" สร้างช่องสำหรับเบอร์โทรศัพท์ ซึ่งจะถูกตรวจสอบว่าตรงกับรูปแบบ (pattern) ที่กำหนดเมื่อ submit form รูปแบบนั้นเขียนเป็น regular expression ใน attribute pattern ตัวอย่างนี้บังคับรูปแบบ XXX-XXX-XXXX

What is your mobile phone?
<input type="tel" name="mobile" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">
<!-- Pattern: XXX-XXX-XXXX -->
<button type="submit">Submit</button>

type="email" สร้างช่องสำหรับอีเมล ซึ่งจะถูกตรวจสอบว่าเป็นรูปแบบของอีเมลเมื่อ submit form โดยไม่ต้องเขียน pattern เอง

What is your email?
<input type="email" name="userEmail">
<button type="submit">Submit</button>

type="date" แสดง date picker ให้ผู้ใช้เลือกวันที่ และจำกัดช่วงวันที่ได้ด้วย attribute min และ max ในตัวอย่างนี้ max="2010-01-01" หมายความว่าเลือกวันที่หลังจาก 1 มกราคม 2010 ไม่ได้

When is your birthday?
<input type="date" name="bd_d" max="2010-01-01">

นอกจาก date ยังมีตัวแปรอื่นที่เกี่ยวกับวันและเวลาอีก ได้แก่ type="week", type="month", type="datetime-local" และ type="time"

<input type="week"><br>
<input type="month"><br>
<input type="datetime-local"><br>
<input type="time">

attribute pattern และ Regular Expression

attribute pattern กำหนด regular expression ที่ค่าของ <input> จะถูกนำไปตรวจสอบเมื่อ submit form ส่วน regular expression คือลำดับของตัวอักษรที่ประกอบกันเป็นรูปแบบสำหรับค้นหา (search pattern) ตัวอย่างในสไลด์มีดังนี้

<textarea> และ <select>

<textarea> สร้างช่องรับข้อความหลายบรรทัด (multi-line text input control) ขนาดของกล่องกำหนดได้ด้วย attribute cols (จำนวนคอลัมน์) และ rows (จำนวนแถว) ข้อความที่อยู่ระหว่าง tag เปิดและปิดจะแสดงอยู่ในกล่องตั้งแต่แรก

Address:<br>
<textarea rows="3" cols="20">Input your
Thai Address here</textarea>

<select> สร้าง drop-down list โดยใส่ <option> ไว้ภายในเพื่อกำหนดตัวเลือกแต่ละรายการ ใช้ attribute selected กับ option ที่ต้องการให้เป็นค่าเริ่มต้น

Major:
<select name="majors">
    <option value="CS">Comp.Sci.</option>
    <option value="CE">Comp.Eng.</option>
    <option value="IS">Info.Sci.</option>
    <option value="IT">Info.Tech.</option>
</select>

<button> และ <fieldset>

<button> กำหนดปุ่มที่คลิกได้ ซึ่งภายในใส่ได้ทั้งข้อความและรูปภาพ ปุ่มมี 3 ประเภท ตาม attribute type

type="button"

ปุ่มทั่วไป (general-purpose) เช่น คลิกเพื่อเรียกใช้ฟังก์ชัน

type="reset"

ปุ่มสำหรับตั้งค่า form กลับสู่สถานะเริ่มต้น

type="submit"

ปุ่มสำหรับส่ง input ทั้งหมดใน form ไปยังปลายทาง

ตัวอย่างในสไลด์มีทั้งปุ่ม submit และปุ่ม reset (ข้อความ Clear) ภายใน form ที่ส่งไปยัง somewhere.html ด้วย method GET (รายละเอียดเรื่อง action/method อยู่ในการ์ดถัดไป)

<form action="somewhere.html" method="GET">
    First name:<input type="text" name="fistname"><br>
    Last name:<input type="text" name="lastname"><br>
    <button type="submit">Submit</button>
    <button type="reset">Clear</button>
</form>

<fieldset> วาดกรอบรอบกลุ่ม element ที่เกี่ยวข้องกันใน form พร้อมหัวข้อกำกับ (caption) ซึ่งกำหนดด้วย <legend>

<fieldset>
    <legend>Name</legend>
    First name:<br>
    <input type="text" name="fistname"><br>
    Last name:<br>
    <input type="text" name="lastname"><br>
</fieldset>

Form Validation

เมื่อผู้ใช้กรอกข้อมูล browser จะตรวจสอบว่าข้อมูลอยู่ในรูปแบบที่ถูกต้อง และอยู่ภายในเงื่อนไข (constraints) ที่กำหนด การตรวจสอบ form ฝั่ง client ทำได้ 2 วิธี คือ

HTML5 Form Attributes (Restriction attributes)

attribute กลุ่มนี้คือเงื่อนไขที่ใช้ในการ validate form

ตัวอย่างจากสไลด์ใช้ครบหลายตัว: ช่อง Mobile มี pattern และ title อธิบายรูปแบบ, ช่อง E-mail มี placeholder, required และ title, ช่อง Country code มี pattern="[A-Z]{3}" พร้อม title

<form>
    First name:<br><input type="text" name="fname"><br>
    Last name:<br><input type="text" name="lname"><br>
    Mobile:<br>
    <input type="tel" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
           title="Mobile: XXX-XXX-XXXX"><br>
    E-mail:<br>
    <input type="email" name="userid" placeholder="Your e-mail" required
           title="Required e-mail"><br>
    Country code:<br>
    <input type="text" pattern="[A-Z]{3}" title="A country code with three alphabet"><br>
    <p><button type="submit">Submit</button></p>
</form>

Form Submission

เมื่อผู้ใช้คลิกปุ่ม submit ข้อมูลทั้งหมดใน form จะถูกส่งออกไปยังหน้าปลายทางหรือ web server เพื่อประมวลผล การส่งถูกกำหนดด้วย attribute 2 ตัวของ <form>

action

กำหนดว่าจะส่ง form-data ไปที่ไหน เมื่อ submit

method

กำหนด HTTP method (GET/POST) ที่ใช้ส่ง form-data

Form ทำงานอย่างไร (How the Form works)

1. ผู้ใช้กรอกข้อมูลแล้วกดปุ่ม Submit
2. browser ทำ Form Validation
3. ถ้า form ไม่ผ่าน (invalid) จะย้อนกลับไปที่ form ให้ผู้ใช้แก้ไข ข้อมูลยังไม่ถูกส่ง
4. ถ้าผ่าน validation จะไปยัง server หรือปลายทางที่กำหนดใน action ด้วย HTTP method GET หรือ POST

GET vs POST

ตัวอย่างทั้งสองแบบส่งข้อมูลไปยัง somewhere.html เหมือนกัน ต่างกันแค่ค่า method (ชื่อช่อง fistname สะกดตามสไลด์)

<form action="somewhere.html" method="GET">
    First name:<input type="text" name="fistname"><br>
    Last name:<input type="text" name="lastname"><br>
    <button type="submit">Submit</button>
</form>

<form action="somewhere.html" method="POST">
    First name:<input type="text" name="fistname"><br>
    Last name:<input type="text" name="lastname"><br>
    <button type="submit">Submit</button>
</form>

Semantic Elements คืออะไร

คำว่า Semantic แปลว่า "มีความหมาย" (related to meaning in language or logic) semantic elements คือ tag ที่ใช้กำหนดส่วนต่างๆ ของหน้าเว็บ หรือใช้วางโครงสร้างของหน้าเว็บ (layout) ซึ่งจะนำไปใช้ร่วมกับ CSS ต่อไป

ก่อนมี "Semantic" Elements

ก่อนหน้านี้ นักพัฒนาใช้ tag ทั่วไปอย่าง <div> ร่วมกับ attribute class เพื่อแบ่งเนื้อหาออกเป็นส่วนๆ เช่น header, menubar, section, article และ footer ชื่อของส่วนเหล่านี้อยู่แค่ในค่าของ class ส่วนตัว tag ทุกตัวยังเป็น <div> เหมือนกันหมด

<body>
    <div class="header">Header</div>
    <div class="menubar">Menu Bar/Navigation Bar</div>
    <div class="section">
        <div class="article">Content Article 1</div>
        <div class="article">Content Article 2</div>
    </div>
    <div class="footer">Document Footer</div>
</body>

HTML5 Semantic Elements

โครงหน้าเว็บตัวอย่างในสไลด์วาง element ทั้ง 6 ตัวเรียงกันใน <body> พร้อม comment บอกหน้าที่ของแต่ละส่วน แผนผังด้านล่างแสดงตำแหน่งที่มักพบในหน้าเว็บทั่วไป

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Semantic Elements</title>
</head>
<body>
    <header><!--Document Header--></header>
    <nav><!-- Navigation tabs / Menu bars --></nav>
    <section><!-- Doc. section 1 --></section>
    <article><!-- Doc. section 2 --></article>
    <aside><!-- Sidebar --></aside>
    <footer><!-- Footer--></footer>
</body>
</html>

ตัวอย่างการใช้ semantic element แต่ละตัว

<header> — ในตัวอย่างใส่หัวข้อหลักของหน้าไว้ในส่วนหัว

<header><!-- Document Header -->
    <h1>This is Header Part</h1>
</header>

<footer> — ในตัวอย่างใส่ข้อมูลผู้โพสต์และข้อมูลติดต่อไว้ในส่วนท้าย

<footer><!-- Footer -->
    <p>Posted by: J.K.</p>
    <p>Contact information: jidapa.kra[AT]mahidol.edu</p>
</footer>

<nav> — รวมลิงก์นำทางไปยังหัวข้อต่างๆ ไว้ด้วยกัน

<nav><!-- Navigation tabs/Menu bars -->
    <a href="/html/">HTML</a> |
    <a href="/html5/">HTML5</a> |
    <a href="/css/">CSS</a> |
    <a href="/js/">JavaScript</a>
</nav>

<section> — ในตัวอย่างเป็นส่วนเนื้อเพลงที่มีหัวข้อ <h2> และย่อหน้า

<section><!-- Doc. section 1 -->
    <h2>Lyrics</h2>
    <p>Here's to the ones that we got<br>
       Cheers to the wish you were here,...
    </p>
</section>

<article> — ตัวอย่าง "Famous Cities" เป็น article ใหญ่ที่มี article เล็ก (One small article) ซ้อนอยู่ข้างใน 3 ชิ้น แต่ละชิ้นพูดถึงเมืองหนึ่งเมืองได้สมบูรณ์ในตัวเอง

<article>
    <h2>Famous Cities</h2>
    <article>
        <h2>London</h2>
        <p>London is the capital city of England.</p>
    </article>
    <article>
        <h2>Paris</h2>
        <p>Paris is the capital and most populous city of France.</p>
    </article>
    <article>
        <h2>Tokyo</h2>
        <p>Tokyo is the capital of Japan.</p>
    </article>
</article>

<aside> — ข้อความในตัวอย่างสไลด์บอกหลักการไว้เองว่า "This content should be related to the surrounding content." คือเนื้อหาข้างเคียงควรเกี่ยวข้องกับเนื้อหารอบๆ แต่แยกออกมาเป็นส่วนเสริม เช่น sidebar

<aside><!-- Sidebar -->
    <h2>
        This content should be related<br>
        to the surrounding content.
    </h2>
</aside>

<article> หรือ <section>?

Web Layouts

รูปแบบการจัดวางหน้าเว็บมีอยู่มากมาย สไลด์ยกตัวอย่างโครงพื้นฐานอย่างง่ายไว้ ประกอบด้วย Header บนสุด ตามด้วย Navigation Bar จากนั้นเป็นส่วนเนื้อหาที่แบ่งเป็น Content (ซ้าย) · Main Content (กลาง) · Content (ขวา) และปิดท้ายด้วย Footer

นอกจากนี้ layout ของเนื้อหาควรเปลี่ยนไปตามอุปกรณ์ (the Web Content Layout should vary by the devices) ลองกดสลับดูแต่ละแบบ

ตัวอย่าง HTML Layout

ตัวอย่างในสไลด์สร้าง layout 3 คอลัมน์ด้วย semantic elements: <header> · <nav> ที่มีลิงก์ 3 ลิงก์ · <article class="row"> ที่ครอบ <article class="column"> 3 ชิ้น (Column1–3) · และ <footer>

<header>
    <h1>Header</h1>
</header>
<nav>
    <a href="#">Link1</a>
    <a href="#">Link2</a>
    <a href="#">Link3</a>
</nav>
<article class="row">
    <article class="column">
        <h2>Column1</h2>
        <p>Lorem ipsum dolor sit amet … </p>
    </article>
    <article class="column">
        <h2>Column2</h2>
        <p>Lorem ipsum dolor sit amet … </p>
    </article>
    <article class="column">
        <h2>Column3</h2>
        <p>Lorem ipsum dolor sit amet … </p>
    </article>
</article>
<footer>
    <h1>Footer</h1>
</footer>

สไลด์ "HTML Layout (with CSS)" ยกตัวอย่างส่วนหนึ่งของไฟล์ CSS ที่ใช้ตกแต่ง header, footer และ nav

header, footer {
    background-color: #f1f1f1;
    padding: 3px;
    text-align: center;
}
/* Navigation bar */
nav {
    overflow: hidden;
    background-color: darkblue;
}
...