FORM (3)


SUBMIT, RESET

SELECT (1)

SELECT (2)

FILE

LABLE



1. SUBMIT, RESET


<INPUT type="submit" value="버튼 명"> <INPUT type="reset" value="버튼 명">


  1. submit는 입력 창에 등록된 내용들을 서버로 전송시킬 때 사용하는 버튼이며, value는 버튼에 나타나는 텍스트를 말합니다.
  2. reset는 입력 창에 등록된 내용들을 초기 설정상태로 돌리는 기능을 합니다. 즉, 아무것도 적혀 있지 않은 상태로 만들어 버리는 경우를 말합니다.
  3. 기존의 전송, 취소버튼이 마음에 들지 않아 그래픽으로 버튼을 대체할 수도 있습니다. 즉 (input type="image" src="이미지 경로명") 이렇게 하시면 되겠습니다.


<input type="submit" value="전송하기"> <input type="reset" value="다시쓰기"> <input type="image" src="이미지 경로명">



버튼크기가 다를 때

버튼을 만들면 글자의 숫자에 따라서 버튼의 크기가 달라집니다. 예를 들면 ok라는 버튼과 cancel이라는 버튼을 만들때 버튼의 크기를 똑같이 하는 방법은 아래와 같습니다. 즉 원하시는 크기만큼 띄어쓰기를 해주시면 됩니다.(value="(띄어쓰기)ok")


<input type="submit" value="ok"> <input type="reset" value="cancel">

<input type="submit" value=" ok"> <input type="reset" value="cancel">



2. SELECT (1)


<SELECT name="대표메뉴"> <OPTION="메뉴">항목...</SELECT>


  1. 이 SELECT는 목록상자, 혹은 리스트 박스라고도 합니다.
  2. 이것도 RADIO버튼처럼 여러 항목 중 하나만 선택해야 하는 경우에 사용합니다.
  3. 라디오버튼과 다른 점은 여러 항목을 한 화면에 모두 보여주는 것이 아니라 리스트 형식으로 펼쳐진 곳에서 한 가지를 클릭한다는 것입니다. 주로 생일이나 직업과 같이 어떤 범위를 벗어나지 않거나 그 범위를 제한해야 할 필요가 있을 경우에 사용합니다.
  4. SELECT태그 안에 OPTION 태그로 실제 항목을 작성하고 있습니다. 이것은 마치 리스트 관련 태그에서 사용된 형태와 비슷합니다.
  5. (OPTION)태그의 끝 태그인 (/OPTION)태그는 생략 가능하고 또 생략하는 것을 권장하고 있습니다.
  6. 이 OPTION 중에서 가장 먼저 작성된 항목이 기본으로 보여지지만, "SELECTED"라는 속성을 써서 어떤 항목을 기본으로 표시할 수도 있습니다.


<P>당신은 이 사이트에 몇 번 방문 하나요?</P> <SELECT name="visit"> <OPTION value="one">1회 <OPTION value="two-five" selected>2회-5회 <OPTION value="six-ten">6-10회 <OPTION value="ten more">10회 이상

당신은 이 사이트에 몇 번 방문 하나요?



드롭다운 메뉴를 길게 하고 싶을 때

드롭다운 메뉴를 한 줄로 표시하기 보다는 좀 더 길게하고 싶을 때는 SELECT의 옵션으로 SIZE를 사용하면 됩니다. 즉 (SELECT name="방문횟수" size=3)이렇게 하시면 됩니다.
이것은 여러 개의 항목을 보여주지만 multiple속성을 사용했을 때와 같이 여러 항목을 선택할 수는 없습니다.


<P>당신은 이 사이트에 몇 번 방문 하나요?</P> <SELECT name="visit" size=3> <OPTION value="one">1회 <OPTION value="two-five" selected>2회-5회 <OPTION value="six-ten">6-10회 <OPTION value="ten more">10회 이상

당신은 이 사이트에 몇 번 방문 하나요?



3. SELECT (2)


