ความแตกต่างระหว่างidและnameคุณลักษณะคืออะไร? พวกเขาทั้งคู่ดูเหมือนจะทำหน้าที่จุดประสงค์เดียวกันในการจัดให้มีตัวระบุ

ฉันต้องการทราบ (โดยเฉพาะเกี่ยวกับรูปแบบ HTML) ว่าจำเป็นต้องใช้หรือไม่ใช้ทั้งสองอย่างหรือสนับสนุนด้วยเหตุผลใด ๆ ก็ตาม

nameแอตทริบิวต์ถูกนำมาใช้เมื่อมีการส่งข้อมูลในการส่งแบบฟอร์ม การควบคุมที่แตกต่างกันตอบสนองต่างกัน ตัวอย่างเช่นคุณอาจจะมีปุ่มที่แตกต่างกันหลายกับidคุณลักษณะ nameแต่เดียวกัน เมื่อส่งแล้วจะมีเพียงค่าเดียวในการตอบกลับ - ปุ่มตัวเลือกที่คุณเลือก

แน่นอนมีมากกว่านั้น แต่มันจะทำให้คุณคิดในทิศทางที่ถูกต้องแน่นอน

ใช้nameคุณลักษณะสำหรับการควบคุมแบบฟอร์ม (เช่น<input>และ<select>) เนื่องจากเป็นตัวระบุที่ใช้ในPOSTหรือการGETโทรที่เกิดขึ้นในการส่งแบบฟอร์ม

ใช้idแอตทริบิวต์เมื่อใดก็ตามที่คุณจะต้องอยู่ที่องค์ประกอบ HTML โดยเฉพาะอย่างยิ่งกับ CSS, JavaScript หรือระบุเศษ เป็นไปได้ที่จะค้นหาองค์ประกอบตามชื่อเช่นกัน แต่ก็ง่ายขึ้นและเชื่อถือได้มากขึ้นในการค้นหาด้วย ID

นี่คือบทสรุปโดยย่อ:

• idใช้เพื่อระบุองค์ประกอบ HTML ผ่านDocument Object Model (ผ่าน JavaScript หรือสไตล์ด้วย CSS) idคาดว่าจะไม่ซ้ำกันภายในหน้า

• nameสอดคล้องกับรูปแบบองค์ประกอบและระบุสิ่งที่จะโพสต์กลับไปยังเซิร์ฟเวอร์

ดูhttp://mindprod.com/jgloss/htmlforms.html#IDVSNAMEนี้

ความแตกต่างคืออะไร? คำตอบสั้น ๆ คือใช้ทั้งสองและไม่ต้องกังวลกับมัน แต่ถ้าคุณต้องการที่จะเข้าใจความโง่นี้นี่คือผอม:

id = สำหรับใช้เป็นเป้าหมายเช่นนี้สำหรับการเชื่อมโยงเช่นนี้<some-element id="XXX"></some-element><a href="#XXX"

name = ยังใช้เพื่อติดป้ายกำกับเขตข้อมูลในข้อความที่ส่งไปยังเซิร์ฟเวอร์ด้วย HTTP (HyperText Transfer Protocol) GET หรือ POST เมื่อคุณกดส่งในรูปแบบ

id = เลเบลฟิลด์สำหรับใช้โดย JavaScript และ Java DOM (โมเดลวัตถุเอกสาร) ชื่อใน name = ต้องไม่ซ้ำกันภายในแบบฟอร์ม ชื่อใน id = จะต้องไม่ซ้ำกันในเอกสารทั้งหมด

บางครั้งชื่อ = และ id = ชื่อจะแตกต่างกันเนื่องจากเซิร์ฟเวอร์คาดหวังว่าชื่อเดียวกันจากรูปแบบต่างๆในเอกสารเดียวกันหรือปุ่มตัวเลือกต่าง ๆ ในรูปแบบเดียวกันเช่นในตัวอย่างข้างต้น id = ต้องไม่ซ้ำกัน ชื่อ = ต้องไม่เป็น

