• โฮมเพจ
  • บทความ
  • เว็บ
  • ทำความเข้าใจว่าการตรวจสอบความถูกต้องของแบบฟอร์ม HTML5 และป้ายกำกับอินพุตแบบลอยคืออะไร

ทำความเข้าใจว่าการตรวจสอบความถูกต้องของแบบฟอร์ม HTML5 และป้ายกำกับอินพุตแบบลอยคืออะไร

เผยแพร่แล้ว: 2016-05-16

การใช้การตรวจสอบความถูกต้องของแบบฟอร์มมีบทบาทสำคัญในการป้องกันผู้ใช้ที่มุ่งร้ายจากการป้อนข้อความที่ไม่มีความหมายลงในช่องแบบฟอร์ม นอกจากนี้ยังจำกัดผู้ใช้ที่ไม่มีประสบการณ์จากการป้อนข้อมูลที่ไม่ถูกต้องในแบบฟอร์ม

แน่นอน คุณคงไม่อยากรวบรวมข้อมูลที่ไม่ถูกต้องจากผู้ใช้ในลักษณะที่ไม่ปลอดภัย ดังนั้นจึงจำเป็นสำหรับคุณที่จะกำหนดกฎการตรวจสอบสำหรับแบบฟอร์ม

เป็นเวลาหลายปีแล้วที่เราใช้โค้ด JavaScript ที่ซับซ้อนและ TL;DR (เช่น ยาวเกินไป ไม่ได้อ่าน) สำหรับใช้การตรวจสอบความถูกต้องของแบบฟอร์มในฝั่งไคลเอ็นต์ โชคดีที่มีการเปิดตัว "การตรวจสอบความถูกต้องของแบบฟอร์ม HTML5" ตอนนี้ เราสามารถเพิ่มการตรวจสอบลงในแบบฟอร์มที่มี JavaScript น้อยที่สุดได้

แม้ว่า HTML เวอร์ชันล่าสุดจะมีประโยชน์หลายประการ แต่สิ่งที่สำคัญที่สุดคือมาพร้อมกับช่องใส่ข้อมูลและแอตทริบิวต์ใหม่มากมายที่จำเป็นสำหรับการตรวจสอบแบบฟอร์มโดยไม่จำเป็นต้องเขียนโค้ดตรวจสอบ JS (ย่อมาจาก JavaScript) ที่ซับซ้อน

แต่อย่าลืมว่าผู้ใช้อาจรู้สึกหงุดหงิดได้ง่ายเมื่อกรอกแบบฟอร์ม โดยเฉพาะอย่างยิ่งเมื่อพวกเขารู้ว่าข้อมูลที่ป้อนผิดจะยิ่งเพิ่มความหงุดหงิดมากขึ้นไปอีก แต่ต้องขอบคุณ HTML5 ที่การเพิ่มป้ายชื่ออินพุตแบบลอยสามารถตรวจสอบข้อมูลในแบบฟอร์มได้ในเวลาเดียวกันเมื่อผู้ใช้กรอกแบบฟอร์ม วิธีนี้ผู้ใช้จะทราบทันทีในกรณีที่ทำผิดพลาดในช่องป้อนข้อมูล

ตัวอย่างเช่น ด้านล่างนี้คือภาพที่โพสต์บน Dribble โดย Matt Smith ซึ่งแสดงให้เห็นว่ารูปแบบป้ายกำกับลอยตัวทำงานอย่างไรเมื่อนำไปใช้กับแบบฟอร์ม:

How the floating label pattern works

โพสต์นี้ครอบคลุมถึงวิธีการใช้ป้ายกำกับอินพุตแบบลอยเมื่อเพิ่มการตรวจสอบความถูกต้องลงในแบบฟอร์ม HTML5

แต่ก่อนที่คุณจะเริ่ม

