폼 (HTML)

"오늘의AI위키"는 AI 기술로 일관성 있고 체계적인 최신 지식을 제공하는 혁신 플랫폼입니다.
"오늘의AI위키"의 AI를 통해 더욱 풍부하고 폭넓은 지식 경험을 누리세요.

1. 개요

HTML 폼은 사용자가 데이터를 입력하고 선택할 수 있도록 다양한 종류의 컨트롤(입력 요소)을 제공하며, 웹 페이지에서 사용자 입력을 수집하는 데 사용되는 HTML 요소이다. 텍스트 입력, 선택형 컨트롤, 버튼, 파일 선택 등 다양한 종류의 컨트롤을 포함하며, `

` 태그로 정의하고, ``, `

`, `<select>` 등의 태그를 사용하여 개별 컨트롤을 생성한다. 폼에 입력된 데이터는 HTTP 요청을 통해 서버로 전송되며, 서버 측 코드를 사용하여 처리한다. 폼 데이터 처리 시 보안에 유의해야 하며, 다양한 프로그래밍 언어와 연동하여 동적인 웹사이트를 만들 수 있다. HTML 폼은 ViolaWWW 브라우저에 의해 처음 구현되었다.
                </p>
        </div>
        
        <style>
            .wiki-center-ad { display: block; width: 780px; height: 250px; margin: 0 auto; }
            @media (max-width: 1020px) { .wiki-center-ad { width: 600px; height: 314px; } }
            @media (min-width: 640px) and (max-width: 900px) { .wiki-center-ad { width: 780px; height: 250px; } }
            @media (max-width: 639px) { .wiki-center-ad { width: 100%; height: auto; min-height: 250px; } }
        </style>
        <div class="wiki-ad-area" id="wiki-center-ad" style="width: 100%; text-align: center;">
            
        </div>
        
        <div class="mobile-visible-infobox">
    
    <div class="infobox">
        <div class="infobox-header">폼 (HTML)</div>
    </div>
