화면구현/HTML

form

psys 2020. 7. 8. 10:42
728x90
서버로 전송하려는 값은 form태그로 둘러싸고, 꼭 name 속성을 가져야함

submit

버튼인데 form태그 안의 내용을 서버로 전달하는 기능

submit제풀 누르면 ?가 생겨

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form>
        메시지1 <input type="text" value="박성연"><br>
        메시지2 <input type="text" value="안녕"><br>
        <input type="submit" value="서버로전달"><br>
    </form>
</body>

</html>

 

name

서버로 보내는 애들은 이름이 있어야해!!

submit제풀 누르면 ?부터 쭉 생겨

? QueryString 이라고 부르고, name=값&name=값 형태로 전달됨

    <form>
        메시지1 <input name="msg1" type="text" value="박성연"><br>
        메시지2 <input name="msg2" type="text" value="안녕"><br>
        <input type="submit" value="서버로전달"><br>
    </form>
더보기
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 웹개발자는 form태그를 모르는 폼이 나지 않습니다
         서버로 전송하려는 값은 form태그로 둘러싸고, 꼭 name 속성을 가져야합니다.
    -->
    <form>
        메시지1 <input name="msg1" type="text" value="박성연"><br>
        메시지2 <input name="msg2" type="text" value="안녕"><br>
        <!-- submit은 버튼인데 form태그 안의 내용을 서버로 전달하는 기능 -->
        <input type="submit" value="서버로전달"><br>
    </form>
</body>

</html>

 

하나 더 추가해볼까?

    <form>
        메시지1 <input name="msg1" type="text" value="박성연"><br>
        메시지2 <input name="msg2" type="text" value="안녕"><br>
        메시지3 <input name="msg3" type="text" value="앗.."><br>
        <input type="submit" value="서버로전달"><br>
    </form>
더보기
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 웹개발자는 form태그를 모르는 폼이 나지 않습니다
         서버로 전송하려는 값은 form태그로 둘러싸고, 꼭 name 속성을 가져야합니다.
    -->
    <form>
        메시지1 <input name="msg1" type="text" value="박성연"><br>
        메시지2 <input name="msg2" type="text" value="안녕"><br>
        메시지3 <input name="msg3" type="text" value="앗.."><br>
        <!-- submit은 버튼인데 form태그 안의 내용을 서버로 전달하는 기능 -->
        <input type="submit" value="서버로전달"><br>
    </form>
</body>

</html>

 

div를 줘볼까?

얘는 서버로 전송을 할 필요가 없어!!(프로그램적인 의미가 없음) 따라서 서버로 전송이 되지 않음

값 전송을 위해서는 텍스트박스에 넣어줘야해!!!

    <form>
        메시지1 <input name="msg1" type="text" value="박성연"><br>
        메시지2 <input name="msg2" type="text" value="안녕"><br>
        <div name ="div1">언녕</div>
        <input type="submit" value="서버로전달"><br>
    </form>
더보기
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 웹개발자는 form태그를 모르는 폼이 나지 않습니다
         서버로 전송하려는 값은 form태그로 둘러싸고, 꼭 name 속성을 가져야합니다.
    -->
    <form>
        메시지1 <input name="msg1" type="text" value="박성연"><br>
        메시지2 <input name="msg2" type="text" value="안녕"><br>
        <div name ="div1">언녕</div>
        <!-- submit은 버튼인데 form태그 안의 내용을 서버로 전달하는 기능 -->
        <input type="submit" value="서버로전달"><br>
    </form>
</body>

</html>

 

** form에는 전송방식이 GET과 POST가 있는데 default는 GET이다.

<form method="GET">

 

GET방식의 문제점

암호가 주소표시줄에 보임

중요 정보가 주소표시줄에 남기 때문에 주의를 기울여야한다.

    <form method="GET">
        메시지1 <input name="msg1" type="text" value="박성연"><br>
        암호 <input type="password" name="passwod" value=""><br>
        메시지2 <input name="msg2" type="text" value="안녕"><br>
        <div name="div1">언녕</div> <!--프로그램적으로 의미가 없음-->
        <input type="submit" value="서버로전달"><br>
    </form>
더보기
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 웹개발자는 form태그를 모르는 폼이 나지 않습니다
         서버로 전송하려는 값은 form태그로 둘러싸고, 꼭 name 속성을 가져야합니다.
    -->
    <form method="GET">
        메시지1 <input name="msg1" type="text" value="박성연"><br>
        암호 <input type="password" name="passwod" value=""><br>
        메시지2 <input name="msg2" type="text" value="안녕"><br>
        <div name="div1">언녕</div> <!--프로그램적으로 의미가 없음-->
        <!-- submit은 버튼인데 form태그 안의 내용을 서버로 전달하는 기능 -->
        <input type="submit" value="서버로전달"><br>
    </form>
</body>

</html>

 

POST방식

전달되는 것들이 주소표시줄에 보이지 않음

    <form method="POST">
        메시지1 <input name="msg1" type="text" value="박성연"><br>
        암호 <input type="password" name="passwod" value=""><br>
        메시지2 <input name="msg2" type="text" value="안녕"><br>
        <div name="div1">언녕</div> <!--프로그램적으로 의미가 없음-->
        <input type="submit" value="서버로전달"><br>
    </form>
더보기
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 웹개발자는 form태그를 모르는 폼이 나지 않습니다
         서버로 전송하려는 값은 form태그로 둘러싸고, 꼭 name 속성을 가져야합니다.
    -->
    <form method="POST">
        메시지1 <input name="msg1" type="text" value="박성연"><br>
        암호 <input type="password" name="passwod" value=""><br>
        메시지2 <input name="msg2" type="text" value="안녕"><br>
        <div name="div1">언녕</div> <!--프로그램적으로 의미가 없음-->
        <!-- submit은 버튼인데 form태그 안의 내용을 서버로 전달하는 기능 -->
        <input type="submit" value="서버로전달"><br>
    </form>
</body>

</html>
GET과 POST의 차이
GET과 POST 외관적 차이는 보이고 안 보이고!!

보안 : POST>>GET
전달용량:POST>>GET
POST가 좋을 것 같은데 여러 사이트들은 GET방식을 선호해
왜??
POST는 값 전달 여부를 서버에서 확인해야함
GET은 서버를 확인하지않아도 값 전달 여부를 알 수 있음 디버깅도 편함
따라서 개발자가 편리하도록 GET방식을 선호하는 것
보이면 안되는 중요한 데이터 전송시에는 GET으로 검증 후 POST로 바꿔야 안전!!

 

php파일 생성(test.php)

<?php
    echo phpinfo();
?>

 

 

'화면구현 > HTML' 카테고리의 다른 글

WAS와 Web Server차이  (0) 2020.07.08
[리눅스, 윈도우] PHP설치  (0) 2020.07.08
클래스속성  (0) 2020.07.08
마우스로끌기 완성~  (0) 2020.07.08
다양한요소등록법  (0) 2020.07.02