HTML에서 요소에 이름을 부여하려면 name 속성을 사용합니다. 이 속성은 주로 폼 데이터를 서버로 전송할 때 각 입력 값들을 구분하는 식별자 역할을 하며, 자바스크립트나 CSS에서 특정 요소를 참조할 때도 활용됩니다.
name 속성은 다음과 같은 HTML 요소에서 사용할 수 있습니다.
- <button>
- <fieldset>
- <form>
- <iframe>
- <input>
- <map>
- <meta>
- <object>
- <output>
- <param>
- <select>
- <textarea>
사용 예제
아래 코드를 실행하면 name 속성이 실제로 어떻게 적용되는지 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<body>
Subject: <input type = "text" name = "sub" spellcheck = "true">
<p>위 입력란에 일부러 틀린 철자의 단어를 입력해 보고 어떤 일이 일어나는지 확인해 보세요.</p>
<p contenteditable = "true" spellcheck = "true">This is an editable conttent, with a spelling mistake. Click to edit.</p>
</body>
</html>코드 설명
위 예제에서 <input> 요소에는 name = "sub"으로 이름이 지정되어 있습니다. 이렇게 하면 폼이 제출될 때 해당 입력 필드의 값이 'sub'라는 키와 함께 전송되어 서버 측에서 데이터를 쉽게 처리할 수 있습니다.
또한 예제에는 spellcheck 속성과 contenteditable 속성이 함께 사용되어, 사용자가 직접 텍스트를 수정하면서 맞춤법 검사 기능이 동작하는 모습도 확인할 수 있습니다.