[form] 데이터 입력과 전달의 핵심. form태그 제대로 알기 -2-

드디어 두번째 강좌를 시작하겠습니다.
이번 시간은 각종 데이터를 입력받을수 있는 input 태그에 대해 공부해 보겠습니다.

-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-

input태그는 form태그 안에서 사용되는데, 텍스트박스, 라디오버튼, 체크박스, 파일업로드등을 받을수 있는 화면을 구성해주는 태그입니다.

type은 중요한 속성으로 텍스트박스나 라디오버튼, 체크박스 등의 모양을 정해줍니다.
- text : 텍스트를 입력받을수 있는 필드를 제공합니다.
- password : 텍스트가 * 모양으로 표시되는 필드를 제공합니다.
- radio : 체크할수 있는 라디오 버튼을 제공합니다. (단일 선택)
- checkbox : 체크할수 있는 체크박스버튼을 제공합니다. (다중 선택)
- file : 파일을 선택할수 있는 화면을 제공합니다.
- hidden : 화면에 나타나지는 않지만 전송할 데이터를 미리 정해둘수 있습니다.
- submit : 버튼 모양이며 이 버튼을 누르면 action에 정해진 곳으로 데이터를 전송해줍니다.
- image : submit버튼을 문자 대신 그림으로 사용하고 싶을때 사용합니다.
- button : 버튼 모양이며 데이터를 보내지 않고 자바스크립트 이벤트등을 실행할때 사용합니다.
- reset : 버튼 모양이며 form태그로 데이터를 입력받을것을 초기화 시킵니다.
name을 이용해 각 input 태그의 고유 이름을 정해줄수 있습니다.
value는 input의 초기값을 미리 정해줄수 있습니다.
size로 input의 가로 넓이를 지정할수 있습니다. 입력받을수 있는 양과는 무관합니다.
maxlength로 입력받을수 있는 최대 글자수를 정해주는 겁니다.
checked로 체크박스나 라디오버튼에 초기 선택 값을 정해줍니다.
src를 이용해 type이 image이면 이미지의 경로를 정해줍니다.
disabled는 input에 내용을 입력할수 없게해줍니다.
tabindex를 이용해 Tab키로 포커스 받는 순서를 정해줍니다.

ex)
 <form action="abc.php" method="post">
 아이디 : <input type="text" name="id">

 비밀번호 : <input type="password" name="pw">

 성별 : <input type="radio" name="mw" value="man" checked>남자 <input type="radio" name="mw" value="woman">여자

 사진 : <input type="file" name="upload">

 <input type="submit" value="전송하기"><input type="reset" value="취소">

 </form>


-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-

오늘의 강좌도 여기서 마칩니다.
마지막 3강에서는 form태그에서 쓰이는 input태그 외에 사용되는 select태그와 textarea태그에 대해 배워보겠습니다.