คำอธิบายโดยละเอียดเกี่ยวกับคุณลักษณะใหม่ของแบบฟอร์ม HTML5

ใน H5 สามารถวางแบบฟอร์มได้ทุกที่บนหน้าและจากนั้นจะมีการระบุแอตทริบิวต์แบบฟอร์มสำหรับองค์ประกอบ

 <form id = testform> <input type = text> </form> <textarea form = testform> </textarea>

ใน H4 รูปแบบของการส่งแบบฟอร์ม

 <form action = 1.jsp> </form>

ส่งแบบฟอร์มทั้งหมด

ใน H5 คุณสามารถเพิ่มหน้า JSP ที่ส่งไปยังแต่ละแอตทริบิวต์ของแบบฟอร์ม

 <form action = 1.jsp> <อินพุต type = subment action = 1-1.jsp> ส่งไปที่ 1 หน้า </form> <อินพุต type = subment action = 1-2.jsp> ส่งไปยัง 2 หน้า </form> <ประเภทอินพุต = ส่งการกระทำ = 1-3.jsp> ส่งไปยัง 3 หน้า </form> </form>

คุณสามารถระบุวิธีการส่งของแต่ละองค์ประกอบของแบบฟอร์ม

 <form action = 1.jsp> <อินพุต type = subment action = 1-1.jsp formMethod = post> ส่งไปที่ 1 หน้าวิธีการส่งโพสต์ </form> <ประเภทอินพุต = 1-2.jsp formMethod = get> ส่ง ถึง 2 หน้าวิธีการส่ง </form> </form>

เช่นเดียวกับข้างต้นบทบาทและทุกองค์ประกอบรหัสนั้นเล็กน้อย

เช่นเดียวกับข้างต้นบทบาทและทุกองค์ประกอบรหัสนั้นเล็กน้อย

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

 <ประเภทอินพุต = การกระทำข้อความ = 1-3.JSP ออโต้โฟกัส> ส่งไปยัง 3 หน้า </form>

มีเพียงตัวควบคุมเดียวในหน้าเว็บที่มีคุณสมบัติออโต้โฟกัสซึ่งไม่สามารถถูกทารุณกรรมได้

มันสามารถใช้ในองค์ประกอบอินพุตส่วนใหญ่

สามารถเพิ่มแอตทริบิวต์ LABLS ให้กับองค์ประกอบทั้งหมดของแบบฟอร์มค่าแอตทริบิวต์เป็นวัตถุ nodelist ซึ่งแสดงถึงคอลเลกชันขององค์ประกอบฉลากที่ผูกไว้กับองค์ประกอบ

 <script type = text/javascript> window.onload = function () {var text = document.getElementById ('text'); ') ;; label.setAttribute (สำหรับ, text); สี: สีแดง);}} อื่นถ้า (text.labels.length> 1) form.removeChild (text.labels [1]); btn type = button value = การตรวจสอบ> </form>

เมื่อผู้ใช้ไม่ได้ป้อนค่าใด ๆ ให้คลิกการตรวจสอบและองค์ประกอบฉลากจะถูกเพิ่มลงในกล่องข้อความ เพื่อเข้าสู่ชื่อ

คุณสามารถวางองค์ประกอบหน่วยตารางภายในฉลากและเข้าถึงองค์ประกอบตารางผ่านคุณสมบัติการควบคุมของแท็ก

 <script type = text/javascript> function setValue () {console.log (1); <label id = label> zip code: <input id = txt_zip maxlength = 6> <small> โปรดป้อน 6 หลัก </เล็ก> </label> <อินพุตประเภท = ปุ่ม = ตั้งค่าเริ่มต้น oncliclk = setValue ()> < </form>

เปิดหน้าในนักท่องเที่ยวคลิกตั้งปุ่มค่าเริ่มต้นและ 231456 จะปรากฏในกล่องข้อความ

ป้อนข้อมูลพรอมต์ (สีเทา) เมื่อกล่องข้อความอยู่ในสถานะตัวเลือก

 <ประเภทอินพุต = ข้อความ palceholder = hahah>

รวมกับองค์ประกอบ Datalist ใหม่ของ H5 กล่องพรอมต์การผลิต

 ข้อความ: <อินพุตประเภท = ชื่อข้อความ = รายการทักทาย = ทักทาย> <!-ใช้สไตล์ = แสดงผล: ไม่มี; คน </petion> <ค่าตัวเลือก = คุณเป็นหมู> คุณเป็นหมู </porture> <ตัวเลือกค่า = คุณเป็นสุนัข> คุณเป็นสุนัข </portion> </tatalist>

เมื่อคุณป้อนคุณในกล่องข้อความจะมีสามคอลัมน์ด้านล่างเพื่อเตือนคุณว่าคุณเป็นคนคุณเป็นหมูคุณเป็นสุนัข

Autocomplete มีสาม, ปิด, (ไม่ได้ระบุ) เมื่อระบุให้ใช้ค่าเริ่มต้นของนักท่องเที่ยว วิธีการใช้งานมีดังนี้

 <ประเภทอินพุต = ชื่อข้อความ = รายการอวยพร = คำทักทาย Autocomplete = ON>

เมื่อคุณป้อนกล่องข้อความหากคุณเป็นคนคลิกเพื่อส่งกลับไปที่หน้าก่อนหน้าแล้วป้อนฉันในกล่องข้อความและคุณจะแจ้งให้ฉันเป็นคน

เทียบเท่ากับค่าอินพุตของการตัดสินการแสดงออกปกติในส่วน HTML ตรงตามข้อกำหนดหรือไม่

โปรดป้อนเนื้อหา: <อินพุตประเภท = รูปแบบข้อความ = [0-9] [AZ] {3}>

ส่วนของรหัสนี้จำเป็นต้องป้อนตัวอักษรสามตัวตัวเลขสามตัว

สำหรับองค์ประกอบข้อความและข้อความของอินพุตเมื่อผู้ใช้เลือกส่วนหนึ่งของข้อความในองค์ประกอบทั้งสองนี้คุณสามารถใช้องค์ประกอบเพื่อรับทิศทางการเลือก

 <script type = text/javascript> function alertselectionDirection () {var control = document.forms [0] ['text']; ชื่อข้อความ = ข้อความ> <อินพุตประเภท = ค่าปุ่ม = จำฉัน onClick = AlertSelectionDirection ()> </form>

สำหรับช่องทำเครื่องหมายในอดีตเฉพาะการเลือกและสถานะการเลือกที่ไม่ได้รับการคัดเลือก

 <script> var cb = document.getElementById (CB);

• ความสูง: ระบุความสูงของภาพในปุ่มรูปภาพ
• ความกว้าง: ระบุความกว้างของรูปภาพในปุ่มรูปภาพ

 <อินพุตประเภท = ภาพ src = img/2.png width = 23 ความสูง = 23>

• MaxLength: ตั้งค่าโดยใช้ค่าจำนวนเต็มเพื่อ จำกัด จำนวนข้อความที่สามารถป้อนเข้าในองค์ประกอบ textarea
• WRAP: คุณสามารถระบุค่าแอตทริบิวต์เป็น SOFT และ HARD .

ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้