📚 PHP 초급 - 7주차: HTML 폼 처리 및 GET/POST 방식 - 01 HTML 폼 생성

평점	10.0	라이센스	free
사용자평점	10.0	운영체제
다운로드	1	파일크기	0
제작사	LUZENSOFT	등록일	2025-07-01 16:03:54
조회수	12

- 설명

📚 PHP 초급 - 7주차: HTML 폼 처리 및 GET/POST 방식 - 01 HTML 폼 생성

HTML 폼(Form)이란?

웹 페이지에서 사용자의 입력을 받는 가장 기본적인 방법은 #HTML #폼(Form)을 사용하는 것입니다.

폼은 사용자가 텍스트를 입력하거나, 옵션을 선택하거나, 파일을 업로드하는 등 다양한 종류의 데이터를 웹 서버로 전송할 수 있게 해주는 요소입니다.

우리가 웹사이트에서 회원가입을 하거나, 로그인하거나, 게시글을 작성할 때 보는 대부분의 입력 창들이 바로 이 HTML 폼의 일부입니다.

uploadImage

기본적인 HTML 폼 구조

HTML 폼은 <form> 태그로 시작하여 </form> 태그로 끝납니다. 이 #<form> 태그 안에는 사용자 입력을 위한 다양한 #입력 요소(input elements)들이 포함됩니다.

uploadImage

`<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 방식으로 어떻게 처리되는지에 대해 자세히 살펴보겠습니다.

PHP 강의

PHP - 초급