정의 및 사용 방법

name 속성은 해당 요소가 참조될 때 식별 기준이 되는 이름을 지정합니다.
사용 가능한 요소는 정해져 있으며, 요소마다 참조되는 대상과 의미는 다릅니다.

다음은 '참조'에 대한 간단한 부연설명입니다.
참조
name 속성에서 말하는 '참조'란, 지정한 이름으로 참고하여 비교 또는 확인하는 행위를 말합니다.

사용 가능한 요소

name 속성은 모든 요소에 공통으로 적용할 수 있는 글로벌 속성이 아닙니다.
사용 가능한 요소와 그 값이 참조되는 대상과 의미는 아래의 표와 같습니다.

name 속성의 사용 가능한 요소와 그 값의 의미
요소값이 참조되는 대상과 의미
폼 컨트롤(<button>, <input>, <textarea>, <select>) 폼 제출 시 해당 컨트롤을 참조할 이름과 스크립트에서 참조할 해당 form.elements API의 이름
<output>, <fieldset> 스크립트에서 참조할 해당 form.elements API의 이름
<form> 스크립트에서 참조할 해당 API의 이름
<iframe> 해당 프레임 탐색을 위해 참조할 이름
<object> 해당 요소 탐색을 위해 참조할 이름
<map> 이미지 맵에 사용할 실제 이미지 요소가 참조할 해당 이미지 맵의 이름
<meta> 문서 레벨 수준의 metadata 이름

설명

다음은 name 속성이 사용 가능한 요소별로, 그 값이 참조되는 대상과 의미하는 바를 살펴보겠습니다.

폼 컨트롤(<button>, <input>, <textarea>, <select>)

폼 컨트롤이란 <form> 태그와 함께 사용되어 사용자로부터 데이터를 다루는 요소들을 말하며, <button>, <input>, <textarea>, <select>가 있습니다.

이 요소들에게 name 속성이 지정되어 있으면, 그 값을 참조하여 폼 제출 시 전송되는 데이터의 이름으로 사용됩니다. 자바스크립트에서도 name 속성의 값을 참조하여 해당 요소의 form.elements API의 이름으로 사용됩니다.

여기에서는 폼 제출 시 전송되는 데이터의 이름으로 사용되는 예제를 살펴보겠습니다.

HTML 
<form action="https://example.com/">
    <label for="user-id">아이디</label>
    <input type="text" id="user-id" name="example-id">
    
    <label for="user-pw">비밀번호</label>
    <input type="password" id="user-pw" name="example-pw">
    
    <button type="submit">전송</button>
</form>

위 예제에서 각 입력 요소에 지정된 name 속성의 값은 폼이 제출될 때 서버로 전송되는 데이터의 이름으로 사용됩니다. 예를 들어, 아이디 입력 필드는 example-id, 비밀번호 입력 필드는 example-pw라는 이름으로 전송됩니다.

<output>, <fieldset>

<output>과 <fieldset>에서 name 속성은
자바스크립트에서 form.elements API를 통해 해당 요소를 참조하기 위한 이름을 지정합니다.

이 두 요소는 <form> 태그와 함께 사용되더라도, 폼 제출 시 전송되는 데이터의 이름으로는 사용되지 않습니다.

<form>

<form>에서 name 속성은
자바스크립트에서 참조할 해당 API의 이름을 지정합니다.

이 이름은 문서에서 여러 개의 <form>이 있을 때 자바스크립트로 해당 요소를 식별할 이름으로 사용됩니다.

<iframe>

<iframe>에서 name 속성은
해당 프레임을 탐색(navigation)하기 위해 참조되는 이름을 지정합니다.

이 이름은 <a>, <form>, <base>의 target 속성의 참조 대상과, 자바스크립트의 window.open() 메서드 등에서 탐색 대상 컨텍스트를 지정할 때 사용됩니다.

HTML 
<iframe src="https://www.example.com" name="example"></iframe>

<object>

<object>에서 name 속성은
해당 요소가 생성하는 탐색 가능한 콘텐츠(navigable)가 있을 경우, 그 탐색을 위해 참조할 이름으로 사용됩니다.

HTML 
<object data="flower.mp4" name="flower-video"></object>

<map>

<map>에서 name 속성은 필수로 지정해야 하며,
이 속성의 값은 <map> 태그의 해당 이미지 맵의 고유식별자로 사용되는 이름을 지정합니다.
만약 지정한 태그에 id 속성도 지정되어 있다면 name과 id 속성의 값은 모두 같아야 합니다.

name 속성의 값은 이미지 맵에 사용할 실제 이미지인 <img> 태그를 연결할 때 사용됩니다.
<img> 태그의 usemap 속성의 값으로 name 속성의 값을 지정하면 사용할 이미지와 name 속성의 값에 해당하는 이미지 맵이 연결됩니다.

부연설명
# 기호 뒤에 <img> 태그와 연결된 이미지 맵에 해당하는 <map> 태그의 name 속성의 값을 usemap 속성의 값으로 지정합니다.

HTML 
<img src="example.jpg" alt="example" usemap="#example-map"> <!-- usemap 속성으로 <map> 태그를 연결 -->    
<map name="example-map"> <!-- name 속성으로 이미지 맵에 이름을 지정 -->
    ...
</map>

<meta>

<meta>에서 name 속성은
문서 레벨 수준의 메타 데이터를 나타내는 charset, http-equiv 속성 이외의 문서 레벨 수준의 메타데이터를 나타낼 때 사용됩니다.

이 속성의 값은 사용하는 메타데이터의 이름을 지정하며, content 속성을 함께 사용해서 지정한 메타데이터의 값으로 지정합니다. 명세서에 포함된 표준 값이 있으며, 비표준이지만 대부분의 브라우저에서 지원하는 값, 그리고 특정 검색엔진에서 활용하는 값들이 있습니다.

그 밖에도 원하는 문서 레벨 수준의 메타데이터를 이 속성의 값, 즉 메타데이터의 이름으로 지정할 수 있으며, content 속성으로 그 메타데이터의 값으로 지정할 수 있습니다.

HTML 
<meta name="description" content="이 페이지를 설명하는 문구가 있습니다.">

위 예제에서 name="description"은 해당 메타데이터가 웹 페이지의 설명을 나타내는 것임을 나타내며, content 속성은 실제 설명 내용을 지정합니다.

브라우저 호환성

name 속성의 브라우저 호환성
속성
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
name 예 예 예 예

명세서

name 속성의 명세서 사양
명세서 사양
name HTML Standard
#attr-fe-name
name HTML Standard
#attr-form-name
name HTML Standard
#attr-iframe-name
name HTML Standard
#attr-object-name
name HTML Standard
#attr-map-name
name HTML Standard
#attr-meta-name

참고문헌

같이 보기