
PHP 강의
>PHP - 초급
📚 PHP 초급 - 7주차: HTML 폼 처리 및 GET/POST 방식 - 01 HTML 폼 생성
![]() |
평점 | 10.0 | 라이센스 | free |
---|---|---|---|---|
사용자평점 | 10.0 | 운영체제 | ||
다운로드 | 1 | 파일크기 | 0 | |
제작사 | LUZENSOFT | 등록일 | 2025-07-01 16:03:54 | |
조회수 | 2 |
📚 PHP 초급 - 7주차: HTML 폼 처리 및 GET/POST 방식 - 01 HTML 폼 생성
HTML 폼(Form)이란?
웹 페이지에서 사용자의 입력을 받는 가장 기본적인 방법은 #HTML #폼(Form)을 사용하는 것입니다.
폼은 사용자가 텍스트를 입력하거나, 옵션을 선택하거나, 파일을 업로드하는 등 다양한 종류의 데이터를 웹 서버로 전송할 수 있게 해주는 요소입니다.
우리가 웹사이트에서 회원가입을 하거나, 로그인하거나, 게시글을 작성할 때 보는 대부분의 입력 창들이 바로 이 HTML 폼의 일부입니다.
기본적인 HTML 폼 구조
HTML 폼은 <form>
태그로 시작하여 </form>
태그로 끝납니다. 이 #<form>
태그 안에는 사용자 입력을 위한 다양한 #입력 요소(input elements)들이 포함됩니다.
<form>
태그의 주요 속성
action
: 폼 데이터가 전송될 서버의 URL을 지정합니다. 이 속성이 없으면 현재 페이지로 데이터가 전송됩니다.method
: 폼 데이터가 전송될 HTTP 방식을 지정합니다. 주로 #GET 또는 #POST 방식이 사용됩니다.
주요 입력 요소 (Input Elements)
<input type="text">
: 한 줄짜리 텍스트 입력을 받습니다.<input type="password">
: 비밀번호 입력을 받으며, 입력된 내용은 마스킹 처리됩니다.<input type="submit">
: 폼 데이터를 서버로 전송하는 버튼을 생성합니다.<textarea>
: 여러 줄의 텍스트 입력을 받습니다.<select>
: 드롭다운 목록을 생성하여 여러 옵션 중 하나를 선택하게 합니다.<input type="radio">
: 여러 옵션 중 하나만 선택할 수 있는 라디오 버튼을 생성합니다.<input type="checkbox">
: 여러 옵션 중 하나 또는 여러 개를 선택할 수 있는 체크박스를 생성합니다.
HTML 폼 생성 예제
아래는 기본적인 사용자 이름과 비밀번호를 입력받는 #HTML 폼 예제입니다.
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 폼 생성</title>
</head>
<body>
<h1>로그인 폼</h1>
<form action="process.php" method="GET">
<label for="username">사용자 이름:</label><br>
<input type="text" id="username" name="username"><br><br>
<label for="password">비밀번호:</label><br>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="로그인">
</form>
</body>
</html>
코드 설명
<!DOCTYPE html>
: HTML5 문서임을 선언합니다.<html lang="ko">
: 문서의 언어를 한국어로 설정합니다.<head>
: 문서의 메타데이터를 포함합니다.<meta charset="UTF-8">
: 문자 인코딩을 UTF-8로 설정하여 한글이 깨지지 않도록 합니다.<meta name="viewport" content="width=device-width, initial-scale=1.0">
: 모바일 기기에서 웹페이지가 올바르게 보이도록 뷰포트를 설정합니다.<title>HTML 폼 생성</title>
: 웹 브라우저 탭에 표시될 제목을 설정합니다.
<body>
: 웹페이지의 실제 내용을 포함합니다.<h1>로그인 폼</h1>
: 페이지의 주 제목을 정의합니다.<form action="process.php" method="GET">
: 폼의 시작을 알리며, 데이터가process.php
로 #GET 방식으로 전송될 것임을 지정합니다.<label for="username">사용자 이름:</label>
: #<label>
태그는 폼 요소에 대한 설명을 제공하며,for
속성을 사용하여 어떤 입력 요소와 연결되는지 명시합니다. (id
가 "username"인 input과 연결)<input type="text" id="username" name="username">
: #type="text"
는 한 줄 텍스트 입력을 위한 필드를 생성합니다. #id
는 label과의 연결을 위해 사용되며, #name
은 서버로 데이터가 전송될 때 해당 데이터의 키(key)로 사용됩니다.<br>
: 줄 바꿈을 합니다.<input type="password" id="password" name="password">
: #type="password"
는 비밀번호 입력을 위한 필드를 생성합니다.<input type="submit" value="로그인">
: #type="submit"
은 폼을 제출하는 버튼을 생성하며, #value
속성은 버튼에 표시될 텍스트를 지정합니다.
다음 단계
이렇게 생성된 HTML 폼은 사용자로부터 데이터를 입력받을 준비가 되었습니다. 다음 포스팅에서는 이 폼을 통해 전송된 데이터가 #PHP 스크립트에서 #GET 방식과 #POST 방식으로 어떻게 처리되는지에 대해 자세히 살펴보겠습니다.