บทช่วยสอน คุณสมบัติของฟอร์ม HTML5 ที่ดีที่สุดในปี 2024 ในบทช่วยสอนนี้ คุณสามารถเรียนรู้ คุณสมบัติ HTML5 รูปแบบใหม่,<form> / <input> แอตทริบิวต์การเติมข้อความอัตโนมัติ,ตัวอย่าง,<form> คุณสมบัติ novalidate,ตัวอย่าง,<input> แอตทริบิวต์ออโต้โฟกัส,ตัวอย่าง,<input> คุณสมบัติรูปแบบ,ตัวอย่าง,<input> คุณสมบัติ formaction,ตัวอย่าง,<input> คุณสมบัติ formenctype,ตัวอย่าง,<input> คุณสมบัติ formmethod,ตัวอย่าง,<input> คุณสมบัติ formnovalidate,ตัวอย่าง,<input> คุณสมบัติ formtarget,ตัวอย่าง,แอตทริบิวต์ <input> สูงและความกว้าง,ตัวอย่าง,<input> คุณสมบัติรายการ,ตัวอย่าง,<input> แอตทริบิวต์นาทีและแม็กซ์,ตัวอย่าง,<input> คุณสมบัติหลาย,ตัวอย่าง,<input> สถานที่ให้บริการในรูปแบบ,ตัวอย่าง,<input> แอตทริบิวต์ตัวยึด,ตัวอย่าง,<input> แอตทริบิวต์ที่จำเป็น,ตัวอย่าง,<input> คุณลักษณะขั้นตอน,ตัวอย่าง,HTML5 <input> แท็ก,

คุณสมบัติของฟอร์ม HTML5

คุณสมบัติ HTML5 รูปแบบใหม่

แท็ก HTML5 ของ <form> และ <input> เพิ่มคุณสมบัติใหม่หลาย

<form> คุณลักษณะใหม่:

• เติมข้อความอัตโนมัติ
• novalidate

<input> คุณสมบัติใหม่:

• เติมข้อความอัตโนมัติ
• ออโต้โฟกัส
• ฟอร์ม
• formaction
• formenctype
• formmethod
• formnovalidate
• formtarget
• สูงและความกว้าง
• รายการ
• นาทีและแม็กซ์
• หลายอย่าง
• รูปแบบ (regexp)
• ตัวยึด
• จำเป็นต้องใช้
• ขั้นตอน

<form> / <input> แอตทริบิวต์การเติมข้อความอัตโนมัติ

แอตทริบิวต์การเติมข้อความอัตโนมัติระบุรูปแบบหรือการป้อนข้อมูลควรมีการเติมข้อความอัตโนมัติ

เมื่อผู้ใช้เริ่มพิมพ์ในด้านการเติมข้อความอัตโนมัติ, เบราว์เซอร์จะแสดงตัวเลือกในการกรอกข้อมูลในช่องนี้

เคล็ดลับ: การเติมข้อความอัตโนมัติแอตทริบิวต์ขององค์ประกอบรูปแบบที่เป็นไปได้มีการเปิดและในองค์ประกอบเข้าถูกปิด

หมายเหตุ: การเติมข้อความอัตโนมัติใช้ <form> แท็กและประเภทต่อไปนี้ <input> Tag: ข้อความ, การค้นหา, URL, โทรศัพท์ , อีเมล์, รหัสผ่าน, datepickers ช่วง และสี

ตัวอย่าง

รูปแบบ HTML เปิดการเติมข้อความอัตโนมัติ (กเติมข้อความอัตโนมัติปิดช่องใส่):

<form การกระทำ = "สาธิต form.php" เติมข้อความอัตโนมัติ = "บน"> ชื่อจริง : <input type = "ข้อความ" name = "fname"> <br> นามสกุล: <input type = "ข้อความ" name = "lname"> <br> E-mail: <input type = "อีเมล" name = "อีเมล" เติมข้อความอัตโนมัติ = "ปิด"> <br> <input type = "ส่ง"> </ form>

ลอง»

