• 회원가입, 게시판에 글을 작성하기 위한 화면에 사용 되는 것이 폼태그이다.
  • 물론 폼태그 만으로 회원가입이나 게시판을 만들수 있는것은 아니다.
  • 입력양식일 뿐 입력사항에 대한 처리는 ASP, PHP등과 같은 언어를 사용하는 것입니다.
  • HTML 문서에서 사용자가 입력한 사항을 서버로 전달해주는 과정까지가 바로 폼태그의 역할이다.
  • <FORM method="post" action="formtest.php"> 해당폼에 들어갈 입력양식 </form>
    • method 속성
    • method속성은 입력된 내용을 어떠한 방식으로 전달할 것인지를 결정하는 속성

        ① method=get

          사용자들이 html입력양식에 입력한 값들이 환경변수에 저장되어 넘겨진다.

          즉 입력값들이 url에 붙는 인수로 첨가되어 action에 정해준 프로그램으로 그 값을 넘겨주게 되는 것

        ② method=post

          전달방식을 post로 하게 되면 표준입력으로 입력되므로 전달 데이터양에 제한을 받지 않기 때문에 보통 전달할 데이터 양이 많은 경우에 사용합니다.

    • Action 속성
    • action 속성은 입력값들을 어디로 전달할지로 정하는 부분

      즉 action=formtest.php라고 한다면 입력값이 formtest.php로 전달되는 것

  •  input 태그의 속성
    태그
    속성
    설명
    <input>
    name
    입력값에 대한 이름을 결정하는 속성. 
    나중에 프로그램으로 전달할때 변수명이 되므로 입력값마다 각기 다른 name을 정해준다.

    ※ Type 속성 값이 checkbox나 radio일 때는 각각의 name은 같게 하고, value를 다르게 합니다.
    type
    입력필드의 타입을 지정하는 속성.
    value
    입력필드의 기본 값 지정하는 속성.
    size
    입력 필드의 크기를 픽셀로 지정하는 속성. 
    ※ Type 속성값이 text나 password일 때는 입력하는 문자의 수가 된다..
    maxlength
    입력필드에 입력할수 있는 문자의 최대값을 나타내는 속성.
    checked
    Type속성값이 checkbox나 radio일 때 checked속성이 부여되면 해당 입력값이 선택된 상태로 설정.
    src
    Type이 image일 때, 사용될 그림 파일의 경로.
    readonly
    입력필드가 읽기 전용이 되는 속성.
    disabled
    입력필드를 아예 비활성화 하는 속성.
    즉 사용자가 입력할수 없는 상태가 된다.
    tabindex
    속성값으로 숫자 값을 가지며 탭키를 사용해 마우스포커스를 옮길때의 순서를 정해줄수 있는 속성.
  • type 속성 : 입력 필드의 타입을 지정
    속성
    속성값

    설명

    Type
    text

     
    ex) <input type="text" maxLength="20" name="textfield">

    한줄단위의텍스트 입력란 생성해 줍니다. 
    이후에 나올 <textarea>태그는 여러줄을 입력받을 수 있습니다.

    password

     
    ex) <input type="password" maxLength="20" name="pw">

    text와 비슷한 모양을 가지지만 사용자가 입력한 값을 직접 보여주는 것인 아니고 *로 나타내 줍니다. 
    보통 로그인시 비밀번호 입력이나 주민번호 입력등 에 사용됩니다.

    checkbox

     체크1  체크2  체그3
    ex) <input type="checkbox" value="체크1" name="checkbox">체크1  

          <input type="checkbox" value="체크2" name="checkbox">체크2
          <input type="checkbox" value="체크3" name="checkbox">체그3

    말 그대로 체크박스 입니다. 한번에 여러개를 체크해 선택할수도 있습니다. 보통 회원가입시 관심분야 체크나 메일링서비스를 받을것인지 받지 않을것인지 등을 체크할때 사용하게 됩니다. 
    위에서 언급한대로 name속성은 같게 value는 다르게 설정합니다.

    radio

     선택1  선택2  선택3
    ex) <input type="radio" value="선택1" name="radiobutton">선택1
          <input type="radio" value="선택2v name="radiobutton">선택2
          <input type="radio" value="선택3" name="radiobutton">선택3

    체크박스와 마찬가지로 마우스로 클릭해 체크된 입력값을 가지지만..
    체크박스는 여러개를 동시에 선택할수 있는 반면 체크박스는 단하나만 선택할수 있다는 차이점이 있습니다. 
    마찬가지로 name속성은 같게 value는 다르게 설정합니다.

    submit

     
    ex) <input type="submit" value="보내기" name="Submit">

    사용자가 입력양식에 내용을 입력한후 내용을 서버로 전송할때 사용하는 것입니다. value라는 속성값이 버튼의 이름으로 나타납니다. 위의 submit버튼은 value="보내기" 라고 설정되어 있겠죠?

    reset

     
    ex) <input type="reset" value="취소" name="Reset">

    이 버튼을 누르게 되면 폼안의 모든 내용이 초기화 됩니다.
    마찬가지로 value라는 속성값이 버튼의 이름으로 나타납니다.

    image

     
    ex)<input type="image" src="img/icon_training_view.gif" border="0"  name="imageField">

    submit버튼을 대신해 좀더 예쁜 이미지를 쓸수 있도록 해줍니다.

    file

     
    ex)<input type="file" name="file">

    게시판 등에서 파일을 업로드 다운로드 할때 사용하죠?
    파일을 찾아서 첨부하게 되면 폼내용을 전달할때 파일정보도 함께 전달 됩니다.

    hidden

    ex) <input type="hidden" name="tagclub" value="태그클럽">

    단어를 보면 대충 아시겠지만.. 말그대로 실제 브라우저에는 그 입력필드가 보이지는 않습니다. 
    하지만 hidden으로 설정된 input태그의 value값은 폼전달시 서버로 함께 전달이 됩니다.

  • <SELECT> <OPTION>
  •  

    ex) <select name="select">
              <option>직업을 선택하세요</option>
              <option>학생</option>
              <option>직장인</option>
              <option>백수</option>
          </select>

  • SELECT의 속성
  • 태그
    속성
    설명
    <select>
    size
    속성값에 주어진 숫자만큼의 메뉴개수를 한번에 보여주는 속성입니다. 기본값은 물론 위의 예제처럼 1개입니다.
    multiple
    메뉴를 다중선택할수 있게 하는 속성입니다.
  • <TEXTAREA>
    • <textarea>태그는 두줄이상의 텍스트 입력란을 만들어 준다.
    • 속성으로 rows(텍스트 영역의 줄의 수를 설정)과 cols (텍스트 영역의 칼럼의 수를 설정)가 있다.
    • <textarea>~</textarea>에서 ~에 해당하는 텍스트가 있다면 그 내용이 textarea안에 나오게 됩니다. 

       
      ex) <textarea name="textarea" rows="5" cols="40">
                 이곳에 내용이 텍스트에어리어에 나오죠?
             </textarea>
  • <form>태그를 이용한 간단한 회원가입 양식 예제

  • <HTML>
          <HEAD>
                <TITLE>form 사용예제</TITLE>
          </HEAD>
          <BODY bgcolor="#FFFFFF" text="#000000">

     

    회원가입 양식이라지만 폼에서 사용할수 있는 입력양식을 골고루 사용하기 위해<br>
    임의로 간단하게 만든것이니.. 참고만 하시고 직접 다시 짜보세요.<br><br>

    <form method="post" action="formtest.php">
     <input type="hidden" name="subject" value="회원가입양식">
    <table width="500" border="0" cellspacing="0">
      <tr>
       <td>아이디</td>
    <td> 
         <input type="text" name="id" size="20" maxlength="8">
         영문,한글 8자리 이내..
    </td>
      </tr>
    <tr>
       <td>패스워드</td>
    <td> 
         <input type="password" name="pw" size="20" maxlength="8">
         영문 4~8자리미만
    </td>
      </tr>
    <tr>
       <td>이름</td>
    <td> 
         <input type="text" name="Name" size="20">
    </td>
      </tr>
    <tr>
       <td>성별</td>
    <td> 
         <input type="radio" name="sex" value="male" checked>
         남 &nbsp;&nbsp;&nbsp; 
         <input type="radio" name="sex" value="female">여
    </td>
      </tr>
    <tr>
       <td>직업</td>
    <td>
         <select name="select">
              <option>학생</option>
              <option>회사원</option>
              <option>백수</option>
         </select>
    </td>
      </tr>
    <tr>
       <td>관심분야</td>
    <td>
         <input type="checkbox" name="hobby" value="travel">여행      &nbsp;&nbsp;&nbsp; 
         <input type="checkbox" name="hobby" value="sports">스포츠
          &nbsp;&nbsp;&nbsp; 
         <input type="checkbox" name="hobby" value="movie">영화감
         상&nbsp;&nbsp;&nbsp; 
         <input type="checkbox" name="hobby" value="game">게임
    </td>
      </tr>
    <tr>
       <td>자기소개</td>
    <td>
         <textarea name="comment" cols="50" rows="5"></textarea>
    </td>
      </tr>
    <tr align="center">
       <td colspan="2">
         <input type="submit" name="Submit" value="회원가입">
         &nbsp;&nbsp;&nbsp;
         <input type="reset" name="Submit2" value="취소">
    </td>
      </tr>
     </table>
    </form>
          </BODY>
    </HTML>

출처: http://xmljang.com.ne.kr/html



블로그 이미지

하보니

하보니와 함께하는 phP 초보

댓글을 달아 주세요