[ 본격 ] input 태그에 대하여 ( text , password , submit )

HTML5 에서는 input 이라는 태그덕분에 " 자바스크립트 " 를 이용한 이벤트를 더 적게 넣을수 있게 되었습니다.

 

 

 

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

type 에 는

 

 - text

 - password

 - email

 - button

 - submit

 - checkbox

 - radio

 - url

 - tel

 - number

 - search

 - range

 

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

 

오늘은 제목에 나온것과 같이 text , password , submit 을 해 보겟습니다.

 

 1. text

 

 

< input type = " text " > 라고 적을시에 나타나는 결과값

 

 

 

이처럼 input tpye="text" 를 입력하면 텍스트박스가 생기게 됩니다. 이 텍스트박스에

 

 " 텍스트박스 입니다. " 라고 적어놓은거 보이시나요??

 

이렇게 적고나면 텍스트박스 오른쪽에 x 표시가 보이실 겁니다. 이 x 표시를 누르게 된다면 텍스트박스에 입력이 되어있던 글이 없어져 버립니다.

이 text박스에 css 를 덮어씌우면 이쁘게 꾸밀수도 있습니다 !

 

2. password

 

 

 

 

이처럼 type 에 password값을 주게되면 텍스트 박스가 생기긴 합니다. 다만 텍스트의 값은 보시다시피

 

" ● 가 시각적으로 값을 덮어버립니다. "

 

이 password 값을 넣어주면 자바스크립트에서 따로 설정을 해주어야 했던것을 값을 한번 줌으로 인하여 자바스크립트를 짜야되는 수고를 덜 수 있게되었습니다.

 

 

3. submit

 

이 타입은 <form> 태그와 같이 사용을 하는데요, 왜냐하면 <form>~</form> 에 값을 aa.php 에 보내고싶다 할때 action에 aa.php 를 넣어준 뒤 ( 나중 form 강좌에서.. ) submit 태그를 이용하면 form에 작성되어있던 값들이 aa.php로 넘어가게 됩니다.

 

 

 

 

여기서 value값을 준 이유는 각 브라우저마다 submit 의 value가 다르게 나와서 통일성을 주기위하여 제출 이라는 값을 주었습니다.

 

 

여기서 보면 button 태그와 submit 태그가 비슷하다고 느낄텐데 차이는 명확합니다.

 

- submit : 폼의 데이터 전달

- button : 자바스크립트를 이용한 이벤트