Today Youngjun learned✍

# [HTML] id와 name 속성의 차이점

공통점은 식별자를 제공

스택오버플로우 글을 가져왔다.

  • https://stackoverflow.com/questions/1397592/difference-between-id-and-name-attributes-in-html

어떤 이유로 든 두 가지를 모두 사용 해야하는지 또는 권장하지 않는지 (HTML 형식과 관련하여) 알고 싶습니다.

name양식 제출에 데이터를 보낼 때 속성이 사용됩니다. 다른 컨트롤은 다르게 응답합니다. 예를 들어, id속성은 다르지만 동일한 라디오 버튼이 여러 개있을 수 있습니다 name. 제출되면 응답에 하나의 값 (선택한 단일 선택 단추) 만 있습니다.

물론 그 이상이 있지만 올바른 방향으로 생각하게 할 것입니다.

POST GET

양식 제출 시 발생 하는 또는 호출에 사용 된 식별자이므로 name양식 제어 (예 : <input>및 <select>)에 대한 속성을 사용하십시오 .

id

CSS, JavaScript 또는 조각 식별자 로 특정 HTML 요소를 처리해야 할 때마다 속성을 사용하십시오 . 이름별로 요소를 검색 할 수도 있지만 ID로 검색하는 것이 더 간단하고 안정적 입니다.

# 요약

# id

  • JavaScript를 통해 또는 CSS로 스타일이 지정된 Document Object Model을 통해 HTML 요소 를 식별하는 데 사용됩니다.
  • 페이지 내에서 고유해야합니다.
  • CSS 및 JavaScript / jQuery에 사용됩니다 (페이지에서 고유해야 함)
<some-element id="XXX"></some-element>이런 링크 : <a href="#XXX">

# name

  • form 요소에 해당 하며 서버에 다시 게시 된 내용을 식별합니다.
  • 참고하기 : http://mindprod.com/jgloss/htmlforms.html#IDVSNAME
  • form 에서 제출을 눌렀을 때 HTTP의 GET 또는 POST로 서버로 보내는 메시지의 필드 레이블을 지정하는 데에도 사용됩니다.
  • HTML을 통해 양식을 제출할 때 PHP에서 양식 처리에 사용됩니다.

서버가 동일한 문서의 다양한 양식 또는 위의 예와 동일한 양식의 다양한 단일 선택 단추에서 동일한 이름을 기대하기 때문에 name = 및 id = 이름이 다른 경우가 있습니다. id =는 고유해야합니다. 이름 =이 아니어야합니다.

JavaScript에는 고유 한 이름이 필요했지만 고유 한 name = 이름이없는 문서가 너무 많았 기 때문에 W3 사람들은 고유해야하는 id 태그를 발명했습니다. 불행히도 오래된 브라우저는 그것을 이해하지 못했습니다. 따라서 양식에 두 가지 명명 체계가 모두 필요합니다.

참고 : <a>HTML5 에서는 일부 태그의 속성 "name" 이 지원되지 않습니다.

ID 태그-CSS에서 사용되며 div, span 또는 기타 요소 의 고유 한 인스턴스를 정의합니다 . Javascript DOM 모델 내에 표시되어 다양한 함수 호출로 액세스 할 수 있습니다.

필드의 이름 태그 -PHP / 서버 측 처리로 전달하려는 배열을 수행하지 않는 한 형식 마다 고유 합니다. Javascript를 통해 이름으로 액세스 할 수 있지만 DOM에 노드로 표시되지 않거나 일부 제한 사항이 적용될 수 있다고 생각합니다 (예를 들어 올바르게 호출하면 .innerHTML을 사용할 수 없음).

일반적으로 name은 항상 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가 단순히 이름을 대체하는 것이 아니라는 것을 언급해야합니다. 그것들은 목적이 다릅니다. 또한 구식 접근 방식을 할인하지 마십시오. 현대 라이브러리를 자세히 살펴보면 성능 ​​및 사용 편의성을 위해 사용되는 구문 스타일이 때때로 표시됩니다. 목표는 항상 호환성을 선호해야합니다.

이제 대부분의 요소에서 이름 속성은 더 많은 유비쿼터스 id 속성을 위해 더 이상 사용되지 않습니다. 그러나, 일부 경우에, 특히 필드를 형성한다 ( <button>, <input>, <select>, 및 <textarea>)는 양식 제출의 이름 - 값 쌍을 설정해야하기 때문에 계속의 name 속성의 삶. 또한 프레임 및 링크와 같은 일부 요소는 이름 속성을 계속 사용할 수 있습니다. 이름 속성은 이러한 요소를 이름으로 검색하는 데 유용하기 때문입니다.

