HTML5와 입력 양식 요소

웹프로그래밍 HTML/입력양식과 공간 분할 태그

HTML5와 입력 양식 요소

별초롱언니 2025. 3. 5. 17:47

▣ 웹 양식

· 웹 문서에 어떤 데이터를 입력하고 그 결과값을 가져오기 위해 사용

▣ 폼태그

· 웹 양식을 만드는 데 사용하는 태그

· action : 사용자가 입력한 데이터를 받아 처리하기 위한 웹 프로그램의 페이지 지정 (ASP, PHP, JSP 등)

· method : 웹 서버와 클라이언트 간의 통신 방법 지정 (GET 방식, POST 방식)

· type : 폼의 모양과 기능 결정

· name : 폼의 이름 결정

▣ GET 방식

· URL 뒤에 파라미터를 붙여서 데이터를 전달하는 방식

· 사용자가 보내는 데이터는 이름과 값이 결합된 문자열 형태로 전달, 각 이름과 값의 쌍은 '&'기호로 구분

· 서버로 보낼 수 있는 최대 글자수는 2,048자

· URL을 보면 어떤 데이터를 전송하고자 하는지 알 수 있기 때문에 보안에 취약

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Get 방식</title>
</head>
<body>
  <h2>GET 방식으로 데이터 전송</h2>
  <form action="#" method="get">
    <p>이름 : <input type="text" name="name"></p>
    <p>전공 : <input type="text" name="major"></p>
    <p></p>
    <input type="submit" value="전송">
    <input type="reset" value="다시작성">
  </form>
</body>
</html>

▣ POST 방식

· HTTP Reqiest 헤더에 파라미터를 붙여서 데이터를 전송하는 방식

· 서버로 보낼 수 있는 글자수 제한 없음

· GET 방식과 비교하여 보안상 우위에 있음

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>POST 방식</title>
</head>
<body>
  <h2>POST 방식으로 데이터 전송</h2>
  <form action="02_postdata.jsp" method="post">
    <p>이름 : <input type="text" name="name"></p>
    <p>전공 : <input type="text" name="major"></p>
    <p></p>
    <input type="submit" value="전송">
    <input type="reset" value="다시작성">
  </form>
</body>
</html>