html에서 값을 가져올 때, id, name 태그들의 차이

Dr.Mlem 2024. 10. 30. 16:19

(10/30일 08-09 추가 과제에서)
Q1.
<form id ="calcform" method="get" th:action="@{/calc_form_result}">
        <label for="x">x:</label>
        <input type="number" name ="x" id ="x" />

        <label for="op">op:</label>
        <select name = "op" id = "op" >

            <option value = "+">+</option>

            <option value = "-">-</option>
            <option value = "*">*</option>
            <option value = "/">/</option>


        </select>

        <label for="y">y:</label>
        <input type="number" name ="y" id = "y" />

        <input type ="submit" value  ="계산" />
    </form>

이 안에서, label들을 달아줬다면, 인풋 태그들에게 별도로 id를 써줄 필요는 없는건가봐?

A1.
아니요, 여전히 <input> 태그에 id 속성을 지정해 주셔야 합니다. <label> 태그의 for 속성은 연결된 <input> 요소의 id를 참조합니다. 따라서 <label>을 올바르게 사용하려면 다음과 같이 <input>에 id를 추가하고, 해당 id 값을 <label>의 for 속성에 지정해야 합니다:

<form id="calcform" method="get" th:action="@{/calc_form_result}">
    <label for="x">x:</label>
    <input type="number" name="x" id="x" />

    <label for="op">op:</label>
    <select name="op" id="op">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
    </select>

    <label for="y">y:</label>
    <input type="number" name="y" id="y" />

    <input type="submit" value="계산" />
</form>

설명:

1. id 속성 추가: <input> 및 <select> 요소에 id를 추가합니다 (id="x", id="op", id="y").
2. <label>의 for 속성: 각 <label> 태그의 for 속성은 연결된 <input> 또는 <select>의 id와 동일해야 합니다.

이렇게 하면 사용자 경험과 접근성이 향상됩니다:

1. 연결된 요소로 포커스 이동: 사용자가 <label>을 클릭하면 해당 입력 필드로 포커스가 이동합니다.
2. 스크린 리더 지원: 보조 기술을 사용하는 사용자에게 입력 필드와 레이블 간의 관계가 명확해집니다.

따라서 <label> 태그를 사용하실 때는 반드시 관련된 <input> 또는 <select> 요소에 id를 지정하고, for 속성에 해당 id 값을 설정해 주시는 것이 좋습니다.

Q2.
그럼 현재 코드가 잘 돌아가는 이유는, 라벨과는 무관한건가?

A2.
네, 현재 코드가 잘 동작하는 이유는 label 태그와는 직접적인 연관이 없습니다. 폼이 정상적으로 작동하는 주된 이유는 각 입력 필드(input, select)에 지정된 name 속성 때문입니다. 폼이 제출될 때 서버는 name 속성을 통해 전송된 데이터를 수신합니다.

label 태그와 for 속성은 주로 사용자 경험과 접근성을 향상시키기 위한 것입니다. label의 for 속성은 해당 레이블이 연결된 입력 필드의 id를 참조합니다. 이렇게 하면 사용자가 레이블을 클릭했을 때 관련 입력 필드로 포커스가 이동하는 등의 이점이 있습니다.

따라서 label과 input 요소 간에 for 및 id 속성을 지정하지 않아도 폼 데이터 전송에는 문제가 없으며, 코드가 정상적으로 작동하는 것입니다. 그러나 접근성 향상과 사용자 편의성을 위해 label의 for 속성과 input의 id 속성을 일치시켜 지정하는 것이 권장됩니다.

예를 들어, 코드를 다음과 같이 수정할 수 있습니다:

<form id="calcform" method="get" th:action="@{/calc_form_result}">
    <label for="x">x:</label>
    <input type="number" name="x" id="x" />

    <label for="op">op:</label>
    <select name="op" id="op">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
    </select>

    <label for="y">y:</label>
    <input type="number" name="y" id="y" />

    <input type="submit" value="계산" />
