type="text"
text를 입력하는 속성. 대부분의 input type은 text이다.
이름, id, 주소, 닉네임 등을 입력 받을 때 사용한다.
type="password"
text와 비슷한 속성인데, 뭔가를 입력하면 까만 원으로 나온다. 만약 화면을 공유하고 있다면, 남이 보지 않도록 처리한 것이다. 화면에서는 안 보여도 JavaScript 쪽에서 무슨 값을 입력했는지 가져올 수 있다.
type="number"
숫자만 입력할 수 있다. 만약 type="number" 으로 핸드폰 번호를 받으려면 "-"는 입력할 수 없다.
placeholder
placeholder는 도움말을 넣어주는 부분이다.
실제 input에 입력되어있는 텍스트가 아니다.
<textarea>
는 <input>
보다는 더 긴 텍스트를 입력받고 싶을 때 사용한다.
보통 짧은 방명록이나 댓글을 입력할 때 <textarea>
태그를 사용.
:: 참고
<textarea>
에 소개: 라고 보이는 것은 placeholder 가 아니라 텍스트이다.
<input>
은 시작태그, 끝태그로 구성되지 않는다. 하나의 태그가 하나의 요소.
<textarea>
처럼 <input>
에도 미리 값을 세팅 해놓고 싶을 때는 value 라는 attribute를 사용한다.
placeholder는 attribute이다.
selector에 표현할 때는 ::를 사용한다.
input::placeholder {
color: #bbb;
}
만약, text type인 input의 placeholder에 스타일을 입히려면
input[type="text"]::placeholder {
color: #bbb;
}
버튼에 마우스를 올렸을 때 cursor를 손가락 모양으로 바뀌게 하자
button:hover {
cursor: pointer;
}