4.HTML활용


4.4 Elements

  FORM Tag내부에 들어가는 INPUT, SELECT, TEXTAREA Tag들을 요소(Form Elements)라고 부르는데, 앞장에서는 간단히 어떤 형식을 취하는지 살펴봤다. 이번 장에서는 각각에 대해서 세세한 부분까지 검토해 보도록 하자.

  • TEXT

    TYPE=text 가장 기본적인 형태
    VALUE="기본값" 디폴트값을 가진 형태
    SIZE=3 사이즈 지정 형태
    MAXLENGTH=3 입력문자를 3자로 제한


  • RADIO

    TYPE=radio 가장 기본적인 형태 Yes No
    CHECKED No가 선택된 형태 Yes No
    중첩 경우 Name으로 그룹지정한 형태 Yes
        11
        22
    No


    * 여기서 주의할 것은 radio버튼의 경우는 같은 이름을 주게 되면, 같은 그룹으로 묶여서 해당 그룹중에서 오직 하나만을 선택할 수 있는 것이 바로 라디오 버튼이다.(즉, 이름(Name속성)이 다르면 다른 그룹이기 때문에 전부 선택할 수 있게 되니 주의하자.

  • CHECKBOX

    TYPE=checkbox 가장 기본적인 형태 Yes No
    CHECKED 모두 선택된 형태 Yes No


  • BUTTON/SUBMIT/RESET

    TYPE=button 가장 기본적인 형태
    VALUE="OK버튼" 값을 가진 형태
    TYPE=submit Form의 내용을 웹서버로 보내게 한다.
    TYPE=reset Form의 내용을 초기화시킨다.


  • HIDDEN/PASSWORD/FILE

      음, 이건 진짜 설명하게없다. Text Type의 변형된 형태로, 앞에서 설명한 것이 전부이다. HIDDEN Type은 화면에는 보이지 않지만, 웹서버로 Form내용을 전달할때 VALUE값으로 가지고 있는 것이 같이 올라가게 하며, PASSWORD Type은 사용자가 입력하는 값이 ****로 표시된다. FILE은 앞장에서 설명했듯이 파일을 첨부할 때 사용한다.

  • SELECT

    기본적인 형태 가장 처음것이 자동 선택됨
    OPTION SELECTED 두번째 값을 선택되도록 지정
    SIZE=3 높이를 3으로 지정
    MULTIPLE 높이3,다중선택가능
    * CTRL, SHIFT키와 마우스 동시사용하거나, 마우스의 드래그를 통해서 다중선택가능


  • TEXTAREA

    기본형태 가장 기본적인 형태
    VALUE="OK버튼" 기본값을 가진 형태
    COLS=10 ROWS=3 10칼럼에 3줄로 크기조정


특이사항

  • 모든 것들이 하나의 폼 태그 안에 있어야 전달이 되며, 분리된 경우는 각 ACTION Tag에 대한 곳으로만 전달된다.

  • textarea의 경우 서버에 전달되는 길이가 2000으로 한정되어있는 브라우저(Netscape3.01)도 있으나 최근에는 무제한이다.

  • radio의 경우 서버에 전달될 때, value라는 특성값을 사용하여 구분하여야 하며, 같은 이름을 가질 때만 같은 그룹으로 묶여서 토글된다.

  • select의 경우 여러개를 선택할 수 있게 하는 multiple이라는 속성이 있다.

  • 제출하는 대상(Action)은 언제나 하나이기 때문에 하나의 화면에 여러개의 일을 하는 경우는 결국 서버측에서 대응되는 CGI는 하나라는 얘기이고, 그래서 복잡하게 구성이 된다. ( 일부 브라우져에서는 자바스크립트를 이용하여 action에 해당하는 항목을 바꿀 수 있다. Netscape 3.0에서는 무리없이 진행되었지만, Explore 4.0에서는 에러를 뿌려댔다. )

  • 서버에 전달될 때 구분을 위하여 반드시 필요한 항목(Button의 경우는 필요없다)에는 이름(Name)을 주도록 한다.

  • image의 경우는 서버에 전달될 때, 이미지의 좌표값이 전달된다. 즉, 이름이 img라면, img.x, img.y값이 전달된다.

- Last Update : 2001.6.19 by Deadfire(http://www.deadfire.net)

HTML 강좌
HTML이란?
웹서버 작동원리
HTML 기초
     - 전체 구조
     - 기본 태그
     - 속성 추가
     - Link/Anchor
     - 목록 Tag
     - 문자와 스타일
     - 기타 Tag
     - 특수 문자 표기
     - 이미지 표기
HTML 활용
     - Table
     - Frame
     - Form
     - Elements
기 타
     - MIME Type
     - 이미지 맵
     - 클라이언트 풀
마치며

Copyright ⓒ 1997 ~, Deadfire Program Master