아이디와 이름 사이에는 분명한 차이가 있습니다. 종종 이름이 계속되면 값을 동일하게 설정할 수 있습니다. 그러나 id는 고유해야하며 경우에 따라 라디오 버튼을 생각해서는 안됩니다. 안타깝게도 마크 업 유효성 검사에 의해 파악 된 id 값의 고유성은 그다지 일관성이 없습니다. 브라우저에서의 CSS 구현은 id 값을 공유하는 객체의 스타일을 지정합니다. 따라서 런타임까지 JavaScript에 영향을 줄 수있는 마크 업 또는 스타일 오류를 포착하지 못할 수 있습니다.

이 책은 JavaScript- The Complete Reference by Thomas-Powell

<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>

name링크 대상에서는 더 이상 사용되지 않으며 HTML5에서는 유효하지 않습니다. 더 이상 최신 Firefox (v13)에서는 작동하지 않습니다. 변경 <a name="hello">에<a id="hello">

타겟은 <a>태그 일 필요는 없으며 , 종종 더 깨끗한 코드 인 <p id="hello"> <h2 id="hello">등일 수 있습니다 .

다른 게시물에서 분명히 말했듯 name이 여전히 양식에 사용됩니다 (필요). META 태그에도 여전히 사용됩니다.

이 링크에는 동일한 기본 질문에 대한 답변이 있지만 기본적으로 id는 스크립팅 식별에 사용되고 이름은 서버 측입니다.

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

# name Vs id

# name

요소의 이름 예를 들어 양식 제출에서 필드를 식별하기 위해 서버가 사용합니다. 지원 요소는 <button>, <form>, <fieldset>, <iframe>, <input>, <keygen>, <object>, <output>, <select>, <textarea>, <map>, <meta>, <param> 이름은 고유하지 않아도됩니다.

# id

특정 요소의 스타일을 지정하기 위해 CSS와 함께 사용되는 경우가 많습니다. 이 속성의 값은 고유해야합니다. ID는 전역 속성 이며 모든 요소에 사용할 수 있지만 일부 요소에는 영향을 미치지 않을 수 있습니다. 전체 문서에서 고유해야합니다. 공백으로 구분 된 값을 허용하는 클래스 속성과 달리이 속성의 값에는 공백이 없어야합니다. ASCII 문자 및 숫자, '_', '-'및 '.'을 제외한 문자 사용 HTML 4에서는 허용되지 않으므로 호환성 문제가 발생할 수 있습니다. HTML 5에서는 이러한 제한이 해제되었지만 ID는 호환성을 위해 문자로 시작해야합니다. 양식 입력 요소의 ID는 요소 내에 포함 된 데이터와 관련이 없습니다. ID는 요소를 JavaScript 및 CSS와 연결하기위한 것입니다. 그러나 이름 속성은 브라우저에서 서버로 전송 한 HTTP 요청에서 value 속성에 포함 된 데이터와 연관된 변수 이름으로 사용됩니다.

예를 들어 :

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

양식이 제출되면 다음과 같이 양식 데이터가 HTTP 헤더에 포함됩니다.

ID 속성을 추가하면 HTTP 헤더의 내용이 변경되지 않습니다. CSS와 JavaScript로 쉽게 연결할 수 있습니다.

양식의 제출 방법을 사용하여 서버에 정보를 보내지 않고 (자바 대신 자바 스크립트를 사용하여), 이름 속성을 사용하여 추가 정보를 입력에 첨부 할 수 있습니다. 입력에 포함되어 있기 때문에 깔끔하게 보입니다.

이 비트는 현재 Firefox에서 여전히 작동하지만 나중에는 허용되지 않을 것이라고 생각합니다.

구식 방식으로 제출하지 않는 한 이름 값이 동일한 여러 입력 필드를 가질 수 있습니다.

아래는 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">

Id : 1) 문서 객체 모델 (Javascript 또는 CSS 스타일)을 통해 HTML 요소를 식별하는 데 사용됩니다. 2) ID는 페이지 내에서 고유해야합니다.

이름은 양식 요소에 해당하며 서버에 다시 게시 된 내용을 식별합니다. 예 :

<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를 사용하여 요소를 고유하게 식별했습니다.

이름은 양식에 사용됩니다. 당신이 양식을 제출할 때. 이름을 밝히지 않으면 아무 것도 제출되지 않습니다. 그리고 이름 속성을 가진 것만 나갑니다.

개인적인 경험과 W3 Schools의 설명에 근거한 속성 :

ID는 전역 속성이며 HTML의 거의 모든 요소에 적용됩니다. 웹 페이지에서 요소를 고유하게 식별하는 데 사용되며 그 값은 주로 프론트 엔드에서 (일반적으로 JavaScript 또는 jQuery를 통해) 액세스됩니다.

name은 HTML의 특정 요소 (예 : 양식 요소)에 유용한 속성입니다. 그 값은 대부분 처리를 위해 백엔드로 전송됩니다.

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

Last Updated: 6/18/2023, 2:13:15 PM

← XSS(Cross Site Script)란 →