본문 바로가기
스터디/publishing

[HTML] HTML 강좌, 제 9강의 - 사용자에게 정보를 입력받을 수 있는 입력양식을 만드는 form 태그

by 깝태 2011. 1. 25.
HTML 강의, HTML 강좌, HTMl 태그 강의, HTML 태그 강좌
안녕하세요, 이번 강의에서는 입력양식을 만드는 <form> 태그에 대해 설명해드릴려고 합니다. 이 폼 태그를 이용해
회원가입같은 입력받는 페이지를 만들어 DB를 저장합니다.

입력 양식 <form> 에 들어오는 양식은 매우 많습니다. 먼저 form 태그를 작성하는법 부터
배워보겠습니다.

입력 양식, 폼 만들기 - <form action = "URL" method = "방식"> ~ </form>
(URL - DB 저장 페이지(파일), method - 웹서버와의 통신방식(post/get))
(method - post(입력한 데이터가 눈에 보이지 않게 전송 , get(기본 값으로 입력한 데이터가 URL에 포함되어 전송됨)

DB 저장페이지는 PHP, ASP 로 만들 수 있습니다.
자세한 내용은 따로 검색을 바랍니다.


이번에는 <form> 태그에 사용되는 여러 속성 입니다. 폼 태그로는 텍스트, 암호, 여러 라인의 글자, 체크 박스, 라디오 버튼,
명령 버튼 등 여러 버튼을 만들고 데이터를 입력받을 수 있는 이벤트를 생성가능합니다.

텍스트 필드 - <input type = "text">
패스워드 필드 - <input type = "password">
텍스트 에어리어 - <textarea rows = "높이" cols = "가로"> ~ </textarea>
체크박스 필드 - <input type = "checkbox">
라디오버튼 필드 - <input type = "radio">
전송 버튼 - <input type = "submit" value="전송">
리셋 버튼 - <input type = "reset" value = "초기화">
셀릭트 박스 - <select name ="이름">
(SIZE 속성 사용 시 콤보박스, 사용 안 하면 리스트 박스)
<option> ~
</select>

동일 속성 - <name = "이름설정" value = "초기값설정">

이번엔 굳이 많은 설명이 필요없습니다. 그냥 한번 만들어보고 확인만하고 여기서 넘어가셔도 됩니다.
자세한 부분은 나중에 PHP 나 ASP 배우실떄 공부하셔도 됩니다. 나머지는 예제를 참고하세요!

이로써 9강을 마칩니다.  첨부파일로 예제를 올립니다~
예제를 보기전에 한번 만들어보고 직접 비교해보고 하시길 바랍니다.

9강 예제.zip


다르다고 무조건 틀렸다고 생각하지 마세요, 제가 틀렸을수도 있습니다.
그럴땐 지적 깔끔하게 받겠습니다.