예제 및 동작 원리

약 5분

본문 듣기

예제 및 동작 원리

이번 단원에서는 HTML 폼을 통해 사용자와 상호작용 할 수 있는 방법을 배우고, 실제 예제를 통해 동작 원리를 이해해볼 것입니다. 폼은 웹 페이지에서 사용자로부터 정보를 받을 수 있는 중요한 도구입니다. 그러니 확실히 익혀두세요!

HTML 폼 기본 구조

HTML 폼의 기본 구조는 다음과 같습니다. 폼을 만들기 위해서는 <form> 태그를 사용합니다. 이 안에 다양한 입력 필드를 넣을 수 있습니다.

코드 html

<form action="/submit" method="post">
    <label for="name">이름:</label>
    <input type="text" id="name" name="name">
    <input type="submit" value=" 제출하기 ">
</form>

// 설명: <form> 태그는 사용자 입력을 받을 수 있도록 설정합니다.
// action은 데이터 제출 시 보낼 URL을 정의하고,
// method는 데이터 전송 방식을 정의합니다.

위의 코드에서 <label> 태그는 사용자에게 입력해야 할 내용을 설명합니다. <input> 태그는 실제로 정보를 입력하게 하는 영역입니다. type="text"는 사용자가 텍스트를 입력할 수 있는 필드입니다. 마지막으로 <input type="submit">은 폼을 제출하는 버튼입니다.

실습 - 간단한 폼 만들기

이제 여러분이 직접 간단한 폼을 만들어 보겠습니다. VS Code를 열고 아래의 단계를 따라 해주세요.

VS Code에서 새 파일을 만들고 index.html로 저장합니다.
다음 코드를 복사하여 붙여넣습니다.

코드 html

<!DOCTYPE html>
<html>
<head>
    <title>나의 첫 번째 폼</title>
</head>
<body>
    <h1>자기소개 폼</h1>
    <form action="/submit" method="post">
        <label for="name">이름:</label>
        <input type="text" id="name" name="name">
        <br>
        <label for="age">나이:</label>
        <input type="number" id="age" name="age">
        <br>
        <input type="submit" value="제출하기">
    </form>
</body>
</html> 

// 설명: 이 코드는 사용자에게 이름과 나이를 입력받는 폼을 만듭니다.

파일을 저장하고 브라우저에서 index.html을 열어 보세요.
이름과 나이를 입력한 후 "제출하기" 버튼을 눌러봅니다.
- 사실 이 코드에서는 데이터를 실제로 서버에 보내지는 않지만, 여러분이 개발하는 페이지에서 사용자 입력을 받는 기초는 확실히 익힐 수 있습니다!

핵심 요약

HTML 폼은 사용자의 정보 입력을 받을 수 있는 구조이다.
<form>, <label>, <input> 태그를 조합하여 폼을 만든다.
사용자와의 상호작용을 가능하게 한다.

실습 문제

자신만의 폼을 만들어보세요!

전화번호를 입력받는 필드를 추가해보세요.
이메일 입력 필드를 추가하고, type="email" 속성을 사용해봅시다.

개인 프로젝트 - 자기소개 페이지 만들기

이제 여러분의 창의력을 발휘할 시간입니다! 자기소개 페이지를 만들어 보세요. 아래의 요소를 포함해야 합니다.

이름, 나이, 이메일, 전화번호를 입력받는 폼 만들기
자신에 대한 간단한 설명을 나타내는 텍스트 영역 만들기
‘제출하기’ 버튼을 추가해 제출할 수 있도록 하세요.
- 만든 후, 브라우저에서 테스트해보세요!
- 이 프로젝트는 간단하지만, HTML 폼에 대한 이해를 높일 수 있는 좋은 기회입니다. 여러분의 멋진 자기소개 페이지를 기대합니다!

예제 및 동작 원리