HTML input value 속성의 3가지 특징 정리


HTML input value 속성은 text, password 속성에서 초기 미리보기 글자를 설정합니다. button, submit 속성의 버튼 이름을 지정합니다. checkbox, radio 속성에서 서버에 텍스트를 전달할 때 사용됩니다.

HTML Value

HTML value 속성은 <input> 태그에서 보조적인 속성을 사용됩니다. 초깃값 설정, 버튼 텍스트 변경, 양식 제출 등에 사용됩니다.

초깃값 설정

value의 첫 번째 기능은 초깃값 설정입니다. textpassword 태그 조합에서 초기 글자를 미리 입력해둘 수 있습니다.

<input type="text" value="아이디를 입력하세요.">
<input type="password" value="비밀번호를 입력하세요.">

value 속성의 단점은 초깃값을 사용자가 지우고 입력해야 한다는 점입니다. placeholder 속성을 사용하면 초깃값을 자동 삭제하도록 설정할 수 있습니다.

<form action="">
  <input type="text" placeholder="아이디를 입력하세요.">
  <br>
  <input type="password" placeholder="비밀번호를 입력하세요.">
</form>

버튼 텍스트 변경

value 속성의 두 번째 기능은 버튼 종류의 <input> 속성의 텍스트를 변경하는 일입니다.


submit, button과 같은 제출 버튼이나 reset과 같은 초기화 버튼에 이름을 줄 수 있습니다. 단 file 버튼의 경우 value 속성으로 변경할 수 없습니다.

<form action="">
  <input type="submit" value="하하">
  <br>
  <input type="button" value="호호">
  <br>
  <input type="reset" value="ㅋㅋ">
  <br>
  <input type="file" value="변경 안됨"><!--file 속성은 변경이 안됩니다.-->
</form>

제출 용도

value 속성의 마지막 기능은 서버의 데이터 제출용입니다. 클라이언트 사이드에서는 보이지 않습니다.

checkboxradio 같은 속성은 버튼 안에 텍스트가 없고, 버튼에 대한 설명은 <label> 태그로 작성합니다.

<form action="">
  <label><input type="radio" value="red">apple</label>
  <br>
  <label><input type="checkbox" value="green">melon</label>
</form>

따라서 value 속성을 입력해도 텍스트가 적용되지 않습니다. 하지만 서버에서는 제출용으로 사용되므로 중요한 기능을 합니다.