Form(입력양식) 태그

1.Form(입력양식) 태그란..

  입력양식(form)은 홈페이지에서 사용자에게 정보를 받을때 사용됩니다.
  회원가입을 하거나 혹은 쇼핑몰에서 주문을 하는 경우 사용자의 정보를 입력받을 필요가 있습니다.

  이때 입력양식(form) 페이지를 제공하여 정보를 입력하게한 다음 이를 처리하는 페이지를 만들어서 DB에 저장을 합니다.
  회원가입 입력폼을 member.html 이라고 한다면 member_confirm.php 와같은 페이지를 만들어서 회원가입 처리를 합니다.

  이때 member.html 페이지는 <form> 태그를 이용하여 간단하게 만들수 있지만 member_confirm.php 페이지는 입력받은 정보를 DB에 저장하는

  역할을 하기 때문에 프로그래밍 처리를 해야 합니다.
  그래서 HTML 만으로는 입력양식만을 만들 수 있을뿐 이를 DB에 저장하는 기능은 만들 수가 없습니다.
  대부분의 웹프로그램이 사용자의 정보를 받아서 처리하는 프로세스를 가지므로 <form> 태그는 웹프로그램에서 아주 중요한 위치를 차지합니다.
 


2.Form(입력양식) 태그의 구성

  <form> 태그는 입력양식의 범위를 지정할뿐 화면상에는 아무런 내용이 표시되지 않습니다.
  <form>과 </form> 사이에 사용자가 실제적으로 값을 넣을수 있는 텍스트 박스나 체크 박스 등이 위치합니다.
  회원가입을 하는 경우 이름이나 주소 등을 텍스트로 입력하는 경우도 있지만 성별이나 생년월일등은 라디오버튼이나 셀렉트 박스에서 선택하는 경우도 있습니다.
  그러므로 <form>과 </form> 사이에 위치하는 다양한 <form> 요소들을 모두 익혀야 상황에 맞는 입력양식을 만들수 있습니다.
 


3.Form(입력양식) 태그의 속성

 <form> 태그에서 사용할 수 있는 주요 속성은 method와 action이 있습니다.
 <form method="전송방식" action="데이터를 처리할 프로그램 경로>.....</form>
 
 ① method
    웹서버와의 통신 방법을 지정합니다. post와 get 두가지 값 중 하나를 사용할 수 있습니다.
    ♠ get : 입력 양식의 내용에 대한 결과를 방문자에게 직접 보여 줄 때는 get 방식을 사용합니다.
                이를테면 홈페이지의 방문횟수를 나타내는 카운터 등에는 get 방식을 사용한다는 것이죠.
                또 256byte~4096byte까지의 데이터만 전송할 수 있다는 특징이 있습니다.

    ♠ post : 입력내용의 길이에 제한을 받지 않습니다.
                  일반적으로 입력 양식이 서버에 데이터 베이스화될 때에는 post 방식을 사용합니다.
                  예를들면 게시판이나 방명록등에서는 post 방식을 사용하지요.

 ② action
    입력양식에 입력된 값을 받아서 DB에 저장하는 페이지를 지정합니다. 이는 php나 asp와 같은 웹스크립트 언어를 이용하여 제작합니다.

 ③ name
    폼의 이름을 지정합니다.한 문서안에 여러개의 <form>태그가 있을 경우에 사용됩니다.



4.Input 태그
  텍스트 필드와 같은 여러 가지 폼 요소들을 삽입하는 태그입니다.
  '삽입'이란 뜻을 지녔으므로 '삽입끝'이라는 </input>이 따라붙지 않고 단독으로 쓰입니다.

  Input 태그의 형식은 아래와 같습니다.

<form>
  <input type="속성값" />
</form>
 

