[HTML] HTML input 태그 속성 id, name 차이

🎈 HTML 태그 속성 id, name 차이

 

 

📖 id 속성

고유한 식별을 목적으로 하는 경우 사용

id 속성은 page 안에서 중복으로 사용할 수 없으며, 주로 javascript에서 다루기 위해 지정 (document.getElementById("")

 

⚙ 애플리케이션의 고유 영역 식별자

<section id="front-end-news">
  <h1>프론트엔드 개발 뉴스</h1>
  ...
</section>

<section id="front-end-heroes">
  <h1>프론트엔드 개발 히어로즈</h1>
  ...
</section>

뉴스 영역과 히어로즈 영역을 구분 짓는 고유한 이름

 

⚙ 레이블과 인풋 컨트롤을 연결하기 위한 식별자

<div class="form-control">
  <label for="email">이메일</label>
  <input type="email" id="email">
</div>

 

email label 텍스트와 연결된 email input 컨트롤

 

⚙ 표와 표 설명을 연결하기 위한 식별자

<p hidden id="table-desc">표 설명(요약)</p>

<table aria-describedby="table-desc">
  <caption>표 제목</caption>
  ...
</table>

 

표 요소의 aria-decribedby 속성과 연결된 표 설명

 

📖 name 속성

form 컨트롤 요소의 값(value)을 서버로 전송하기 위해 필요한 속성

 

⚙ 폼 전송 이벤트 발생시 서버로 데이터 이름으로써 전송하기 위한 식별자

 

<form>
  <div class="select">
    <label for="source-of-info">정보 출처</label>
    <select 
      name="source-of-info" id="source-of-info"> <!--<select> 요소에 설정된 값을 식별하기 위한 이름-->
      <option>정보 출처를 선택해주세요.</option>
      <option>페이스북</option>
      <option>트위터</option>
      <option selected>인스타그램</option>
    </select>
  </div>
</form>

 

// name은 요소를 하여금 자바스크립트에서 접근할수 있게 하는 고유 식별자 이다.

var form = document.querySelector('form');
var formData = new FormData(form);


formData.get('source-of-info'); // name="source-of-info" 정보 값을 출력 => 인스타그램

// 이벤트 핸들러일 경우 이런식으로 접근도 가능하다.
e.target.source-of-info

 

name 속성은 자바스크립트에서 요소를 참조할 수 있게 함

 

📖 class 속성

재사용을 목적으로 하는 경우 사용

 

⚙ 재사용을 목적으로 하는 애플리케이션 컴포넌트 식별자

<button type="button" class="button">읽기</button>

<input type="button" class="button" value="읽기">

<a href class="button">읽기</a>

 

버튼 컴포넌트 스타일을 일괄적으로 반영하기 위해 클래스 사용

 

⚙  재사용을 목적으로 하는 애플리케이션 레이아웃 식별자

<!-- 고정 너비를 가진 컨테이너 스타일을 반영하기 위한 식별자 -->
<div class="container">
  ...
</div>

<!-- 컨테이너 요소의 너비를 유연(fluid)하게 변경하는 식별자 추가 -->
<div class="container is-fluid">
  ...
</div>

 

참고문헌

https://qna.programmers.co.kr/questions/7049/id-name-class-%EC%86%8D%EC%84%B1%EC%97%90-%EB%8C%80%ED%95%9C-%EC%82%AC%EC%9A%A9%EB%B2%95%EC%9D%B4-%EA%B6%81%EA%B8%88%ED%95%A9%EB%8B%88%EB%8B%A4