📚 PHP 초급 - 7주차: HTML 폼 처리 및 GET/POST 방식 - 01 HTML 폼 생성
2025. 7. 1. 16:04ㆍ프로그램/PHP 초급
📚 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 방식으로 어떻게 처리되는지에 대해 자세히 살펴보겠습니다.
'프로그램 > PHP 초급' 카테고리의 다른 글
| 📚 PHP 초급 - 7주차: HTML 폼 처리 및 GET/POST 방식 - 03 $_GET,$_POST, $_REQUEST 슈퍼 글로벌 변수 (0) | 2025.07.01 |
|---|---|
| 📚 PHP 초급 - 7주차: HTML 폼 처리 및 GET/POST 방식 - 02 GET, POST 메서드의 이해 (0) | 2025.07.01 |
| 📚 PHP 초급 - 6주차: 배열 - 04 배열 조작 함수 (정렬, 추가/삭제 등) (0) | 2025.06.30 |
| 📚 PHP 초급 - 6주차: 배열 - 03 다차원 배열 (0) | 2025.06.30 |
| 📚 PHP 초급 - 6주차: 배열 - 02 인덱스 배열, 연관 배열 (0) | 2025.06.28 |