◈Input 태그의 속성
text :  텍스트를 한줄 입력할 수 있는 한줄글상자 삽입합니다
password : 비밀번호를 입력할 수 있는 글상자 삽입합니다
hidden : 보이지 않는 필드를 삽입합니다
radio : 라디오 버튼을 삽입합니다
checkbox : 체크박스를 삽입합니다.
submit : 등록버튼을 삽입합니다.
reset : 리셋버튼을 삽입합니다.
button : 그냥 보통 버튼을 삽입합니다.
file : 파일검색 버튼을 삽입합니다.
disabled="disabled" : 수정할 수 없도록 하며, 그 값을 폼을 통해 전송하지 않습니다.
readonly="readonly" : 수정할 수 없도록 하며, 그 값을 폼을 통해 전송합니다.

 

▣ 텍스트 필드(type="text")
    텍스트 필드(Text Fields)는 이름이나 주소와 같이 텍스트를 입력받을때 사용됩니다.

    <form><input type="text" name="한줄글상자1" size="20" maxlength="10" /></form>
      <input maxLength="10" name="한줄글상자1" />

      ※네이버 블로그에선 input 태그가 실행되지 않으니 html문서를 만드셔서 결과를 확인하시기 바랍니다.

    name : 텍스트 필드의 이름을 지정합니다.
    size : 텍스트 필드의 크기를 지정할 수 있습니다. size 속성을 지정하지 않으면 기본값은 20입니다.
    maxlength: 텍스트 필드에 입력할 수 있는 글자수의 최대값을 지정합니다.
      size를 지정하더라 이는 화면에 출력되는 사이즈를 의미하지 입력할 수 있는 글자수와는 무관합니다.
      입력할 수 있는 글자값을 제한할려면 maxlength 속성을 사용합니다.
    value : 텍스트 필드에 입력되는 기본값을 지정할 수 있습니다.(처음시작시 화면에 나타나는 값)

 

▣ 패스워드 필드(type="password")
    비밀번호를 입력하는 패스워드 필드(Password Field)는 텍스트 필드와 모양은 동일하고 단지 입력한 값이 ***로 표시된다는 차이만 있습니다.

    비밀번호가 입력한대로 노출된다면 이는 보안상 문제가 있기 때문입니다.

    <form><input type="password" name="패스워드1" size="15" maxlength="8" /></form>
    <input type="password" maxLength="8" size="15" name="패스워드1" />
 
      ※네이버 블로그에선 input 태그가 실행되지 않으니 html문서를 만드셔서 결과를 확인하시기 바랍니다.

    name : 패스워드 필드의 이름을 지정합니다.
    size : 패스워드 필드의 크기를 지정할 수 있습니다. size 속성을 지정하지 않으면 기본값은 20입니다.
    maxlength : maxlength 속성은 패스워드 필드에 입력할 수 있는 글자수의 최대값을 지정합니다.
        size를 지정하더라 이는 화면에 출력되는 사이즈를 의미하지 입력할 수 있는 글자수와는 무관합니다.
      입력할 수 있는 글자값을 제한할려면 maxlength 속성을 사용합니다.
    value : 패스워드 필드에 입력되는 기본값을 지정할 수 있습니다. 거의 사용하지 않습니다.
 

▣ 히든 필드(type="hidden")
    사용자가 입력하거나 선택하는 정보는 아니지만 폼 전송이 같이 전송해줘야 하는 정보를 담기 위해서 히든 필드(Hidden Field)를 사용합니다.

    히든필드의 예를 들자면 회원가입 폼에서의 가입날짜 같은 것이 되겠네요. 회원가입할 때은  우리는 가입날짜 같은것은 쓰지 않아도 가입이 되죠.
    하지만 운영자입장에서는 꼭 필요한 것이 바로 가입날짜거든요. 이럴때 사용하는 것이 바로 히든필드입니다.
 
    <input type="hidden" name="UserIP" value="<?echo $REMOTE_ADDR?>" />
 
    value 속성에 들어있는 "<?echo $REMOTE_ADDR?>"라는 값은 PHP 코드의 일종입니다. 사용자의 아이피를 인식하는 코드입니다.

    value : 히든필드를 사용할 때의 값을 지정합니다. 여기에 가입날짜를 세주는 의 자바소스 등이 들어가겠죠?
 