หลายๆ คนอาจต้องการทราบขั้นตอนการตรวจสอบความถูกต้องของแบบฟอร์ม HTML5 ก่อน อย่างไรก็ตาม ไม่ใช่ทุกคนที่อาจมีประสบการณ์ในการเขียนโค้ดตรวจสอบความถูกต้องสำหรับแบบฟอร์ม HTML5 นอกจากนี้ เป็นไปได้ว่าคุณจะไม่มีความรู้เกี่ยวกับช่องป้อนข้อมูลและแอตทริบิวต์ที่เพิ่งเปิดตัวใหม่ใน HTML5

ภาพรวมโดยละเอียดของการตรวจสอบแบบฟอร์ม HTML5

เมื่อคุณวางแผนที่จะตรวจสอบแบบฟอร์ม ขอแนะนำให้เริ่มต้นด้วยการตรวจสอบฝั่งเซิร์ฟเวอร์ก่อน และในกรณีที่คุณเป็นนักออกแบบเว็บไซต์ที่ดี ให้ดำเนินการเพิ่มการตรวจสอบฝั่งไคลเอ็นต์ ช่วยให้ผู้ใช้ของคุณได้รับคำติชมทันทีไม่ว่าพวกเขาจะกรอกแบบฟอร์มด้วยข้อมูลที่ถูกต้องหรือไม่ ตัวอย่างเช่น การให้ข้อมูลย้อนกลับแก่ผู้ใช้ทันทีเมื่อป้อนข้อมูลลงในช่องที่อยู่อีเมลจะทำให้ผู้ใช้ทราบว่าที่อยู่อีเมลที่ป้อนนั้นถูกต้อง

คุณลักษณะ HTML5 ที่ยอดเยี่ยมอย่างหนึ่งคือช่วยให้ใช้การตรวจสอบฝั่งไคลเอ็นต์โดยไม่ต้องพึ่งพาสคริปต์ แต่คุณสามารถทำงานดังกล่าวได้โดยใช้ "แอตทริบิวต์การตรวจสอบความถูกต้อง" ในองค์ประกอบแบบฟอร์มของคุณ สิ่งสำคัญที่สุดคือ คุณเพียงแค่ต้องเพิ่มแอตทริบิวต์ "จำเป็น" สำหรับช่องใส่ในขณะที่เบราว์เซอร์ของคุณดูแลส่วนที่เหลือ

ต่อไปนี้คือตัวอย่างที่จะอธิบายการใช้แอตทริบิวต์ที่จำเป็นสำหรับการเพิ่มการตรวจสอบความถูกต้องในช่องป้อนข้อมูล:

[php]
ชื่อ: <input type="text" name="yourname" required>
[/php]

บรรทัดของโค้ดด้านบนทำให้เบราว์เซอร์ของคุณทราบว่าฟิลด์ INPUT ชื่อควรได้รับการพิจารณาว่าเป็นฟิลด์บังคับ (กล่าวคือ ต้องไม่เว้นว่างไว้)

INPUT field cannot be left blank

ดังที่คุณเห็นเครื่องหมายสีแดงแสดงอยู่ในช่องข้อความที่ตรงกับช่องป้อนข้อมูล 'ชื่อของคุณ' แต่ทันทีที่ป้อนข้อความลงในช่องป้อนชื่อ เครื่องหมายจะเปลี่ยนเป็นเครื่องหมายขีดเพื่อระบุว่าค่าที่ป้อนนั้นถูกต้อง

นอกเหนือจาก <input type="text"> (เช่น ประเภทการป้อนข้อความ) ตอนนี้ HTML5 รองรับตัวเลือกการป้อนข้อมูลใหม่หลายอย่าง เช่น การค้นหา อีเมล โทรศัพท์ วันที่เวลา ฯลฯ พูดง่ายๆ ด้วย HTML5 เราสามารถเขียนโค้ดด้านล่างได้ :

[php]
<input type="text" name="email">
[/php]

เป็นสิ่งที่ชอบ:

[php]
<input type="email" name="email">
[/php]

