css -input

<input>, <textarea>

index.html 을 실행시켜주세요.

 

type, placeholder라는 attribute가 있습니다.

왼쪽 결과화면에서 각각 input 요소에 커서를 두고 타이핑해보세요.

 

<input type="text" placeholder="ID">

<input type="password" placeholder="비밀번호">

<input type="number" placeholder="학번">

 

1. type="text"

text를 입력하는 속성입니다.

대부분의 input type은 text 입니다.

어느 텍스트나 입력할 수 있습니다.

이름, id, 주소, 닉네임 등을 입력 받을 때 사용합니다.

 

2. type="password"

text와 비슷한 속성인데, 뭔가를 입력하면 까만 원으로 나옵니다.

만약 화면을 공유하고 있다면, 남이 보지 않도록 처리한 것입니다.

화면에서는 안 보여도 JavaScript 쪽에서 무슨 값을 입력했는지 가져올 수 있습니다.

 

3. type="number"

숫자만 입력할 수 있습니다.

만약 type="number" 으로 핸드폰 번호를 받으려면 "-"는 입력할 수 없습니다.

 

4. placeholder

placeholder는 도움말을 넣어주는 부분입니다.

실제 input에 입력되어있는 텍스트가 아닙니다.

 

<textarea>소개:</textarea>

<textarea>는 input보다는 더 긴 텍스트를 입력받고 싶을 때 사용합니다.

보통 짧은 방명록이나 댓글을 입력할 때 textarea 태그를 사용합니다.

 

*참고

• textarea에 "소개:"라고 보이는 것은 placeholder가 아니라 텍스트입니다.

• input은 시작태그, 끝태그로 구성되지 않습니다. 하나의 태그가 하나의 요소입니다.

• textarea처럼 input에도 미리 값을 세팅해놓고 싶을 수가 있죠. 그때는 value라는 attribute를 사용합니다.