HTML


게시글 'Form 태그 및 Input 태그 사용법 및 Input type 설명'에 대한 정보
Form 태그 및 Input 태그 사용법 및 Input type 설명
등록일 2009-10-26 조회 6,358

1.입력 양식
 
   - 서버로 전송할 입력 양식
   - <form> … </form> 태그로 구성
   - <form name="" action="" method=""…> 의 속성으로 구성.

 
      name
      폼의 이름
      target
      HTML에서 FRAME으로 나눈 창의 이름
      action
      정보를 넘겨받을 site의 이름
      method
      폼의 data를 전송하는 방식으로 get방식과 post방식이 있다.
      enctype
       서버로 전해질 data의 형식을 지정
      onSubmit
      data가 서버로 전송되기 전에 실행할 이벤트
      onReset
      reset 버튼을 눌렀을 때 실행할 이벤트
 
   - <input type="">    <-- <form> 태그 안에서 사용
      
      text
      일반 텍스트 박스 컨트롤
      password
      비밀번호 텍스트 박스 컨트롤
      hidden
      숨겨진 필드 컨트롤
      checkbox
      체크박스 컨트롤
      radio
      라디오박스 컨트롤
      file
      파일 업로드 컨트롤
      submit
      전송 버튼 컨트롤
      reset
      입력값 초기화
      button
      버튼 컨트롤
      image
      이미지 컨트롤
 
   - Text 컨트롤
 
      name
      객체 이름
      value
      처음에 보여질 값
      size
      text의 크기
      maxlength
      입력 가능한 글자의 크기
      readonly
      읽기전용 컨트롤로 변경
     
      <input type="text" name="id" value="itkorea">
      <input type="text" name="id" size="20" maxlength="10">
      <input type="text" name="id" value="itkorea" readonly>
 
   - Hidden 컨트롤
     
      name
      객체 이름
      value
      서버로 전달되는 값
 
   <input type=“hidden" name=“key" value=““>
   <input type=“hidden" name=“code" value=“">
  
   - Password 컨트롤
 
      name
      객체 이름
      value
      처음에 보여질 값
      size
      password의 크기
      maxlength
      입력 가능한 글자의 크기
 
      <input type=“password" name=“pwd" value="itkorea">
      <input type=“password" name=“pwd" size="20" maxlength="10">
 
   - CheckBox 컨트롤
 
      name
      객체 이름
      value
      처음에 보여질 값
      checked
      체크 박스 체크 설정
      체크 박스가 체크되었으면 true, 해제되었으면 false를 리턴
 
      <input type=“checkbox" name=“music" value=“음악">
      <input type="checkbox" name=“swim"  value=“수영">
      <input type=“checkbox" name=“movie" value=“영화" checked>
 
   - Radio 컨트롤
 
      name
      객체 이름
      value
      처음에 보여질 값
      checked
      라디오 박스 체크 설정
      라디오 박스가 체크되었으면 true, 해제되었으면 false를 리턴
 
      * name의 값이 같은 컨트롤 끼리 그룹으로 묶을 수 있다.
 
      <input type=“checkbox" name=“birth" value=“양력“ checked>
      <input type="checkbox" name=“birth" value=“음력">
 
   - Button 컨트롤
     
      name
      객체 이름
      value
      Button 위에 보여질 문자를 지정한다.
 
      <input type=“button" name=“btnLogin" value=“로그인“>
      <input type=“button" name=“btnSerarch" value=“검색">
 
   - Submit 컨트롤
 
      name
      객체 이름
      value
      Submit Button 위에 보여질 문자를 지정한다.
 
   <input type=“submit" name=“btnSend" value=“전송">
 
   - Reset 컨트롤
     
      name
      객체 이름
      value
      Reset Button 위에 보여질 문자를 지정한다.
 
      <input type=“reset" name=“btnInit" value=“초기화“>
 
   - FileUpload 컨트롤
 
      name
      객체 이름
      value
      FileUpload 객체의 입력 양식에 기재된 내용  
 
      <input type=“file" name=“fileControl">
 
   - Radio 컨트롤
 
      name
      객체 이름
      value
      처음에 보여질 값
      multiple
      다중 선택의 여부를 결정짓는 속성으로, 생략하면 목록 중에서 하나만
      선택이 가능하다.
      option
      목록상자의 각 목록
      - selected: 현재의 목록을 선택한 상태로 만들어 준다.
      - value: 선택 시 서버에 전달 될 값.
      - text: 선택 된 목록의 문자열
      - index: 선택 된 목록의 인덱스
      - ex) options[i].value, options[i].selected
 
      <select name=“job” multiple>
      <option>학생
      <option>직장인
      </select>
 
   - TextArea 컨트롤
     

      name
      객체 이름
      rows
      textarea의 세로 길이
      cols
      textarea의 가로 길이
      wrap
      글자가 우측 끝까지 입력되었을 경우 자동으로 줄을 바뀌게 할 지의
      여부를 결정한다.
     
      - off: 자동 줄 바꿈 하지 않음.
      - virtual / soft: client에서는 자동 줄 바꿈이 되나, 서버에는 줄이 안 바뀐 것으로 전달 됨.
      - physical / hard: client에서도 줄 바꿈이 되고, 서버에도 줄이 바뀐 상태로 전달 됨.
 
   <textarea cols=“50” rows=“3” wrap=“off”>
   </textarea>