เบราว์เซอร์เดสก์ท็อปจะแสดงโค้ดด้านบนเหมือนกับช่องข้อความมาตรฐานทั่วไป

สิ่งสำคัญอีกประการหนึ่งที่ฉันอยากจะแจ้งให้คุณทราบคือ เมื่อคุณพยายามป้อนแอตทริบิวต์เช่น required หรือ input type=”email” ในการสาธิต CodePen แม้ว่าจะไม่มีเนื้อหาใด ๆ คุณจะยังคงได้รับข้อผิดพลาด ข้อความเมื่อคลิกที่ปุ่ม 'ส่ง' โดยไม่มีที่อยู่อีเมลที่ถูกต้อง:

Error message

ในตัวอย่างที่เราได้กล่าวถึงข้างต้น คุณจะเห็นว่าเบราว์เซอร์โดยค่าเริ่มต้นแสดงข้อความแสดงข้อผิดพลาด แต่ถ้าคุณต้องการใช้กฎการตรวจสอบความถูกต้อง (เช่น แบบกำหนดเอง) ของคุณเองกับค่าอินพุตล่ะ นี่คือจุดที่รูปแบบ Regex มีประโยชน์

ทำความเข้าใจรูปแบบ RegEx

คุณอาจเคยเห็นรูปแบบเมื่อป้อนที่อยู่อีเมล เช่น abc@a จำเป็นต้องพูด คุณต้องการให้ผู้ใช้ของคุณป้อนที่อยู่อีเมลจริง และการระบุรูปแบบที่คุณเลือกเองที่ตรงกับข้อมูลของคุณจะช่วยตรวจสอบค่าที่ป้อนได้ ตัวอย่างเช่น คุณสามารถตรวจสอบให้แน่ใจว่าอีเมลตรงกับรูปแบบที่มีอักขระสามตัวขึ้นไปในตอนท้าย ในการดำเนินการดังกล่าว คุณจะต้องใช้ “แอตทริบิวต์รูปแบบ” และนิพจน์ทั่วไป (RegEx)

RegEx เป็นภาษาที่ใช้ในการแยกวิเคราะห์หรือจัดการข้อความ ส่วนใหญ่แล้ว นิพจน์ทั่วไปมักใช้เพื่อดำเนินการที่ซับซ้อน (เช่น ค้นหาและแทนที่) เพื่อให้ข้อมูลข้อความมีรูปแบบที่ดีขึ้น ทุกวันนี้ คุณสามารถค้นหาการใช้นิพจน์ทั่วไปในเกือบทุกภาษาโปรแกรมและภาษาสคริปต์ สามารถใช้ RegEx สำหรับตรวจสอบข้อมูลที่ป้อนในช่องแบบฟอร์ม โดยการบังคับใช้กับประเภทอินพุตโดยใช้แอตทริบิวต์รูปแบบดังนี้:

[php]
<input id="phone" placeholder="111-111-1111" title="ข้อความที่จะถ่ายทอดรูปแบบสำหรับหมายเลขโทรศัพท์" required pattern="[0-9]{3}-[0-9]{3}-[ 0-9]{4}">
[/php]

นอกจากนี้ หากเกิดข้อผิดพลาดในการตรวจสอบความถูกต้อง คุณสามารถเลือกกำหนดแอตทริบิวต์ชื่อพร้อมกับข้อผิดพลาดในการตรวจสอบความถูกต้องเพื่อส่งข้อความนอกเหนือจาก "รูปแบบไม่ถูกต้อง!" โดยใช้รหัสบรรทัดที่ระบุด้านล่าง:

[php]
<input type="email" placeholder="Email" required pattern="^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A- Za-z]{2,}$" title="กรุณาป้อนที่อยู่อีเมลที่ถูกต้องที่นี่">
[/php]