</div>
        
        
        <section class="read-more-section">
            <div class="read-more-title"><span style="font-size: 1.2rem">📚</span> 더 읽어볼만한 페이지</div>
            <ul class="read-more-list">
                    <li>
                        <span class="read-more-category">HTML 태그 - </span>
                        <a href="/w/HTML_%EC%9A%94%EC%86%8C"><strong>HTML 요소</strong></a><br />
                        <span class="read-more-summary">HTML 요소는 HTML 문서의 기본 단위로서, 시작 태그와 종료 태그, 그리고 콘텐츠를 포함하며, 일반 요소, 원시 텍스트 요소, 빈 요소로 나뉘고 콘텐츠 범주에 따라 포함 가능한 콘텐츠 종류가 결정된다.</span>
                    </li>
                    <li>
                        <span class="read-more-category">HTML 태그 - </span>
                        <a href="/w/%EC%BA%94%EB%B2%84%EC%8A%A4_%EC%9A%94%EC%86%8C"><strong>캔버스 요소</strong></a><br />
                        <span class="read-more-summary">캔버스 요소는 HTML 내에서 그래픽을 그릴 수 있는 영역으로, 자바스크립트를 사용하여 그림을 그리며, 그래프, 애니메이션, 게임 등에 활용되고 래스터 기반으로 즉시 모드로 그려진다.</span>
                    </li>
                    <li>
                        <span class="read-more-category">HTML - </span>
                        <a href="/w/Alt_%EC%86%8D%EC%84%B1"><strong>Alt 속성</strong></a><br />
                        <span class="read-more-summary">`alt` 속성은 HTML의 `img` 및 `area` 태그에서 이미지를 로드할 수 없을 때 대체 텍스트를 지정하며, 스크린 리더 및 SEO에 영향을 미치고, W3C 지침에 따라 이미지의 의미를 전달하거나 장식용 이미지는 빈 문자열로 지정해야 한다.</span>
                    </li>
                    <li>
                        <span class="read-more-category">HTML - </span>
                        <a href="/w/%ED%8F%B0%ED%8A%B8_%ED%8C%A8%EB%B0%80%EB%A6%AC_(HTML)"><strong>폰트 패밀리 (HTML)</strong></a><br />
                        <span class="read-more-summary">폰트 패밀리(HTML)는 CSS 스타일 시트, 인라인 CSS, HTML `font` 태그를 통해 웹 페이지 글꼴을 지정하는 방법으로, 사용자 기기에 설치된 글꼴에 따라 표현이 달라지며, CSS의 `font-family` 속성은 글꼴 모양을 식별하고 제네릭 폰트와 글꼴 대체 메커니즘을 통해 일관된 글꼴 표현을 가능하게 한다.</span>
                    </li>
                    <li>
                        <span class="read-more-category">그래픽 사용자 인터페이스 - </span>
                        <a href="/w/%EB%A9%94%ED%8A%B8%EB%A1%9C_(%EB%94%94%EC%9E%90%EC%9D%B8_%EC%96%B8%EC%96%B4)"><strong>메트로 (디자인 언어)</strong></a><br />
                        <span class="read-more-summary">마이크로소프트가 스위스 그래픽 디자인과 런던 지하철 표지판에서 영감을 받아 개발한 메트로 디자인 언어는 큰 텍스트, 간결한 타이포그래피, 라이브 타일 등의 특징을 가지며 Windows, Xbox, Microsoft Office 등 다양한 제품에 적용되었고, 상표권 문제와 함께 명칭 변경 및 MDL2로 진화하며 사용자 경험에 대한 엇갈린 평가를 받았다.</span>
                    </li>
                    <li>
                        <span class="read-more-category">그래픽 사용자 인터페이스 - </span>
                        <a href="/w/%EC%9E%91%EC%97%85_%ED%91%9C%EC%8B%9C%EC%A4%84"><strong>작업 표시줄</strong></a><br />
                        <span class="read-more-summary">작업 표시줄은 윈도우 운영체제에서 화면 하단에 위치하여 프로그램 실행, 창 관리, 시스템 상태 확인 기능을 제공하는 사용자 인터페이스 요소이며, 윈도우 95부터 도입되어 다양한 사용자 정의 설정을 지원하며 발전해 왔다.</span>
                    </li>
            </ul>
        </section>
        
        <div class="wiki-toc">
            <div class="wiki-toc-title">목차</div>
            <ul><li><a href="#sec-1">1. 개요</a></li><li><a href="#sec-2">2. 주요 컨트롤 종류와 기능</a><ul><li><a href="#sec-2-1">2.1. 텍스트 입력</a></li><li><a href="#sec-2-2">2.2. 선택형 컨트롤</a></li><li><a href="#sec-2-3">2.3. 버튼</a></li><li><a href="#sec-2-4">2.4. 기타 컨트롤</a></li></ul></li><li><a href="#sec-3">3. HTML 태그</a><ul><li><a href="#sec-3-1">3.1. <form> 태그</a></li><li><a href="#sec-3-2">3.2. <input> 태그</a></li><li><a href="#sec-3-3">3.3. <textarea> 태그</a></li><li><a href="#sec-3-4">3.4. <select> 태그</a></li><li><a href="#sec-3-5">3.5. <label> 태그</a></li></ul></li><li><a href="#sec-4">4. 데이터 전송 및 처리</a></li><li><a href="#sec-5">5. 프로그래밍 언어와의 연동</a></li><li><a href="#sec-6">6. 보안</a></li><li><a href="#sec-7">7. 역사</a></li></ul>
        </div>
        
            <div class="wiki-text">
                <h2 id="sec-2" class="">
                    2. 주요 컨트롤 종류와 기능
                </h2>
                <p>HTML 폼은 사용자가 정보를 입력하고 선택할 수 있도록 다양한 컨트롤(입력 요소)을 제공한다. 주요 컨트롤은 다음과 같다.<ref name="wiki-1"/><br /><br />*   <b>텍스트 입력</b>: 한 줄 또는 여러 줄의 텍스트를 입력할 수 있다.<br />*   <b>선택형 컨트롤</b>: <a href="/w/%EC%B2%B4%ED%81%AC_%EC%83%81%EC%9E%90">체크 상자</a>, <a href="/w/%EB%9D%BC%EB%94%94%EC%98%A4_%EB%8B%A8%EC%B6%94">라디오 단추</a>, 메뉴, 드롭다운 목록 등을 통해 여러 항목 중 하나 또는 여러 개를 선택할 수 있다.<br />*   <b>버튼</b>: 제출 버튼(폼에 입력된 내용을 서버로 전송), 리셋 버튼(폼의 내용을 초기값으로 되돌림), 푸시 버튼(미리 작성된 <a href="/w/%ED%81%B4%EB%9D%BC%EC%9D%B4%EC%96%B8%ED%8A%B8_%EC%82%AC%EC%9D%B4%EB%93%9C">클라이언트 사이드</a> <a href="/w/%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8_%EC%96%B8%EC%96%B4">스크립트</a> 실행) 등이 있다.<br />*   <b>기타 컨트롤</b>: 파일 선택 (<a href="/w/%ED%81%B4%EB%9D%BC%EC%9D%B4%EC%96%B8%ED%8A%B8_%EC%82%AC%EC%9D%B4%EB%93%9C">클라이언트 컴퓨터</a>에 있는 <a href="/w/%EC%BB%B4%ED%93%A8%ED%84%B0_%ED%8C%8C%EC%9D%BC">파일</a>을 <a href="/w/%EC%84%9C%EB%B2%84">서버</a>에 <a href="/w/%EC%97%85%EB%A1%9C%EB%93%9C">업로드</a>), 히든 컨트롤 (<a href="/w/%EC%9B%B9_%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80">웹 브라우저</a> 화면에는 렌더링되지 않지만, 값은 서버로 전송), 오브젝트 컨트롤(표준에서 정의되지 않은 컨트롤도 사용 가능) 등이 있다.<br /><br /><a href="/w/HTML">HTML</a> 폼은 `<form>` 요소로 묶이며, 입력된 데이터가 제출될 통신 종점과 HTTP 요청의 HTTP 메서드(GET 또는 POST)를 지정한다.</p>
            </div>
            <div class="wiki-text">
                <h3 id="sec-2-1" class="">
                    2.1. 텍스트 입력
                </h3>
                <p>사용자가 텍스트를 입력할 수 있는 컨트롤은 다음과 같다.<br /><br />*   `<text>`: 한 줄의 텍스트 입력을 허용하는 간단한 <a href="/w/%ED%85%8D%EC%8A%A4%ED%8A%B8_%EC%83%81%EC%9E%90">텍스트 상자</a>이다.<br />*   `<email>`: 이메일 주소를 입력하는 `<text>` 유형으로, 부분적인 유효성 검사가 필요하다.<br />*   `<number>`: 숫자를 입력하는 `<text>` 유형이다.<br />*   `<password>`: `<text>`와 유사하며, 입력된 문자가 보이지 않거나 `*`와 같은 기호로 대체되어 보안 목적으로 사용된다.<br />*   `<textarea>`: 여러 줄의 텍스트를 표시하고 입력할 수 있는 입력 필드이다.<br />*   텍스트 입력 (text input<sup>영어</sup>): 사용자에게 한 줄 혹은 여러 줄의 텍스트를 입력하게 한다.<ref name="wiki-1"/><br /><br /><a href="/w/HTML">HTML</a>5는 이메일 주소를 입력하기 위한 `<email>`, 전화번호를 위한 `<tel>`, 숫자 값을 위한 `<number>` 등 특정 데이터를 입력하고 유효성을 검사하기 위한 여러 입력 태그를 도입했다.<ref name="wiki-2"/><ref name="wiki-3"/></p>
            </div>
            <div class="wiki-text">
                <h3 id="sec-2-2" class="">
                    2.2. 선택형 컨트롤
                </h3>
                <p><figure class="wiki-thumb"><img src="/wiki/source/1951877e61c_cec527d6?w=300" srcset="/wiki/source/1951877e61c_cec527d6?w=300 300w, /wiki/source/1951877e61c_cec527d6?w=450 450w, /wiki/source/1951877e61c_cec527d6?w=600 600w" sizes="(max-width: 768px) 100vw, 300px" alt="모질라 파이어폭스에서의 샘플 폼. (클릭해서 소스 코드를 확인할 수 있다)" loading="lazy" /><figcaption class="wiki-thumb-caption"><a href="/w/%EB%AA%A8%EC%A7%88%EB%9D%BC_%ED%8C%8C%EC%9D%B4%EC%96%B4%ED%8F%AD%EC%8A%A4">모질라 파이어폭스</a>에서의 샘플 폼. (클릭해서 <a href="/w/HTML">소스 코드</a>를 확인할 수 있다)</figcaption></figure><br /><br />사용자가 여러 항목 중 하나 또는 여러 개를 선택할 수 있는 컨트롤은 다음과 같다.<br /><br />*   <b><a href="/w/%EC%B2%B4%ED%81%AC_%EC%83%81%EC%9E%90">체크 상자</a>(checkbox<sup>영어</sup>)</b> : 여러 선택지 중에서 원하는 만큼 선택할 수 있다.<ref name="wiki-1"/><br />*   <b><a href="/w/%EB%9D%BC%EB%94%94%EC%98%A4_%EB%8B%A8%EC%B6%94">라디오 단추</a>(radio buttons<sup>영어</sup>)</b> : 여러 선택지 중에서 하나만 선택할 수 있다.<ref name="wiki-1"/><br />*   <b>메뉴(menu<sup>영어</sup>)</b> : 선택 항목 중에서 하나 또는 여러 개를 선택할 수 있다.<ref name="wiki-1"/><br />*   <b>드롭다운 목록</b> : 사용자가 선택할 수 있는 항목 목록이 아래로 펼쳐지는 방식이다. `<select>` 태그를 사용한다.<br /><br />오른쪽 샘플 이미지에서 선택형 컨트롤의 예를 확인할 수 있다.<br /><br />*   성별을 선택하는 라디오 버튼 한 쌍<br />*   눈 색깔을 선택하는 드롭다운 목록 (선택 상자)<br />*   해당하는 항목을 선택하는 체크 박스 한 쌍</p>
            </div>
            <div class="wiki-text">
                <h3 id="sec-2-3" class="">
                    2.3. 버튼
                </h3>
                <p>* 제출 버튼(submit button<sup>영어</sup>): 사용자가 실행하면 폼에 입력된 내용을 서버로 전송한다.<ref name="wiki-1"/><br />* 리셋 버튼(reset button<sup>영어</sup>): 사용자가 실행하면 폼의 내용을 초기값으로 되돌린다.<ref name="wiki-1"/><br />* 푸시 버튼(push button<sup>영어</sup>): 사용자가 실행하면 미리 작성된 <a href="/w/%ED%81%B4%EB%9D%BC%EC%9D%B4%EC%96%B8%ED%8A%B8_%EC%82%AC%EC%9D%B4%EB%93%9C">클라이언트 사이드</a> <a href="/w/%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8_%EC%96%B8%EC%96%B4">스크립트</a>를 실행한다.<ref name="wiki-1"/></p>
            </div>
            <div class="wiki-text">
                <h3 id="sec-2-4" class="">
                    2.4. 기타 컨트롤
                </h3>
                <p>* 제출 버튼(submit button<sup>영어</sup>): 사용자가 실행하면 폼에 입력된 내용을 서버로 전송한다.<br />* 리셋 버튼(reset button<sup>영어</sup>): 사용자가 실행하면 폼의 내용을 초기값으로 되돌린다.<br />* 푸시 버튼(push button<sup>영어</sup>): 사용자가 실행하면 미리 작성된 <a href="/w/%ED%81%B4%EB%9D%BC%EC%9D%B4%EC%96%B8%ED%8A%B8_%EC%82%AC%EC%9D%B4%EB%93%9C">클라이언트 사이드</a> <a href="/w/%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8_%EC%96%B8%EC%96%B4">스크립트</a>를 실행한다.<br />* <a href="/w/%EC%B2%B4%ED%81%AC_%EC%83%81%EC%9E%90">체크 상자</a>(checkbox<sup>영어</sup>): 사용자에게 여러 선택지 중에서 원하는 만큼 선택하게 한다.<br />* <a href="/w/%EB%9D%BC%EB%94%94%EC%98%A4_%EB%8B%A8%EC%B6%94">라디오 단추</a>(radio buttons<sup>영어</sup>): 사용자에게 여러 선택지 중에서 하나만 선택하게 한다.<br />* 메뉴(menu<sup>영어</sup>): 사용자에게 선택 항목 중에서 하나 또는 여러 개를 선택하게 한다.<br />* 텍스트 입력(text input<sup>영어</sup>): 사용자에게 한 줄 또는 여러 줄의 텍스트를 입력하게 한다.<br />* 파일 선택(file select<sup>영어</sup>): <a href="/w/%ED%81%B4%EB%9D%BC%EC%9D%B4%EC%96%B8%ED%8A%B8_%EC%82%AC%EC%9D%B4%EB%93%9C">클라이언트 컴퓨터</a>에 있는 <a href="/w/%EC%BB%B4%ED%93%A8%ED%84%B0_%ED%8C%8C%EC%9D%BC">파일</a>을 <a href="/w/%EC%84%9C%EB%B2%84">서버</a>에 <a href="/w/%EC%97%85%EB%A1%9C%EB%93%9C">업로드</a>한다.<br />* 히든 컨트롤(hidden control<sup>영어</sup>): <a href="/w/%EC%9B%B9_%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80">웹 브라우저</a> 화면에는 렌더링되지 않지만, 값은 서버로 전송된다. 주로 프로그램 간의 정보 전달에 사용된다.<br />* 오브젝트 컨트롤(object control<sup>영어</sup>): 표준에서 정의되지 않은 컨트롤도 사용할 수 있다.<ref name="wiki-1"/></p>
            </div>
            <div class="wiki-text">
                <h2 id="sec-3" class="has-divider">
                    3. HTML 태그
                </h2>
                <p>HTML 폼은 `<form>` 태그를 사용하여 정의하며, `<input>`, `<textarea>`, `<select>` 등의 태그를 사용하여 다양한 폼 컨트롤을 생성한다.<ref name="wiki-1"/><br /><br />폼은 표준 <a href="/w/%EA%B7%B8%EB%9E%98%ED%94%BD_%EC%82%AC%EC%9A%A9%EC%9E%90_%EC%9D%B8%ED%84%B0%ED%8E%98%EC%9D%B4%EC%8A%A4">그래픽 사용자 인터페이스</a> 요소로 구성될 수 있다. 오른쪽 샘플 이미지는 이러한 요소의 예를 보여준다.<br /><br />*   이름을 묻는 텍스트 상자<br />*   성별 값을 선택하는 라디오 버튼 쌍<br />*   선택할 눈 색깔 목록을 제공하는 선택 상자<br />*   해당되는 경우 클릭할 수 있는 한 쌍의 체크 박스<br />*   운동 능력을 설명하는 텍스트 영역<br />*   현재 폼 값을 서버로 보내는 제출 버튼<br /><br />이러한 기본 요소는 가장 일반적인 <a href="/w/%EA%B7%B8%EB%9E%98%ED%94%BD_%EC%82%AC%EC%9A%A9%EC%9E%90_%EC%9D%B8%ED%84%B0%ED%8E%98%EC%9D%B4%EC%8A%A4">그래픽 사용자 인터페이스</a>(GUI) 요소를 제공하지만, 트리 뷰 또는 그리드 뷰와 같은 요소는 없다.<br /><br />그리드 뷰는 각 셀에 텍스트 입력 요소가 포함된 표준 HTML 테이블을 사용하여 비슷하게 만들 수 있다. 트리 뷰는 중첩된 테이블 또는 중첩된 목록을 통해 비슷하게 만들 수 있다. 두 경우 모두 서버 측 프로세스가 정보를 처리하고, <a href="/w/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8">자바스크립트</a>가 사용자 상호 작용을 처리한다. 이러한 인터페이스 요소의 구현은 jQuery와 같은 <a href="/w/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8_%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC">자바스크립트 라이브러리</a>를 통해 사용할 수 있다.</p>
            </div>
            <div class="wiki-text">
                <h3 id="sec-3-1" class="">
                    3.1. &lt;form&gt; 태그
                </h3>
                <p><figure class="wiki-thumb"><img src="/wiki/source/1951877d7f7_60c97f9e?w=300" srcset="/wiki/source/1951877d7f7_60c97f9e?w=300 300w, /wiki/source/1951877d7f7_60c97f9e?w=450 450w, /wiki/source/1951877d7f7_60c97f9e?w=600 600w" sizes="(max-width: 768px) 100vw, 300px" alt="test" loading="lazy" /><figcaption class="wiki-thumb-caption">샘플 양식. 양식은 시각적 레이아웃을 위해 HTML 테이블에 포함되어 있습니다.</figcaption></figure><br /><br />폼은 <a href="/w/HTML">HTML</a> `<form>` 요소로 묶입니다. 이 HTML 요소는 폼에 입력된 데이터가 제출되어야 하는 통신 종점(`action` 속성)과 데이터를 제출하는 HTTP 요청의 HTTP 메서드(`method` 속성 - `GET` 또는 `POST`)를 지정합니다.<ref name="wiki-1"/></p>
            </div>
            <div class="wiki-text">
                <h3 id="sec-3-2" class="">
                    3.2. &lt;input&gt; 태그
                </h3>
                <p>`<input>` 태그는 대부분의 폼 컨트롤을 생성하는 데 사용되며, `type` 속성을 통해 컨트롤 종류를 지정한다. `<input>` 태그의 `type` 속성에 따른 다양한 컨트롤 종류는 다음과 같다.<br /><br />*   `<text>`: 한 줄의 텍스트 입력을 허용하는 간단한 <a href="/w/%ED%85%8D%EC%8A%A4%ED%8A%B8_%EC%83%81%EC%9E%90">텍스트 상자</a>이다.<br />*   `<email>`: 이메일 주소를 입력하는 `<text>` 유형으로, 부분적인 유효성 검사를 지원한다.<br />*   `<number>`: 숫자를 입력하는 `<text>` 유형이다.<br />*   `<password>`: 입력된 문자가 보이지 않거나 `*`와 같은 기호로 대체되어 보안 목적으로 사용되는 `<text>` 유형이다.<br />*   `<radio>`: 라디오 버튼이다.<br />*   `<file>`: 파일을 업로드하기 위한 파일 선택 컨트롤이다.<br />*   `<reset>`: 활성화되면 브라우저에게 현재 폼의 값을 초기 값으로 복원하도록 지시하는 재설정 버튼이다.<br />*   `<submit>`: 브라우저에게 폼에 대한 작업을 수행하도록 지시하는 <a href="/w/%EB%B2%84%ED%8A%BC_(%EC%BB%B4%ED%93%A8%ED%8C%85)">버튼</a> (일반적으로 서버로 전송)이다.<br />*   `<date>`: 사용자가 날짜 또는 날짜 범위를 선택할 수 있는 달력을 표시한다.<ref name="wiki-2"/><ref name="wiki-3"/><br />*   `<color>`: 입력된 값이 색상의 올바른 16진수 표현인지 확인하는 텍스트 입력으로 표현되거나, 색상 선택 위젯으로 표현될 수 있다.<ref name="wiki-4"/><br /><br />HTML 5는 `<email>`, `<tel>`, `<number>`와 같이 특정 데이터를 입력하고 유효성을 검사하기 위한 여러 입력 태그를 도입했다. 또한, 필수 필드, 키보드 포커스, 자리 표시자 텍스트 등을 지정하는 추가 속성도 지원한다.<br /><br /><figure class="wiki-thumb"><img src="/wiki/source/1951877d7f7_60c97f9e?w=300" srcset="/wiki/source/1951877d7f7_60c97f9e?w=300 300w, /wiki/source/1951877d7f7_60c97f9e?w=450 450w, /wiki/source/1951877d7f7_60c97f9e?w=600 600w" sizes="(max-width: 768px) 100vw, 300px" alt="test" loading="lazy" /><figcaption class="wiki-thumb-caption">샘플 양식. 양식은 시각적 레이아웃을 위해 HTML 테이블에 포함되어 있습니다.</figcaption></figure></p>
            </div>
            <div class="wiki-text">
                <h3 id="sec-3-3" class="">
                    3.3. &lt;textarea&gt; 태그
                </h3>
                <p>`<textarea>`는 <a href="/w/%ED%85%8D%EC%8A%A4%ED%8A%B8_%EC%83%81%EC%9E%90">텍스트 상자</a> 입력 필드와 매우 유사하지만, 여러 행의 데이터를 표시하고 입력할 수 있다는 점에서 차이가 있다.<ref name="wiki-1"/> 즉, 여러 줄의 텍스트 입력을 위한 컨트롤을 생성한다.</p>
            </div>
            <div class="wiki-text">
                <h3 id="sec-3-4" class="">
                    3.4. &lt;select&gt; 태그
                </h3>
                <p>`<select>` 태그는 사용자가 선택할 수 있는 항목 목록을 표시하는 드롭다운 목록을 생성한다.<ref name="wiki-1"/></p>
            </div>
            <div class="wiki-text">
                <h3 id="sec-3-5" class="">
                    3.5. &lt;label&gt; 태그
                </h3>
                <p>HTML 4는 사용자 인터페이스에서 캡션을 나타내기 위한 `<label>` 태그를 도입했으며, 레이블 태그의 `for` 속성에서 컨트롤의 `id` <a href="/w/HTML_%EC%86%8D%EC%84%B1">HTML 속성</a>을 지정하여 특정 폼 컨트롤과 연결할 수 있다.<ref name="wiki-1"/> 이렇게 하면 창 크기가 조정될 때 레이블이 해당 요소와 함께 유지되고, 라디오 버튼 또는 체크박스의 레이블을 클릭하면 관련 입력 요소가 활성화되는 등 더 데스크톱과 유사한 기능을 사용할 수 있다.</p>
            </div>
            <div class="wiki-text">
                <h2 id="sec-4" class="has-divider">
                    4. 데이터 전송 및 처리
                </h2>
                <p><figure class="wiki-thumb"><img src="/wiki/source/1951877d7f7_60c97f9e?w=300" srcset="/wiki/source/1951877d7f7_60c97f9e?w=300 300w, /wiki/source/1951877d7f7_60c97f9e?w=450 450w, /wiki/source/1951877d7f7_60c97f9e?w=600 600w" sizes="(max-width: 768px) 100vw, 300px" alt="샘플 양식. 양식은 시각적 레이아웃을 위해 HTML 테이블에 포함되어 있습니다." loading="lazy" /><figcaption class="wiki-thumb-caption">샘플 양식. 양식은 시각적 레이아웃을 위해 HTML 테이블에 포함되어 있습니다.</figcaption></figure><br /><br />양식은 <a href="/w/HTML">HTML</a> `<form>` 요소로 묶인다. 이 HTML 요소는 양식에 입력된 데이터가 제출되어야 하는 통신 종점과 데이터를 제출하는 HTTP 요청의 HTTP 메서드인 `GET` 또는 `POST`를 지정한다.<br /><br />HTML 폼에 입력된 데이터가 제출되면, 폼 요소의 이름과 값은 인코딩되어 <a href="/w/HTTP">HTTP</a> 요청 메시지를 사용하여 GET 또는 <a href="/w/POST_(HTTP)">POST</a> 방식으로 서버로 전송된다. 역사적으로는 이메일 전송 방식도 사용되었다.<ref name="wiki-5"/> 기본 MIME 타입인 `application/x-www-form-urlencoded`는 일반 URI <a href="/w/%ED%8D%BC%EC%84%BC%ED%8A%B8_%EC%9D%B8%EC%BD%94%EB%94%A9">퍼센트 인코딩</a> 규칙의 초기 버전을 기반으로 하며, 줄 바꿈 정규화 및 공백을 "%20" 대신 "+"로 대체하는 등 여러 가지 수정 사항이 적용되었다. 또 다른 가능한 인코딩 방식인 인터넷 미디어 유형 `multipart/form-data`도 사용 가능하며 POST 기반 파일 제출에 일반적으로 사용된다.<br /><br /><a href="/w/PHP">PHP</a>는 서버 측 "프로그래밍"에 사용되는 매우 일반적인 언어 중 하나이며, 웹 프로그래밍을 위해 특별히 만들어진 몇 안 되는 언어 중 하나이다.<ref name="wiki-6"/><ref name="wiki-7"/><br /><br />HTML 폼에서 PHP를 사용하려면, PHP 스크립트의 URL이 폼 태그의 `action` 속성에 지정된다. 그런 다음 대상 PHP 파일은 폼에서 전달된 데이터에 접근하는데, 폼에 사용된 `method` 속성의 값에 따라 PHP의 `$_POST` 또는 `$_GET` 변수를 통해 접근한다. 다음은 `first_name` 입력 필드의 내용을 페이지에 표시하는 기본 폼 핸들러 PHP 스크립트이다.<br /><br /><b>`form.html`</b><br /><br />```html<br /><!DOCTYPE html><br /><html lang="en"><br /><head><br /><title>Form</title><br /></head><br /><body><br /><form action="form_handler.php"><br /><p><label>Name: <input name="first_name" /></label></p><br /><p><button type="submit">Submit</button></p><br /></form><br /></body><br /></html><br />```<br /><br /><b>`form_handler.php`</b><br /><br />```html+php<br /><!DOCTYPE html><br /><?php<br />// "first_name" 외부 변수의 값을 요청하고 필터링합니다.<br />$firstName = filter_input(INPUT_GET, "first_name", FILTER_SANITIZE_STRING);<br />?><br /><html lang="en"><br /><head><br /><title>Output</title><br /></head><br /><body><br /><p><br /><?php echo "Hello, {$firstName}!"; /* 값을 출력합니다. */?><br /></p><br /></body><br /></html><br />```<br /><br />위의 샘플 코드는 PHP의 `filter_input()` 함수를 사용하여 페이지에 삽입하기 전에 사용자 입력을 정제한다. 보안 폼 프로세서에서 사용자 입력을 먼저 확인하지 않고 단순히 브라우저에 출력(echoing)하는 것은 피해야 한다. 만약 사용자가 `firstname` 필드에 JavaScript 코드 `<script>alert(1)</script>`을 입력하면, 브라우저는 개발자가 코딩한 것처럼 `form_handler.php` 페이지에서 해당 스크립트를 실행한다. 이런 방식으로 악성 코드가 실행될 수 있다. `filter_input()`는 PHP 5.2에서 도입되었다. 이전 PHP 버전을 사용하는 사용자는 `htmlspecialchars()` 함수 또는 <a href="/w/%EC%A0%95%EA%B7%9C_%ED%91%9C%ED%98%84%EC%8B%9D">정규 표현식</a>을 사용하여 사용자 입력을 처리하기 전에 정제할 수 있다.</p>
            </div>
            <div class="wiki-text">
                <h2 id="sec-5" class="has-divider">
                    5. 프로그래밍 언어와의 연동
                </h2>
                <p>폼은 <a href="/w/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D_%EC%96%B8%EC%96%B4">프로그래밍 언어</a>로 작성된 프로그램과 결합되어 소프트웨어 개발자가 동적인 <a href="/w/%EC%9B%B9%EC%82%AC%EC%9D%B4%ED%8A%B8">웹사이트</a>를 만들 수 있도록 한다. 가장 인기 있는 언어는 클라이언트 측 및/또는 서버 측 언어를 모두 포함한다.<ref name="wiki-6"/><br /><br />어떤 프로그래밍 언어든 서버에서 폼의 데이터를 처리하는 데 사용할 수 있지만, 가장 일반적으로 사용되는 언어는 <a href="/w/%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8_%EC%96%B8%EC%96%B4">스크립트 언어</a>이다. 스크립트 언어는 C와 같은 프로그래밍 언어보다 강력한 문자열 처리 기능을 가지고 있으며, 버퍼 오버런 공격을 방지하는 데 도움이 되는 자동 메모리 관리 기능도 갖추고 있다.<ref name="wiki-6"/> 웹 사이트의 사실상 표준 클라이언트 측 스크립트 언어는 <a href="/w/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8">자바스크립트</a>이다.<ref name="wiki-6"/><br /><br /><a href="/w/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8">자바스크립트</a>를 <a href="/w/%EB%AC%B8%EC%84%9C_%EA%B0%9D%EC%B2%B4_%EB%AA%A8%EB%8D%B8">문서 객체 모델</a> (DOM)에서 사용하면 브라우저 내에서 웹 페이지를 동적으로 생성하고 수정할 수 있는 동적 HTML 방식이 구현된다.<ref name="wiki-6"/><br /><br />폼과 함께 사용되는 클라이언트 측 언어는 제한적이지만, 종종 폼 데이터의 사전 <a href="/w/%EB%8D%B0%EC%9D%B4%ED%84%B0_%EC%9C%A0%ED%9A%A8%EC%84%B1_%EA%B2%80%EC%82%AC">데이터 유효성 검사</a>를 수행하거나 서버 측 프로그램으로 전송할 폼 데이터를 준비하는 데 사용될 수 있다. 그러나 이러한 사용법은 <a href="/w/HTML5">HTML5</a>의 새로운 `input` 필드 유형과 `required` 속성으로 대체되고 있다.<ref name="wiki-6"/> 서버 측 코드는 기술적 또는 보안상의 이유로 클라이언트 측 코드가 할 수 없는 다양한 작업을 수행하여 동적 웹 사이트를 만들 수 있다. 예를 들어, <a href="/w/%EB%A1%9C%EA%B7%B8%EC%9D%B8">로그인</a> <a href="/w/%EC%9D%B8%EC%A6%9D">인증</a>, <a href="/w/%EB%8D%B0%EC%9D%B4%ED%84%B0%EB%B2%A0%EC%9D%B4%EC%8A%A4">데이터베이스</a>에서 데이터를 검색하고 저장하는 작업, 맞춤법 검사 기능, 이메일 전송 등이 있다. 서버 측 실행의 중요한 장점은 다양한 기능을 일관되고 웹 표준 방식으로 구현하기 위해 여러 <a href="/w/%EC%9B%B9_%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80">웹 브라우저</a>에 의존하기보다는 서버에 기능을 집중시키는 것이다. 또한, 서버에서 양식을 처리하면 서버 측 실행이 클라이언트가 제공한 데이터를 신뢰하지 않도록 설계되고 HTML 정리와 같은 기술을 포함하는 경우 보안이 강화되는 경우가 많다. 서버 측 코드의 한 가지 단점은 확장성이다. 모든 사용자에 대한 서버 측 처리는 서버에서 발생하지만 클라이언트 측 처리는 개별 클라이언트 컴퓨터에서 발생한다.<ref name="wiki-6"/><br /><br /><figure class="wiki-thumb"><img src="/wiki/source/1951877de45_708d8099?w=300" srcset="/wiki/source/1951877de45_708d8099?w=300 300w, /wiki/source/1951877de45_708d8099?w=450 450w, /wiki/source/1951877de45_708d8099?w=600 600w" sizes="(max-width: 768px) 100vw, 300px" alt="PHP 기반 전자 상거래 웹 샵 소프트웨어 ZenCart의 등록 양식" loading="lazy" /><figcaption class="wiki-thumb-caption">PHP 기반 전자 상거래 웹 샵 소프트웨어 ZenCart의 등록 양식</figcaption></figure><br />웹 개발에서 대화형 폼을 설계하는 데 일반적으로 사용되는 인터프리터 언어는 <a href="/w/PHP">PHP</a>, 파이썬, 루비, <a href="/w/%ED%8E%84">펄</a>, <a href="/w/JSP">JSP</a>, <a href="/w/%EC%96%B4%EB%8F%84%EB%B9%84_%EC%BD%9C%EB%93%9C%ED%93%A8%EC%A0%84">어도비 콜드퓨전</a> 등이 있으며, 일반적으로 사용되는 컴파일 언어는 자바와 C#과 <a href="/w/ASP.NET">ASP.NET</a>이 있다.<ref name="wiki-6"/> <a href="/w/PHP">PHP</a>는 서버 측 "프로그래밍"에 사용되는 매우 일반적인 언어 중 하나이며, 웹 프로그래밍을 위해 특별히 만들어진 몇 안 되는 언어 중 하나이다.<ref name="wiki-6"/><ref name="wiki-7"/></p>
            </div>
            <div class="wiki-text">
                <h2 id="sec-6" class="has-divider">
                    6. 보안
                </h2>
                <p>폼 데이터 처리 시에는 보안에 유의해야 한다. 서버 측 실행은 다양한 기능을 일관되고 웹 표준 방식으로 구현하기 위해 여러 <a href="/w/%EC%9B%B9_%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80">웹 브라우저</a>에 의존하기보다는 서버에 기능을 집중시킨다. 서버에서 양식을 처리하면 서버 측 실행이 클라이언트가 제공한 데이터를 신뢰하지 않도록 설계되고, HTML 정리와 같은 기술을 포함하는 경우 보안이 강화되는 경우가 많다.<ref name="wiki-5"/></p>
            </div>
            <div class="wiki-text">
                <h2 id="sec-7" class="has-divider">
                    7. 역사
                </h2>
                <p>HTML 폼은 Viola 브라우저에 의해 처음 구현되었다.<ref name="wiki-9"/> 폼-투-이메일 스크립트 중 하나는 Matt's Script Archive에서 제작한 [http://www.scriptarchive.com/formmail.html "FormMail.pl"]이었다. 오늘날 이 스크립트는 업데이트 부족, 보안 문제 및 구성의 어려움으로 인해 새로운 개발에 널리 사용되지 않는다.</p>
            </div>
    </article>
    
    <aside class="wiki-sidebar">
        
    
    <div class="infobox">
        <div class="infobox-header">폼 (HTML)</div>
    </div>
        
        <div class="sidebar-sticky-container">
            
            <div class="wiki-ad-area vertical">
                <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5156317025981879"
                    crossorigin="anonymous"></script>
                
                <ins class="adsbygoogle"
                    style="display:inline-block;width:300px;height:600px"
                    data-ad-client="ca-pub-5156317025981879"
                    data-ad-slot="8473148002"></ins>
                <script>
                    (adsbygoogle = window.adsbygoogle || []).push({});
                </script>
            </div>
        </div>
    </aside>
