สิ่งที่คุณขาดหายไปคือความเข้าใจเกี่ยวกับมาร์กอัปเชิงความหมายและ DOM
ในความเป็นจริงคุณสามารถทำอะไรก็ได้ที่คุณต้องการด้วยมาร์กอัป HTML5 และเบราว์เซอร์ส่วนใหญ่จะแยกวิเคราะห์ ครั้งล่าสุดที่ฉันตรวจสอบ WebKit / Blink ยังอนุญาตให้ใช้องค์ประกอบหลอกภายใน<input>องค์ประกอบซึ่งเป็นการละเมิดข้อกำหนดอย่างชัดเจน - Gecko ไม่มากนัก อย่างไรก็ตามการทำอะไรก็ได้ที่คุณชอบด้วยมาร์กอัปของคุณจะทำให้ความหมายเป็นโมฆะอย่างไม่ต้องสงสัย
ทำไมเราจึงใส่<input>องค์ประกอบไว้ใน<form>องค์ประกอบ? ด้วยเหตุผลเดียวกันเราจึงใส่<li>แท็กไว้ในองค์ประกอบ<ul>และ<ol>เป็นที่ที่พวกเขาอยู่ มันเป็นความหมายที่ถูกต้องและช่วยในการกำหนดมาร์กอัป ตัววิเคราะห์โปรแกรมอ่านหน้าจอและซอฟต์แวร์ต่างๆสามารถเข้าใจมาร์กอัปของคุณได้ดีขึ้นเมื่อมันถูกต้องตามความหมาย - เมื่อมาร์กอัปมีความหมายไม่ใช่แค่โครงสร้าง
<form>องค์ประกอบยังช่วยให้คุณสามารถกำหนดmethodและactionคุณลักษณะที่บอกเบราว์เซอร์จะทำอย่างไรเมื่อการส่งแบบฟอร์ม AJAX ไม่ใช่เครื่องมือครอบคลุม 100% และในฐานะนักพัฒนาเว็บคุณควรฝึกฝนการย่อยสลายอย่างสง่างาม - ควรส่งแบบฟอร์มและโอนข้อมูลได้แม้ว่า JS จะปิดอยู่ก็ตาม
สุดท้ายแบบฟอร์มทั้งหมดได้รับการลงทะเบียนอย่างถูกต้องใน DOM เราสามารถดูสิ่งนี้ด้วย JavaScript หากคุณเปิดคอนโซลของคุณในหน้านี้และพิมพ์:
document.forms
คุณจะได้รับคอลเลกชันที่ดีของทุกรูปแบบในหน้านี้ แถบค้นหาช่องแสดงความคิดเห็นกล่องคำตอบ - รูปแบบที่เหมาะสมทั้งหมด อินเทอร์เฟซนี้มีประโยชน์ในการเข้าถึงข้อมูลและโต้ตอบกับองค์ประกอบเหล่านี้ ตัวอย่างเช่นสามารถต่ออนุกรมแบบฟอร์มได้ง่ายมาก
นี่คือเนื้อหาการอ่านบางส่วน:
หมายเหตุ: <input>สามารถใช้องค์ประกอบภายนอกแบบฟอร์มได้ แต่หากคุณต้องการส่งข้อมูลไม่ว่าด้วยวิธีใดก็ตามคุณควรใช้แบบฟอร์ม
นี่คือส่วนหนึ่งของคำตอบที่ฉันพลิกคำถาม
ฉันจะทำให้ชีวิตยากขึ้นโดยหลีกเลี่ยงรูปแบบได้อย่างไร?
สิ่งแรกและสำคัญที่สุด - องค์ประกอบคอนเทนเนอร์ ใครต้องการพวกเขาใช่มั้ย!
แน่นอนน้อยของคุณ<input>และ<button>องค์ประกอบซ้อนกันภายในชนิดขององค์ประกอบภาชนะบางอย่าง? พวกเขาไม่สามารถลอยอยู่ตรงกลางของสิ่งอื่นได้ แล้วถ้าไม่ใช่<form>แล้วล่ะ? ก<div>? ก<span> ?
องค์ประกอบเหล่านี้ต้องอยู่ที่ไหนสักแห่งและเว้นแต่ว่ามาร์กอัปของคุณจะยุ่งเหยิงองค์ประกอบคอนเทนเนอร์ก็สามารถเป็นแบบฟอร์มได้
เปล่า? โอ้.
ณ จุดนี้เสียงในหัวของฉันอยากรู้มากว่าคุณสร้างตัวจัดการเหตุการณ์ของคุณสำหรับสถานการณ์ AJAX ที่แตกต่างกันอย่างไร ต้องมีจำนวนมากหากคุณต้องการลดมาร์กอัปของคุณเพื่อประหยัดไบต์ จากนั้นคุณต้องสร้างฟังก์ชั่นที่กำหนดเองสำหรับแต่ละเหตุการณ์ AJAX ที่สอดคล้องกับ 'ชุด' ของแต่ละองค์ประกอบ - ซึ่งคุณต้องกำหนดเป้าหมายเป็นรายบุคคลหรือกับคลาสใช่ไหม? ไม่มีทางที่จะจัดกลุ่มองค์ประกอบเหล่านี้ได้โดยทั่วไปเนื่องจากเราได้กำหนดแล้วว่าพวกมันแค่เดินเตร่ไปรอบ ๆ มาร์กอัปทำทุกอย่างจนกว่าจะจำเป็น
ดังนั้นคุณจึงกำหนดรหัสตัวจัดการสองสามตัวเอง
$('#searchButton').on('click', function (e) {
e.preventDefault();
var search = $('#mySearch');
$.ajax({
url: 'http://example.com/text',
type: 'GET',
dataType: 'text',
data: 'query=' + search.val(),
success: function (data) {
console.log(data);
}
});
});
$('#login').on('click', function (e) {
e.preventDefault();
var user = $('#username'),
pass = $('#password'),
rem = $('#remember');
$.ajax({
url: 'http://example.com/login',
type: 'POST',
data: user.add(pass, rem).serialize(),
dataType: 'text',
success: function (data) {
console.log(data);
}
});
});
<input type="text" id="mySearch" value="query" />
<button id="searchButton">Search</button>
<input type="text" id="username" name="username" value="user" />
<input type="password" id="password" name="password" value="pass" />
<input type="checkbox" id="remember" name="remember" checked /> stay logged in
<button id="login">Login</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
นี่คือส่วนที่คุณพูดว่า:
'ฉันใช้ฟังก์ชันที่ใช้ซ้ำได้ทั้งหมด หยุดพูดเกินจริง '
พอใช้ แต่คุณยังต้องสร้างชุดขององค์ประกอบเฉพาะเหล่านี้หรือชุดคลาสเป้าหมายใช่ไหม? คุณยังต้องจัดกลุ่มองค์ประกอบเหล่านี้
ให้ฉันช่วยตาของคุณ (หรือหูถ้าคุณใช้โปรแกรมอ่านหน้าจอและต้องการความช่วยเหลือ - สิ่งที่ดีที่เราสามารถเพิ่มARIAลงในมาร์กอัปความหมายทั้งหมดนี้ได้ใช่ไหม) และดูพลังของรูปแบบทั่วไป
function genericAjaxForm (e) {
e.preventDefault();
var form = $(this);
return $.ajax({
url: form.attr('action'),
type: form.attr('method'),
dataType: form.data('type'),
data: form.serialize()
});
}
$('#login-form').on('submit', function (e) {
genericAjaxForm.call(this, e).done(function (data) {
console.log(data);
});
});
<form action="http://example.com/login" method="POST" data-type="text" id="login-form">
<input type="text" name="username" value="user" />
<input type="password" name="password" value="mypass" />
<label>
<input type="checkbox" name="remember" /> Remember me
</label>
<button type="submit">Login</button>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
เราสามารถใช้สิ่งนี้กับรูปแบบทั่วไปรักษาความเสื่อมโทรมของเราและปล่อยให้แบบฟอร์มอธิบายอย่างสมบูรณ์ว่าควรทำงานอย่างไร เราสามารถขยายฟังก์ชันการทำงานพื้นฐานนี้ได้ในขณะที่ยังคงรูปแบบทั่วไป - แบบแยกส่วนมากขึ้นและปวดหัวน้อยลง JavaScript แค่กังวลเกี่ยวกับสิ่งต่าง ๆ ของตัวเองเช่นการซ่อนองค์ประกอบที่เหมาะสมหรือจัดการกับการตอบสนองใด ๆ ที่เราได้รับ
และตอนนี้คุณพูดว่า:
'แต่ฉันรวมรูปแบบหลอกของฉันไว้ใน<div>องค์ประกอบที่มีรหัสเฉพาะ - จากนั้นฉันสามารถกำหนดเป้าหมายอินพุตแบบหลวม ๆ ด้วย.findและ.serializeพวกเขาและ ... '
โอ้นั่นอะไร? คุณห่อ<input>องค์ประกอบของคุณไว้ในภาชนะจริงหรือ?
แล้วทำไมยังไม่เป็นรูปเป็นร่าง?