โปรดจำไว้ว่า คุณไม่จำเป็นต้องเขียนรูปแบบที่ไร้สาระสำหรับอินพุตแต่ละรายการ ในหลายกรณี คุณจะต้องกำหนดแอตทริบิวต์ที่จำเป็นสำหรับข้อมูลบางประเภทแทน ตัวอย่างเช่น ตัวเลขที่มากกว่า 8 จะมีลักษณะดังนี้:

[php]
<input type="number" min="8" required>
[/php]

นอกจากนี้ พึงระลึกไว้เสมอว่าเบราว์เซอร์บางตัวอาจไม่รองรับแอตทริบิวต์การตรวจสอบความถูกต้องทั้งหมดที่มี ตัวอย่างเช่น เบราว์เซอร์ Firefox ไม่รองรับรูปแบบ "ความยาวขั้นต่ำ"

ประโยชน์ของการใช้การตรวจสอบแบบฟอร์ม HTML5

ข้อได้เปรียบที่ใหญ่ที่สุดของการใช้การตรวจสอบความถูกต้องของแบบฟอร์ม HTML5 คือการตอบกลับทันที ส่วนใหญ่ การเรียงลำดับของตัวบ่งชี้จะถูกเน้นในขณะที่ผู้ใช้กรอกฟิลด์บางฟิลด์ในแบบฟอร์ม เพื่อแจ้งให้ทราบว่าค่าที่ป้อนนั้นถูกต้องหรือไม่

Indication will be highlighted while users fill out some field

ตอนนี้ เมื่อคุณป้อนบางอย่างในกล่องข้อความ สีของเส้นขอบจะเปลี่ยนเป็นสีเขียวดังนี้:

The border color changes to green

อย่างไรก็ตาม อย่างที่คุณเห็น มีข้อเสียของแนวทางนี้ แม้ว่าจะเพิ่มค่าที่ไม่ถูกต้อง (หรือไม่สมบูรณ์) ลงในฟิลด์ 'First Name' ผู้ใช้จะได้รับแจ้งว่าค่านั้นถูกต้อง บางทีคุณอาจคิดเกี่ยวกับการเพิ่ม :invalid:not(:empty) ลงในโค้ด น่าเสียดายที่ตรรกะดังกล่าวใช้ไม่ได้กับเบราว์เซอร์ เนื่องจากโดยปกติแล้วจะถือว่าองค์ประกอบของฟอร์มว่างเปล่า

สงสัยว่าจะทำอย่างไร?

คุณสามารถลองเพิ่ม pseudo-selector ใหม่ที่เรียกว่า “:placeholder-shown” ในโค้ดดังต่อไปนี้:

[php]
<แบบฟอร์ม>
<label>
<span>ชื่อ</span>
<input type="text" pattern=".{4,}" placeholder=" " required title="ป้อนอักขระอย่างน้อย 4 ตัว">
</label>

<button>ส่ง</button>

</form>
[/php]

แต่เบราว์เซอร์ส่วนใหญ่ดูเหมือนจะไม่รองรับการแสดงตัวยึดตำแหน่ง ดังนั้นจึงเป็นการดีกว่าสำหรับคุณที่จะเขียนสคริปต์เพื่อสลับคลาสเมื่อช่องป้อนข้อมูลว่างเปล่าหรือไม่ นี่คือรหัส JavaScript สำหรับสิ่งเดียวกัน:

[php]
$('อินพุต:ว่าง, textarea:empty').addClass('ว่าง');

$('input').keyup(ฟังก์ชัน () {

if ($(นี้).val().trim() !== ”) {

$(นี้).removeClass('ว่าง');

} อื่น {

$(นี้).addClass('ว่าง');

}

});
[/php]

หมายเหตุ : อย่าลืมลบองค์ประกอบตัวยึดตำแหน่งออกจากมาร์กอัป HTML ด้านบน

ตอนนี้ เมื่อคุณเรียกใช้ข้อมูลโค้ดด้านบนพร้อมกับมาร์กอัป HTML5 ผลลัพธ์จะมีลักษณะดังนี้:

Code snippet along with HTML5 markup

