HTML에서 value 속성을 사용하는 이유

입력 요소(예: 텍스트 상자, 숨겨진 필드, 라디오 버튼, 체크박스 등)에 기본값 설정 or 값을 서버로 전달하기 위해서이다.

 

1. 입력 요소에 기본값 설정

• value 속성은 주로 <input> 태그와 함께 사용되며, 사용자가 페이지를 처음 열었을 때 입력 필드에 표시될 기본값을 지정한다.
• 예를 들어, 회원 정보 수정 페이지를 만든다면, 사용자가 이전에 입력했던 정보를 미리 보여주고 싶을 때 value 속성을 사용해 기본값을 설정할 수 있다.

<form>
    이름: <input type="text" name="username" value="홍길동">
</form>

위의 예시에서 value="홍길동"은 사용자가 페이지를 열었을 때 입력 상자에 "홍길동"이라는 기본값을 보여준다.

이처럼 미리 입력된 정보를 표시할 때 사용된다.

 

2. 서버로 값을 전달

* 사용자가 폼(form)을 제출할 때, value 속성에 있는 값이 서버로 전송된다.

* 서버에서는 이 값을 받아서 처리한다.

   특히, 라디오 버튼, 체크박스, 숨겨진 필드처럼 사용자가 직접 입력하지 않는 요소의 값을 지정할 때 value 속성을 사용한다.

<form action="/submit" method="post">
    <input type="hidden" name="userId" value="12345">
    <input type="submit" value="제출">
</form>

위 예시에서 type="hidden"인 입력 요소는 화면에 보이지 않지만, 사용자가 폼을 제출하면 value="12345" 값이 서버로 전달된다.

 

3. 라디오 버튼과 체크박스

• 라디오 버튼이나 체크박스에서도 value는 사용자가 선택한 항목의 실제 값을 지정하는 데 사용된다.
• 사용자가 어떤 항목을 선택했는지 서버에서 구분할 수 있게 해주는 중요한 속성입니다.

<form>
    <input type="radio" name="gender" value="male"> 남성
    <input type="radio" name="gender" value="female"> 여성
</form>

사용자가 "남성"을 선택하면, 서버로 전달되는 값은 "male"이다. "여성"을 선택하면 "female"이 전달된다.

 

요약

* 기본값 표시

사용자가 페이지를 처음 열었을 때, 입력 요소에 미리 값을 넣어 두고 싶을 때.

 

* 서버로 값 전달

사용자가 폼을 제출할 때, 해당 입력 요소의 값을 서버로 보내기 위해 사용. 특히, 숨겨진 필드나 라디오 버튼, 체크박스 등에서 중요한 역할을 한다.

 

이처럼 value 속성은 사용자 인터페이스의 동작과 서버로 데이터를 전송하는 데 핵심적인 역할을 합니다.