JavaScript ต้องการชื่อที่ไม่ซ้ำกัน แต่มีเอกสารจำนวนมากเกินไปที่นี่โดยไม่มีชื่อ = ชื่อที่ไม่ซ้ำดังนั้นคน W3 จึงคิดค้น id แท็กที่จำเป็นต้องไม่ซ้ำกัน น่าเสียดายที่เบราว์เซอร์รุ่นเก่าไม่เข้าใจ ดังนั้นคุณต้องใช้ทั้งแผนการตั้งชื่อในแบบฟอร์มของคุณ

หมายเหตุ: คุณลักษณะ "ชื่อ" สำหรับแท็กบางอย่างเช่น<a>ไม่รองรับ HTML5

วิธีที่ฉันคิดเกี่ยวกับมันและใช้งานง่าย:

รหัสใช้สำหรับ CSS และ JavaScript / jQuery (ต้องไม่ซ้ำกันในหน้าหนึ่ง ๆ )

ชื่อจะใช้สำหรับการจัดการแบบฟอร์มใน PHP เมื่อมีการส่งแบบฟอร์มผ่าน HTML (จะต้องไม่ซ้ำกันในรูปแบบ - ในระดับหนึ่งดูความคิดเห็นของPaulด้านล่าง)

แท็ก ID - ใช้โดย CSS กำหนดอินสแตนซ์เฉพาะขององค์ประกอบ div, span หรือองค์ประกอบอื่น ๆ ปรากฏขึ้นภายในรุ่น Javascript DOM ช่วยให้คุณเข้าถึงได้ด้วยการเรียกใช้ฟังก์ชันต่างๆ

แท็กชื่อสำหรับฟิลด์ - นี่คือรูปแบบที่ไม่ซ้ำกัน- ถ้าคุณกำลังทำอาร์เรย์ที่คุณต้องการส่งผ่านไปยังการประมวลผล PHP / เซิร์ฟเวอร์ คุณสามารถเข้าถึงผ่าน Javascript ด้วยชื่อ แต่ฉันคิดว่ามันไม่ปรากฏเป็นโหนดใน DOM หรืออาจมีข้อ จำกัด บางอย่าง (คุณไม่สามารถใช้ .innerHTML ตัวอย่างเช่นถ้าฉันจำได้ถูกต้อง)

โดยทั่วไปสันนิษฐานว่าชื่อนั้นถูกแทนที่ด้วย idเสมอ นี่คือความจริงที่มีขอบเขต แต่ไม่ได้สำหรับเขตข้อมูลแบบฟอร์มและชื่อกรอบจริงพูด ตัวอย่างเช่นด้วยองค์ประกอบแบบฟอร์มnameแอตทริบิวต์จะใช้ในการกำหนดคู่ค่าชื่อที่จะส่งไปยังโปรแกรมฝั่งเซิร์ฟเวอร์และไม่ควรถูกกำจัด Browsers do not use id in that manner. เพื่อให้ปลอดภัยคุณสามารถใช้แอตทริบิวต์ name และ id ในองค์ประกอบของฟอร์ม ดังนั้นเราจะเขียนสิ่งต่อไปนี้:

<form id="myForm" name="myForm">
     <input type="text" id="userName" name="userName" />
</form>

เพื่อให้แน่ใจถึงความเข้ากันได้การมีชื่อที่ตรงกันและค่าแอตทริบิวต์ id เมื่อทั้งสองถูกกำหนดไว้เป็นความคิดที่ดี อย่างไรก็ตามโปรดระวัง - บางแท็กโดยเฉพาะปุ่มตัวเลือกต้องมีค่าชื่อที่ไม่ซ้ำกัน แต่ต้องใช้ค่ารหัสที่ไม่ซ้ำกันอีกครั้งสิ่งนี้ควรอ้างอิงว่า id ไม่ใช่เพียงการแทนที่ชื่อ พวกเขาแตกต่างกันในวัตถุประสงค์ ยิ่งไปกว่านั้นอย่าลดวิธีการแบบเก่าการมองลึกลงไปในห้องสมุดสมัยใหม่แสดงให้เห็นถึงรูปแบบไวยากรณ์ที่ใช้เพื่อประสิทธิภาพและความสะดวกในเวลาต่างๆ เป้าหมายของคุณควรสนับสนุนความเข้ากันได้เสมอ

