HTML button 태그의 name 속성이란?
HTML의 <button> 요소에서 name 속성은 해당 버튼에 이름을 부여하는 역할을 합니다. 특히 여러 개의 버튼이 동일한 name 값을 공유할 수 있다는 점이 유용합니다. 이때 각 버튼마다 서로 다른 value(값)를 지정하면, 사용자가 어떤 버튼을 클릭했는지에 따라 폼 제출 시 서로 다른 데이터를 전송할 수 있습니다.
기본 문법
<button name="btn_name">
여기서 btn_name은 버튼에 지정할 이름입니다. 폼(form)이 제출될 때 이 name과 버튼의 value가 한 쌍을 이루어 서버로 전달됩니다.
예제
다음은 <button> 요소의 name 속성을 실제로 활용한 예제입니다.
<!DOCTYPE html> <html> <body> <form action="" method="get"> 직원 정보 조회:<br><br> <button name="details" type="submit" value="addr">주소</button> <button name="details" type="submit" value="ph">전화번호</button> <button name="details" type="submit" value="appraisal">평가 %</button> </form> </body> </html>
실행 결과
예제 분석
위 예제에서 세 개의 버튼은 모두 name이 details로 동일하게 설정되어 있습니다. 하지만 클릭된 버튼에 따라 전송되는 value는 각각 다릅니다.
- 주소 버튼 → details=addr
- 전화번호 버튼 → details=ph
- 평가 % 버튼 → details=appraisal
즉, 버튼의 name이 같더라도 value가 다르면 서버로 전달되는 데이터가 달라집니다. 이처럼 name 속성을 활용하면 하나의 폼 안에서 용도가 다른 여러 제출 버튼을 손쉽게 구현할 수 있습니다. 서버 측에서는 전달받은 value 값을 확인하여 요청된 작업(주소 조회, 전화번호 조회, 평가 정보 등)을 구분해 처리하면 됩니다.