การตรวจสอบความถูกต้องของฟอร์ม
บทความนี้อธิบายเกี่ยวกับการตรวจสอบความถูกต้องของฟอร์ม
มันอธิบายเกี่ยวกับการตรวจสอบความถูกต้องของฟอร์มใน HTML
YouTube Video
การตรวจสอบความถูกต้องของฟอร์มใน HTML
ภาพรวมของการตรวจสอบความถูกต้องของฟอร์มใน HTML
- การตรวจสอบความถูกต้องของฟอร์มใน HTML เป็นกลไกที่ช่วยให้แน่ใจว่าข้อมูลตรงตามเงื่อนไขบางประการก่อนที่ผู้ใช้จะส่งฟอร์ม สิ่งนี้ช่วยลดข้อผิดพลาดในฝั่งเซิร์ฟเวอร์และปรับปรุงประสบการณ์ของผู้ใช้
แอตทริบิวต์ required
1<form>
2 <label for="email">Email:</label>
3 <input type="email" id="email" required placeholder="Enter your email">
4 <button type="submit">Submit</button>
5</form>- แอตทริบิวต์
requiredกำหนดว่าช่องป้อนข้อมูลต้องถูกกรอกก่อนที่จะสามารถส่งฟอร์มได้
แอตทริบิวต์ pattern
1<form>
2 <label for="username">Username (letters and numbers only):</label>
3 <input type="text" id="username" name="username" pattern="[A-Za-z0-9]+" required>
4 <button type="submit">Submit</button>
5</form>- แอตทริบิวต์
patternใช้สำหรับตรวจสอบว่าข้อมูลที่ป้อนในฟอร์มตรงกับรูปแบบ regex ที่ระบุหรือไม่ ตัวอย่างเช่น สิ่งนี้ตรวจสอบว่าชื่อผู้ใช้ประกอบด้วยตัวอักษรและตัวเลขเท่านั้น
แอตทริบิวต์ min และ max
1<form>
2 <label for="age">Age:</label>
3 <input type="number" id="age" name="age" min="18" max="99" placeholder="Enter your age">
4 <button type="submit">Submit</button>
5</form>- แอตทริบิวต์
<min>และ<max>ใช้สำหรับกำหนดค่าขั้นต่ำและค่าสูงสุดที่อนุญาตให้มีสำหรับองค์ประกอบอินพุต แอตทริบิวต์เหล่านี้มักใช้กับประเภทอินพุต เช่นnumber,rangeและdate - ในตัวอย่างนี้ คุณสามารถใส่ตัวเลขระหว่าง 18 ถึง 99
แอตทริบิวต์ minlength และ maxlength
1<form>
2 <label for="username">Username:</label>
3 <input type="text" id="username" name="username" minlength="4" maxlength="12" placeholder="4-12 characters">
4 <button type="submit">Submit</button>
5</form>- แอตทริบิวต์
minlengthกำหนดจำนวนอักขระขั้นต่ำที่ต้องการสำหรับช่องป้อนข้อมูล ในขณะที่แอตทริบิวต์maxlengthกำหนดจำนวนอักขระสูงสุดที่อนุญาต - ในตัวอย่างนี้ คุณสามารถป้อนข้อความระหว่าง 4 ถึง 12 ตัวอักษร
แอตทริบิวต์ type="email"
1<form>
2 <label for="email">Email:</label>
3 <input type="email" id="email" placeholder="Enter your email">
4 <button type="submit">Submit</button>
5</form>- แอตทริบิวต์
type="email"ใช้เพื่อให้มั่นใจว่าข้อมูลที่ป้อนอยู่ในรูปแบบที่ถูกต้องของที่อยู่อีเมล แอตทริบิวต์นี้มีคุณสมบัติการตรวจสอบความถูกต้องในตัวสำหรับช่องกรอกที่อยู่อีเมล
แอตทริบิวต์ type="url"
1<form>
2 <label for="website">Website:</label>
3 <input type="url" id="website" name="website" placeholder="https://example.com" required>
4 <button type="submit">Submit</button>
5</form><input type="url">ให้ช่องกรอกข้อมูลที่ต้องการรูปแบบ URL ที่ถูกต้อง เบราว์เซอร์จะตรวจสอบโดยอัตโนมัติว่าข้อมูลที่ป้อนเป็น URL ที่ถูกต้องหรือไม่
คุณสามารถติดตามบทความข้างต้นโดยใช้ Visual Studio Code บนช่อง YouTube ของเรา กรุณาตรวจสอบช่อง YouTube ด้วย