ตอนนี้ในองค์ประกอบส่วนใหญ่แอตทริบิวต์ชื่อได้รับการสนับสนุนในความโปรดปรานของแอตทริบิวต์ ID แพร่หลายมากขึ้น อย่างไรก็ตามในบางกรณีโดยเฉพาะอย่างยิ่งในรูปแบบสาขา ( <button>, <input>, <select>และ<textarea>) ชีวิตชื่อแอตทริบิวต์เพราะมันยังคงต้องตั้งคู่ค่าชื่อสำหรับการส่งแบบฟอร์ม นอกจากนี้เราพบว่าองค์ประกอบบางอย่างโดยเฉพาะอย่างยิ่งเฟรมและลิงก์อาจยังคงใช้แอตทริบิวต์ชื่อได้เนื่องจากมักจะมีประโยชน์สำหรับการดึงองค์ประกอบเหล่านี้ตามชื่อ

มีความแตกต่างที่ชัดเจนระหว่าง id และชื่อ บ่อยครั้งเมื่อชื่อยังคงอยู่เราสามารถตั้งค่าเหมือนกัน อย่างไรก็ตามรหัสต้องไม่ซ้ำกันและชื่อในบางกรณีไม่ควร - คิดว่าปุ่มตัวเลือก น่าเสียดายที่เอกลักษณ์ของค่า id ในขณะที่ถูกตรวจสอบโดยการตรวจสอบมาร์กอัปนั้นไม่สอดคล้องกันอย่างที่ควรจะเป็น การใช้ CSS ในเบราว์เซอร์จะจัดรูปแบบวัตถุที่แชร์ค่า id ดังนั้นเราไม่อาจตรวจพบข้อผิดพลาดของมาร์กอัพหรือรูปแบบที่อาจส่งผลต่อ JavaScript ของเราจนกว่าจะใช้งานจริง

สิ่งนี้นำมาจากหนังสือ JavaScript- The Complete Reference by Thomas-Powell

nameเลิกใช้แล้วสำหรับเป้าหมายลิงก์และไม่ถูกต้องใน HTML5 มันไม่ทำงานอย่างน้อยใน Firefox ล่าสุด (v13) เปลี่ยน<a name="hello">เป็น<a id="hello">

เป้าหมายไม่จำเป็นต้องเป็น<a>แท็กอาจเป็น<p id="hello"> หรือ<h2 id="hello">อื่น ๆ ซึ่งมักจะเป็นโค้ดที่สะอาดกว่า

ตามที่โพสต์อื่น ๆ พูดอย่างชัดเจนnameยังคงใช้ (จำเป็น) ในรูปแบบ มันยังคงใช้ในแท็ก META

<form action="demo_form.asp">
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male"><br>
<label for="female">Female</label>
<input type="radio" name="sex" id="female" value="female"><br>
<input type="submit" value="Submit">
</form>

ลิงค์นี้มีคำตอบสำหรับคำถามพื้นฐานเดียวกัน แต่โดยทั่วไป id จะใช้สำหรับการระบุสคริปต์และชื่อเป็นฝั่งเซิร์ฟเวอร์

http://www.velocityreviews.com/forums/t115115-id-vs-name-attribute-for-html-controls.html

name Vs id

ชื่อ

• ชื่อขององค์ประกอบ ตัวอย่างเช่นใช้โดยเซิร์ฟเวอร์เพื่อระบุฟิลด์ในรูปแบบการส่ง
• องค์ประกอบที่สนับสนุนคือ <button>, <form>, <fieldset>, <iframe>, <input>, <keygen>, <object>, <output>, <select>, <textarea>, <map>, <meta>, <param>
• ชื่อต้องไม่ซ้ำกัน

รหัส

