สร้างฟอร์มที่สมบูรณ์ เข้าถึงได้ และพร้อมใช้งานจริง
เปิดบทเรียนนี้ใน Kodokonฟอร์มคือประตูสู่แทบทุกการโต้ตอบบนเว็บ ไม่ว่าจะเป็นการสมัครสมาชิก การค้นหา การชำระเงิน หรือการติดต่อ คุณรู้อยู่แล้วว่าหน้าเว็บมีโครงสร้างอย่างไร ตอนนี้ถึงเวลาลงมือปฏิบัติจริง เริ่มจากท่องกฎทองไว้ให้ขึ้นใจ: ทุกฟิลด์ต้องมีแอตทริบิวต์ name เพราะ สิ่งนั้น ต่างหากที่ถูกส่งไปยังเซิร์ฟเวอร์ ไม่ใช่ id
<form action="/subscribe" method="post">
<label for="email">Email address</label>
<input type="email" id="email" name="email" required>
<button type="submit">Sign up</button>
</form>ลองดูคู่ label / input นี้: แอตทริบิวต์ for ของ label ชี้ไปยัง id ของฟิลด์ ความเชื่อมโยงนี้จำเป็นอย่างยิ่งสำหรับโปรแกรมอ่านหน้าจอ สังเกต type="email" ด้วย: เบราว์เซอร์จะตรวจสอบรูปแบบให้ฟรีและแสดงแป้นพิมพ์ที่เหมาะสมบนมือถือ ยังมีชนิดอื่นที่ใช้ได้ทุกวัน: number, date, password, checkbox, radio
<label for="country">Country</label>
<select id="country" name="country" required>
<option value="">-- Choose a country --</option>
<option value="fr">France</option>
<option value="ca">Canada</option>
</select>
<label for="message">Your message</label>
<textarea id="message" name="message" rows="5"></textarea>ตัวสุดท้าย: button มันรับได้สามชนิด: submit (ส่งฟอร์ม), reset (ล้างค่าในฟิลด์) และ button (ไม่ทำอะไรด้วยตัวเอง ต้องเชื่อมกับ JavaScript) แบบฝึกคิด: ในฟอร์มเขียนบทความบล็อก คุณเพิ่มปุ่ม "Preview" ที่ต้องไม่ส่งข้อมูล คุณจะให้ชนิดใดกับมัน? คำตอบ: type="button"
<form action="/contact" method="post">
<label for="topic">Subject</label>
<select id="topic" name="topic">
<option value="support">Technical support</option>
<option value="billing">Billing</option>
</select>
<button type="submit">Send</button>
<button type="button" id="preview-btn">
Preview
</button>
</form>