PHP Academy · 강의

HTML 양식 만들기

사용자 입력을 받는 양식을 만들어 보세요

HTML 양식 만들기은(는) CoddyKit의 무료 PHP Academy 강의입니다. 이것은 3개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 PHP Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. PHP Academy 강의에는 총 3개의 강의가 포함되어 있습니다.

HTML로 폼 만들기

HTML 폼 만들기

다음 수업에 오신 것을 환영합니다! 이번 수업에서는 HTML을 사용해 폼을 만드는 방법을 배웁니다. 폼은 사용자 입력을 수집하는 데 필수적이며, 수집한 입력은 나중에 PHP로 처리할 수 있습니다. 시작해 봅시다!

HTML 폼이란 무엇인가요?

HTML 폼은 사용자 입력을 수집하는 데 사용됩니다. 사용자는 폼을 통해 필드에 내용을 입력하고, 항목을 선택하고, 처리를 위해 서버에 데이터를 제출할 수 있습니다.

예: 사용자가 사용자 이름과 비밀번호를 입력하는 로그인 폼

핵심 사항: 폼은 사용자와 PHP 스크립트 사이를 연결하는 다리 역할을 합니다.

간단한 폼 만들기

다음과 같이 기본 HTML 폼을 만들 수 있습니다.

설명:

action: 폼 데이터를 처리할 PHP 파일을 지정합니다.
method: 데이터를 전송하는 방법(GET 또는 POST)을 지정합니다.
required: 제출하기 전에 해당 필드를 반드시 작성하도록 합니다.

<form action="process.php" method="POST">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required>
  <button type="submit">Submit</button>
</form>

폼 요소

폼에는 다양한 종류의 데이터를 수집하기 위해 여러 입력 유형을 포함할 수 있습니다.

text: 한 줄 텍스트를 입력할 때 사용합니다.
email: 이메일 주소를 입력할 때 사용합니다.
password: 비밀번호를 입력할 때 사용합니다.
checkbox: 여러 항목을 선택할 때 사용합니다.
radio: 하나의 항목을 선택할 때 사용합니다.
submit: 폼을 제출할 때 사용합니다.

예:

<form action="submit.php" method="POST">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  <br>
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" required>
  <br>
  <button type="submit">Login</button>
</form>

라디오 버튼 사용하기

라디오 버튼을 사용하면 그룹에서 하나의 옵션을 선택할 수 있습니다. 예:

팁: 한 그룹에 속한 모든 라디오 버튼에 같은 name 속성을 사용하세요.

<form action="submit.php" method="POST">
  <p>Choose your favorite color:</p>
  <input type="radio" id="red" name="color" value="Red">
  <label for="red">Red</label>
  <br>
  <input type="radio" id="blue" name="color" value="Blue">
  <label for="blue">Blue</label>
  <br>
  <button type="submit">Submit</button>
</form>

체크박스 사용하기

체크박스를 사용하면 여러 옵션을 선택할 수 있습니다. 예:

팁: 여러 값을 수집하려면 배열 구문(hobbies[])을 사용하세요.

<form action="submit.php" method="POST">
  <p>Select your hobbies:</p>
  <input type="checkbox" id="reading" name="hobbies[]" value="Reading">
  <label for="reading">Reading</label>
  <br>
  <input type="checkbox" id="traveling" name="hobbies[]" value="Traveling">
  <label for="traveling">Traveling</label>
  <br>
  <button type="submit">Submit</button>
</form>

선택 드롭다운

드롭다운 메뉴를 사용하면 목록에서 하나의 옵션을 선택할 수 있습니다. 예:

팁: 기본 옵션을 설정하려면 selected를 사용하세요.

<form action="submit.php" method="POST">
  <label for="country">Choose your country:</label>
  <select id="country" name="country">
    <option value="USA">USA</option>
    <option value="Canada">Canada</option>
    <option value="UK">UK</option>
  </select>
  <br>
  <button type="submit">Submit</button>
</form>

폼 접근성

모든 사용자가 폼을 이용할 수 있도록 하세요.

for 속성을 사용해 입력 요소와 연결된 label 태그를 사용하세요.
fieldset과 legend를 사용해 관련 입력 요소를 그룹화하세요.
모바일 기기에서 사용하기 편리한지 폼을 테스트하세요.

팁: 접근성이 좋은 폼은 모든 사용자의 사용자 경험을 향상합니다!

잘하셨습니다!

축하합니다! 텍스트 필드, 라디오 버튼, 체크박스, 드롭다운 등 다양한 입력 유형을 사용해 HTML 폼을 만드는 방법을 배웠습니다. 폼은 웹 개발에서 사용자 입력을 처리하는 기반입니다. 다음 수업에서는 PHP를 사용해 폼 데이터를 처리하는 방법을 배웁니다. 계속 코딩해 봅시다!

자주 묻는 질문

“HTML 양식 만들기” 강의는 무료인가요?

네 — “HTML 양식 만들기” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 PHP Academy 강의 전체를 잠금 해제할 수 있습니다. PHP Academy 강의에는 총 3개의 강의가 포함되어 있습니다.

“HTML 양식 만들기”에서 뭘 배우나요?

사용자 입력을 받는 양식을 만들어 보세요 브라우저에서 직접 실행하는 실습 코드로 PHP Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

PHP Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 PHP Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 3개 중 1번째 강의입니다.

“HTML 양식 만들기” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 PHP Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 PHP Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← PHP Academy(으)로 돌아가기