본문 바로가기
HtmlCss/HTML

<Form>태그

by 플람 2019. 5. 25.

 

<form>태그

 

<form name="폼이름" action="처리할문서명" method="전송방식"

enctype="인코딩방식">

<입력요소태그들>

</form>

 

처리할문서명 

 

폼에서 보내온 데이터들을 서버단에서 받아서 처리해줄 문서를 지정한다.

 

 

전송방식

 

get방식 또는 post방식이 있다.

 

  • get방식

URL주소 뒤에 데이터들을 붙여서 전송하는 방식

(데이터가 노출가능하고 적은양의 데이터를 전송할 때 주로 사용한다.)

  • post방식

HTTP프로토콜의 body영역에 데이터를 넣어서 전송하는 방식

(많은 양의 데이터를 전송하거나 데이터를 감춰서 전송할 때 사용한다.)

인코딩방식 ==> 보통의 데이터를 전송할 때에는 생략한다.

(기본값 : application/x-www-form-urlencoded)

파일을 전송할 경우 : multipart/form-data

 

 

  • 입력 요소에 사용되는 태그들

imput태그, textarea태그, select태그, button태그

 

<form >
    <!--한 줄의 데이터를 입력할 때 사용-->
1. text객체 : <input type="text" name="aa"><br><br>
    <!-- 암호를 입력할 때 사용-->
2. password객체 : <input type="password" name="bb"><br><br>
    <!-- check된 데이터를 전송한다.
         0개 이상의 데이터를 선택할 수 있다.-->
3. checkbox객체 : 
    <input type="checkbox" name="cc" value="100">100
    <input type="checkbox" name="cc" value="90">90
    <br><br>
    <!-- check된 데이터를 전송한다-->
    <!-- 여러개의 radio객체 중 하나만 선택할 수 있다.-->
4. radio객체 : 
    <input type="radio" name="dd" value="seoul">서울
    <input type="radio" name="dd" value="seoul">대전
    <br><br>
    <!-- 서버로 전송할 파일을 선택하게 하는 객체-->
5. file객체 : <input type="file" name="ee">    
    <br><br>
    <!-- 여러줄의 내용을 입력할 때 사용되는 객체
        rows속성 ==> 줄 수
        cols속성 ==> 칸 수                   -->    
6. textarea객체 : 
    <textarea name="ff" rows="10" cols="50"></textarea>
    <br><br>
    <!-- 여러개의 항목 중 전송할 데이터를 선택할 수 있게 하는 객체-->
7. select객체 : 
    7-1 콤보박스 : 
    <select name="gg">
        <option value="sk">SKT</option>
        <option value="ktf">KTF</option>
        <option value="lg">LG U+</option>
    </select>
    7-2 리스트박스
    <select name="hh" size="6">
        <option value="sk">SKT</option>
        <option value="ktf">KTF</option>
        <option value="lg">LG U+</option>
    </select>
    <br><br>
    <!-- 초기화(reset)버튼 : 입력한 내용을 처음 상태로 변경한다.
         전송(submit)버튼  : 입력한 내용을 서버로 전송한다.
         일반버튼 : 사용자가 지정한 기능을 수행한다.
                   (javascript를 이용하여 기능을 구현한다.)
    -->
8. 버튼들 : 
    <input type="button" value="일반 버튼">
    <input type="submit" value="전송 버튼">
    <input type="reset" vlaue="초기화 버튼">
    <br><br>
    <!-- 이미지를 '전송버튼'으로 사용하고 싶을 때 사용한다.-->
9. image객체 : 
    <input type="image" src="../images/water.jpg">
    <br><br>
    <!-- 화면에는 출력되지 않지만 서버로 전송해야 할 자료를 구성할 때 사용한다.-->
10. hidden객체
    <input tpye="hidden" name="ii" value="test">

</form>

 

'HtmlCss > HTML' 카테고리의 다른 글

HTML5 추가요소  (0) 2019.05.25
<fieldset>태그와 <legend>태그  (0) 2019.05.25
<Table>태그  (0) 2019.05.25
특수문자  (0) 2019.05.25
텍스트 서식  (0) 2019.05.25