728x90
반응형
공통점:
input 태그에 value와 placeholder를 적용하면, input 박스 안에 미리 원하는 문구를 적어 놓을 수 있습니다.
차이점:
단, value 속성은 input 태그의 초깃값으로 사용됩니다. 이 값을 바꾸고 싶다면, 사용자가 직접 지우고 입력해야 합니다. 또 value 속성의 경우, form 태그를 활용해서 서버 쪽으로 정보를 전송할 수 있습니다. 만약 input 태그의 내용을 변경하지 않고 form 태그를 활성화 시키면, 초기의 value 값이 그대로 서버로 전송됩니다.
placeholder 속성을 사용하면 사용자가 글자를 입력할 때, 자동으로 미리 입력된 문구가 사라집니다. value와는 달리, 서버 쪽으로 전송되지 않습니다. placeholder는 눈에만 보일 뿐, 실질적인 값이 아니며, value는 실질적인 값이라고 생각하시면 됩니다.
|
1
2
3
4
5
6
|
<body>
<form action="">
<input type="text" value="글자를 입력하세요"> // value를 적용했습니다. <br>
<input type="text" placeholder="글자를 입력하세요."> // placeholder를 적용했습니다.
</form>
</body>
|
cs |
form 태그와 input의 value를 같이 사용하는 예제
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<form>
<label for="Name">Name:</label>
<input name="Name" value="Your name" />
<br><br>
<label for="Age">Your age:</label>
<input name="Age" value="18" />
<br><br>
<input type="button" value="Submit" />
</form>
</body>
</html>
|
cs |
출처: https://www.geeksforgeeks.org/placeholder-vs-value-attributes-in-html/
728x90
반응형
'개발공부 일지 > HTML CSS' 카테고리의 다른 글
| CSS) Clip-Path 속성으로 물결치는(Wave) 글자 만들기 (0) | 2024.07.15 |
|---|---|
| CSS) Clip-Path 속성으로 둘로 쪼개지는 글자 만들기 (0) | 2024.07.14 |
| CSS) Float 성배 레이아웃 코드(Holy grail layout) (0) | 2021.07.03 |
| CSS) Flex 성배 레이아웃 코드(Holy grail layout) (0) | 2021.07.03 |
| CSS) Grid(그리드) 성배 레이아웃 코드(Holy grail layout) (0) | 2021.07.03 |
댓글