• มักใช้กับ CSS เพื่อจัดองค์ประกอบเฉพาะ ค่าของคุณลักษณะนี้จะต้องไม่ซ้ำกัน
• Id คือแอตทริบิวต์สากลสามารถใช้กับองค์ประกอบทั้งหมดได้แม้ว่าแอตทริบิวต์อาจไม่มีผลกับองค์ประกอบบางอย่าง
• ต้องไม่ซ้ำกันในเอกสารทั้งหมด
• ค่าของแอตทริบิวต์นี้ต้องไม่มีช่องว่างสีขาวตรงกันข้ามกับแอตทริบิวต์ class ซึ่งอนุญาตให้ใช้ค่าคั่นด้วยช่องว่าง
• ใช้อักขระยกเว้นตัวอักษรและตัวเลข ASCII, '_', '-' และ '.' อาจทำให้เกิดปัญหาความเข้ากันได้เนื่องจากไม่ได้รับอนุญาตใน HTML 4 แม้ว่าข้อ จำกัด นี้จะถูกยกใน HTML 5 แต่ ID ควรเริ่มต้นด้วยตัวอักษรเพื่อความเข้ากันได้

ID ขององค์ประกอบอินพุตของฟอร์มไม่มีส่วนเกี่ยวข้องกับข้อมูลที่มีอยู่ภายในองค์ประกอบ ID ใช้สำหรับเชื่อมองค์ประกอบกับ JavaScript และ CSS แอตทริบิวต์ name อย่างไรก็ตามจะใช้ในคำขอ HTTP ที่เบราว์เซอร์ของคุณส่งไปยังเซิร์ฟเวอร์เป็นชื่อตัวแปรที่เชื่อมโยงกับข้อมูลที่มีอยู่ในแอตทริบิวต์ค่า

ตัวอย่างเช่น

<form>
    <input type="text" name="user" value="bob">
    <input type="password" name="password" value="abcd1234">
</form>

เมื่อส่งแบบฟอร์มแล้วข้อมูลในแบบฟอร์มจะรวมอยู่ในส่วนหัว HTTP ดังนี้:

หากคุณเพิ่มแอตทริบิวต์ ID มันจะไม่เปลี่ยนแปลงอะไรในส่วนหัว HTTP มันจะทำให้เชื่อมโยงกับ CSS และ JavaScript ได้ง่ายขึ้น

หากคุณไม่ได้ใช้วิธีการส่งแบบฟอร์มของตัวเองเพื่อส่งข้อมูลไปยังเซิร์ฟเวอร์ (และแทนที่จะทำโดยใช้จาวาสคริปต์) คุณสามารถใช้แอตทริบิวต์ชื่อเพื่อแนบข้อมูลพิเศษเข้ากับอินพุต - เช่นการจับคู่กับค่าอินพุตที่ซ่อนอยู่ แต่ดูดีกว่าเพราะมันรวมอยู่ในอินพุต

บิตนี้ยังคงทำงานใน Firefox แม้ว่าฉันคิดว่าในอนาคตอาจไม่ได้รับอนุญาตผ่าน

คุณสามารถมีฟิลด์ป้อนข้อมูลหลายฟิลด์ที่มีค่าชื่อเหมือนกันได้ตราบใดที่คุณไม่ได้วางแผนที่จะส่งแบบเก่า ๆ

ขึ้นอยู่กับประสบการณ์ส่วนตัวและเป็นไปตามคำอธิบายโรงเรียน W3 สำหรับคุณลักษณะ:

ID เป็น Global Attribute และใช้กับองค์ประกอบเกือบทั้งหมดใน HTML มันถูกใช้เพื่อระบุองค์ประกอบที่ไม่ซ้ำกันบนหน้าเว็บและค่าส่วนใหญ่จะเข้าถึงได้จากส่วนหน้า (โดยทั่วไปผ่าน JavaScript หรือ jQuery)

name คือแอททริบิวต์ที่มีประโยชน์สำหรับองค์ประกอบเฉพาะ (เช่นองค์ประกอบของฟอร์ม ฯลฯ ) ใน HTML ค่าของมันส่วนใหญ่จะถูกส่งไปยังแบ็กเอนด์สำหรับการประมวลผล

https://www.w3schools.com/tags/ref_attributes.asp