</div>

<button class="scroll-to-top-btn" id="scroll-to-top" title="맨 위로 가기">
    <span class="icon">↑</span>
    <span class="text">맨 위로</span>
</button>
        </main>
        
        <footer>
            <div class="container">
                
                <div class="wiki-license-notice">
                    <p class="notice-main">
                        본 사이트는 AI가 위키백과와 뉴스 기사, 정부 간행물, 학술 논문 등을 바탕으로 정보를 가공하여 제공하는 백과사전형 서비스입니다.<br/>
                        모든 문서는 AI에 의해 자동 생성되며, <a href="https://creativecommons.org/licenses/by-sa/4.0/deed.ko" target="_blank" rel="noopener noreferrer">CC BY-SA 4.0 라이선스</a>에 따라 이용할 수 있습니다.
                    </p>
                    <p class="notice-sub">
                        하지만, 위키백과나 뉴스 기사 자체에 오류, 부정확한 정보, 또는 가짜 뉴스가 포함될 수 있으며, AI는 이러한 내용을 완벽하게 걸러내지 못할 수 있습니다.<br/>
                        따라서 제공되는 정보에 일부 오류나 편향이 있을 수 있으므로, 중요한 정보는 반드시 다른 출처를 통해 교차 검증하시기 바랍니다.
                    </p>
                </div>
                <div class="footer-content">
                    <div class="footer-brand">
                        <div class="company-info">
                            <p>(주)두루미스</p>
                            <p>서울특별시 강서구 마곡중앙6로 11, 706호 (마곡동)</p>
                            <p>help@durumis.com</p>
                        </div>
                    </div>
                    <div class="footer-links">
                        <a href="https://onul.works/privacy">개인정보처리방침</a>
                        <a href="https://onul.works/terms">이용약관</a>
                    </div>
                    <div class="footer-family-site">
                        <span>패밀리 사이트</span>
                        <a href="https://manyperson.com" target="_blank" rel="noopener noreferrer">매니퍼슨</a>
                    </div>
                    <div class="footer-partner-site">
                        <span>제휴 사이트</span>
                        <a href="https://cloudturing.com" target="_blank" rel="noopener noreferrer">클라우드튜링</a>
                    </div>
                </div>
                <div class="footer-bottom">© 2026 Durumis, Inc. All rights reserved.</div>
            </div>
        </footer>
    </body>
</html>