ดังที่คุณเห็นสีของกล่องข้อความยังคงเป็นสีแดงจนกว่าการตรวจสอบความถูกต้องที่ใช้กับฟิลด์จะไม่สำเร็จ และการคลิกที่ส่งจะแสดงข้อความแสดงข้อผิดพลาดเมื่อป้อนชื่อที่ไม่สมบูรณ์

แต่ทันทีที่ผู้ใช้กรอกข้อความครบถ้วน (เกิน 3 อักขระ) สีของเส้นขอบกล่องข้อความจะเปลี่ยนเป็นสีเขียว

The color of the text box border changes to green.

คุณจะเพิ่มป้ายกำกับอินพุตแบบลอยตัวใน HTML5 ได้อย่างไร

และตอนนี้ เรามาพูดถึงวิธีการเพิ่มป้ายกำกับอินพุตแบบลอยตัวเมื่อตรวจสอบความถูกต้องของแบบฟอร์ม HTML5 ของคุณ การทำเช่นนี้ช่วยเสริมรูปลักษณ์และความรู้สึกของแบบฟอร์ม นี่คือมาร์กอัป HTML

ในการใช้รูปแบบป้ายกำกับลอย คุณจะต้องกด แท็กใต้องค์ประกอบ <input> ในมาร์กอัป HTML ของคุณ:

[php]
<แบบฟอร์ม>
<label>
<input type="text" pattern=".{4,}" required title="ตัวละครไม่ควรน้อยกว่า 4">
<span>ชื่อของคุณ</span>
</label>
<label>
<input type="email" required pattern="^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{ 2,}$" title="โปรดป้อนอีเมลที่ถูกต้อง">
<span>อีเมลของคุณ</span>
</label>
<button>ส่ง</button>

</form>
[/php]

CSS จะมีลักษณะดังนี้:

[css]
ฉลาก {
ตำแหน่ง: ญาติ;
แสดง: บล็อกอินไลน์;
}
ช่วงฉลาก {
ตำแหน่ง: สัมบูรณ์;
ซ้าย: 20px;
ด้านบน: -2em;
ขนาดตัวอักษร: .75em;
เคอร์เซอร์: ข้อความ;
สี: #f27853;
การเปลี่ยนแปลง: ความง่ายทั้งหมด 150ms;
}
ป้อนข้อมูล {
เส้นขอบ: 1px ทึบ #f2f2f2;
เค้าร่าง: ไม่มี;
}
อินพุต: โฟกัส {
ขอบสี: #d9d9d9;
}
อินพุต: ถูกต้อง {
ขอบสี: #42d142;
}
อินพุต: ไม่ถูกต้อง {
เส้นขอบสี: #ff8e7a;
}
อินพุตว่างเปล่า {
ขอบสี: #d9d9d9;
}
input.empty + สแปน {
ด้านบน: 50%;
แปลง: translateY(-50%);
ขนาดตัวอักษร: 1em;
พื้นหลัง: ไม่มี;
สี: #cccccc;
}
ตัว {
จอแสดงผล: ดิ้น;
ความสูงขั้นต่ำ: 100vh;
พื้นหลัง: #f1f1f1;
ตระกูลแบบอักษร: 'Lato', sans-serif;
ขนาดตัวอักษร: 150%;
}
รูปร่าง {
ระยะขอบ: อัตโนมัติ;
}

อินพุต, ปุ่ม {
ช่องว่างภายใน: 15px 20px;
รัศมีเส้นขอบ: 1px;
เส้นขอบ: 2px ทึบ #bdbdbd;
}

ปุ่ม {
ขอบสี: #363636;
พื้นหลัง: #363636;
สี: #FFFFFF;
}
[/css]

และสุดท้าย เขียนโค้ด JavaScript:

[รหัส]
$('อินพุต:ว่าง, textarea:empty').addClass('ว่าง');
$('input').keyup(ฟังก์ชัน () {
if ($(นี้).val().trim() !== ”) {
$(นี้).removeClass('ว่าง');
} อื่น {
$(นี้).addClass('ว่าง');
}
});
[/รหัส]

