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

자료 기본정보

주요 프로그램 스펙

평점: 10.0
라이선스: free

피드백 및 다운로드

사용자 평점: 10.0
조회: 195
다운: 1

제조사 및 등록 정보

제작사: LUZENSOFT
등록일: 2025-07-01 16:03:54

> 설명

HTML 폼(Form)이란?

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

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

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

HTML 폼(Form)이란?

기본적인 HTML 폼 구조

HTML 폼은

태그로 시작하여

태그로 끝납니다. 이 # 태그 안에는 사용자 입력을 위한 다양한 #입력 요소(input elements)들이 포함됩니다.

기본적인 HTML 폼 구조

태그의 주요 속성

action: 폼 데이터가 전송될 서버의 URL을 지정합니다. 이 속성이 없으면 현재 페이지로 데이터가 전송됩니다.
method: 폼 데이터가 전송될 HTTP 방식을 지정합니다. 주로 #GET 또는 #POST 방식이 사용됩니다.

주요 입력 요소 (Input Elements)

: 한 줄짜리 텍스트 입력을 받습니다.
: 비밀번호 입력을 받으며, 입력된 내용은 마스킹 처리됩니다.
: 폼 데이터를 서버로 전송하는 버튼을 생성합니다.
</code>: 여러 줄의 텍스트 입력을 받습니다.</p></li><li><p><code><select></code>: 드롭다운 목록을 생성하여 여러 옵션 중 하나를 선택하게 합니다.</p></li><li><p><code><input type="radio"></code>: 여러 옵션 중 하나만 선택할 수 있는 라디오 버튼을 생성합니다.</p></li><li><p><code><input type="checkbox"></code>: 여러 옵션 중 하나 또는 여러 개를 선택할 수 있는 체크박스를 생성합니다.</p></li></ul><div><hr></div><p></p><p></p><p></p><p></p><h3>HTML 폼 생성 예제</h3><p></p><p></p><p></p><p>아래는 기본적인 사용자 이름과 비밀번호를 입력받는 #HTML 폼 예제입니다.</p><p>HTML</p><div data-language="text" class="toastui-editor-ww-code-block"><pre><code><!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></p><p> <input type="text" id="username" name="username"></input><input></p><p> <label for="password">비밀번호:</label></p><p> <input type="password" id="password" name="password"></input><input></p><p> <input type="submit" value="로그인"> </form> </body> </html> </p><p></code></pre></div><p></p><p></p><p></p><h4>코드 설명</h4><p></p><p></p><p></p><ul><li><p><code><!DOCTYPE html></code>: HTML5 문서임을 선언합니다.</p></li><li><p><code><html lang="ko"></code>: 문서의 언어를 한국어로 설정합니다.</p></li><li><p><code><head></code>: 문서의 메타데이터를 포함합니다.</p><ul><li><p><code><meta charset="UTF-8"></code>: 문자 인코딩을 UTF-8로 설정하여 한글이 깨지지 않도록 합니다.</p></li><li><p><code><meta name="viewport" content="width=device-width, initial-scale=1.0"></code>: 모바일 기기에서 웹페이지가 올바르게 보이도록 뷰포트를 설정합니다.</p></li><li><p><code><title>HTML 폼 생성</title></code>: 웹 브라우저 탭에 표시될 제목을 설정합니다.</p></li></ul></li><li><p><code><body></code>: 웹페이지의 실제 내용을 포함합니다.</p><ul><li><p><code><h1>로그인 폼</h1></code>: 페이지의 주 제목을 정의합니다.</p></li><li><p><code><form action="process.php" method="GET"></code>: 폼의 시작을 알리며, 데이터가 <code>process.php</code>로 #GET 방식으로 전송될 것임을 지정합니다.</p></li><li><p><code><label for="username">사용자 이름:</label></code>: #<code><label></code> 태그는 폼 요소에 대한 설명을 제공하며, <code>for</code> 속성을 사용하여 어떤 입력 요소와 연결되는지 명시합니다. (<code>id</code>가 "username"인 input과 연결)</p></li><li><p><code><input type="text" id="username" name="username"></code>: #<code>type="text"</code>는 한 줄 텍스트 입력을 위한 필드를 생성합니다. #<code>id</code>는 label과의 연결을 위해 사용되며, #<code>name</code>은 서버로 데이터가 전송될 때 해당 데이터의 키(key)로 사용됩니다.</p></li><li><p><code></code><code></code>: 줄 바꿈을 합니다.</p></li><li><p><code><input type="password" id="password" name="password"></code>: #<code>type="password"</code>는 비밀번호 입력을 위한 필드를 생성합니다.</p></li><li><p><code><input type="submit" value="로그인"></code>: #<code>type="submit"</code>은 폼을 제출하는 버튼을 생성하며, #<code>value</code> 속성은 버튼에 표시될 텍스트를 지정합니다.</p></li></ul></li></ul><div><hr></div><p></p><p></p><p></p><p></p><h3>다음 단계</h3><p></p><p></p><p></p><p>이렇게 생성된 HTML 폼은 사용자로부터 데이터를 입력받을 준비가 되었습니다. 다음 포스팅에서는 이 폼을 통해 전송된 데이터가 #PHP 스크립트에서 #GET 방식과 #POST 방식으로 어떻게 처리되는지에 대해 자세히 살펴보겠습니다.</p>

온라인 강의

PHP - 초급

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

자료 기본정보

주요 프로그램 스펙

피드백 및 다운로드

제조사 및 등록 정보

> 설명

HTML 폼(Form)이란?

기본적인 HTML 폼 구조

태그의 주요 속성

주요 입력 요소 (Input Elements)