คุณสมบัติของฟอร์ม HTML5
คุณสมบัติ HTML5 รูปแบบใหม่
แท็ก HTML5 ของ <form> และ <input> เพิ่มคุณสมบัติใหม่หลาย
<form> คุณลักษณะใหม่:
- เติมข้อความอัตโนมัติ
- novalidate
<input> คุณสมบัติใหม่:
- เติมข้อความอัตโนมัติ
- ออโต้โฟกัส
- ฟอร์ม
- formaction
- formenctype
- formmethod
- formnovalidate
- formtarget
- สูงและความกว้าง
- รายการ
- นาทีและแม็กซ์
- หลายอย่าง
- รูปแบบ (regexp)
- ตัวยึด
- จำเป็นต้องใช้
- ขั้นตอน
<form> / <input> แอตทริบิวต์การเติมข้อความอัตโนมัติ
แอตทริบิวต์การเติมข้อความอัตโนมัติระบุรูปแบบหรือการป้อนข้อมูลควรมีการเติมข้อความอัตโนมัติ
เมื่อผู้ใช้เริ่มพิมพ์ในด้านการเติมข้อความอัตโนมัติ, เบราว์เซอร์จะแสดงตัวเลือกในการกรอกข้อมูลในช่องนี้
เคล็ดลับ: การเติมข้อความอัตโนมัติแอตทริบิวต์ขององค์ประกอบรูปแบบที่เป็นไปได้มีการเปิดและในองค์ประกอบเข้าถูกปิด
หมายเหตุ: การเติมข้อความอัตโนมัติใช้ <form> แท็กและประเภทต่อไปนี้ <input> Tag: ข้อความ, การค้นหา, URL, โทรศัพท์ , อีเมล์, รหัสผ่าน, datepickers ช่วง และสี
ตัวอย่าง
รูปแบบ HTML เปิดการเติมข้อความอัตโนมัติ (กเติมข้อความอัตโนมัติปิดช่องใส่):
ลอง»
เคล็ดลับ: เบราว์เซอร์บางอย่างที่คุณอาจจำเป็นต้องเปิดใช้งานคุณลักษณะการทำให้สมบูรณ์อัตโนมัติในการสั่งซื้อที่จะรับทรัพย์สิน
<form> คุณสมบัติ novalidate
สถานที่ให้บริการแบบบูคุณสมบัติ novalidate
แอตทริบิวต์ novalidate ระบุเมื่อกรอกแบบฟอร์มการไม่ควรตรวจสอบการป้อนข้อมูลฟอร์มหรือโดเมน
ตัวอย่าง
โดยไม่ต้องตรวจสอบการส่งข้อมูลแบบฟอร์ม
ลอง»
<input> แอตทริบิวต์ออโต้โฟกัส
แอตทริบิวต์ออโต้โฟกัสเป็นคุณลักษณะแบบบูล
แอตทริบิวต์ออโต้โฟกัสระบุเมื่อโหลดหน้าเว็บโดเมนโดยอัตโนมัติได้รับการมุ่งเน้น
ตัวอย่าง
ปล่อยให้ "ชื่อจริง" ช่องป้อนเข้าสู่ระบบโฟกัสอัตโนมัติในการโหลดหน้านี้:
ลอง»
<input> คุณสมบัติรูปแบบ
แอตทริบิวต์ระบุช่องใส่รูปแบบเป็นหนึ่งหรือมากกว่าหนึ่งรูปแบบ
เคล็ดลับ: เพื่ออ้างอิงมากกว่าหนึ่งรูปแบบให้ใช้รายการพื้นที่ที่แยกออกจากกัน
ตัวอย่าง
ตั้งอยู่ในรูปแบบรูปแบบนอกช่องใส่หมายถึงรูปแบบ HTML (แบบยังคงเป็นส่วนหนึ่งของการป้อนข้อมูลแบบฟอร์ม):
First name: <input type="text" name="fname"><br>
<input type="submit" value="提交">
</form>
Last name: <input type="text" name="lname" form="form1">
ลอง»
<input> คุณสมบัติ formaction
คุณสมบัติ formaction ถูกนำมาใช้เพื่ออธิบาย URL ของการส่งแบบฟอร์ม
formaction แอตทริบิวต์แทนที่ <form> องค์ประกอบในแอตทริบิวต์การดำเนินการ
หมายเหตุ: ประเภท formactionแอตทริบิวต์ = "ส่ง" และประเภท = "ภาพ"
ตัวอย่าง
HtmlForm ส่งแบบฟอร์มต่อไปนี้ประกอบด้วยสองปุ่มที่อยู่ที่แตกต่างกัน
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="提交"><br>
<input type="submit" formaction="demo-admin.php"
value="提交">
</form>
ลอง»
<input> คุณสมบัติ formenctype
formenctype แอตทริบิวต์อธิบายการส่งแบบฟอร์มการเข้ารหัสข้อมูลเซิร์ฟเวอร์ (วิธีการแบบ = "โพสต์" รูปแบบ)
แทนที่คุณสมบัติ formenctype enctype แอตทริบิวต์องค์ประกอบของแบบฟอร์ม
หลัก: แอตทริบิวต์ประเภทนี้ = "ส่ง" และพิมพ์ = "ภาพ" ที่ใช้ในการร่วม
ตัวอย่าง
ปุ่มแรกส่งเพื่อส่งข้อมูลแบบฟอร์มจะถูกเข้ารหัสโดยเริ่มต้นที่สองปุ่มส่งไปที่ "multipart / form ข้อมูล" การเข้ารหัสรูปแบบการส่งข้อมูลในรูปแบบ:
First name: <input type="text" name="fname"><br>
<input type="submit" value="提交">
<input type="submit" formenctype="multipart/form-data"
value="以 Multipart/form-data 提交">
</form>
ลอง»
<input> คุณสมบัติ formmethod
แอตทริบิวต์ formmethod กำหนดส่งแบบฟอร์มทาง
สถานที่ให้บริการครอบคลุม formmethod <form> แอตทริบิวต์วิธีการองค์ประกอบของ
หมายเหตุ: คุณลักษณะนี้สามารถใช้กับ type = "ส่ง" และพิมพ์ = "ภาพ" ที่ใช้ในการร่วม
ตัวอย่าง
สร้างนิยามใหม่ให้ส่งแบบฟอร์มการโดยวิธีการเช่น:
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="提交">
<input type="submit" formmethod="post" formaction="demo-post.php"
value="使用 POST 提交">
</form>
ลอง»
<input> คุณสมบัติ formnovalidate
คุณสมบัติ novalidate เป็นที่พักแบบบูล
แอตทริบิวต์ novalidate อธิบาย <input> องค์ประกอบไม่จำเป็นต้องได้รับการตรวจสอบขณะที่การส่งแบบฟอร์ม
แอตทริบิวต์ formnovalidate แทนที่แอตทริบิวต์ novalidate <form> องค์ประกอบ
หมายเหตุ: ประเภทแอตทริบิวต์ formnovalidate = "ส่งสำหรับการใช้งานร่วมกับ
ตัวอย่าง
สองปุ่มส่งแบบฟอร์ม (ไม่ได้บังคับด้วยการยืนยัน):
E-mail: <input type="email" name="userid"><br>
<input type="submit" value="提交"><br>
<input type="submit" formnovalidate value="不验证提交">
</form>
ลอง»
<input> คุณสมบัติ formtarget
แอตทริบิวต์ formtarget ระบุชื่อหรือคำหลักเพื่อระบุข้อมูลการแสดงผลที่ได้รับหลังจากการส่งแบบฟอร์ม
แทนที่คุณสมบัติ formtarget <form> แอตทริบิวต์เป้าหมายขององค์ประกอบ
หมายเหตุ: แอตทริบิวต์ formtargettype = "ส่ง" และพิมพ์ = "ภาพ" ที่ใช้ในการร่วม
ตัวอย่าง
สองปุ่มส่งแบบฟอร์มที่แสดงในหน้าต่างที่แตกต่างกัน
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="正常提交">
<input type="submit" formtarget="_blank"
value="提交到一个新的页面上">
</form>
ลอง»
แอตทริบิวต์ <input> สูงและความกว้าง
สูงและความกว้างแอตทริบิวต์ที่ระบุไว้สำหรับประเภทภาพของ <input> สูงแท็กภาพและความกว้าง
หมายเหตุ: สูงและความกว้างคุณสมบัติเท่านั้นนำไปใช้กับประเภทของภาพ <input> แท็ก
เคล็ดลับ: ภาพที่มักจะระบุความสูงและความกว้างของคุณลักษณะหากภาพที่กำหนดความสูงและความกว้างของพื้นที่ที่จำเป็นสำหรับภาพเมื่อโหลดหน้าเว็บแล้วจะถูกเก็บไว้ โดยไม่ต้องแอตทริบิวต์เหล่านี้เบราว์เซอร์ไม่ทราบขนาดของภาพและไม่สามารถตั้งสำรองพื้นที่ที่เหมาะสม ภาพถ่ายในระหว่างขั้นตอนการโหลดจะมีผลต่อการเปลี่ยนแปลงรูปแบบหน้า (แม้ว่าภาพได้โหลด)
ตัวอย่าง
กำหนดให้รูปปุ่มส่งใช้ความสูงและคุณลักษณะความกว้าง:
ลอง»
<input> คุณสมบัติรายการ
รายการคุณสมบัติของ DataList ระบุช่องใส่ DataList คือรายการของตัวเลือกสำหรับช่องใส่ได้
ตัวอย่าง
กำหนดไว้ล่วงหน้าใน <DataList> ใน <input> ค่า:
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
ลอง»
<input> แอตทริบิวต์นาทีและแม็กซ์
นาที, แม็กซ์และขั้นตอนแอตทริบิวต์ที่ใช้เป็นรูปแบบการใส่ที่มีตัวเลขหรือวัน จำกัด ( จำกัด )
หมายเหตุ: นาทีแม็กซ์และคุณลักษณะขั้นตอนที่นำไปใช้กับประเภทต่อไปนี้ <input> tag: เลือกวันจำนวนและช่วง
ตัวอย่าง
<input> องค์ประกอบของการตั้งค่าต่ำสุดและสูงสุด:
<input type="date" name="bday" max="1979-12-31">
Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02">
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">
ลอง»
<input> คุณสมบัติหลาย
แอตทริบิวต์หลายแอตทริบิวต์แบบบูล
ระบุแอตทริบิวต์หลาย <input> เพื่อเลือกหลายค่า
หมายเหตุ: คุณสมบัติหลายนำไปใช้กับประเภทต่อไปนี้ <input> tag: อีเมลและไฟล์:
<input> สถานที่ให้บริการในรูปแบบ
แอตทริบิวต์รูปแบบการอธิบายการแสดงออกปกติใช้เพื่อตรวจสอบค่าของ <input> องค์ประกอบ
หมายเหตุ: รูปแบบแอตทริบิวต์นำไปใช้ในประเภทต่อไปนี้ <input> Tag: ข้อความ, การค้นหา, URL โทร , อีเมล์ และรหัสผ่าน
เคล็ดลับ: มันจะใช้สำหรับโลก ชื่อ แอตทริบิวต์อธิบายโหมด
เคล็ดลับ: คุณสามารถของเราใน การกวดวิชา JavaScript เพื่อเรียนรู้เกี่ยวกับเนื้อหาของการแสดงออกปกติ
ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงสามตัวอักษรประกอบด้วยฟิลด์ข้อความเท่านั้น (ไม่มีตัวเลขหรืออักขระพิเศษ):
ลอง»
<input> แอตทริบิวต์ตัวยึด
แอตทริบิวต์ตัวยึดให้คำแนะนำ (คำแนะนำ) อธิบายค่าที่คาดหวังของช่องใส่
เตือนสั้นจะปรากฏในช่องใส่ก่อนที่จะคุ้มค่าที่ผู้ใช้ป้อน
หมายเหตุ: แอตทริบิวต์ยึดนำไปใช้ในประเภทต่อไปนี้ <input> Tag: ข้อความ, การค้นหา, URL, โทรศัพท์ , อีเมล์ และรหัสผ่าน
<input> แอตทริบิวต์ที่จำเป็น
แอตทริบิวต์ที่จำเป็นเป็นคุณลักษณะแบบบูล
แอตทริบิวต์ที่จำเป็นระบุว่าช่องใส่จะต้องเต็มไป (ไม่ว่างเปล่า) ก่อนที่จะส่ง
หมายเหตุ: คุณลักษณะที่จำเป็นสำหรับประเภทต่อไปนี้ <input> Tag: ข้อความ, การค้นหา, URL, โทรศัพท์ , อีเมล์, รหัสผ่าน, แจ่มวันที่จำนวนช่องทำเครื่องหมายวิทยุ และไฟล์
<input> คุณลักษณะขั้นตอน
แอตทริบิวต์ขั้นตอนสำหรับช่องใส่ระบุช่วงเวลาที่ถูกต้องตามกฎหมายจำนวน
หากขั้นตอน = "3" ตัวเลขทางกฎหมายอาจจะ -3,0,3,6 ฯลฯ
เคล็ดลับ: แอตทริบิวต์ขั้นตอนที่สามารถสร้างมูลค่าสูงสุดในระดับภูมิภาคและแอตทริบิวต์นาที
หมายเหตุ: ขั้นตอนแอตทริบิวต์ประเภทใช้ร่วมกับประเภทต่อไปนี้: หมายเลขช่วงวันที่วันที่และเวลา , วันที่และเวลาท้องถิ่น, เดือน, เวลา และในสัปดาห์
ตัวอย่าง
ที่กำหนดไว้ในขั้นตอนการป้อนข้อมูลขั้นตอนที่ 3:
ลอง»
HTML5 <input> แท็ก
标签 | 描述 |
---|---|
<form> | 定义一个form表单 |
<input> | 定义一个 input 域 |