본문 바로가기
webdesign/HTML

폼태그

yunsoo 2010. 2. 21. 22:56 
   
 목록열기    02 JavaScript (25)   
   


   
 form 태그 속성  02 JavaScript  
2009/08/31 11:46

 http://blog.naver.com/kyumi0705/20087803827 


 
◎ 폼 태그 : 사용자로 하여금 어떤 입력을 하도록 하는 폼.

 

1. 폼 태그 
...


   


   속성         값           설명

   name       문자열     폼의 이름   

   action       url          폼 양식 태그의 값들이 전송될 url 저장

   method     post        폼의 전송 방식 - 사용자 아이디 값들이 눈에 보이지 않게 전송

                  get          폼의 전송 방식 - 노출이 될 수도 있음.

                                                        action 특성에 지정된 url에 포함되어 전송.

   enctype    MIMETYPE  :  을 썼을 때는 "multipart/form-data"를 써야한다.(?)

 

 

2. 폼 양식 태그

1) 한 줄 입력 텍스트 상자

   

   속성             값            설명

   type             text          한줄 입력 상자. 컨트롤에 이름을 부여한다.

   name           문자열      입력 상자의 이름

   value           문자열      아이디 창안에 '아이디를 입력하시오'등 미리 입력될 문자 지정.

                                     컨트롤의 초기값.

   size             숫자         한줄 텍스트 입력 상자의 너비. 보이는 칸의 수

   maxlength     숫자         한줄 입력 상자의 글자 최대 길이

                                     (한글 10글자 = 영문 10글자, byte가 아닌 글자수로 제한)

   tabindex       숫자         탭키를 이용해 컨트롤의 포커스를 옮길 때, 그 순서를 정한다.

   readonly                      컨트롤이 읽기 전용이 되어 value값을 수정할 수 없다.

   disabled                      입력 상자를 비활성화시킨다. 사용자 입력을 못하도록 한다.

                                     disabled 컨트롤은 tabindex를 갖지 않는다.

   tabindex                      포커스 순서를 지정.

   autocomplete  off          자동완성기능해제.

   style            border:0;   -   외곽선 속성을 0으로 셋팅

                      width:50;  -   가로 넓이

                      height:50; -   세로 길이

                      background-color:#FF0099;   -   배경색 속성

                      color:#FF0099;     -   글자색 속성

                      background-image:url;(이미지 경로/이미지 파일명) - 텍스트 상자안에 이미지 삽입

                      background-position:0px 0px;   -   이미지 표시 위치

                      text-align:center;   -   텍스트 정렬(center / right / left)

                      ime-mode:active;   -   default 한글 입력

                                     inactive; -  default 영문 입력

                                     auto;      -  한글/영문 중 선택된 mode

                                     disabled; - 영문만 입력

                      text-transform:uppercase - 대문자로 변환.
                                          lowercase - 소문자로 변환.
                                          capitalize  - 첫문자만 대문자로 변환.

                      font-family:돋움;   -   폰트 종류

                      font-size:12px;     -   폰트 사이즈

                      border-style:solid;

                      border-bottom:#B5B6B5 1px solid;

                      border-left:#B5B6B5 1px solid;

                      border-right:#B5B6B5 1px solid;

                      border-top:#B5B6B5 1px solid;

                      padding-right:3px;

                      padding-top:2px;

                      

2) 여러줄 입력 텍스트 상자

   

   속성       값           설명

   name     문자열     입력 상자 이름

   cols       숫자        입력 상자 너비

   rows      숫자        입력 상자 높이

   disabled

   tabindex

   readonly

 

3) 비밀번호 입력 상자

   

   입력글자 / 숫자를 비밀번호로 간주하여 **** 으로 가려줌

 

4) 보이지 않는 입력 상자

   

   숨김필드 (해당 필드값을 보이지 않고 넘길 때 사용)

 

5) 선택을 위한 라디오 버튼 - 한가지만 선택 가능

   

   성별 :
   여자
   남자

 

6) 선택을 위한 체크박스 - 다중 선택 가능

   
   취미 :

   컴퓨터
   영화
   음악

   속성         값            설명

   type         checkbox  input 태그의 공통적인 속성으로 type에 의해 컴포넌트가 바뀐다.

                                 여기에선 checkbox이기 때문에 CheckBox 컴포넌트가 되는 것이다.

   name       문자열       모든 input 태그에 존재하는 식별자.

                                  jsp나 php 기타 웹언어에서 넘겨받을 값의 변수명이기도 하다.

   value       문자열       이 컴포넌트에 체크했을 때, 넘겨지는 값이다.

   checked                   이 속성이 존재하면 체크되어 있고, 없으면 체크되어 있지 않게 된다.

 

7) 목록 태그(리스트 박스, 콤보 박스)

   시작과 종료 태그로 이루어지며, option들은 OPTGROUP으로 묶을 수 있다.

   

   속성

   name   문자열   컨트롤에 이름을 부여한다.

   size     숫자      한 번에 보이는 메뉴의 갯수

   multiple            Ctrl이나 Shift 키를 눌러 두 개 이상의 메뉴를 선택할 수 있다.

   OPTGROUP :

      label = 문자열   -   옵션 그룹에 대한 이름표.

   selected

 

8) 전송버튼

   

 

9) 확인버튼

   

 

10) 취소버튼

   

   초기화 버튼 (버튼에 이름 未표시)

 

11) button을 image로 보이기.

   

   이미지경로에 있는 이미지로 대체되어 submit 기능을 하게 함.

 

12) 파일첨부 버튼

   
 태그저장  취소 이 포스트를.. 
 덧글 1개  엮인글 쓰기  공감   
  
   


   
 ‘02 JavaScript’ 카테고리의 다른 글
 
checkbox에 관한  2010.01.29
 
 
input 항목의 null을 한방에 체크.  2010.01.27
 
 
replace(arg1, arg2) - 문자 치환 함수  2009.11.13
 
 
radiobutton에 관한...  2009.11.11
 
 
a & img 태그  2009.10.22
 
 

1   2   3   4   5 
  
   
글 보내기 서비스 안내
2009년 6월 30일 네이버 여행 서비스가 종료되었습니다.
네이버 여행 서비스를 이용해 주신 여러분께 감사드리며, 
더 좋은 서비스로 보답할 수 있도록 노력하겠습니다.




 문서파일로 저장하기   
파일로 저장하기 버튼을 누른 후 잠시만 기다려주세요.

이 기능은 베타 서비스 중입니다. 변환 후 배경음악등 일부 내용은
정상적으로 표시되지 않을 수 있습니다. 문서파일로 저장하기 메뉴 도움말 


     
      
 
                        
                          
 
카메라 모델 해상도 노출시간 노출보정 프로그램모드 ISO감도 조리개값 초점길이 측광모드 촬영일시

'webdesign/HTML' Related Articles

티스토리툴바