ด้านล่างเป็นการใช้แอตทริบิวต์ id ที่น่าสนใจ มันถูกใช้ภายในแท็กและใช้ในการระบุรูปแบบสำหรับองค์ประกอบนอกขอบเขตเพื่อให้พวกเขาจะรวมอยู่กับเขตข้อมูลอื่น ๆ ภายในแบบฟอร์ม

 <form action="action_page.php" id="form1">
 First name: <input type="text" name="fname"><br>
 <input type="submit" value="Submit">
 </form>

 <p>The "Last name" field below is outside the form element, but still part of the form.</p>
 Last name: <input type="text" name="lname" form="form1">

รหัส: 1) มันถูกใช้เพื่อระบุองค์ประกอบ HTML ผ่านโมเดลวัตถุเอกสาร (ผ่าน Javascript หรือสไตล์ด้วย CSS) 2) รหัสคาดว่าจะไม่ซ้ำกันภายในหน้า

ชื่อสอดคล้องกับองค์ประกอบของฟอร์มและระบุสิ่งที่โพสต์กลับไปที่เซิร์ฟเวอร์ ตัวอย่าง:

<form action="action_page.php" id="Myform">
 First name: <input type="text" name="FirstName"><br>
 <input type="submit" value="Submit">
 </form>

 <p>The "Last name" field below is outside the form element, but still part of the form.</p>
 Last name: <input type="text" name="LastName" form="Myform">

ID ใช้เพื่อระบุองค์ประกอบโดยไม่ซ้ำกัน

ชื่อนี้ใช้ในแบบฟอร์มแม้ว่าคุณจะส่งแบบฟอร์มหากคุณไม่ได้ให้ชื่ออะไรก็ตามจะไม่มีการส่งชื่อใด ๆ ดังนั้นองค์ประกอบของแบบฟอร์มจำเป็นต้องมีชื่อเพื่อรับการระบุโดยวิธีการแบบฟอร์มเช่น "รับหรือดัน"

และสิ่งที่มีชื่อคุณลักษณะเท่านั้นที่จะออกไป

idจะให้ element id ดังนั้นเมื่อคุณเขียนโค้ดจริง (เช่น JavaScript) คุณสามารถใช้รหัสในการอ่านองค์ประกอบ นี่nameเป็นเพียงชื่อเพื่อให้ผู้ใช้สามารถเห็นชื่อองค์ประกอบฉันเดา

ตัวอย่าง:

<h1 id="heading">text</h1>
<script>
  document.getElementById("heading"); //Reads the element that has the id "heading".
</script>

//You can also use something like this:
document.getElementById("heading").value; //Reads the value of the selected element.

มีประโยชน์หรือไม่? แจ้งให้เราทราบหากมีปัญหาบางอย่าง

ไม่มีความแตกต่างที่แท้จริงระหว่าง id และชื่อ

name เป็นตัวระบุและใช้ในคำขอ http ที่ส่งโดยเบราว์เซอร์ไปยังเซิร์ฟเวอร์เป็นชื่อตัวแปรที่เชื่อมโยงกับข้อมูลที่มีอยู่ในแอตทริบิวต์ค่าขององค์ประกอบ

ในทางกลับกัน id เป็นตัวระบุที่ไม่ซ้ำกันสำหรับเบราว์เซอร์ฝั่งไคลเอ็นต์และ JavaScript รูปแบบจำเป็นต้องมี id ในขณะที่องค์ประกอบของมันต้องการชื่อ

id ถูกใช้โดยเฉพาะอย่างยิ่งในการเพิ่มคุณสมบัติให้กับองค์ประกอบที่ไม่ซ้ำกันในวิธี DOM, Id จะใช้ใน Javascript สำหรับการอ้างอิงองค์ประกอบเฉพาะที่คุณต้องการให้การกระทำของคุณเกิดขึ้น

ตัวอย่างเช่น:

<html>
<body>

<h1 id="demo"></h1>

<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>
</body>
</html>

สามารถทำได้เช่นเดียวกันด้วยแอตทริบิวต์ name แต่ต้องการใช้ id ในรูปแบบและชื่อสำหรับองค์ประกอบของฟอร์มขนาดเล็กเช่นแท็กอินพุตหรือแท็กเลือก