ความคิดเห็น: ฉันเชื่อว่าคุณมีความเข้าใจที่ดีเกี่ยวกับข้อความโฟกัสอัตโนมัติและตัวยึดตำแหน่งของ HTML5 ในการใช้ฟังก์ชั่นออโต้โฟกัสของ HTML5 คุณจะต้องเพิ่มแอตทริบิวต์โฟกัสอัตโนมัติในฟิลด์ฟอร์ม ก่อนอื่นให้ดูที่รหัสตัวอย่างต่อไปนี้สำหรับการใช้ HTML Autofocus และ Placeholder Text เพื่อนที่สนใจสามารถเรียนรู้ได้
ก่อนอื่นดูที่รหัสตัวอย่างต่อไปนี้สำหรับการใช้ HTML Autofocus และ Placeholder Text
<! doctype html> 2: <html>
<head>
<title> ลงทะเบียนบัญชี </title>
<meta charset = "utf-8">
</head>
<body>
<form method = "post" action = "goto">
<fieldset>
<gregend> การลงทะเบียนผู้ใช้ใหม่ </gend>
<ol>
<li>
<label for = "name"> อีเมล </lable>
<อินพุต type = "อีเมล">
</li>
<li>
<label for = "user"> ชื่อผู้ใช้ </label>
<อินพุต type = "text">
</li>
<li>
<label for = "nickname"> ชื่อแสดง </label>
<อินพุต type = "text">
</li>
<li>
<label for = "รหัสผ่าน"> รหัสผ่าน </label>
<อินพุต type = "รหัสผ่าน">
</li>
<li>
<label for = "ยืนยัน _Password"> ยืนยันรหัสผ่าน </label>
<อินพุต type = "รหัสผ่าน">
</li>
</ol>
</fieldset>
</form>
</body>
</html>
การใช้ออโต้โฟกัส
หากต้องการใช้ฟังก์ชั่นออโต้โฟกัสของ HTML5 เพียงเพิ่มคุณสมบัติ AutoFocus ในฟิลด์ฟอร์ม
ตัวอย่างเช่นคุณต้องการค้นหาเคอร์เซอร์ในกล่องจดหมายฟิลด์ฟอร์มแรกของแบบฟอร์มโดยอัตโนมัติเมื่อโหลดหน้าเว็บและปรับปรุงประสิทธิภาพการป้อนข้อมูล
<li>
<label for = "name"> อีเมล </lable>
<อินพุต type = "อีเมล" ออโต้โฟกัส>
</li>
ควรสังเกตว่าหากมีการตั้งค่าคุณสมบัติออโต้โฟกัสหลายตัวในหน้าเคอร์เซอร์ของผู้ใช้จะอยู่ในฟิลด์ฟอร์มสุดท้ายด้วยชุดคุณสมบัติโฟกัสอัตโนมัติ
ใช้ข้อความตัวยึดตำแหน่ง
การใช้ข้อความตัวยึดที่ยิ่งใหญ่ที่สุดคือการอธิบายให้ผู้ใช้ทราบถึงวิธีการกรอกแบบฟอร์มอย่างถูกต้อง นั่นคือพรอมต์อินพุต หากต้องการใช้ข้อความตัวยึดตำแหน่งเพียงเพิ่มแอตทริบิวต์ตัวยึดในฟิลด์อินพุต
ด้านล่างคือฟิลด์ฟอร์มอินพุตโดยใช้แอตทริบิวต์ตัวยึด
<ol>
<li>
<label for = "name"> อีเมล </lable>
<อินพุต type = "อีเมล" placeolder autofocus = "โปรดป้อนที่อยู่อีเมลที่ถูกต้อง">
</li>
<li>
<label for = "user"> ชื่อผู้ใช้ </label>
<input type = "text" placeolder = "ป้อนชื่อผู้ใช้">
</li>
<li>
<label for = "nickname"> ชื่อแสดง </label>
<อินพุต type = "text" placeHolder = "ป้อนชื่อเล่น">
</li>
<li>
<label for = "รหัสผ่าน"> รหัสผ่าน </label>
<อินพุต type = "รหัสผ่าน" placeolder = "ป้อนรหัสผ่าน">
</li>
<li>
<label for = "ยืนยัน _Password"> ยืนยันรหัสผ่าน </label>
<อินพุต type = "รหัสผ่าน" placeolder = "ป้อนรหัสผ่านอีกครั้ง">
</li>
</ol>
เอฟเฟกต์การดำเนินการมีดังนี้
จะเปิดใช้งานการเติมข้อความอัตโนมัติ
แอตทริบิวต์การเติมข้อความอัตโนมัติถูกนำมาใช้ใน HTML5 ใช้เพื่อแจ้งเบราว์เซอร์ว่าฟิลด์ฟอร์มปัจจุบันจะถูกกรอกข้อมูลโดยอัตโนมัติหรือไม่ เบราว์เซอร์บางตัวจะจดจำข้อมูลที่ผู้ใช้ที่ป้อนมาก่อนและในบางกรณีเราอาจไม่ต้องการให้ผู้ใช้ใช้ข้อมูลบันทึกโดยเฉพาะอย่างยิ่งคล้ายกับรหัสผ่าน
ปิดการเติมอัตโนมัติ
<อินพุต type = "รหัสผ่าน" autocomplete = "ปิด" placeholder = "ป้อนรหัสผ่าน">
เพียงกำหนดค่าของ Atuocomplete เป็น OFF เพื่อป้องกันไม่ให้เสร็จสมบูรณ์โดยอัตโนมัติ