자료 기본정보

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

주요 프로그램 스펙

평점: 10.0
라이선스: free

피드백 및 다운로드

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

제조사 및 등록 정보

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

- 설명

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

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 contenteditable="false"><hr></div><p><br></p><p><br></p><p><br></p><p><br></p><h3>HTML 폼 생성 예제</h3><p><br></p><p><br></p><p><br></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><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> <br></code></pre></div><p><br></p><p><br></p><p><br></p><h4>코드 설명</h4><p><br></p><p><br></p><p><br></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><br></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 contenteditable="false"><hr></div><p><br></p><p><br></p><p><br></p><p><br></p><h3>다음 단계</h3><p><br></p><p><br></p><p><br></p><p>이렇게 생성된 HTML 폼은 사용자로부터 데이터를 입력받을 준비가 되었습니다. 다음 포스팅에서는 이 폼을 통해 전송된 데이터가 #PHP 스크립트에서 #GET 방식과 #POST 방식으로 어떻게 처리되는지에 대해 자세히 살펴보겠습니다.</p> </section> <div style="margin-top:10px;"> <ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-9600270133262240" data-ad-slot="3567213440"></ins> <script>setTimeout(function() { (adsbygoogle = window.adsbygoogle || []).push({});}, 0);</script> </div> <hr/> </section>  <div style="width:100%;margin-top:10px;text-align:right;"> </div>  <div style="margin-top:10px;"> <ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-9600270133262240" data-ad-slot="3567213440"></ins> <script>setTimeout(function() { (adsbygoogle = window.adsbygoogle || []).push({});}, 0);</script> </div> </main>  <div style="max-width: 700px; margin: 30px auto; font-family: sans-serif; font-size: 16px;"> <div style="margin-bottom: 20px;"> <div style="font-weight: bold; margin-bottom: 8px; color: #007bff; border-left: 3px solid #007bff; padding-left: 10px;">이 카테고리 Navigation</div> <div style="display: flex; border: 1px solid #e1e1e1; border-radius: 4px; background: #fff;"> <a href="detailview.php?fno=53328" style="flex: 1; display: flex; align-items: center; padding: 12px; text-decoration: none; color:#555; border-right: 1px solid #eee; min-width: 0;"> <span style="font-weight: bold; margin-right: 5px; white-space: nowrap; color: #007bff;">← 이전:</span> <span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">📚 PHP 초급 - 6주차: 배열 - 03 다차원 배열</span> </a> <a href="detailview.php?fno=53330" style="flex: 1; display: flex; align-items: center; justify-content: flex-end; padding: 12px; text-decoration: none; color:#555; min-width: 0;"> <span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right;">📚 PHP 초급 - 7주차: HTML 폼 처리 및 GET/POST 방식 - 02 GET, POST 메서드의 이해</span> <span style="font-weight: bold; margin-left: 5px; white-space: nowrap; color: tomato">이후 →</span> </a> </div> </div> <div> <div style="font-weight: bold; margin-bottom: 8px; color: #555; border-left: 3px solid #555; padding-left: 10px;">전체 카테고리 Navigation</div> <div style="display: flex; border: 1px solid #e1e1e1; border-radius: 4px; background: #fcfcfc;"> <a href="detailview.php?fno=53328" style="flex: 1; display: flex; align-items: center; padding: 12px; text-decoration: none; color:#555; border-right: 1px solid #eee; min-width: 0;"> <span style="font-weight: bold; margin-right: 5px; white-space: nowrap; color: #007bff;">← 이전:</span> <span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">📚 PHP 초급 - 6주차: 배열 - 03 다차원 배열</span> </a> <a href="detailview.php?fno=53330" style="flex: 1; display: flex; align-items: center; justify-content: flex-end; padding: 12px; text-decoration: none; color:#555; min-width: 0;"> <span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right;">📚 PHP 초급 - 7주차: HTML 폼 처리 및 GET/POST 방식 - 02 GET, POST 메서드의 이해</span> <span style="font-weight: bold; margin-left: 5px; white-space: nowrap; color: tomato">이후 →</span> </a> </div> </div> </div> </div> </div> <div style="width:1100px;">  <ins class="adsbygoogle" style="display:inline-block;width:1100px;height:90px" data-ad-client="ca-pub-9600270133262240" data-ad-slot="5352160161"></ins> <script>setTimeout(function() { (adsbygoogle = window.adsbygoogle || []).push({});}, 0);</script> </div> <table width='1100' border='0' cellpadding='0' cellspacing='0'> <tr> <td align='center'> <img src='https://pds.luzensoft.co.kr/images/bottom/bottom.jpg'> </td> </tr> </table> </body> </CENTER> </html> <script> // 참고: CSS의 aspect-ratio 속성을 지원하는 최신 브라우저에서는 // .video-container { aspect-ratio: 16 / 9; } 또는 // .video-container { aspect-ratio: var(--aspect-ratio, 16 / 9); } // 로 더 간단하게 구현할 수 있습니다. // 이 CSS 속성을 사용하면 padding-bottom 트릭이 필요 없어집니다. // 브라우저 호환성을 확인하세요. /* document Ready */ $(document).ready(function () { const codeBlocks = document.querySelectorAll('pre > code'); codeBlocks.forEach(codeBlock => { // 이미 language- 클래스가 없다면 언어 감지 로직 실행 if (!codeBlock.className.match(/language-/)) { const detectedLanguage = detectLanguage(codeBlock.innerText); if (detectedLanguage) { codeBlock.classList.add(`language-${detectedLanguage}`); // console.log(`Detected language for block: ${detectedLanguage}`); // 디버깅용 } else { // 언어 감지에 실패했을 경우, 기본값(plaintext)을 지정하거나 아무것도 하지 않을 수 있습니다. codeBlock.classList.add('language-plaintext'); // 감지 실패 시 일반 텍스트로 처리 // console.log('Language not detected, defaulting to plaintext.'); } } }); // Prism.js가 동적으로 추가된 클래스를 인식하도록 하이라이팅 재실행 // 이 스크립트가 Prism.js 라이브러리 파일보다 나중에 로드된다면 필수적입니다. if (typeof Prism !== 'undefined') { Prism.highlightAll(); } // 2-1. content-view 아이디를 가진 요소 안의 모든 a 태그를 선택 const links = document.querySelectorAll('#content-view a'); // 2-2. 반복문을 통해 각 태그에 target="_blank" 속성 부여 links.forEach(link => { link.setAttribute('target', '_blank'); // 보안을 위해 rel="noopener noreferrer" 추가 권장 (새 창 제어 방지) link.setAttribute('rel', 'noopener noreferrer'); }); }); </script> <script> // 💡 구글 애드센스 광고 코드 (예시) // 실제 광고 코드는 애드센스 대시보드에서 받은 코드를 사용해야 합니다. const ADSENSE_CODE = ` <ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-9600270133262240" data-ad-slot="3567213440"></ins> `; const downloadButton = document.getElementById('download-button'); const downloadButtonHomeDown = document.getElementById('download-button-home-down'); const adsenseContainer = null; //document.getElementById('adsense-container'); // 26.02.07 다운로드 버튼 못누르는 상황이 있어서 기능 비활성화 let isAdLoaded = false; // 광고가 이미 로드되었는지 확인하는 플래그 if (downloadButton && adsenseContainer) { // 마우스 오버 이벤트 리스너 추가 downloadButton.addEventListener('mouseover', function() { // 광고가 아직 로드되지 않은 경우에만 실행 if (!isAdLoaded) { // 1. 광고 컨테이너를 표시합니다. adsenseContainer.style.display = 'block'; adsenseContainer.style.minHeight = '100px'; // 2. 광고 코드를 컨테이너에 삽입합니다. adsenseContainer.innerHTML = ADSENSE_CODE; // 3. 구글 광고 스크립트를 로드하여 광고를 실제로 렌더링합니다. // (window.adsbygoogle.push({})를 호출하는 역할) if (typeof (window.adsbygoogle) != 'undefined') { setTimeout(function() {window.adsbygoogle.push({})}, 500); } else { console.error("AdSense 스크립트가 로드되지 않았습니다. <head>에 애드센스 스크립트 태그를 확인하세요."); } // 4. 광고가 로드되었음을 표시하여 다음 오버 시에는 실행되지 않게 합니다. isAdLoaded = true; //console.log('AdSense 광고가 로드되었습니다.'); } }); } if (downloadButtonHomeDown && adsenseContainer) { // 마우스 오버 이벤트 리스너 추가 downloadButtonHomeDown.addEventListener('mouseover', function() { // 광고가 아직 로드되지 않은 경우에만 실행 if (!isAdLoaded) { // 1. 광고 컨테이너를 표시합니다. adsenseContainer.style.display = 'block'; adsenseContainer.style.minHeight = '100px'; // 2. 광고 코드를 컨테이너에 삽입합니다. adsenseContainer.innerHTML = ADSENSE_CODE; // 3. 구글 광고 스크립트를 로드하여 광고를 실제로 렌더링합니다. // (window.adsbygoogle.push({})를 호출하는 역할) if (typeof (window.adsbygoogle) != 'undefined') { setTimeout(function() {window.adsbygoogle.push({})}, 500); } else { console.error("AdSense 스크립트가 로드되지 않았습니다. <head>에 애드센스 스크립트 태그를 확인하세요."); } // 4. 광고가 로드되었음을 표시하여 다음 오버 시에는 실행되지 않게 합니다. isAdLoaded = true; //console.log('AdSense 광고가 로드되었습니다.'); } }); } </script>

온라인 강의

PHP - 초급

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

자료 기본정보

주요 프로그램 스펙

피드백 및 다운로드

제조사 및 등록 정보

- 설명

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

HTML 폼(Form)이란?

기본적인 HTML 폼 구조

태그의 주요 속성

주요 입력 요소 (Input Elements)