[HTML] 속성 id, name, class 차이점

[HTML] input 태그의 id, name, class 차이점

1. id 는 고유한 식별을 목적으로 하는 경우 사용하기 때문에 JS에서 다루기 위해서 많이 사용되어진다. id의 경우 중복된 값을 사용할 수 없다

id의 경우 해당 페이지에 대해 유일하기 때문에 JS에서 getElementById() 를 통해 바로 접근이 가능하다.

<script>
    var userId = document.getElementById('userId').value;
    alert(userId);
</script>


<input id='userId'><input>

2. name 은 form태그의 값(value)을 서버로 전송하기 위해 사용하는 속성으로 중복된 값을 허용 한다

중복 값이 허용되고 함수에서도 알 수 있듯이 getElements로 nodeList로 구성된 name들을 가져온다. 그렇기 때문에 배열로 접근하자


또한 서버 측에서 key, value 형태인 <name, value> name으로 접근하여 다양한 분기처리를 할 수 있다.

<script>
    var userId = document.getElementsByName('userId')[0].value;
    alert(userId);
</script>


<input name='userId'><input>

3. class 는 class 속성 단위로 묶어 해당 속성에 일관된 설정을 한다. 즉 어떠한 요소이든 상관없이 class가 적용되어 있으면 해당 class의 속성을 적용한다.

버튼 스타일, 요소의 크기등등 어떠한 설정을 일괄 적용할 수 있다

<button type="button" class="button">아이디 찾기</button>

<input type="button" class="button" value="비밀번호 찾기">

<p class="button">아이디/비밀번호 변경</p>