▣ 라디오 버튼(type="radio")
    체크박스와 비슷하나 라디오 버튼은 하나만 선택할 수 있다는 특징을 가지고 있습니다.
 
  <input type="radio" name="chk_info" value="HTML" />HTML
  <input type="radio" name="chk_info" value="CSS" checked="checked" />CSS
  <input type="radio" name="chk_info" value="웹디자인" />웹디자인
 
    name : 하나의 그룹을 이루는 라디오 버튼의 이름을 지정합니다.

    value : 폼을 처리할 때에 처리프로그램(ex:CGI)으로 넘겨줄 라디오 항목의 값을 지정합니다

    checked : 초기 상태에 기본으로 체크해두고 싶은 항목에 넣습니다. 하나의 라디오 그룹에는 하나의 항목밖에 이속성을 넣을 수 없습니다.

 

▣ 체크박스(type="checkbox")
    셀렉트박스(select)와 라디오 버튼(radio button)이 하나만 선택할 수 있는 반면 체크박스는 여러개를 선택할 수 있다는 특징을 가지고 있습니다.

    <input type="checkbox" name="chk_info" value="HTML" />HTML
    <input type="checkbox" name="chk_info" value="CSS" />CSS
    <input type="checkbox" name="chk_info" value="웹디자인" checked="checked" />웹디자인

    name : 하나의 그룹을 이루는 체크박스의 이름을 지정합니다.
    value : 폼을 처리할 때에 처리프로그램(ex:CGI)으로 넘겨줄 라디오 항목의 값을 지정합니다
    checked : 초기 상태에 기본으로 체크해두고 싶은 항목에 넣습니다. 하나의 체크박스 그룹에 여러개의 항목을 이속성을 넣을 수 없습니다.

 

▣ 전송(submit)버튼(type="submit")

    전송버튼은 폼을 지정한 페이지로 전송시킵니다.

    <form name="input" method="post" action="">
      <input type="text" name="memberName" maxlength="10" />
      <input type="submit" value="전송" />
    </form>
 
    name : 다른 폼 요소들과 구분할 수 있게 버튼의 이름을 지정합니다.
    value : 버튼에 표시되는 글자를 지정합니다.
    maxlength : 버튼의 크기를 지정합니다.
 

▣ 리셋(reset)버튼(type="reset")

    리셋버튼(Reset Button)은 폼에 입력한 값을 취소하고 초기화 시킵니다

    <form name="input" method="post" action="">
      <input type="text" name="memberName" maxlength="10" />
      <input type="reset" value="초기화" />
    </form>
 
    name : 다른 폼 요소들과 구분할 수 있게 버튼의 이름을 지정합니다.
    value : 버튼에 표시되는 글자를 지정합니다.
    maxlength : 버튼의 크기를 지정합니다.
 

▣ 버튼(type="button")
  웹문서에 버튼형태만 만듭니다. 주로 자바 스크립트 함수를 연결할 때 많이 쓰입니다만
 
    <form>
      <input type="button" value="버튼입니다." />
    </form>

    name : 다른 폼 요소들과 구분할 수 있게 버튼의 이름을 지정합니다.
    value : 버튼에 표시되는 글자를 지정합니다.
    maxlength : 버튼의 크기를 지정합니다.

 

▣ 파일(type="file")
    게시판 등에 첨부파일을 업로드 하는 경우 찾아보기 버튼을 사용합니다.

    <input type="file" name="FileName" />

    파일 첨부 기능이 있는 폼을 만들때는 반드시 <form> 태그에 enctype 속성을 multipart/form-data로 지정해 주어야 합니다.

    <form action="" method="post" enctype="multipart/form-data" name="">
      <input type="file" name="FileName" />
    </form>


