HTML Form 테그

HTML Form 테그


<form> 태그

기본형식

1
<form name="폼의 이름" method="post/get방식 정함" action="실행 프로그램">

  • name : 전송될 데이터 속성
  • method : post방식과 get 방식이 있다 post방식은 값이 감추어서 넘어가게 되고
    get방식은 post보다 속도는 빠르나 외부의 주소값에 노출되어 보안에 취약함
  • enctype : “multipart/form-data”는 파일 업로드 시 멀티파트를 사용하겠다는 뜻.

ex )

1
<form name="form" method="post" action="submit/action.asp"></form>

<input>태그

  • . 특징 : 단일태그로서 속성을 넣는것에 따라 다른 형태가 된다. 기본 type은 text이다
  • . 속성 :
  • value : input안에 보여질 기본문자(글자)를 나타냅니다. (속성값 text)
  • name : 폼에 이름을 부여하여 cgi가 해당 폼을 찾을수 있도록 주소를 부여합니다 (속성값 text)
  • size : input 박스의 크기를 나타냅니다. (속성값 숫자)
  • maxlength : 입력 할수 있는 최대의 글자수입니다 . (속성값 숫자)
  • readonly : 읽기전용인지 표시합니다 (속성값 readonly)
  • checked : 선택된 상태가 체크중인지 체크합니다 (속성값 : checked)
  • type : input타입의 여러가지 속성에대한 type을 지정합니다

ex )

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<input type="text" name="name" size="10" maxlength="10" readonly="true"/>
- 텍스트 입력박스 : text엘리먼트는 한줄짜리 텍스트를 입력하기 위한것입니다.
<input type="text" name="fullname" />
- 전송버튼 : submit엘리먼트는 폼을 전성하기 위한 버튼을 생성합니다.
<input type="submit" />
-라디오 버튼 : radio엘리먼트는 여러 개의 버튼을 가진 단일 컨트롤을 생성하여 한번에 오직
한 개만 선택할수 있습니다.
<input type="radio" name="hotornot" value="hot" /><input type="radio" name="hotornot" value="cold" />
-체크박스 버튼 : checkbox엘리먼트는 체크 되었는지의 여부를 알수 있는 체크박스
컨트롤을 생성합니다. 윈하는 만큼 체크박스할수 있습니다.
<input type="checkbox" name="spice" value="salt" /><input type="checkbox" name="spice" value="pepper" /><input type="checkbox" name="spice" value="garlic" />
-패스워드 버튼 : password 엘리먼트는text엘리먼트의 값이 *****<- 비밀번호 형식으로 나옵니다.
<input type="password" name="passwd" />
-버튼 : button엘리먼트는 버튼을 생성합니다 . 보통 자바스크립트로 값을 넘길떄
이버튼을 많이사용 합니다.
<input type="button" value="button" />
-리셋 : reset엘리먼트는 form테그의 input값들을 모든내용을 초기화합니다.
<input type="reset" value="reset" />
-이미지 버튼 : image엘리먼트 일때 src 속성에 이미지 주소를 삽입하여 이미지 버튼을 만듭니다.
<input type="image" src="images/button.gif" />
-히든 : hidden엘리먼트는 post값으로 넘길때 숨겨진 request값을 넘기는 기능을 합니다.
<input type="hidden" value="value" />
-파일 : file 엘리먼트는 파일의 업로드 폼을 제공합니다.
<imput type="file" name="file" />

-textarea : textarea 엘리먼트는 입력할수 있는 여러줄의 텍스트 영역을 생성합니다.
속성값 :

  • rows : 텍스트 영역을 만들기 위해 문자들이 차지하는 영역의 좊이가 얼마나 되어야 하는지를
    브라우저에게 말해주는것입니다.(속성값 : 숫자)
  • cols : 텍스트 영역을 만들기 위해 문자들이 차지하는 영역의 너비가
    얼마나 되어야 하는지를 브라우저에게 말해주는 것입니다 (속성값 : 숫자)
1
2
3
4
5
<textarea name="comments" rows="10" cols="48">내용부</textarea>
- 선택박스 : select엘리먼트는 웹 페이지에 있는 메뉴 컨트롤을 생성합니다.
<select name="characters"><option value="buck">buck</option><option value="cook">cook</option><option value="too">too</option><option value="baru">baru</option></select>
-다중선택 : select엘리먼트 안에서 다중선택을 할수 있게 합니다.
<select name="characters" multiple="multiple"><option value="buck">buck</option><option value="cook">cook</option><option value="too">too</option><option value="baru">baru</option></select>
Share