[ 본격 ] input 태그에 대하여 ( email , button , checkbox )

input 태그에는 type을 지정할 수 있는데 type 들은 < input type=" "> 라는 형식으로 작성을 할 수 있습니다.

type 에 는

 

 - text

 - password

 - email

 - button

 - submit

 - checkbox

 - radio

 - url

 - tel

 - number

 - search

 - range

 

등이 있습니다. 이중 몇가지는 속성값을 따로 지정을 해 주어야 됩니다.

저번시간에 배운것들은 빨간색으로 폰트색을 바꾸겟습니다.

 

오늘은 제목에 나온것과 같이 email , button , checkbox 을 해 보겟습니다.

1. email

보시면 아시겟지만 이렇게 보았을때는 text와 다른바가 없습니다.

( 지금 저는 w3schools.com 에서 제공하는 try it yourself 라는 기능을 이용하여서 하는거라 모든 완벽한 기능은 이미지로 보여드릴 수 없습니다. )

일반적인 text 타입이랑 똑같아 보이겟지만 이 email 태그는 자바스크립트의 도움없이 자체적으로 @naver.com 같이 이메일을 적었는지 안적었는지 검사를 해 줍니다.

모바일로 보게되면 키보드에 @ 와 .com 이 생기게 되죠.

2. button

저번 강좌에서 보여드렷던 submit 타입과는 다른게 있습니다.

submit 타입에서는 value값을 주지않아도 브라우저마다 value 값이 지정되어서 나오는데 이 button태그는 그렇지 않습니다.

button 태그는 따로 value값을 지정해 주어야 됩니다. 또 submit 타입처럼 데이터를 전송하려면 따로 기능을 추가해 주어야 합니다.

<a>~</a> 태그를 대신할 수 있는 타입입니다.

3. checkbox

 자 이처럼 네모난 박스가 생기게 됩니다.

여러개를 체크할 수 있는 그런 박스가 생기게 되는데요, 이 박스를 누르면 박스에 체크가 되면서 선택이 됩니다.

이 체크박스는 name이라는 속성을 부여하고 name="array[]"라고 한다면 배열로 저장이 됩니다.