▣ 이미지버튼(type="images")
    이미지 버튼(Image Type)은 전송버튼(Submit Button)의 역할을 하면서 이미지로 출력되는 버튼입니다.

    <input type="image" src="submit.gif" />

    전송버튼이 아닌 일반적인 버튼을 이미지로 처리할려면 <img>태그를 사용하고 이를 자바스크립트를 이용하여 액션을 지정해야 합니다.
 

◈셀렉트박스(select)
    콤보박스라고도 하며 Pull-Down Menus라고 표현하기도 합니다.

    <select name="job">
        <option value="">직업선택</option>
        <option value="학생">학생</option>
        <option value="회사원">회사원</option>
        <option value="기타">기타</option>
    </select>
 

▣ select 속성
    name : 선택목록의 이름을 지정합니다.
    value : 폼을 처리할 때에 처리프로그램(ex:CGI)으로 넘겨줄 체크박스 항목의 값을 지정합니다.
    multiple : shift 나 ctrl 키를 사용해서 한번에 여러개의 항목을 선택할 때 사용합니다.
        이 경우에는 size속성이 반드시 2이상이어야합니다.

▣ option 속성
    name : 각 항목을 선택했을 때의 서버로 넘겨질 이름을 지정합니다.
    selected : 웹페이지가 시작되었을 때 미리 선택되어 있는 초기 선택항목값을 지정합니다.

    <select name="hobby">
        <option value="독서">독서</option>
            <optgroup label="스포츠">
              <option value="야구">야구</option>
              <option value="축구">축구</option>
            </optgroup>
        <option value="음악감상">음악감상</option>
      </select>

    <optgroup>은 HTML 4 버전에서 새로 만들어진 태그로 옵션에 카테고리를 만들 수 있습니다. 대부분의 웹브라우저에서 지원하고 있다.


◈텍스트에어리어(textarea)

  텍스트 필드가 한줄만 입력할 수 있는것에 비해 텍스트에어리어(textarea)는 여러줄에 걸쳐서 입력할 수 있는 폼 필드입니다.

  <textarea rows="5" cols="30" name="contents"></textarea>

▣ textarea 속성
    name : 텍스트 영역필드의 이름을 지정합니다.
    cols : 텍스트 영역필드의 가로길이를 지정합니다. 속성값은 숫자가 와야하며 몇 글자 정도 들어갈지를 지정합니다.
    rows : 텍스트 영역필드의 세로길이를 지정합니다.  속성값은 숫자가 와야하며 몇 줄 정도가 들어갈지를 지정합니다.
        지정한 값보다 줄이 많아지면 저절로 스크롤바가 생겨납니다. 속성값은 숫자가 와야하며 몇 글자 정도 들어갈지를 지정합니다.

    <textarea rows="5" cols="30" name="contents">기본값은 여기에 적어줍니다.</textarea>
 

◈라벨(label)
  label은 element는 사용자가 input box, check box, radio button 등을 좀 더 쉽게 선택할 수 있도록 도와줍니다.

  label 부분을 클릭하면 input box의 경우에는 자동으로 focus가 이동하고 check box, radio button의 경우는 자동으로 선택됩니다.

  label의 for 속성의 이름과 폼요소의 id 값이 일치하게 아래와 같이 작성하면 됩니다.

  <label for="html">HTML</label> <input name="checkinfo" type="checkbox" id="html" />
  <label for="css">CSS</label> <input name="checkinfo" type="checkbox" id="css" />
 

◈자동완성(autocomplete)
  autocomplete 속성은 자동완성 기능의 사용여부를 지정합니다.

  IE의 경우 사용자의 편의를 위하여 입력박스에서 자동완성기능을 제공합니다. 그러나 보안이 필요로 하는 곳에서는 이 기능을 강제적으로 막을 필요가 있습니다.
 

  form 전체에서 autocomplete 기능을 제거
  <form autocomplete="off">


  특정 form 요소에서만 autocomplete 기능을 제거
  <input type="text" autocomplete="off" />



참고사이트
http://blog.naver.com/sinic45?Redirect=Log&logNo=50022567675
http://k.daum.net/qna/view.html?qid=01UVt