팡상닷컴

FORM 태그의 구성 및 사용법

Programming/Web/2009. 5. 24. 23:51

HTML 내에서 사용자와의 상호작용을 통하여 사용자가 어떤 내용을 원하는지, 사용자의 요구사항은 무엇인지를 파악할때 가장 많이 사용하는 것이 바로 FORM 입니다. HTML에서는 Form을 사용해서 여러가지 파라메터 값을 하나로 묶어서 사용할 수 있습니다. From 태그는 단독으로 쓰여지지 않고 From 태그 안에 여러가지 파라메터 값을 입력하여 사용합니다.


Form 태그 형식
<FORM NAME=" " TARGET=" " ACTION=" " HETHOD=" " ENCTYPE=" " onReset=" " onSubmit=" ">  파라메터 </FORM>


FORM의 구성 요소

    ● NAME : Form의 이름을 나타냅니다.

    ● ACTION : <FORM></FORM> 안의 파라메터를 전송할 곳을 지정합니다.

    ● METHOD : <FORM></FORM> 안의 파라메터를 전송할때의 방식을 지정합니다.(GET/POST)

    ● TARGET : 폼에서 보내주는 응답의 실행프레임을 결정하는 속성입니다.


1. INPUT 파라메터
      

INPUT 타입을 변화시켜서 원하는 형태의 출력결과를 얻을 수 있습니다.


 태그모양

 태그형식
  출력결과
 버튼

 <input type="button" value="버튼">  
 체크박스

 <input type="checkbox" >사과
 <input type="checkbox">수박
   사과 수박
 숨겨진 입력 양식

 <input type="hidden">
 
 파일 업로드

 <input type="file">  
 이미지

  <input type="image">  
 암호

  <input type="password">  
 라디오 버튼

  <input type="radio" name="sex">남자
  <input type="radio" name="sex">여자
   남자 여자
 리셋버튼

  <input type="reset" value="Clear">  
 서브미트

  <input type="submit" value="전송">  
 텍스트

  <input type="text">  


2. TEXTAREA 파라메터
      

TEXTAREA 상자안에 원하는 문장을 입력할 수 있습니다.
TEXTAREA의 WRAP 속성은 기본적으로 off 되어 있지만, soft/hard 로 적용할 수 있습니다.
WRAP="off"  : 엔터없이 문장을 입력할 시 수평 스크롤바가 생기고, 옆으로 계속 문장이 입력됩니다.
WRAP="soft"  : 엔터를 입력하지 않아도 텍스트라인 끝에서 자동 개행됩니다.
WRAP="hard"  : soft 상태와 비슷하며 실제 내용을 서버에 전송할때 캐리지 리턴 문자를 전달합니다.

태그형식
  출력결과
<textarea cols="15" rows="4">
팡상닷컴
야이노마
놀러오세요!</textarea>		  

3. SELECT
      

SELECT 태그는 리스트상자의 목록을 선택하는 것 입니다.
<select> </select>태그 안에 <option></option> 태그를 삽입하여 원하는 목록을 추가할 수 있습니다.
multiple 속성을 추가하면 리스트 상자의 목록을 ctrl 키를 눌러 여러개를 선택할 수 있습니다.

 태그형식  출력결과
 <select size=5 multiple>
  <option value=0 seleted>수박</option>
 <option value=1>참외</option>
 <option value=1>딸기</option>
</select>		  
 <select size=5 multiple>
  <option value=0 seleted>수박</option>
 <option value=1>참외</option>
 <option value=1>딸기</option>
</select>		  

저작자표시

야이노마

» Contact Me: yainoma00@gmail.com




1

티스토리툴바