เคล็ดลับ: เบราว์เซอร์บางอย่างที่คุณอาจจำเป็นต้องเปิดใช้งานคุณลักษณะการทำให้สมบูรณ์อัตโนมัติในการสั่งซื้อที่จะรับทรัพย์สิน

<form> คุณสมบัติ novalidate

สถานที่ให้บริการแบบบูคุณสมบัติ novalidate

แอตทริบิวต์ novalidate ระบุเมื่อกรอกแบบฟอร์มการไม่ควรตรวจสอบการป้อนข้อมูลฟอร์มหรือโดเมน

ตัวอย่าง

โดยไม่ต้องตรวจสอบการส่งข้อมูลแบบฟอร์ม

<form การกระทำ = "สาธิต form.php" novalidate> E-mail: <input type = "อีเมล" name = "user_email"> <input type = "ส่ง"> </ form>

ลอง»

<input> แอตทริบิวต์ออโต้โฟกัส

แอตทริบิวต์ออโต้โฟกัสเป็นคุณลักษณะแบบบูล

แอตทริบิวต์ออโต้โฟกัสระบุเมื่อโหลดหน้าเว็บโดเมนโดยอัตโนมัติได้รับการมุ่งเน้น

ตัวอย่าง

ปล่อยให้ "ชื่อจริง" ช่องป้อนเข้าสู่ระบบโฟกัสอัตโนมัติในการโหลดหน้านี้:

First name:<input type="text" name="fname" autofocus>

ลอง»

<input> คุณสมบัติรูปแบบ

แอตทริบิวต์ระบุช่องใส่รูปแบบเป็นหนึ่งหรือมากกว่าหนึ่งรูปแบบ

เคล็ดลับ: เพื่ออ้างอิงมากกว่าหนึ่งรูปแบบให้ใช้รายการพื้นที่ที่แยกออกจากกัน

ตัวอย่าง

ตั้งอยู่ในรูปแบบรูปแบบนอกช่องใส่หมายถึงรูปแบบ HTML (แบบยังคงเป็นส่วนหนึ่งของการป้อนข้อมูลแบบฟอร์ม):

<form action="demo-form.php" id="form1">
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 ส่งแบบฟอร์มต่อไปนี้ประกอบด้วยสองปุ่มที่อยู่ที่แตกต่างกัน

<form action="demo-form.php">
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 ข้อมูล" การเข้ารหัสรูปแบบการส่งข้อมูลในรูปแบบ:

<form action="demo-post_enctype.php" method="post">
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 = "ส่ง" และพิมพ์ = "ภาพ" ที่ใช้ในการร่วม

ตัวอย่าง

สร้างนิยามใหม่ให้ส่งแบบฟอร์มการโดยวิธีการเช่น:

<form action="demo-form.php" method="get">
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 = "ส่งสำหรับการใช้งานร่วมกับ

ตัวอย่าง

สองปุ่มส่งแบบฟอร์ม (ไม่ได้บังคับด้วยการยืนยัน):

<form action="demo-form.php">
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 = "ส่ง" และพิมพ์ = "ภาพ" ที่ใช้ในการร่วม

ตัวอย่าง

สองปุ่มส่งแบบฟอร์มที่แสดงในหน้าต่างที่แตกต่างกัน

<form action="demo-form.php">
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 type="image" src="img_submit.gif" alt="Submit" width="48" height="48">

ลอง»

<input> คุณสมบัติรายการ

รายการคุณสมบัติของ DataList ระบุช่องใส่ DataList คือรายการของตัวเลือกสำหรับช่องใส่ได้

ตัวอย่าง

กำหนดไว้ล่วงหน้าใน <DataList> ใน <input> ค่า:

<input list="browsers">

<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>

ลอง»

<input> แอตทริบิวต์นาทีและแม็กซ์

นาที, แม็กซ์และขั้นตอนแอตทริบิวต์ที่ใช้เป็นรูปแบบการใส่ที่มีตัวเลขหรือวัน จำกัด ( จำกัด )

