|
|
|
강아지랑 송아지도 만들 수 있는 HTML 강좌 - 07편 : 폼
|
#1. 들어가기에 앞서서
폼은 html 수준에선 비교적 어려울 뿐만 아니라,
html만 다루실거면 알아봐야 거의 쓸모가 없습니다.
그러므로 앞으로 웹프로그래밍을 더 공부하실 게 아니라면 폼은 보지마세요.
초보자는 더 헷갈릴 뿐입니다. 어차피 쓸모도 없어요.
보지마시고, 간혹 폼이 필요할 때가 있습니다.
필요해지면 그 때 다시 와서 보시기 바랍니다.
폼은 처음 html을 배우는 사람은 알 필요가 없습니다.
그럼 나중에 모르는 게 나왔을 때 폼이 뭔지 어떻게 아냐구요?
폼은 <form></form> 대부분의 경우 이 사이에 들어갑니다.
또한 저희가 글을 쓸 때 사용하는 버튼이나 클릭하면 목록이 쭉 아래로 늘어지는 리스트같은
'글이나 정보를 입력하는 창, 버튼, 도구 등등'이 폼에 속합니다.
혹시 이 부분의 '외형'을 수정하게 되거나 만들어야 할 일이 생기면 그 때 와서 폼을 보세요.
당장은 필요없을 겁니다.
#2. 폼이란 무엇인가?
폼이란, 웹 프로그램과 연동해서 사용자가 특정한 정보를 컴퓨터에 전달할 때 사용하는 도구입니다.
게시판을 예로 들 수 있는데, 저희가 게시판에서 제목을 쓰고, 이름을 쓰고, 전송버튼을 누르는 바로 이 부분이 폼입니다. 가입 화면에서 가입자 정보를 입력하는 모든 부분도 다 폼입니다.
폼은 일종의 그릇과 비슷하다고 생각합니다.
그 그릇에 정보를 담은 후에 컴퓨터에게 전달하는 것입니다.
아주 중요한 기능이죠.
그런데 왜 폼이 쓸모가 없냐구요?
HTML에는 정보를 처리하는 기능이 없습니다.
게시판에다가 저희가 글을 입력을 했는데, 이걸 처리하지 못하면 저장도 안 되고 아무 것도 안 되죠.
정보를 처리하고 연산을 하는 것은 서버에 있는 컴퓨터가 하는 일인데,
HTML문서와 컴퓨터 사이에서 돌아가는 프로그램이 이 명령을 내립니다.
HTML은 레고에 가깝지 프로그램이 아니구요. 웹프로그래밍을 할 줄 알아야지 폼을 만드는 게 쓸모있답니다. 그렇기 때문에 보지말라고 말씀드린겁니다.
그러면 다음에는 폼에 대해서 설명하겠습니다.
여기는 초심자가 아닌 분이 본다는 가정 하에서 좀 더 불친절하게 설명하겠습니다.
#3. 폼을 만들어보자
아래의 소스를 보세요.
(예)
<form name="test_form" action="명령을 수행할 프로그램 실행파일명" method="post">
<input type="text" size="50" name="title" tabindex="1"><br>
<input type="password" name="test_pwd" tabindex="2"><br>
<input type="radio" name="test_radio" value="radio1" tabindex="3"><br>
<input type="radio" name="test_radio" value="radio2"><br>
<select name="test_select" tabindex="4" style="width:153px;">
<option value="none" selected>옵션1</option>
<option value="test_option1" >옵션2</option>
<option value="test_option2" >옵션3</option>
<option value="test_option3" >옵션4</option>
</select><br>
<textarea name="test_txtarea" cols="50" rows="10" tabindex="5">
</textarea><br>
<input type="checkbox" name="test_check" tabindex="6"><br>
<input type="button" value="버튼" onclick="함수" tabindex="7"><br>
<input type="reset" value="reset" tabindex="8"><br>
<input type="hidden">
<input type="file" tabindex="9"><br>
<input type="submit" value="submit" tabindex="10"><br>
<input type="image" src="./dogcow03_01.jpg" tabindex="11"><br>
</form>
| (결과)
|
위의 소스는 html의 주요 폼 관련 태그를 모두 표시한 소스입니다.
하나씩 차례대로 설명하겠습니다. 아마 위의 것만 보셔도 사용법은 이미 다 아시겠지만요.
[ form 태그]
(예)
<form name="test_form" action="명령을 수행할 프로그램 실행파일명" method="post">
</form>
|
폼의 내용은 항상 form 태그에 둘러쌓여있습니다.
이것으로 둘러쌓여있기 때문에 최종적으로 '전송'을 했을 때
'명령을 수행할 프로그램 실행파일'로 안의 내용이 전송되는 것이죠.
폼에서는 폼 자체도 그렇고 내부의 요소들도 그렇고 이름을 지정해주는 게 중요합니다.
왜냐하면 실행되는 프로그램에서 해당 값을 이름에 해당하는 변수로 넘겨받기 때문입니다.
form 태그의 속성들을 보겠습니다.
name : 폼의 이름
action : 값을 넘겨줄 웹 프로그램의 실행파일 이름
method : 전송방식
|
method는 get방식과 post방식이 있습니다. 둘은 중요한 차이가 있는데,
get 방식은 일단 전송 길이의 제한이 있습니다. 그리고 보안이 전혀 안 됩니다.
값을 넘길 때 주소창에 값이 뜨면서 전송이 되기 때문입니다.
?변수1=값1&변수2=값2 이런 식으로요.
그래서 get은 길이 제한이 되는 누가 봐도 아무 상관없는 내용이 전송될때 씁니다.
post 방식은 보안도 되고 길이 제한도 없습니다.
[ input 태그]
input 태그는 가장 기본적인 방식의 입력태그이면서 동시에 다양한 형태로 변합니다.
속성을 하나씩 보죠.
(input 속성 : type)
type 속성은 각각 아래와 같은 대표적인 값들을 갖는데, 어떤 값이 오느냐에 따라서 입력창의 종류가 달라집니다.
각 속성 아래에는 해당 타입의 세부 속성을 쓰겠습니다.
1) text : 한 줄짜리 글 입력 박스.
- size : 수치를 입력하여 박스 길이를 조정.
- value : 페이지 로드시 박스에 입력 되어있는 초기값
2) password : 패스워드 용 한 줄짜리 글 입력 박스. 박스에 입력한 문자가 가려짐.
- value : 페이지 로드시 박스에 입력 되어있는 초기값
3) radio : 라디오 버튼. 같은 이름 버튼끼리 그룹화. 그룹화되면 복수 선택이 안됨.
- checked : 따로 값을 지정해주지는 않음. 처음부터 선택되어있음.
- value : 프로그램에 전송되는 값
4) checkbox : 체크박스. 여러 개여도 복수선택 가능.
- checked : 따로 값을 지정해주지는 않음. 처음부터 체크되어있음.
- value : 프로그램에 전송되는 값
5) button : 누를 수 있는 버튼. 전송과는 무관함. 보통 자바스크립트 등과 같이 씀.
- value : 버튼 위에 뜨는 이름
6) reset : 리셋 버튼. 폼 내부의 모든 값을 초기화
- value : 버튼 위에 뜨는 이름
7) hidden : 숨겨진 전송값. 사용자 눈에 보지는 않음.
- value : 프로그램에 전송되는 값
8) file : 파일 전송 시 사용하는 버튼.
9) submit : 전송 버튼. 폼에 입력된 모든 내용을 프로그램으로 전송.
- value : 버튼 위에 뜨는 이름
10) image : 전송 버튼과 동일하나, 버튼 대신 이미지가 표시.
- src : 불러올 이미지 경로
(공통 세부속성1) name : 각 요소의 이름이자 프로그램으로 입력된 값이 전송될 때 그 값을 갖고 있는 변수명으로 사용됨.
(공통 세부속성1) tabindex : 해당 페이지에서 탭을 누를 때 탭 인덱스의 순서대로 커서가 이동.
|
[ select 태그]
네모칸을 클릭하면 선택할 수 있는 값이 슬라이드 되는 입력 창입니다.
option태그를 통해서 값을 넣어주며 아래와 같은 방법으로 씁니다.
(예)
<select name="이름">
<option value="전송값1" selected>보여질 이름1</option>
<option value="전송값2" >보여질 이름2</option>
<option value="전송값3" >보여질 이름3</option>
<option value="전송값4" >보여질 이름4</option>
</select><br>
|
여기서 selected가 들어가면 초기값으로 해당 옵션이 선택되어집니다.
[ textarea 태그]
input type="text"와 거의 동일하나, 한 줄짜리 박스가 아닌 큰 박스가 나옵니다..
보통 게시물의 내용을 입력하는 박스로 사용되는 폼이죠.
input 태그와는 다르게 태그를 열고 닫아줍니다.
(예)
<textarea>초기값</textarea>
|
초기값은 보통은 아무것도 없으나, 넣어주면 처음 페이지가 로드될 때
텍스트에어리어 안에 해당 문장이 들어있게 됩니다.
그럼 텍스트에어리어의 속성 두 개를 보죠.
cols : 텍스트에어리어의 가로 길이
rows : 텍스트에어리어의 세로 줄 수
|
이걸로 폼의 주요 기능은 다 설명이 끝났습니다.
다음에는 지금까지 설명하지 못한 기타 태그들에 대해서 설명하겠습니다.
|
|
猫愛 - MyoAe - Homepage Mode
Ver. 1.45
by Aierse | |
|