HTML5: input autofocus, input required คืออะไร

หน้าแรก HTML5 HTML5: input autofocus, input required คืออะไร

วันนี้ขอแนะนำ autofocus และ required ตัว Attribute ของ Input ค่ะ สองตัวนี้ จะทำงานอัติโนมัติโดยที่ไม่ต้องเขียน JavaScript หรือเขียน JavaScript น้อยลงค่ะ

บอกได้คำเดียวว่า ง่ายมากๆ มาดูกัน

autofocus attribute

การทำงาน Cursor จะ Focus ไปที่ Input Field ที่กำหนดโดยอัติโนมัติ หลังจากโหลดหน้าเว็บ

ตัวอย่างการเขียน

Code

ตัวอย่างการแสดงผล

required attribute

การทำงาน จะทำงานเมื่อ Submit Form โดยที่ Input Field ที่กำหนดยังมีค่าว่างอยู่ จะมี Warning Message แสดงขึ้นมา ทำงานเหมือนกับ JavaScript Validation นั่นเองค่ะ แต่จะเป็นการ check ค่าว่างเท่านั้น ถ้าเราต้องการ validate ค่าอื่นเพิ่มเติม เราก็เขียน JavaScript ในส่วนที่เพิ่มเติมเท่านั้น

ตัวอย่างการเขียน

Code

ตัวอย่างการแสดงผล

E-mail

สำหรับ required ยังมี Validate สำหรับ Email ด้วยค่ะ เพียงแค่เราใส่ type=email ซึ่ง type=email จะทำการเช็คว่าข้อมูลที่เรากรอกมี @ และไม่มีช่องว่าง หรือเปล่า ถ้าใช่ก็ผ่าน บางทีอาจจะยังไม่ Support Format ที่ถูกต้องของ Email Address อาจจะต้องใช้ JavaScript หรือ PHP เข้าไปช่วย ในการ validate บ้างเล็กน้อย

ตัวอย่างการเขียน

Code

ตัวอย่างการแสดงผล

โค้ดตัวอย่าง copy code html ด้านล่างแล้ว save เป็นชื่อไฟล์อะไรก็ได้ค่ะ (.html หรือ .php)
แล้วลอง run ดูนะคะ

Code

<!DOCTYPE html>
<html>
<head><title>HTML5: input autofocus, input required</title></head>
<body>
<form method=post>
Autofocus Feild:
<input type=text name=autofocus_field autofocus><br />
Required Feild:
<input type=text name=required_field required><br />
Email Feild:
<input type=email name=email_field required><br />
<input type=submit value=Submit />
</form>
</body>
</html>

ตัวอย่างหน้าตาการแสดงผล โค้ดด้านบนค่ะ

HTML5: input autofocus, input required

refer: http://www.taengmo.com/me/autofocus-required-of-input/

ขึ้นไปด้านบน