Mini Project. 설문조사 양식 만들기(HTML:1일차 과제+@)

프로젝트

Mini Project. 설문조사 양식 만들기(HTML:1일차 과제+@)

Chansman 2025. 3. 28. 23:45

설문조사 양식 만들기: 학원 선택 시 중요한 요소를 알아보세요

1. 설문조사 소개

이 설문조사는 학원 선택 시 가장 중요한 요소를 알아보기 위한 웹사이트 설문 양식입니다. 학원을 선택할 때 위치, 학원비, 강사, 시설 등 다양한 기준이 중요합니다. 이 설문에서는 그와 관련된 항목들을 묻고 있습니다.

2. 설문 양식 구성

설문 양식은 크게 개인 정보와 설문 항목으로 나눠져 있습니다. 각 항목은 사용자가 쉽게 응답할 수 있도록 구성되어 있습니다.

2.1 개인 정보 입력

먼저, 설문을 작성하는 사람의 이름과 이메일을 입력받습니다.

<fieldset style="border: 2px solid black; padding: 10px;">
    <legend>개인 정보</legend>
    <label for="name">이름:</label>
    <input type="text" id="name" name="name" placeholder="이름을 입력하세요">
    <br>
    <label for="email">이메일:</label>
    <input type="email" id="email" name="email" placeholder="이메일을 입력하세요">
</fieldset>

<label>: 사용자가 입력해야 할 항목에 대한 설명을 제공합니다.
<input>: 사용자가 입력할 수 있는 필드를 만듭니다. text는 이름을, email은 이메일을 받는 필드입니다.

2.2 설문 항목

설문 항목은 여러 가지 질문으로 나뉘어 있으며, 각 항목은 라디오 버튼 또는 체크박스를 통해 사용자가 선택할 수 있습니다.

2.2.1 연령대 질문

사용자의 연령대를 묻는 항목입니다. radio 버튼을 사용하여 한 가지 옵션만 선택할 수 있도록 합니다.

<p>연령대가 어떻게 되십니까?</p>
<input type="radio" id="age10" name="age" value="10대">
<label for="age10">10대</label>
<input type="radio" id="age20" name="age" value="20대">
<label for="age20">20대</label>
<input type="radio" id="age30" name="age" value="30대">
<label for="age30">30대</label>
<input type="radio" id="age40" name="age" value="40대">
<label for="age40">40대</label>
<input type="radio" id="age50" name="age" value="50대">
<label for="age50">50대</label>
<input type="radio" id="other" name="age" value="그 외">
<label for="other">그 외</label>

라디오 버튼은 한 번에 하나만 선택할 수 있습니다. 예를 들어, 사용자는 자신이 속한 연령대만 선택하면 됩니다.

2.2.2 학원 선택 기준 질문

다음으로 학원 선택 시 중요한 요소를 묻는 항목입니다. 체크박스를 사용하여 여러 가지 옵션을 선택할 수 있습니다.

html

복사

<p>학원을 선택할 때 가장 중요하게 생각하는 것은 무엇입니까? 모두 고르시오.</p>
<input type="checkbox" id="location" name="academy" value="위치">
<label for="location">위치</label>
<input type="checkbox" id="fee" name="academy" value="학원비">
<label for="fee">학원비</label>
<input type="checkbox" id="instructor" name="academy" value="강사">
<label for="instructor">강사</label>
<input type="checkbox" id="infra" name="academy" value="시설">
<label for="infra">시설</label>

체크박스는 여러 항목을 선택할 수 있도록 합니다. 사용자는 위치, 학원비, 강사, 시설 중 여러 가지를 선택할 수 있습니다.

2.3 기타 의견

설문 후에는 기타 의견을 작성할 수 있는 공간을 제공합니다. <textarea> 태그를 사용하여 긴 텍스트를 입력할 수 있습니다.

<fieldset style="border: 2px solid black; padding: 10px;">
    <legend>기타 의견</legend>
    <textarea id="comments" name="comments" rows="4" cols="75" placeholder="기타 의견을 작성하세요"></textarea>
</fieldset>

**<textarea>**는 여러 줄에 걸쳐 텍스트를 입력할 수 있는 필드입니다. 사용자가 자유롭게 의견을 쓸 수 있도록 합니다.

3. 제출 버튼

마지막으로 제출 버튼을 제공합니다. 사용자가 모든 항목을 작성하고 submit 버튼을 눌러 설문을 제출할 수 있습니다.

<input type="submit">

4. HTML 코드 전체 구조

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="설문조사 웹사이트 - 학원 선택 시 중요한 요소를 알아보세요.">
    <meta name="keywords" content="학원, 설문조사, 학원 선택, 교육, 웹사이트">
    <title>설문조사 양식</title>
</head>
<body>
    <header>
        <h1>설문조사 양식</h1>
        <p>모든 항목에 빠짐없이 체크해주십시오.</p>
    </header>
    <hr>
    <main>
        <form>
            <!-- 개인정보 -->
            <fieldset style="border: 2px solid black; padding: 10px;">
                <legend>개인 정보</legend>
                <label for="name">이름:</label>
                <input type="text" id="name" name="name" placeholder="이름을 입력하세요">
                <br>
                <label for="email">이메일:</label>
                <input type="email" id="email" name="email" placeholder="이메일을 입력하세요">
            </fieldset>

            <!-- 설문 -->
            <fieldset style="border: 2px solid black; padding: 10px;">
                <legend>설문</legend>
                <p>연령대가 어떻게 되십니까?</p>
                <input type="radio" id="age10" name="age" value="10대">
                <label for="age10">10대</label>
                <input type="radio" id="age20" name="age" value="20대">
                <label for="age20">20대</label>
                <input type="radio" id="age30" name="age" value="30대">
                <label for="age30">30대</label>
                <input type="radio" id="age40" name="age" value="40대">
                <label for="age40">40대</label>
                <input type="radio" id="age50" name="age" value="50대">
                <label for="age50">50대</label>
                <input type="radio" id="other" name="age" value="그 외">
                <label for="other">그 외</label>
                <br><br>
                <p>학원을 선택할 때 가장 중요하게 생각하는 것은 무엇입니까? 모두 고르시오.</p>
                <input type="checkbox" id="location" name="academy" value="위치">
                <label for="location">위치</label>
                <input type="checkbox" id="fee" name="academy" value="학원비">
                <label for="fee">학원비</label>
                <input type="checkbox" id="instructor" name="academy" value="강사">
                <label for="instructor">강사</label>
                <input type="checkbox" id="infra" name="academy" value="시설">
                <label for="infra">시설</label>
            </fieldset>

            <!-- 기타 의견 -->
            <fieldset style="border: 2px solid black; padding: 10px;">
                <legend>기타 의견</legend>
                <textarea id="comments" name="comments" rows="4" cols="75" placeholder="기타 의견을 작성하세요"></textarea>
            </fieldset>
            <input type="submit">
        </form>
    </main>
    <hr>
    <footer>
        <p>입력하느라 수고하셨습니다.</p>
    </footer>
</body>
</html>

5. 마무리

이 설문 양식은 사용자가 개인 정보를 입력하고, 연령대와 학원 선택 기준을 선택한 후, 기타 의견을 남길 수 있는 웹 폼입니다. 설문을 통해 학원 선택 시 중요한 요소를 파악할 수 있는 유용한 도구입니다.