웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
DHTML의 시작 - Form에 대해 (2) - input 엘리먼트
2002.04.18 21:45
폼 엘리먼트중에 가장 많이 사용되는 input에 대해서 알아봅지요.
일단 input은 종료태그가 없이 사용되지요. <br> <img>처럼 말이지요.
그럼 속성을 함 알아보지요.
[type=TEXT|PASSWORD|CHECKBOX|RADIO|SUBMIT|RESET|FILE|HIDDEN|IMAGE|BUTTON]
입력의 종류를 나타내는 것이지요.. 말안해도 다들 아시지요?
[name=변수명]
이름입니다. 폼이 전송되어서 php로 처리될때는 바로 요것이 변수로 되는 것이지요.
submit과 reset을 제외하고는 모두 요 이름이 있어야 값이 전달됩니다.
[value=값]
값입니다. 변수명=값 형태로 폼 처리에이전트로 그 값을 넘기지요.
<input name="Name" value="이름"> >>폼전송($Name="이름")>> php스크립트
레디오 단추와 체크박스 단추에도 이놈이 꼭 있어야 합니다.
레디오는 Name이 모두 동일하게 되어 있어서 배타적으로 하나의 값을 Name담아서 보내지요.
반면 체크박스는 다양한 Name을 주어 선택적으로 그 값을 보냅니다. 물론 체크되지 않은 경우
폼은 아무 값도 보내지 않겠지요..
[checked]
레디오 단추와 체크 박스에 사용되는 것으로 기본적으로 체크 상태를 표시하지요.
레디오 단추의 경우 요걸 씀으로서 무조건 값을 하나라도 보내야만 하지요..
반면 체크 박스의 경우는 체크 박스를 지우면 보내지 않을 수 있지요.
[disabled]
구성요소를 사용하지 못하게 합니다. 값을 넣거나 변경할 수 없지요.
이 경우 폼이 구성요소의 값이 있어도 값을 전송하지 않습니다.
input요소보다는 select, option 요소에서 자주 사용합니다.
[readonly]
말 그대로 읽을수만 있도록 하는 것이지요.. 위의 disabled와 같은 기능으로 볼수 있으나
disable과는 달리 readonly는 폼 값을 전송합니다. 역시 수정이 불가능하게 하는 곳에 사용하지요..
[size]
크기를 나타내는 것이지요.. 이 속성은 최초 너비를 지정하는 것으로 type 속성이 "text"
또는 "password" 일 경우 그 값은 글자의 갯수를 나타내는 정수로 표시하고, 이를 제외하고는
픽셀로 주어지지요.
[maxlength]
텍스트의 최대 글자수를 제한하는 속성이지요. 디폴트는 무한값이지요.
한영 막론하고 바이트로 계산하는 것이 아니라 순수한 글자수를 제한 하는 것입니다.
[src]
이미지 타입에서 그림의 경로를 지정합니다.
[alt]
짧은 설명을 넣습니다.
[usemap]
사용자측 이미지 맵 사용시
[ismap]
서버측 이미지맵에 사용시
[tabindex]
탭 이동시 우선순위를 정하는 속성입니다. 숫자가 작을수록 우선순위가 높지요
[accesskey]
키이동시 접속키를 정합니다. Alt + 지정키로 엘리먼트간 이동하도록 지정합니다.
[사용 이벤트 핸들러]
onfocus,onblur,onselect,onchange 네가지의 이벤트 핸들러를 주로 사용하고
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout,
onkeypress, onkeydown, onkeyup 요러한 이벤트 핸들러도 사용하지요.
자세한 내용은 다 아시리라 생각하고 생략..
[accept]
화일 업로드를 위한 MIME 타입 목록을 지정합니다.
[기타]
id, class(지정자), lang (언어 정보), dir (글자 방향), title (엘레멘트 제목),
style(인라인 스타일 정보), align (정렬)
그럼 타입에 대해서 알아보지요.. 타입은 뭐 다들 잘 아시리라 생각되니 잘 안쓰는 기능을
가진 타입만 잠깐 설명으로 드리지요..
[image 타입]
submit단추를 이미지로 만드는 것이지요. src 속성으로 단추를 장식 할 이미지의 URI를 지정하지요.
이렇게 이미지로 전송버튼을 만들경우 alt 속성에 설명을 붙여주는 것이 좋지요.
이미지가 다 로딩되기 전이나 그림의 링크가 잘못된 경우 그림의 기능을 몰라 폼을 전송시키는
일이 없도록 하기 위해서 붙여주는 것이 좋습니다.
다음 이미지 타입은 전송할 때 서버측 이미지 맵을 전송하게 되지요.
말인 즉슨 이미지 위를 클릭하면, 폼은 송신되고 클릭한 좌표가 서버에 전달된다는
이야기이지요. 클라이언트측 이미지 맵은 많이 사용하지만 서버측 이미지 맵은
잘 사용하지 않지요.. 필요성을 크게 느끼지 못하고 있지만 잘만 활용하면 아주
훌륭한 기능이 되지 않을까 합니다.
암튼 그림을 클릭하면 그림을 클릭한 마우스의 위치를 x,y좌표로 환산해서 x값은 왼쪽
마진으로 부터 이미지의 왼쪽 끝 까지의 픽셀수로, y 값은 위쪽 마진으로 부터 이미지의
위쪽 끝 까지의 픽셀수로 해서 데이터를 송신하지요.
송신된 데이터는 name.x=x-value와 name.y=y-value의 값이 될 수 있는데, 여기서 "name"은
name속성에서 지정한 변수명이 되는 것이지요. 그리고 x-value와 y-value는 x와 y의 각 좌표값이지요.
그래픽 브라우저에서만 가능한 기능이므로 거의 없지만 다른 브라우저를 사용하는 사용자를 위한
고려를 해야되는 단점이 있지요.
[file]
파일업로드를 위해 필요한 폼 요소지요. 파일업로드를 위해 파일을 선택하는 요소로 name속성의
변수명은 선택한 파일의 이름을 담게 됩니다. 말이 나온 김에 요기서 php의 파일 업로드 과정을
후비파 보고 넘어가지요..
일단 파일 업로드를 위해 파일을 선택하지요.. 지금 배운 요 file타입의 input요소로 말이지요.
그럼 file 폼 요소는 업로드할 파일의 명을 폼에게 알리주지요.. 요 파일을 시방 업로드할라고
한당께.. 라구요.. 그럼 이제 전송 버튼을 누릅니다. 그럼 폼의 값들은 모두 변수에 담기서
php스크립트로 넘어가겠지요.. 요기서 php란 놈은 자기 설정 파일중에 upload_tmp_dir이란 곳에
임시로 file 폼에서 선택한 놈을 가져다 놓지요.. 머 이름은 php어쩌구.tmp 요렇고럼 해서 말지이요.
자기만 알아볼 수 있도록 업로드가 되었는지 어쨌는지 알리주지도 않구 말이지요..
암튼 일단 오류가 없다면 업로드는 된 상태라고 볼수 있지요..
하지만 우리가 필요한 곳으로 옮겨야 쓸모가 있지 계속 tmp디렉토리에 고런 이름으로 있으면
쓸모가 없겠지요. 그럼 빨랑 파일을 옮깁니다. move_uploaded_file이란 함수를 이용하지요..
move_uploaded_file(원소스파일, 타겟위치) 요러코롬 사용하지요.
웅.. 근데 파일을 옮길라구 하는데 원래 파일로 복구시키야하는데 이름을 모르면
안되겠지요. file폼의 name=upload라고 하면 php에서는 요 이름 뒤에 _name, _size, _type으로
원하는 속성을 담아 가지구 있지요.. 간단히 요기서 $upload_name하면 파일 이름을 알수 있지요.
크기를 알려면 $upload_size, mime타입을 알라믄 $upload_type하믄 되겠지요..
move_uploaded_file($upload, "옮길 디렉토리/".$upload_name)하믄 파일이 옮가지지여..
물론 파일업로드를 위해서는 폼의 속성에서 enctype 값을 "multipart/form-data"로 지정하여야
파일의 내용이 복합 문서의 분리 된 항목으로 송신되도록 묶여지지요..
multi업로드 역시 같은 방법으로 각각의 변수만 정해주면 되지요..
그외 나머지 요소들은 다들 많이 쓰시는 것이라 쓰는데 어려움은 없을 겁니다.
input요소에 대해서는 요기서 마치고 다음에는 나모지 폼 요소들에 대해서 알아보지요.
시작은 DHTML이었는데.. 자꾸 엉뚱한 방향으로 가는 듯... ^^; 나중에 다시 돌아오겟지요.머..
일단 input은 종료태그가 없이 사용되지요. <br> <img>처럼 말이지요.
그럼 속성을 함 알아보지요.
[type=TEXT|PASSWORD|CHECKBOX|RADIO|SUBMIT|RESET|FILE|HIDDEN|IMAGE|BUTTON]
입력의 종류를 나타내는 것이지요.. 말안해도 다들 아시지요?
[name=변수명]
이름입니다. 폼이 전송되어서 php로 처리될때는 바로 요것이 변수로 되는 것이지요.
submit과 reset을 제외하고는 모두 요 이름이 있어야 값이 전달됩니다.
[value=값]
값입니다. 변수명=값 형태로 폼 처리에이전트로 그 값을 넘기지요.
<input name="Name" value="이름"> >>폼전송($Name="이름")>> php스크립트
레디오 단추와 체크박스 단추에도 이놈이 꼭 있어야 합니다.
레디오는 Name이 모두 동일하게 되어 있어서 배타적으로 하나의 값을 Name담아서 보내지요.
반면 체크박스는 다양한 Name을 주어 선택적으로 그 값을 보냅니다. 물론 체크되지 않은 경우
폼은 아무 값도 보내지 않겠지요..
[checked]
레디오 단추와 체크 박스에 사용되는 것으로 기본적으로 체크 상태를 표시하지요.
레디오 단추의 경우 요걸 씀으로서 무조건 값을 하나라도 보내야만 하지요..
반면 체크 박스의 경우는 체크 박스를 지우면 보내지 않을 수 있지요.
[disabled]
구성요소를 사용하지 못하게 합니다. 값을 넣거나 변경할 수 없지요.
이 경우 폼이 구성요소의 값이 있어도 값을 전송하지 않습니다.
input요소보다는 select, option 요소에서 자주 사용합니다.
[readonly]
말 그대로 읽을수만 있도록 하는 것이지요.. 위의 disabled와 같은 기능으로 볼수 있으나
disable과는 달리 readonly는 폼 값을 전송합니다. 역시 수정이 불가능하게 하는 곳에 사용하지요..
[size]
크기를 나타내는 것이지요.. 이 속성은 최초 너비를 지정하는 것으로 type 속성이 "text"
또는 "password" 일 경우 그 값은 글자의 갯수를 나타내는 정수로 표시하고, 이를 제외하고는
픽셀로 주어지지요.
[maxlength]
텍스트의 최대 글자수를 제한하는 속성이지요. 디폴트는 무한값이지요.
한영 막론하고 바이트로 계산하는 것이 아니라 순수한 글자수를 제한 하는 것입니다.
[src]
이미지 타입에서 그림의 경로를 지정합니다.
[alt]
짧은 설명을 넣습니다.
[usemap]
사용자측 이미지 맵 사용시
[ismap]
서버측 이미지맵에 사용시
[tabindex]
탭 이동시 우선순위를 정하는 속성입니다. 숫자가 작을수록 우선순위가 높지요
[accesskey]
키이동시 접속키를 정합니다. Alt + 지정키로 엘리먼트간 이동하도록 지정합니다.
[사용 이벤트 핸들러]
onfocus,onblur,onselect,onchange 네가지의 이벤트 핸들러를 주로 사용하고
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout,
onkeypress, onkeydown, onkeyup 요러한 이벤트 핸들러도 사용하지요.
자세한 내용은 다 아시리라 생각하고 생략..
[accept]
화일 업로드를 위한 MIME 타입 목록을 지정합니다.
[기타]
id, class(지정자), lang (언어 정보), dir (글자 방향), title (엘레멘트 제목),
style(인라인 스타일 정보), align (정렬)
그럼 타입에 대해서 알아보지요.. 타입은 뭐 다들 잘 아시리라 생각되니 잘 안쓰는 기능을
가진 타입만 잠깐 설명으로 드리지요..
[image 타입]
submit단추를 이미지로 만드는 것이지요. src 속성으로 단추를 장식 할 이미지의 URI를 지정하지요.
이렇게 이미지로 전송버튼을 만들경우 alt 속성에 설명을 붙여주는 것이 좋지요.
이미지가 다 로딩되기 전이나 그림의 링크가 잘못된 경우 그림의 기능을 몰라 폼을 전송시키는
일이 없도록 하기 위해서 붙여주는 것이 좋습니다.
다음 이미지 타입은 전송할 때 서버측 이미지 맵을 전송하게 되지요.
말인 즉슨 이미지 위를 클릭하면, 폼은 송신되고 클릭한 좌표가 서버에 전달된다는
이야기이지요. 클라이언트측 이미지 맵은 많이 사용하지만 서버측 이미지 맵은
잘 사용하지 않지요.. 필요성을 크게 느끼지 못하고 있지만 잘만 활용하면 아주
훌륭한 기능이 되지 않을까 합니다.
암튼 그림을 클릭하면 그림을 클릭한 마우스의 위치를 x,y좌표로 환산해서 x값은 왼쪽
마진으로 부터 이미지의 왼쪽 끝 까지의 픽셀수로, y 값은 위쪽 마진으로 부터 이미지의
위쪽 끝 까지의 픽셀수로 해서 데이터를 송신하지요.
송신된 데이터는 name.x=x-value와 name.y=y-value의 값이 될 수 있는데, 여기서 "name"은
name속성에서 지정한 변수명이 되는 것이지요. 그리고 x-value와 y-value는 x와 y의 각 좌표값이지요.
그래픽 브라우저에서만 가능한 기능이므로 거의 없지만 다른 브라우저를 사용하는 사용자를 위한
고려를 해야되는 단점이 있지요.
[file]
파일업로드를 위해 필요한 폼 요소지요. 파일업로드를 위해 파일을 선택하는 요소로 name속성의
변수명은 선택한 파일의 이름을 담게 됩니다. 말이 나온 김에 요기서 php의 파일 업로드 과정을
후비파 보고 넘어가지요..
일단 파일 업로드를 위해 파일을 선택하지요.. 지금 배운 요 file타입의 input요소로 말이지요.
그럼 file 폼 요소는 업로드할 파일의 명을 폼에게 알리주지요.. 요 파일을 시방 업로드할라고
한당께.. 라구요.. 그럼 이제 전송 버튼을 누릅니다. 그럼 폼의 값들은 모두 변수에 담기서
php스크립트로 넘어가겠지요.. 요기서 php란 놈은 자기 설정 파일중에 upload_tmp_dir이란 곳에
임시로 file 폼에서 선택한 놈을 가져다 놓지요.. 머 이름은 php어쩌구.tmp 요렇고럼 해서 말지이요.
자기만 알아볼 수 있도록 업로드가 되었는지 어쨌는지 알리주지도 않구 말이지요..
암튼 일단 오류가 없다면 업로드는 된 상태라고 볼수 있지요..
하지만 우리가 필요한 곳으로 옮겨야 쓸모가 있지 계속 tmp디렉토리에 고런 이름으로 있으면
쓸모가 없겠지요. 그럼 빨랑 파일을 옮깁니다. move_uploaded_file이란 함수를 이용하지요..
move_uploaded_file(원소스파일, 타겟위치) 요러코롬 사용하지요.
웅.. 근데 파일을 옮길라구 하는데 원래 파일로 복구시키야하는데 이름을 모르면
안되겠지요. file폼의 name=upload라고 하면 php에서는 요 이름 뒤에 _name, _size, _type으로
원하는 속성을 담아 가지구 있지요.. 간단히 요기서 $upload_name하면 파일 이름을 알수 있지요.
크기를 알려면 $upload_size, mime타입을 알라믄 $upload_type하믄 되겠지요..
move_uploaded_file($upload, "옮길 디렉토리/".$upload_name)하믄 파일이 옮가지지여..
물론 파일업로드를 위해서는 폼의 속성에서 enctype 값을 "multipart/form-data"로 지정하여야
파일의 내용이 복합 문서의 분리 된 항목으로 송신되도록 묶여지지요..
multi업로드 역시 같은 방법으로 각각의 변수만 정해주면 되지요..
그외 나머지 요소들은 다들 많이 쓰시는 것이라 쓰는데 어려움은 없을 겁니다.
input요소에 대해서는 요기서 마치고 다음에는 나모지 폼 요소들에 대해서 알아보지요.
시작은 DHTML이었는데.. 자꾸 엉뚱한 방향으로 가는 듯... ^^; 나중에 다시 돌아오겟지요.머..
댓글 5
-
Legend
2002.04.19 02:05
-
엔카일
2002.04.19 00:07
한미르 지도검색 서비스는 서버측 이미지맵을 사용한건가요?
그거 첨볼때부터 궁금했었는데.. 맞죠-_-?;; -
이승재
2002.04.19 01:15
레전드님 강좌 정말 잘보구 있습니다...
도움이 많이 되네요.. -
sohna
2003.03.25 05:59
참고로 알려드리자면... 제로보드로 만든 노프레임 홈페이지입니다...
사이트를 알려드리는 것이 나을 듯 싶어 적습니다. www.mscolor.org 이구요..
사전은 우측에 이동하는.. 그겁니다. 거기서 아무게시판에서나 쓰기 모드로 들어가신후
사전단어검색을 해 보시면 증상을 아실 수 있을 겁니다.
후... 제가 보기에도 구조적으로 쉽지는 않은 문제 같아 보입니다만... -
sohna
2003.03.25 05:05
질문 한가지 드려도 될까요? ..
노프레임에서 야후 사전을 폼으로 달았습니다. 그런데 게시판 글쓰기 모드에서 단어 검색을 하려고 하면 "전송(submit이겠죠?)" 값이 글쓰기 종료값으로 입력되어 글쓰기가 종료되어 버립니다. 한마디로 글쓰기 모드에서는 사전을 이용할 수 없다는 이야기인데.. 좋은 방법이 없을까요?
꼭 좀 부탁드립니다.
제목 | 글쓴이 | 날짜 |
---|---|---|
오늘 시험문제인 카드맞추기 게임..^^ [12] | {동준짱} | 2002.05.18 |
테이블 정렬. 상하로 딱 가운데에 맞춰지지 않을때... [2] | :: N.styLE :: | 2002.05.18 |
DHTML의 시작 - Form에 대해 (3) - Button, Select 엘리먼트 [1] | Legend | 2002.05.16 |
ActiveX control... [4] | ☆봄비ㆀ | 2002.05.11 |
iframe태그.. HTML문서안에 또하나의 HTML문서.. [9] | 신종은 | 2002.05.09 |
DHTML의 시작 - Form 예제 (폼처리 HTML) | Legend | 2002.05.09 |
하이텔에서 가져오는 서울특별시와 광역시 날씨 [3] | 김희섭 | 2002.04.30 |
배경음악과 동영상 삽입 <embed> [7] | 제이지라 | 2002.04.26 |
DHTML의 시작 - Typing 스크립트 (예제) [2] | Legend | 2002.04.19 |
DHTML의 시작 - Form에 대해 (2) - input 엘리먼트 [5] | Legend | 2002.04.18 |
DHTML의 시작 - Form에 대해 (1) [2] | Legend | 2002.04.14 |
DHTML의 시작 - CSS와 객체 관계 [2] | Legend | 2002.04.12 |
이미지에 DHTML로 테두리를 만들어보자..포토샵 저리가라~~ [4] | ZipShin | 2002.04.11 |
DHTML의 시작 - HTML 구조 및 자바스크립트 객체지정법 [4] | Legend | 2002.04.11 |
투명한 아이프레임 [15] | 파야 | 2002.04.04 |
점선테이블..만들기 [6] | 각설탕 | 2002.03.31 |
엔지오식 레이어 메뉴 구성하기 (허접) [3] | 정영순 | 2002.03.28 |
유군 스타일 웹사이트 제작법 [15] | 유군-_-)/ | 2002.03.20 |
스크롤바 색상을 이쁜것만 모와요 [6] | ZipShin | 2002.03.16 |
인코딩 정보 일본어, 중국어, 스페인어 [3] | 탐그루 | 2002.03.16 |
바로 서버측 이미지맵을 사용하지요.
이승재// 부족한 내용을 잘 보구 계신다니 다행이네요..