<SELECT name="대표메뉴" size="보여질 항목개수" multiple> <OPTION="메뉴">항목...</SELECT>


  1. 이번에 설명드릴 SELECT는 "다중선택 메뉴"입니다.
  2. 다중 선택메뉴란 항상 하나만 선택되는 드롭다운(dropdown)메뉴와는 달리 한번에 여러 개씩 선택이 가능한 메뉴를 말합니다.
  3. 리스트 박스의 항목을 여러 개 동시에 선택하기 위해서는 SELECT태그에 multiple 속성을 입력하면 됩니다.
  4. 다중 선택을 할 경우에는 "Ctrl"을 누른 상태에서는 각 항목을 하나씩 선택할 수 있고, "Shift"를 누르고 선택하면 여러 항목을 선택할 수 있습니다.
  5. 여러 개의 리스트를 보여주는 개수는 브라우저마다 다른데 Exploler에서는 리스트가 10개 이상이 되면 스크롤바가 생성됩니다. 넷스케이프에서는 약 20까지만 보여주고 스크롤바가 생성됩니다.
  6. 이 multiple이 사용된 리스트박스에서도 "selected" 속성을 사용할 수 있습니다.


<p>당신이 가장 자주 가는 검색엔진은?</p> <select name="search" size="6" multiple> <option value="search1">야후 (http://www.yahoo.co.kr) <option value="search2">엠파스(http://www.empas.com) <option value="search3">네이버(http://www.naver.com) <option value="search4">라이코스(http://www.lycos.co.kr) <option value="search5">심마니(http://www.simmani.com selected) <option value="search6">한미르(http://www.hanmir.co.kr) </select>

당신이 가장 자주 가는 검색엔진은?




4. FILE


<INPUT type="file" name="이름" size="크기">


  1. 파일을 업로드하는 입력양식으로 컴퓨터에 저장된 파일을 선택할 때 사용합니다.
  2. 이것은 사용자가 브라우저에서 특정 파일을 서버로 업로드할 수 있도록 해줍니다. 이 입력 양식을 사용하면 브라우저에 파일이름이 들어갈 수 있는 필드 하나와 시스템 디렉토리를 검색해주는 버튼하나가 생기게 됩니다.
  3. 이 파일 입력 양식을 이용하려면 FORM 정의 부분이 (FORM ENCTYPE="multipart/form-data" ACTION="url" METHOD="post")와 같은 형식으로 되어 있어야 합니다. Encoding Type이 반드시 mutipart/form-data로 설정되어야 하며, METHOD 속성도 POST를 사용하여야 합니다. 그리고 당연히 서버측에는 파일을 받아 저장하는 CGI 스크립트가 있어야 합니다.
  4. 이 양식은 일반적으로 자료실에서 많이 사용합니다.


첨부 : <input type="file" name="attach" size="20">
첨부 :



5. LABEL



  1. LABEL태그는 익스플로러 전용으로 폼에 사용된 입력 요소를 묶어주는 역할을 합니다.
  2. 즉, 체크 박스의 경우 네모로 표시된 체크 부분을 정확히 클릭해야 체크 표시가 되지만, 이 LABEL속성을 사용해서 체크박스의 정보를 표시하는 부분과 체크박스를 묶으면 묶은 부분 "어느 곳을 클릭해도" 같은 체크가 됩니다.
  3. 입력 양식과 양식의 정보를 묶기 위해서 FOR 속성이 존재하는데 LABEL태그의 FOR 속성에 입력된 속성값과 묶인 입력 요소의 ID 속성의 속성값이 일치해야 합니다. 이 속성에서 주의할 것은 LABEL 하나와 묶일 입력 요소는 하나만 가능하다는 것입니다.
  4. 이렇게 양식과 정보를 묶기 위해서는 다음과 같은 두 가지 방법이 있습니다. 라디오 버튼으로 예를 들어 보겠습니다.
1. 레이블과 입력양식을 (LABEL)과 (/LABEL) 사이에 모두 놓기

<LABEL FOR="MALE">남<INPUT TYPE="radio" NAME="SEX" ID="MALE"></LABEL>
2. 레이블 부분만 놓기

<LABEL FOR="FEMALE">여</LABEL> <INPUT TYPE="radio" NAME="SEX" ID="FEMALE">


남 여 부분을 한번 클릭하셔서 차이점을 느껴보세요.


※ 참고 ☞ LABEL in W3C HTML 4.0 Recommendation