หมายเหตุ: นาทีแม็กซ์และคุณลักษณะขั้นตอนที่นำไปใช้กับประเภทต่อไปนี้ <input> tag: เลือกวันจำนวนและช่วง

ตัวอย่าง

<input> องค์ประกอบของการตั้งค่าต่ำสุดและสูงสุด:

Enter a date before 1980-01-01:
<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: อีเมลและไฟล์:

ตัวอย่าง

อัปโหลดหลายไฟล์:

Select images: <input type="file" name="img" multiple>

ลอง»

<input> สถานที่ให้บริการในรูปแบบ

แอตทริบิวต์รูปแบบการอธิบายการแสดงออกปกติใช้เพื่อตรวจสอบค่าของ <input> องค์ประกอบ

หมายเหตุ: รูปแบบแอตทริบิวต์นำไปใช้ในประเภทต่อไปนี้ <input> Tag: ข้อความ, การค้นหา, URL โทร , อีเมล์ และรหัสผ่าน

เคล็ดลับ: มันจะใช้สำหรับโลก ชื่อ แอตทริบิวต์อธิบายโหมด

เคล็ดลับ: คุณสามารถของเราใน การกวดวิชา JavaScript เพื่อเรียนรู้เกี่ยวกับเนื้อหาของการแสดงออกปกติ

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงสามตัวอักษรประกอบด้วยฟิลด์ข้อความเท่านั้น (ไม่มีตัวเลขหรืออักขระพิเศษ):

Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">

ลอง»

<input> แอตทริบิวต์ตัวยึด

แอตทริบิวต์ตัวยึดให้คำแนะนำ (คำแนะนำ) อธิบายค่าที่คาดหวังของช่องใส่

เตือนสั้นจะปรากฏในช่องใส่ก่อนที่จะคุ้มค่าที่ผู้ใช้ป้อน

หมายเหตุ: แอตทริบิวต์ยึดนำไปใช้ในประเภทต่อไปนี้ <input> Tag: ข้อความ, การค้นหา, URL, โทรศัพท์ , อีเมล์ และรหัสผ่าน

ตัวอย่าง

ช่องใส่เสื้อข้อความพร้อมต์:

<input type="text" name="fname" placeholder="First name">

ลอง»

<input> แอตทริบิวต์ที่จำเป็น

แอตทริบิวต์ที่จำเป็นเป็นคุณลักษณะแบบบูล

แอตทริบิวต์ที่จำเป็นระบุว่าช่องใส่จะต้องเต็มไป (ไม่ว่างเปล่า) ก่อนที่จะส่ง

หมายเหตุ: คุณลักษณะที่จำเป็นสำหรับประเภทต่อไปนี้ <input> Tag: ข้อความ, การค้นหา, URL, โทรศัพท์ , อีเมล์, รหัสผ่าน, แจ่มวันที่จำนวนช่องทำเครื่องหมายวิทยุ และไฟล์

ตัวอย่าง

ไม่สามารถช่องใส่ที่ว่างเปล่า

Username: <input type="text" name="usrname" required>

ลอง»

<input> คุณลักษณะขั้นตอน

แอตทริบิวต์ขั้นตอนสำหรับช่องใส่ระบุช่วงเวลาที่ถูกต้องตามกฎหมายจำนวน

หากขั้นตอน = "3" ตัวเลขทางกฎหมายอาจจะ -3,0,3,6 ฯลฯ

เคล็ดลับ: แอตทริบิวต์ขั้นตอนที่สามารถสร้างมูลค่าสูงสุดในระดับภูมิภาคและแอตทริบิวต์นาที

หมายเหตุ: ขั้นตอนแอตทริบิวต์ประเภทใช้ร่วมกับประเภทต่อไปนี้: หมายเลขช่วงวันที่วันที่และเวลา , วันที่และเวลาท้องถิ่น, เดือน, เวลา และในสัปดาห์

ตัวอย่าง

ที่กำหนดไว้ในขั้นตอนการป้อนข้อมูลขั้นตอนที่ 3:

<input type="number" name="points" step="3">

ลอง»

HTML5 <input> แท็ก