เอาท์พุท:

Output

คุณสามารถใช้เอฟเฟกต์ต่างๆ ได้เมื่อใช้ป้ายกำกับอินพุตแบบลอยใน HTML5 เช่น:

  • เพิ่มไอคอนพร้อมเอฟเฟกต์เฟดเข้า/ออกขณะตรวจสอบฟอร์ม HTML5
  • เขย่าอินพุตหากข้อมูลที่ป้อนไม่ถูกต้อง
  • ทำให้สีของอินพุตมืดลงเมื่อกรอกถูกต้อง
สิ่งที่ต้องพิจารณา

เมื่อดำเนินการตรวจสอบความถูกต้องกับแบบฟอร์ม HTML5 คุณต้องทำความคุ้นเคยกับ:

  1. รองรับเบราว์เซอร์ : รูปแบบ HTML5 ทำงานในเบราว์เซอร์สมัยใหม่และ IE10+ ได้อย่างสมบูรณ์แบบ แม้ว่า IE เวอร์ชัน 9 และเวอร์ชันที่เก่ากว่าจะไม่สนับสนุนตัวเลือกหลอกสำหรับการตรวจสอบความถูกต้องซึ่งห้ามไม่ให้คุณจัดรูปแบบแบบฟอร์ม แต่จะยังคงทำงานได้อย่างถูกต้อง
  2. คำเตือน : สิ่งหนึ่งที่คุณไม่สามารถดำเนินการได้เมื่อใช้การตรวจสอบความถูกต้องกับแบบฟอร์ม HTML5 คือการกำหนดสไตล์ข้อความตรวจสอบความถูกต้อง นั่นเป็นเพราะว่า ฟังก์ชันดังกล่าวถูกปิดใช้งานโดยเบราว์เซอร์

คำพูดสุดท้าย

การใช้การตรวจสอบความถูกต้องกับแบบฟอร์มเป็นสิ่งสำคัญในการเพิ่มระดับความปลอดภัยเพิ่มเติมให้กับไซต์ของคุณ เนื่องจากจะป้องกันไม่ให้ผู้ใช้ที่ชั่วร้ายเพิ่มข้อความที่เป็นอันตรายเป็นค่าในช่องแบบฟอร์มของคุณ นอกจากนี้ การให้ข้อเสนอแนะแบบทันทีแก่ผู้ใช้เมื่อพวกเขาป้อนข้อมูลลงในฟิลด์ป้อนข้อมูลที่ได้รับการตรวจสอบแล้วของแบบฟอร์มจะช่วยปรับปรุงประสบการณ์ของพวกเขา เพราะจะได้ไม่ต้องเสียเวลาไปนึกว่ากรอกแบบฟอร์มผิด แต่การตรวจสอบความถูกต้องของแบบฟอร์มโดยใช้ JavaScript เพียงอย่างเดียวอาจเป็นเรื่องที่ท้าทาย นี่คือจุดเริ่มต้นของการตรวจสอบความถูกต้องของแบบฟอร์ม HTML5

เมื่อใช้การตรวจสอบความถูกต้องกับแบบฟอร์มโดยใช้ HTML5 คุณไม่จำเป็นต้องเขียนโค้ด JS ที่ซับซ้อนเป็นแถวยาว คุณสามารถใช้กฎการตรวจสอบแบบฟอร์มด้วยการเข้ารหัส JavaScript ขั้นต่ำแทนได้ สิ่งสำคัญที่สุดคือ คุณลักษณะใหม่จำนวนมากพร้อมใช้งานกับการตรวจสอบความถูกต้องของแบบฟอร์ม HTML5 เช่น ป้ายการป้อนข้อมูลแบบลอยที่ทำให้แบบฟอร์มดูสวยงาม กระตุ้นให้ผู้ใช้ส่งแบบฟอร์ม