[HTML] input 태그의 value와 placeholder 속성에 대해 알아보자 ✍️

👨‍💻

사용자 input 박스 안에 원하는 문구를 미리 적어 두는 value=".." placeholder=".."

💡 두 속성의 input 박스 안에 문구를 미리 적어 두는 공통점이 있지만, 몇 가지 차이점이 있다. 💡

- value 속성은 설정된 값을 서버 쪽으로 정보를 전송할 수 있다. 사용자가 input 박스 안에 새로운 값을 입력할 때

미리 적어 둔 문구를 직접 지워야 한다.

- placeholder 속성은 value와 달리, 서버 쪽으로 정보가 전송되지 않는다. 또한 사용자가 input 박스 안에 글자를 입력할 때,

자동으로 입력된 문구가 사라진다.

- value 속성을 적용할 경우 placeholder 보다 문구의 글자 색이 더 짙다.

value, placeholder 속성 사용 예시

<!DOCTYPE html>

<head>

<title>value, placeholder 속성</title>

</head>

<body>

<h1>value, placeholder 속성</h1>

</form>

</body>

</html>

value, placeholder 속성 사용 결과

[HTML] <ol> 태그, <ul> 태그, <li> 태그에 대해서 알아보자 (0)	2024.11.13