รับทำเว็บไซต์ครบวงจร
เลือกภาษา Thai English     facebook


ติดต่อทำเว็บไซต์ โทร : O89-l79-O7l4 (ทุกวัน 24 ชั่วโมง)

รายการหลัก



บทความ


Page Ranking Tool

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


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


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

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

autofocus attribute



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

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


  Code
<input type=”text” name=”autofocus_field” autofocus>



ตัวอย่างการแสดงผล
รับทำเว็บ  webUB.com




required attribute



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

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


  Code
<input type=”text” name=”required_field” required>



ตัวอย่างการแสดงผล
รับทำเว็บ  webUB.com


E-mail


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

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



  Code
<input type=”email” name=”email_field” required>



ตัวอย่างการแสดงผล
รับทำเว็บ  webUB.com



โค้ดตัวอย่าง 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>




ตัวอย่างหน้าตาการแสดงผล โค้ดด้านบนค่ะ
รับทำเว็บ  webUB.com


HTML5: input autofocus, input required


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

Short URL click!
<< กลับคืน : เข้าชม 15,315 ครั้ง : ขึ้นไปด้านบน

รับทำเว็บไซต์ รับสร้างเว็บไซต์ รับออกแบบเว็บ รับเขียนเว็บ รับสอนทำเว็บ รับเช่า hosting รับเช่าพื้นที่เว็บไซต์ จดชื่อเว็บ รับโปรโมทเว็บไซต์ รับดูแลเว็บ SiteMap
สปริงเกอร์http://www.xn--22c2c4blb9n.xn--o3cw4h/