[HTML] Form 태그

2) 폼 : 값을 넘겨주는 태그

2.1 입력방식

<form action=”경로-입력 데이터 전송 주소” method=”어떻게 전송할것인가-get/post”> 

form elements </form>

get : URL?key=value => 요청한 웹페이지에 나타남(보안취약/길이한정)

post : 눈에 보이지 않지만 길이 제한 없으면 보안가능

 

2.2 전송양식

<h1>1. form & input</h1>

    <h2>1-1. input : text</h2>

    <form action="">

        텍스트를 입력하세요.<br>

        <input type="text">

    </form>



    <hr>



    <h2>1-2. input : password</h2>

    <form action="">

        ID : <br><input type="text"><br>

        PW : <br><input type="password">

    </form>



    <hr>



    <h2>1-3. input : radio </h2>

    <form action="">

        <!--라디오는 여러가지 선택 불가-->

        <!--name을 모두 같게 해줘야 하나만 선택할 수 있지만 value값은 세세하게 지정이 필요함-->

        <input type="radio" name="radio">라디오1<br>

        <input type="radio" name="radio" value="">라디오2<br>

        <input type="radio" name="radio">라디오3<br>

        <input type="radio" name="radio">라디오4<br>

    </form>



    <hr>

    

    <h2>1-4. input : checkbox </h2>

    <form action="">

        <!--체크박스는 여러가지 선택 가능-->

        <!--checked : 선택하기 전에 미리 선택되어있는 것-->

        <input type="checkbox" name="checkbox" value="" checked>체크박스1<br>

        <input type="checkbox" name="checkbox" value="">체크박스2<br>

        <input type="checkbox" name="checkbox" value="">체크박스3<br>

        <input type="checkbox" name="checkbox" value="">체크박스4<br>

        <input type="checkbox" name="checkbox" value="">체크박스5<br>

    </form>

    

    <hr>



    <h2>1-5. select</h2>

        <select name="" id="">

            <!--selected : 먼저 기본으로 선택되어진 것-->

            <option value="">선택 1</option>

            <option value="">선택 2</option>

            <option value="" selected>선택 3</option>

            <option value="">선택 4</option>

        </select>



    

    <br>

    <br>

    <br>

    <br>

    <hr>



    <h2>1-6. button</h2>

        <button type="button" onclick="">

            버튼을 눌러주세요.

        </button>

   <br>

   <hr>

   

   <h2>1-7. input : submit</h2>

        <form action="">

            텍스트를 입력하세요. : <br>

            <input type="text" placeholder="텍스트를 입력하세요.">

            <input type="submit" value="전송">

        </form>

 

 

3) 페이지 이동

<h2>1-7. input : submit</h2>

        <!--action : 정보전송하는 주소 -->

        <!--text 안에 쿼리값을 전송하려면 name값을 query로 줘야함-->

        <form action="https://search.naver.com/search.naver?">

            N : <br>

            <input type="text" name="query">

            <input type="submit" value="전송">

        </form>