HTML5 - เว็บฟอร์ม 2.0
Web Forms 2.0 เป็นส่วนขยายของฟีเจอร์ฟอร์มที่พบใน HTML4 องค์ประกอบรูปแบบและแอตทริบิวต์ใน HTML5 ให้มาร์กอัปเชิงความหมายในระดับที่สูงกว่า HTML4 และปลดปล่อยเราจากการเขียนสคริปต์และรูปแบบที่น่าเบื่อมากมายที่จำเป็นใน HTML4
องค์ประกอบ <input> ใน HTML4
องค์ประกอบอินพุต HTML4 ใช้ไฟล์ type แอตทริบิวต์เพื่อระบุประเภทข้อมูล HTML4 มีประเภทต่อไปนี้ -
| ซีเนียร์ | ประเภทและคำอธิบาย |
|---|---|
| 1 | text ช่องข้อความรูปแบบอิสระไม่มีการแบ่งบรรทัดในนาม |
| 2 | password ช่องข้อความรูปแบบอิสระสำหรับข้อมูลที่ละเอียดอ่อนโดยไม่ต้องขึ้นบรรทัดใหม่ |
| 3 | checkbox ชุดของค่าศูนย์หรือมากกว่าจากรายการที่กำหนดไว้ล่วงหน้า |
| 4 | radio ค่าที่แจกแจง |
| 5 | submit ปุ่มรูปแบบอิสระเริ่มต้นการส่งแบบฟอร์ม |
| 6 | file ไฟล์โดยพลการที่มีประเภท MIME และสามารถเลือกชื่อไฟล์ได้ |
| 7 | image พิกัดสัมพันธ์กับขนาดของรูปภาพหนึ่ง ๆ โดยมีความหมายพิเศษว่าจะต้องเป็นค่าสุดท้ายที่เลือกและเริ่มการส่งแบบฟอร์ม |
| 8 | hidden สตริงที่กำหนดเองซึ่งโดยปกติจะไม่แสดงต่อผู้ใช้ |
| 9 | select ค่าที่แจกแจงเหมือนกับประเภทวิทยุ |
| 10 | textarea ช่องข้อความรูปแบบอิสระโดยไม่มีข้อ จำกัด ในการแบ่งบรรทัด |
| 11 | button ปุ่มรูปแบบอิสระที่สามารถเริ่มต้นเหตุการณ์ที่เกี่ยวข้องกับปุ่ม |
ต่อไปนี้เป็นตัวอย่างง่ายๆของการใช้ป้ายกำกับปุ่มตัวเลือกและปุ่มส่ง -
...
<form action = "http://example.com/cgiscript.pl" method = "post">
<p>
<label for = "firstname">first name: </label>
<input type = "text" id = "firstname"><br />
<label for = "lastname">last name: </label>
<input type = "text" id = "lastname"><br />
<label for = "email">email: </label>
<input type = "text" id = "email"><br>
<input type = "radio" name = "sex" value = "male"> Male<br>
<input type = "radio" name = "sex" value = "female"> Female<br>
<input type = "submit" value = "send"> <input type = "reset">
</p>
</form>
...องค์ประกอบ <input> ใน HTML5
นอกเหนือจากแอตทริบิวต์ที่กล่าวถึงข้างต้นองค์ประกอบอินพุต HTML5 ยังนำเสนอค่าใหม่หลายค่าสำหรับไฟล์ typeแอตทริบิวต์ เหล่านี้แสดงไว้ด้านล่าง
NOTE - ลองใช้ตัวอย่างต่อไปนี้ทั้งหมดโดยใช้เวอร์ชันล่าสุดของ Opera เบราว์เซอร์
| ซีเนียร์ | ประเภทและคำอธิบาย |
|---|---|
| 1 | วันเวลา วันที่และเวลา (ปีเดือนวันชั่วโมงนาทีวินาทีเศษส่วนของวินาที) เข้ารหัสตามมาตรฐาน ISO 8601 โดยตั้งค่าเขตเวลาเป็น UTC |
| 2 | วันที่และเวลาท้องถิ่น วันที่และเวลา (ปีเดือนวันชั่วโมงนาทีวินาทีเศษส่วนของวินาที) เข้ารหัสตามมาตรฐาน ISO 8601 โดยไม่มีข้อมูลเขตเวลา |
| 3 | วันที่ วันที่ (ปีเดือนวัน) เข้ารหัสตามมาตรฐาน ISO 8601 |
| 4 | เดือน วันที่ประกอบด้วยปีและเดือนที่เข้ารหัสตามมาตรฐาน ISO 8601 |
| 5 | สัปดาห์ วันที่ประกอบด้วยตัวเลขปีและสัปดาห์ที่เข้ารหัสตามมาตรฐาน ISO 8601 |
| 6 | เวลา เวลา (ชั่วโมงนาทีวินาทีเศษเสี้ยววินาที) เข้ารหัสตามมาตรฐาน ISO 8601 |
| 7 | จำนวน ยอมรับเฉพาะค่าตัวเลข แอตทริบิวต์ step ระบุความแม่นยำโดยเริ่มต้นเป็น 1 |
| 8 | พิสัย ประเภทช่วงใช้สำหรับช่องป้อนข้อมูลที่ควรมีค่าจากช่วงของตัวเลข |
| 9 | อีเมล์ ยอมรับเฉพาะค่าอีเมล ประเภทนี้ใช้สำหรับช่องป้อนข้อมูลที่ควรมีที่อยู่อีเมล หากคุณพยายามส่งข้อความธรรมดาจะบังคับให้ป้อนเฉพาะที่อยู่อีเมลในรูปแบบ [email protected] |
| 10 | url ยอมรับเฉพาะค่า URL ประเภทนี้ใช้สำหรับช่องป้อนข้อมูลที่ควรมีที่อยู่ URL หากคุณพยายามส่งข้อความธรรมดาจะบังคับให้ป้อนเฉพาะที่อยู่ URL ไม่ว่าจะในรูปแบบ http://www.example.com หรือในรูปแบบ http://example.com |
องค์ประกอบ <output>
HTML5 แนะนำองค์ประกอบใหม่ <output> ซึ่งใช้เพื่อแสดงผลลัพธ์ของเอาต์พุตประเภทต่างๆเช่นเอาต์พุตที่เขียนโดยสคริปต์
คุณสามารถใช้ไฟล์ forแอตทริบิวต์เพื่อระบุความสัมพันธ์ระหว่างองค์ประกอบเอาต์พุตและองค์ประกอบอื่น ๆ ในเอกสารที่มีผลต่อการคำนวณ (เช่นอินพุตหรือพารามิเตอร์) ค่าของแอตทริบิวต์ for คือรายการ ID ที่คั่นด้วยช่องว่างขององค์ประกอบอื่น ๆ
<!DOCTYPE HTML>
<html>
<head>
<script type = "text/javascript">
function showResult() {
x = document.forms["myform"]["newinput"].value;
document.forms["myform"]["result"].value = x;
}
</script>
</head>
<body>
<form action = "/cgi-bin/html5.cgi" method = "get" name = "myform">
Enter a value : <input type = "text" name = "newinput" />
<input type = "button" value = "Result" onclick = "showResult();" />
<output name = "result"></output>
</form>
</body>
</html>มันจะให้ผลลัพธ์ดังต่อไปนี้ -
แอตทริบิวต์ตัวยึดตำแหน่ง
HTML5 เปิดตัวแอตทริบิวต์ใหม่ที่เรียกว่า placeholder. แอตทริบิวต์นี้ในองค์ประกอบ <input> และ <textarea> ให้คำใบ้แก่ผู้ใช้เกี่ยวกับสิ่งที่สามารถป้อนได้ในฟิลด์ ข้อความตัวยึดจะต้องไม่มีการคืนค่าขนส่งหรือฟีดบรรทัด
นี่คือไวยากรณ์ง่ายๆสำหรับแอตทริบิวต์ตัวยึด -
<input type = "text" name = "search" placeholder = "search the web"/>แอตทริบิวต์นี้รองรับโดยเบราว์เซอร์ Mozilla, Safari และ Crome เวอร์ชันล่าสุดเท่านั้น
<!DOCTYPE HTML>
<html>
<body>
<form action = "/cgi-bin/html5.cgi" method = "get">
Enter email : <input type = "email" name = "newinput"
placeholder = "[email protected]"/>
<input type = "submit" value = "submit" />
</form>
</body>
</html>สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -
แอตทริบิวต์โฟกัสอัตโนมัติ
นี่เป็นรูปแบบขั้นตอนเดียวที่เรียบง่ายซึ่งตั้งโปรแกรมใน JavaScript ได้อย่างง่ายดายในขณะโหลดเอกสารโดยจะโฟกัสฟิลด์ฟอร์มหนึ่งช่องโดยอัตโนมัติ
HTML5 เปิดตัวแอตทริบิวต์ใหม่ที่เรียกว่า autofocus ซึ่งจะใช้ดังต่อไปนี้ -
<input type = "text" name = "search" autofocus/>แอตทริบิวต์นี้รองรับโดยเบราว์เซอร์ Mozilla, Safari และ Chrome เวอร์ชันล่าสุดเท่านั้น
<!DOCTYPE HTML>
<html>
<body>
<form action = "/cgi-bin/html5.cgi" method = "get">
Enter email : <input type = "text" name = "newinput" autofocus/>
<p>Try to submit using Submit button</p>
<input type = "submit" value = "submit" />
</form>
</body>
</html>แอตทริบิวต์ที่จำเป็น
ตอนนี้คุณไม่จำเป็นต้องมี JavaScript สำหรับการตรวจสอบความถูกต้องฝั่งไคลเอ็นต์เช่นกล่องข้อความว่างจะไม่ถูกส่งเนื่องจาก HTML5 แนะนำแอตทริบิวต์ใหม่ที่เรียกว่า required ซึ่งจะใช้ดังต่อไปนี้และยืนยันว่ามีค่า -
<input type = "text" name = "search" required/>แอตทริบิวต์นี้รองรับโดยเบราว์เซอร์ Mozilla, Safari และ Chrome เวอร์ชันล่าสุดเท่านั้น
<!DOCTYPE HTML>
<html>
<body>
<form action = "/cgi-bin/html5.cgi" method = "get">
Enter email : <input type = "text" name = "newinput" required/>
<p>Try to submit using Submit button</p>
<input type = "submit" value = "submit" />
</form>
</body>
</html>มันจะให้ผลลัพธ์ดังต่อไปนี้ -