* main *

* BBS *

* gallery *

* profile *

* link *



[카테고리]

* 음악 *
* 잡담 *
* SOOL *
* 물건들 *
* 이런저런 추억 *
* 책 이야기 *
* 여행의 추억 *

* 잡다한 고찰 *
* 컴퓨터 관련 *
* 이런저런 메모 *
* 공지사항 *

* 추억의 게임 *
* 추억의 애니 *
* 만화책 이야기 *
* 미드 이야기 *
* 매직 더 개더링 *


[최근 댓글]

// 아리무스님살면서 느끼는 건데 ...
  by 아이어스
 
2019-11-10

앉는 자세가 매우 중요하죠....
  by perplex
 
2019-11-10

으음 제가 요새 미묘하게 허리가 아...
  by 아리무스
 
2019-11-09

아니, 따로 공부한 건 아닌데 우리...
  by 아이어스
 
2019-09-22

우와 놀랍네요! 혹시 이런 쪽으로 ...
  by perplex
 
2019-09-21

야외 운동의 단점이 기후의 영향을 ...
  by 아이어스
 
2019-09-08

오호 저에게도 도움이 되는 글이군...
  by 아리무스
 
2019-09-07

일립티컬이 정말 좋더라.모바일 스...
  by 아이어스
 
2019-09-06

오 역시 일립티칼을 써야 하는 군요...
  by perplex
 
2019-09-05

사실 기구가 좋긴 한데, 흠. 처음에...
  by 아이어스
 
2019-09-04

어이쿠!! 감사합니다. 일단 글 긁어...
  by perplex
 
2019-09-04

그랬구나... 우리나라는 약사 등 의...
  by 아이어스
 
2019-08-27

헉...;;; 네...쓴 경험으로 배우신 ...
  by perplex
 
2019-08-26

사실 레몬과 식초까지 다 해봤는데 ...
  by 아이어스
 
2019-07-26

생선요리 비린내에는 팬에 가루녹차...
  by 나무늼
 
2019-07-26


추억의 상자


Category List admin  
강아지랑 송아지도 만들 수 있는 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 : 텍스트에어리어의 세로 줄 수


이걸로 폼의 주요 기능은 다 설명이 끝났습니다.
다음에는 지금까지 설명하지 못한 기타 태그들에 대해서 설명하겠습니다.


2012-08-17 05:28:00 | [Comment(0)]




   ☆computer

컴퓨터를 포맷했습니다-_-;  2014-01-21
SNS 플러그인 설치  2012-09-12
[JAVA SCRIPT] getElementById()  2012-09-05
[HTML] link 태그 숏 컷 아이콘 지정  2012-09-03
SEO - 검색엔진최적화  2012-08-22
강아지랑 송아지도 만들 수 있는 CSS 강좌  2012-08-17
강아지랑 송아지도 만들 수 있는 HTML 강좌 - 08편 : 그 외   2012-08-17
강아지랑 송아지도 만들 수 있는 HTML 강좌 - 07편 : 폼  2012-08-17
강아지랑 송아지도 만들 수 있는 HTML 강좌 - 06편 : 메타 태그  2012-08-17
강아지랑 송아지도 만들 수 있는 HTML 강좌 - 05편 : 프레임  2012-08-17
강아지랑 송아지도 만들 수 있는 HTML 강좌 - 04편 : 테이블  2012-08-17
강아지랑 송아지도 만들 수 있는 HTML 강좌 - 03편 : 글자쓰기와 이미지 출력, 하이퍼링크  2012-08-17
강아지랑 송아지도 만들 수 있는 HTML 강좌 - 02편 : HTML 문서의 기본구조  2012-08-17
강아지랑 송아지도 만들 수 있는 HTML 강좌 - 01편 : 태그란 무엇인가?  2012-08-17
강아지랑 송아지도 만들 수 있는 홈페이지 강좌 - 인트로  2012-08-17
Chrome 브라우저 등에서의 style.display 속성문제  2012-08-07
사이트맵을 만들어보자  2012-07-31
robots.txt  2012-07-31
[JAVA SCRIPT] 코멘트 창 불러오기  2012-07-31
[mySQL] select로 검색  2012-07-31
[PHP] 따옴표 사용 문제  2012-07-31
[PHP] 정규표현식으로 깨진 문자 없애기  2012-07-31
[HTML] <nobr></nobr>  2012-07-31
컴퓨터 관련된 게시물을 정리하려고 합니다.  2012-07-31








猫愛 - MyoAe - Homepage Mode
Ver. 1.45

by Aierse