</form>

이렇게 수정하면 레이블과 입력 필드가 명확하게 연결되어 사용자 경험과 접근성이 향상됩니다.

Q3.
ul 태그에는 name 속성대신 id를 주어야 하는거야?

A3.
네, <ul> 태그에는 name 속성 대신 id 속성을 사용하는 것이 맞습니다.

이유:

1. id 속성은 HTML 문서에서 요소를 고유하게 식별하기 위해 사용됩니다. JavaScript를 통해 특정 요소를 선택하고 조작할 때 주로 id 속성을 활용합니다.
2. name 속성은 폼 데이터 전송 시 서버 측에서 값을 구분하기 위해 주로 사용되며, <input>, <select>, <textarea> 등의 폼 컨트롤 요소에 적용됩니다.

적용 방법:

현재 JavaScript 코드에서 결과를 표시할 요소를 선택할 때 다음과 같이 id를 사용하고 있습니다:

const resultContainer = document.querySelector('#result');

따라서 HTML에서 해당 요소에 id="result"를 지정해야 올바르게 선택할 수 있습니다:
<ul id="result"></ul>

만약 name="result"로 지정하면 document.querySelector('#result')로는 해당 요소를 찾을 수 없으며, id 속성을 사용해야 합니다.

요약:

1. <ul> 태그에는 id="result"로 지정합니다.
2. JavaScript에서 document.querySelector('#result')를 통해 해당 요소를 선택하고 결과를 표시합니다.
3. name 속성은 폼 데이터 전송과 관련된 폼 컨트롤에 사용되며, <ul> 태그에는 일반적으로 사용하지 않습니다.

Q4.
JS에서 querySelector로 선택을 할 때에는 id를 찾아오는거야?

A4.
네, JavaScript에서 querySelector를 사용하여 요소를 선택할 때 CSS 선택자를 활용합니다. 따라서 **#id명**을 사용하면 해당 id를 가진 요소를 선택하게 됩니다.

예를 들어, 다음과 같이 id="myElement"인 요소를 선택하려면:
const element = document.querySelector('#myElement');

여기서 #myElement는 id가 myElement인 요소를 선택합니다.

querySelector 사용 방법

1. id로 선택: #id명
const element = document.querySelector('#calcform'); // id가 'calcform'인 요소 선택

2. class로 선택: .classname
const element = document.querySelector('.button'); // 클래스가 'button'인 첫 번째 요소 선택

3. 태그명으로 선택: 태그명
const element = document.querySelector('form'); // 첫 번째 <form> 요소 선택

4. 속성으로 선택: [속성명="값"]
const element = document.querySelector('input[name="email"]'); // name이 'email'인 첫 번째 <input> 요소 선택

예시 코드

당신의 코드에서 document.querySelector("#calcform")은 id가 "calcform"인 요소를 선택합니다.

document.querySelector("#calcform").addEventListener("submit", function(e) {
    e.preventDefault();
    // 이벤트 핸들러 내용
});

따라서, querySelector로 선택할 때 #을 사용하면 id로 요소를 선택하는 것이 맞습니다.

추가 정보

여러 요소를 선택하고 싶을 때는 querySelectorAll을 사용할 수 있습니다.
const items = document.querySelectorAll('.item'); // 클래스가 'item'인 모든 요소 선택

1. id는 문서 내에서 고유해야 하므로, querySelector를 통해 선택하면 해당 id를 가진 단일 요소가 반환됩니다.
2. CSS 선택자를 그대로 사용할 수 있으므로, 복잡한 선택도 가능합니다.

const element = document.querySelector('div.container > ul#result > li.item');

요약

1. document.querySelector('#id명'): id로 요소 선택
2. document.querySelector('.class명'): class로 요소 선택
3. document.querySelector('태그명'): 태그명으로 요소 선택

따라서, JavaScript에서 querySelector를 사용할 때 원하는 방식으로 요소를 선택할 수 있으며, #은 id를 의미합니다.