폼 (HTML)

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

1. 개요
2. 주요 컨트롤 종류와 기능
3. HTML 태그
4. 데이터 전송 및 처리
5. 프로그래밍 언어와의 연동
6. 보안
7. 역사
참조

1. 개요

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

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

`, `<select>` 등의 태그를 사용하여 개별 컨트롤을 생성한다. 폼에 입력된 데이터는 HTTP 요청을 통해 서버로 전송되며, 서버 측 코드를 사용하여 처리한다. 폼 데이터 처리 시 보안에 유의해야 하며, 다양한 프로그래밍 언어와 연동하여 동적인 웹사이트를 만들 수 있다. HTML 폼은 ViolaWWW 브라우저에 의해 처음 구현되었다.<br />
</p>
<p><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5156317025981879"
         crossorigin="anonymous"></script>
    
    <ins class="adsbygoogle"
         style="display:block"
         data-ad-client="ca-pub-5156317025981879"
         data-ad-slot="9712456640"
         data-ad-format="auto"
         data-full-width-responsive="true"></ins></p>
    <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
<h4>더 읽어볼만한 페이지</h4>
<ul>
<li>HTML 태그 - <a href="/w/HTML_요소">HTML 요소</a><br />HTML 요소는 HTML 문서의 기본 단위로서, 시작 태그와 종료 태그, 그리고 콘텐츠를 포함하며, 일반 요소, 원시 텍스트 요소, 빈 요소로 나뉘고 콘텐츠 범주에 따라 포함 가능한 콘텐츠 종류가 결정된다.</li>
<li>HTML 태그 - <a href="/w/캔버스_요소">캔버스 요소</a><br />캔버스 요소는 HTML 내에서 그래픽을 그릴 수 있는 영역으로, 자바스크립트를 사용하여 그림을 그리며, 그래프, 애니메이션, 게임 등에 활용되고 래스터 기반으로 즉시 모드로 그려진다.</li>
<li>HTML - <a href="/w/Alt_속성">Alt 속성</a><br />`alt` 속성은 HTML의 `img` 및 `area` 태그에서 이미지를 로드할 수 없을 때 대체 텍스트를 지정하며, 스크린 리더 및 SEO에 영향을 미치고, W3C 지침에 따라 이미지의 의미를 전달하거나 장식용 이미지는 빈 문자열로 지정해야 한다.</li>
<li>HTML - <a href="/w/폰트_패밀리_(HTML)">폰트 패밀리 (HTML)</a><br />폰트 패밀리(HTML)는 CSS 스타일 시트, 인라인 CSS, HTML `font` 태그를 통해 웹 페이지 글꼴을 지정하는 방법으로, 사용자 기기에 설치된 글꼴에 따라 표현이 달라지며, CSS의 `font-family` 속성은 글꼴 모양을 식별하고 제네릭 폰트와 글꼴 대체 메커니즘을 통해 일관된 글꼴 표현을 가능하게 한다.</li>
<li>월드 와이드 웹 - <a href="/w/구글">구글</a><br />구글은 래리 페이지와 세르게이 브린이 개발한 웹 검색 엔진에서 출발하여 검색 기술 혁신을 통해 유튜브, 안드로이드 등 다양한 서비스를 제공하는 세계적인 기술 기업으로 성장했지만, 개인정보보호 및 독점 논란에도 직면하고 있다.</li>
<li>월드 와이드 웹 - <a href="/w/온라인_언론">온라인 언론</a><br />온라인 언론은 인터넷을 통해 뉴스 및 정보를 제공하며, 디지털 기술 발달과 함께 성장하여 시민 저널리즘 부상, 정보 전달 속도 혁신 등의 특징을 보이지만 정보 신뢰성 문제, 전통 언론 쇠퇴 등의 과제를 안고 있다.</li>
</ul>
</div>
<table class="summary-table"><thead><tr><th class="title" colspan="2">폼 (HTML)</th></tr></thead></table>
</div></section>
<section id="idx_2_주요_컨트롤_종류와_기능" class="wiki-section">
<h2>2. 주요 컨트롤 종류와 기능</h2>
<p>
HTML 폼은 사용자가 정보를 입력하고 선택할 수 있도록 다양한 컨트롤(입력 요소)을 제공한다. 주요 컨트롤은 다음과 같다.<sup class="ref"><a href="#ref-1" />[1]</a></sup><ul><br /><li><b>텍스트 입력</b>: 한 줄 또는 여러 줄의 텍스트를 입력할 수 있다.</li><li><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>, 메뉴, 드롭다운 목록 등을 통해 여러 항목 중 하나 또는 여러 개를 선택할 수 있다.</li><li><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> 실행) 등이 있다.</li><li><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> 화면에는 렌더링되지 않지만, 값은 서버로 전송), 오브젝트 컨트롤(표준에서 정의되지 않은 컨트롤도 사용 가능) 등이 있다.</li></ul><br /><br /><a href="/w/HTML">HTML</a> 폼은 `<form>` 요소로 묶이며, 입력된 데이터가 제출될 통신 종점과 HTTP 요청의 HTTP 메서드(GET 또는 POST)를 지정한다.<br />
<h3 id="idx_2_1_텍스트_입력">2. 1. 텍스트 입력</h3>
사용자가 텍스트를 입력할 수 있는 컨트롤은 다음과 같다.<ul><br /><li>`<text>`: 한 줄의 텍스트 입력을 허용하는 간단한 <a href="/w/%ED%85%8D%EC%8A%A4%ED%8A%B8_%EC%83%81%EC%9E%90">텍스트 상자</a>이다.</li><li>`<email>`: 이메일 주소를 입력하는 `<text>` 유형으로, 부분적인 유효성 검사가 필요하다.</li><li>`<number>`: 숫자를 입력하는 `<text>` 유형이다.</li><li>`<password>`: `<text>`와 유사하며, 입력된 문자가 보이지 않거나 `*`와 같은 기호로 대체되어 보안 목적으로 사용된다.</li><li>`<textarea>`: 여러 줄의 텍스트를 표시하고 입력할 수 있는 입력 필드이다.</li><li>텍스트 입력 (text input<sup>영어</sup>): 사용자에게 한 줄 혹은 여러 줄의 텍스트를 입력하게 한다.<sup class="ref"><a href="#ref-1" />[1]</a></sup></li></ul><br /><br /><a href="/w/HTML">HTML</a>5는 이메일 주소를 입력하기 위한 `<email>`, 전화번호를 위한 `<tel>`, 숫자 값을 위한 `<number>` 등 특정 데이터를 입력하고 유효성을 검사하기 위한 여러 입력 태그를 도입했다.<sup class="ref"><a href="#ref-2" />[2]</a></sup><sup class="ref"><a href="#ref-3" />[3]</a></sup><br />
<h3 id="idx_2_2_선택형_컨트롤">2. 2. 선택형 컨트롤</h3>
<figure style=""><img src="https://cdn.onul.works/wiki/source/1951877e61c_cec527d6.png?width=240" style="width: 240px;" alt=""><figcaption><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 />사용자가 여러 항목 중 하나 또는 여러 개를 선택할 수 있는 컨트롤은 다음과 같다.<ul><br /><li>'''<a href="/w/%EC%B2%B4%ED%81%AC_%EC%83%81%EC%9E%90">체크 상자</a>(checkbox<sup>영어</sup>)''' : 여러 선택지 중에서 원하는 만큼 선택할 수 있다.<sup class="ref"><a href="#ref-1" />[1]</a></sup></li><li>'''<a href="/w/%EB%9D%BC%EB%94%94%EC%98%A4_%EB%8B%A8%EC%B6%94">라디오 단추</a>(radio buttons<sup>영어</sup>)''' : 여러 선택지 중에서 하나만 선택할 수 있다.<sup class="ref"><a href="#ref-1" />[1]</a></sup></li><li>'''메뉴(menu<sup>영어</sup>)''' : 선택 항목 중에서 하나 또는 여러 개를 선택할 수 있다.<sup class="ref"><a href="#ref-1" />[1]</a></sup></li><li>'''드롭다운 목록''' : 사용자가 선택할 수 있는 항목 목록이 아래로 펼쳐지는 방식이다. `<select>` 태그를 사용한다.</li></ul><br /><br />오른쪽 샘플 이미지에서 선택형 컨트롤의 예를 확인할 수 있다.<ul><br /><li>성별을 선택하는 라디오 버튼 한 쌍</li><li>눈 색깔을 선택하는 드롭다운 목록 (선택 상자)</li><li>해당하는 항목을 선택하는 체크 박스 한 쌍</li></ul>
<h3 id="idx_2_3_버튼">2. 3. 버튼</h3>
<ul><br /><li>제출 버튼(submit button<sup>영어</sup>): 사용자가 실행하면 폼에 입력된 내용을 서버로 전송한다.<sup class="ref"><a href="#ref-1" />[1]</a></sup></li><li>리셋 버튼(reset button<sup>영어</sup>): 사용자가 실행하면 폼의 내용을 초기값으로 되돌린다.<sup class="ref"><a href="#ref-1" />[1]</a></sup></li><li>푸시 버튼(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>를 실행한다.<sup class="ref"><a href="#ref-1" />[1]</a></sup></li></ul>
<h3 id="idx_2_4_기타_컨트롤">2. 4. 기타 컨트롤</h3>
<ul><br /><li>제출 버튼(submit button<sup>영어</sup>): 사용자가 실행하면 폼에 입력된 내용을 서버로 전송한다.</li><li>리셋 버튼(reset button<sup>영어</sup>): 사용자가 실행하면 폼의 내용을 초기값으로 되돌린다.</li><li>푸시 버튼(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>를 실행한다.</li><li><a href="/w/%EC%B2%B4%ED%81%AC_%EC%83%81%EC%9E%90">체크 상자</a>(checkbox<sup>영어</sup>): 사용자에게 여러 선택지 중에서 원하는 만큼 선택하게 한다.</li><li><a href="/w/%EB%9D%BC%EB%94%94%EC%98%A4_%EB%8B%A8%EC%B6%94">라디오 단추</a>(radio buttons<sup>영어</sup>): 사용자에게 여러 선택지 중에서 하나만 선택하게 한다.</li><li>메뉴(menu<sup>영어</sup>): 사용자에게 선택 항목 중에서 하나 또는 여러 개를 선택하게 한다.</li><li>텍스트 입력(text input<sup>영어</sup>): 사용자에게 한 줄 또는 여러 줄의 텍스트를 입력하게 한다.</li><li>파일 선택(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>한다.</li><li>히든 컨트롤(hidden control<sup>영어</sup>): <a href="/w/%EC%9B%B9_%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80">웹 브라우저</a> 화면에는 렌더링되지 않지만, 값은 서버로 전송된다. 주로 프로그램 간의 정보 전달에 사용된다.</li><li>오브젝트 컨트롤(object control<sup>영어</sup>): 표준에서 정의되지 않은 컨트롤도 사용할 수 있다.<sup class="ref"><a href="#ref-1" />[1]</a></sup></li></ul>
<section id="idx_3_HTML_태그" class="wiki-section">
<h2>3. HTML 태그</h2>
<p>
HTML 폼은 `<form>` 태그를 사용하여 정의하며, `<input>`, `<textarea>`, `<select>` 등의 태그를 사용하여 다양한 폼 컨트롤을 생성한다.<sup class="ref"><a href="#ref-1" />[1]</a></sup><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> 요소로 구성될 수 있다. 오른쪽 샘플 이미지는 이러한 요소의 예를 보여준다.<ul><br /><li>이름을 묻는 텍스트 상자</li><li>성별 값을 선택하는 라디오 버튼 쌍</li><li>선택할 눈 색깔 목록을 제공하는 선택 상자</li><li>해당되는 경우 클릭할 수 있는 한 쌍의 체크 박스</li><li>운동 능력을 설명하는 텍스트 영역</li><li>현재 폼 값을 서버로 보내는 제출 버튼</li></ul><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>를 통해 사용할 수 있다.<br />
<h3 id="idx_3_1_<form>_태그">3. 1. <form> 태그</h3>
<figure style=""><img src="https://cdn.onul.works/wiki/source/1951877d7f7_60c97f9e.png?width=240" style="width: 240px;" alt="test"><figcaption>샘플 양식. 양식은 시각적 레이아웃을 위해 HTML 테이블에 포함되어 있습니다.</figcaption></figure><br /><br />폼은 <a href="/w/HTML">HTML</a> `<form>` 요소로 묶입니다. 이 HTML 요소는 폼에 입력된 데이터가 제출되어야 하는 통신 종점(`action` 속성)과 데이터를 제출하는 HTTP 요청의 HTTP 메서드(`method` 속성 - `GET` 또는 `POST`)를 지정합니다.<sup class="ref"><a href="#ref-1" />[1]</a></sup><br />
<h3 id="idx_3_2_<input>_태그">3. 2. <input> 태그</h3>
`<input>` 태그는 대부분의 폼 컨트롤을 생성하는 데 사용되며, `type` 속성을 통해 컨트롤 종류를 지정한다. `<input>` 태그의 `type` 속성에 따른 다양한 컨트롤 종류는 다음과 같다.<ul><br /><li>`<text>`: 한 줄의 텍스트 입력을 허용하는 간단한 <a href="/w/%ED%85%8D%EC%8A%A4%ED%8A%B8_%EC%83%81%EC%9E%90">텍스트 상자</a>이다.</li><li>`<email>`: 이메일 주소를 입력하는 `<text>` 유형으로, 부분적인 유효성 검사를 지원한다.</li><li>`<number>`: 숫자를 입력하는 `<text>` 유형이다.</li><li>`<password>`: 입력된 문자가 보이지 않거나 `*`와 같은 기호로 대체되어 보안 목적으로 사용되는 `<text>` 유형이다.</li><li>`<radio>`: 라디오 버튼이다.</li><li>`<file>`: 파일을 업로드하기 위한 파일 선택 컨트롤이다.</li><li>`<reset>`: 활성화되면 브라우저에게 현재 폼의 값을 초기 값으로 복원하도록 지시하는 재설정 버튼이다.</li><li>`<submit>`: 브라우저에게 폼에 대한 작업을 수행하도록 지시하는 <a href="/w/%EB%B2%84%ED%8A%BC_(%EC%BB%B4%ED%93%A8%ED%8C%85)">버튼</a> (일반적으로 서버로 전송)이다.</li><li>`<date>`: 사용자가 날짜 또는 날짜 범위를 선택할 수 있는 달력을 표시한다.<sup class="ref"><a href="#ref-2" />[2]</a></sup><sup class="ref"><a href="#ref-3" />[3]</a></sup></li><li>`<color>`: 입력된 값이 색상의 올바른 16진수 표현인지 확인하는 텍스트 입력으로 표현되거나, 색상 선택 위젯으로 표현될 수 있다.<sup class="ref"><a href="#ref-4" />[4]</a></sup></li></ul><br /><br />HTML 5는 `<email>`, `<tel>`, `<number>`와 같이 특정 데이터를 입력하고 유효성을 검사하기 위한 여러 입력 태그를 도입했다. 또한, 필수 필드, 키보드 포커스, 자리 표시자 텍스트 등을 지정하는 추가 속성도 지원한다.<br /><br />
<h3 id="idx_3_3_<textarea>_태그">3. 3. <textarea> 태그</h3>
`<textarea>`는 <a href="/w/%ED%85%8D%EC%8A%A4%ED%8A%B8_%EC%83%81%EC%9E%90">텍스트 상자</a> 입력 필드와 매우 유사하지만, 여러 행의 데이터를 표시하고 입력할 수 있다는 점에서 차이가 있다.<sup class="ref"><a href="#ref-1" />[1]</a></sup> 즉, 여러 줄의 텍스트 입력을 위한 컨트롤을 생성한다.<br />
<h3 id="idx_3_4_<select>_태그">3. 4. <select> 태그</h3>
`<select>` 태그는 사용자가 선택할 수 있는 항목 목록을 표시하는 드롭다운 목록을 생성한다.<sup class="ref"><a href="#ref-1" />[1]</a></sup><br />
<h3 id="idx_3_5_<label>_태그">3. 5. <label> 태그</h3>
HTML 4는 사용자 인터페이스에서 캡션을 나타내기 위한 `<label>` 태그를 도입했으며, 레이블 태그의 `for` 속성에서 컨트롤의 `id` <a href="/w/HTML_%EC%86%8D%EC%84%B1">HTML 속성</a>을 지정하여 특정 폼 컨트롤과 연결할 수 있다.<sup class="ref"><a href="#ref-1" />[1]</a></sup> 이렇게 하면 창 크기가 조정될 때 레이블이 해당 요소와 함께 유지되고, 라디오 버튼 또는 체크박스의 레이블을 클릭하면 관련 입력 요소가 활성화되는 등 더 데스크톱과 유사한 기능을 사용할 수 있다.<br />
</p></section>
<section id="idx_4_데이터_전송_및_처리" class="wiki-section">
<h2>4. 데이터 전송 및 처리</h2>
<p>
<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> 방식으로 서버로 전송된다. 역사적으로는 이메일 전송 방식도 사용되었다.<sup class="ref"><a href="#ref-5" />[5]</a></sup> 기본 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>는 서버 측 "프로그래밍"에 사용되는 매우 일반적인 언어 중 하나이며, 웹 프로그래밍을 위해 특별히 만들어진 몇 안 되는 언어 중 하나이다.<sup class="ref"><a href="#ref-6" />[6]</a></sup><sup class="ref"><a href="#ref-7" />[7]</a></sup><br /><br />HTML 폼에서 PHP를 사용하려면, PHP 스크립트의 URL이 폼 태그의 `action` 속성에 지정된다. 그런 다음 대상 PHP 파일은 폼에서 전달된 데이터에 접근하는데, 폼에 사용된 `method` 속성의 값에 따라 PHP의 `$_POST` 또는 `$_GET` 변수를 통해 접근한다. 다음은 `first_name` 입력 필드의 내용을 페이지에 표시하는 기본 폼 핸들러 PHP 스크립트이다.<br /><br />'''`form.html`'''<br /><br />```html<br /><br /><!DOCTYPE html><br /><br /><html lang="en"><br /><br /><head><br /><br /><title>Form</title><br /><br /></head><br /><br /><body><br /><br /><form action="form_handler.php"><br /><br /><p><label>Name: <input name="first_name" /></label></p><br /><br /><p><button type="submit">Submit</button></p><br /><br /></form><br /><br /></body><br /><br /></html><br /><br />```<br /><br />'''`form_handler.php`'''<br /><br />```html+php<br /><br /><!DOCTYPE html><br /><br /><?php<br /><br />// "first_name" 외부 변수의 값을 요청하고 필터링합니다.<br /><br />$firstName = filter_input(INPUT_GET, "first_name", FILTER_SANITIZE_STRING);<br /><br />?><br /><br /><html lang="en"><br /><br /><head><br /><br /><title>Output</title><br /><br /></head><br /><br /><body><br /><br /><p><br /><br /><?php echo "Hello, {$firstName}!"; /* 값을 출력합니다. */?><br /><br /></p><br /><br /></body><br /><br /></html><br /><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>을 사용하여 사용자 입력을 처리하기 전에 정제할 수 있다.<br />
</p></section>
<section id="idx_5_프로그래밍_언어와의_연동" class="wiki-section">
<h2>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%86%8C%ED%94%84%ED%8A%B8%EC%9B%A8%EC%96%B4_%EA%B0%9C%EB%B0%9C%EC%9E%90">소프트웨어 개발자</a>가 동적인 <a href="/w/%EC%9B%B9%EC%82%AC%EC%9D%B4%ED%8A%B8">웹사이트</a>를 만들 수 있도록 한다. 가장 인기 있는 언어는 클라이언트 측 및/또는 서버 측 언어를 모두 포함한다.<sup class="ref"><a href="#ref-6" />[6]</a></sup><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와 같은 프로그래밍 언어보다 강력한 문자열 처리 기능을 가지고 있으며, 버퍼 오버런 공격을 방지하는 데 도움이 되는 자동 메모리 관리 기능도 갖추고 있다.<sup class="ref"><a href="#ref-6" />[6]</a></sup> 웹 사이트의 사실상 표준 클라이언트 측 스크립트 언어는 <a href="/w/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8">자바스크립트</a>이다.<sup class="ref"><a href="#ref-6" />[6]</a></sup><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 방식이 구현된다.<sup class="ref"><a href="#ref-6" />[6]</a></sup><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` 속성으로 대체되고 있다.<sup class="ref"><a href="#ref-6" />[6]</a></sup> 서버 측 코드는 기술적 또는 보안상의 이유로 클라이언트 측 코드가 할 수 없는 다양한 작업을 수행하여 동적 웹 사이트를 만들 수 있다. 예를 들어, <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_%ED%91%9C%EC%A4%80">웹 표준</a> 방식으로 구현하기 위해 여러 <a href="/w/%EC%9B%B9_%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80">웹 브라우저</a>에 의존하기보다는 서버에 기능을 집중시키는 것이다. 또한, 서버에서 양식을 처리하면 서버 측 실행이 클라이언트가 제공한 데이터를 신뢰하지 않도록 설계되고 HTML 정리와 같은 기술을 포함하는 경우 보안이 강화되는 경우가 많다. 서버 측 코드의 한 가지 단점은 <a href="/w/%ED%99%95%EC%9E%A5%EC%84%B1">확장성</a>이다. 모든 사용자에 대한 서버 측 처리는 서버에서 발생하지만 클라이언트 측 처리는 개별 클라이언트 컴퓨터에서 발생한다.<sup class="ref"><a href="#ref-6" />[6]</a></sup><br /><br /><figure style=""><img src="https://cdn.onul.works/wiki/source/1951877de45_708d8099.png?width=240" style="width: 240px;" alt=""><figcaption>PHP 기반 전자 상거래 웹 샵 소프트웨어 ZenCart의 등록 양식</figcaption></figure><br /><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>이 있다.<sup class="ref"><a href="#ref-6" />[6]</a></sup> <a href="/w/PHP">PHP</a>는 서버 측 "프로그래밍"에 사용되는 매우 일반적인 언어 중 하나이며, 웹 프로그래밍을 위해 특별히 만들어진 몇 안 되는 언어 중 하나이다.<sup class="ref"><a href="#ref-6" />[6]</a></sup><sup class="ref"><a href="#ref-7" />[7]</a></sup><br />
</p></section>
<section id="idx_6_보안" class="wiki-section">
<h2>6. 보안</h2>
<p>
폼 데이터 처리 시에는 보안에 유의해야 한다. 서버 측 실행은 다양한 기능을 일관되고 <a href="/w/%EC%9B%B9_%ED%91%9C%EC%A4%80">웹 표준</a> 방식으로 구현하기 위해 여러 <a href="/w/%EC%9B%B9_%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80">웹 브라우저</a>에 의존하기보다는 서버에 기능을 집중시킨다. 서버에서 양식을 처리하면 서버 측 실행이 클라이언트가 제공한 데이터를 신뢰하지 않도록 설계되고, HTML 정리와 같은 기술을 포함하는 경우 보안이 강화되는 경우가 많다.<sup class="ref"><a href="#ref-5" />[5]</a></sup><br />
</p></section>
<section id="idx_7_역사" class="wiki-section">
<h2>7. 역사</h2>
<p>
HTML 폼은 Viola 브라우저에 의해 처음 구현되었다.<sup class="ref"><a href="#ref-9" />[9]</a></sup> 폼-투-이메일 스크립트 중 하나는 Matt's Script Archive에서 제작한 [http://www.scriptarchive.com/formmail.html "FormMail.pl"]이었다. 오늘날 이 스크립트는 업데이트 부족, 보안 문제 및 구성의 어려움으로 인해 새로운 개발에 널리 사용되지 않는다.<br />

</p></section>
<section id="idx_ref" class="wiki-section">
<h2>참조</h2>
<p>
<i id="ref-1"><sub>[1]</sub> 
웹사이트
 
HTML/Elements/label
 
<a target="_blank" href="http://www.w3.org/wiki/HTML/Elements/label">http://www.w3.org/wi[...]</a> 
2023-05-19
 
</i><br />
<i id="ref-2"><sub>[2]</sub> 
웹사이트
 
Better Web Forms with HTML5 Forms
 
<a target="_blank" href="http://msdn.microsoft.com/en-us/magazine/hh547102.aspx">http://msdn.microsof[...]</a> 
Microsoft
 
2011-11
 
</i><br />
<i id="ref-3"><sub>[3]</sub> 
웹사이트
 
Forms – HTML5
 
<a target="_blank" href="http://www.w3.org/TR/html5/forms.html">http://www.w3.org/TR[...]</a> 
W3C
 
2014-02-20
 
</i><br />
<i id="ref-4"><sub>[4]</sub> 
웹사이트
 
input type<nowiki>=</nowiki>color – color-well control
 
<a target="_blank" href="http://www.w3.org/TR/html-markup/input.color.html">http://www.w3.org/TR[...]</a> 
W3C
 
2014-10-31
 
</i><br />
<i id="ref-5"><sub>[5]</sub> 
문서
 
User-agent support for email based [[Hypertext Markup Language|HTML]] form submission, using a 'mailto' [[Uniform Resource Locator|URL]] as the form action, was proposed in RFC 1867 section 5.6, during the HTML 3.2 era. Various web browsers implemented it by invoking a separate email program, using their own rudimentary [[Simple Mail Transfer Protocol|SMTP]] capabilities, or by becoming [[Internet suite]]s by implementing entire [[Email client]]s. Although sometimes unreliable, it was briefly popular as a simple way to transmit form data without involving a web server or [[Common Gateway Interface|CGI]] scripts.
 
</i><br />
<i id="ref-6"><sub>[6]</sub> 
웹사이트
 
PHP: Hypertext Preprocessor
 
<a target="_blank" href="http://www.php.net/">http://www.php.net/</a> 
</i><br />
<i id="ref-7"><sub>[7]</sub> 
웹사이트
 
Encyclopedia Web
 
<a target="_blank" href="http://www.lampfire.com/encyclopedia-web/php.php">http://www.lampfire.[...]</a> 
</i><br />
<i id="ref-8"><sub>[8]</sub> 
웹사이트
 
Intro to Online Forms and Form Builders
 
<a target="_blank" href="https://blitzen.com/blog/intro-online-forms-form-builders/">https://blitzen.com/[...]</a> 
</i><br />
<i id="ref-9"><sub>[9]</sub> 
웹사이트
 
ViolaWWW
 
<a target="_blank" href="https://www.webdesignmuseum.org/web-design-history/violawww-1992">https://www.webdesig[...]</a> 
Web Design Museum
 
2022-02-17
 
</i><br />
</p></section>

<section>
                    <hr />
                    <p style="text-align: right;font-size:0.8em">
                        <br />
                        본 사이트는 AI가 위키백과와 뉴스 기사,정부 간행물,학술 논문등을 바탕으로 정보를 가공하여 제공하는 백과사전형 서비스입니다. <br />
                        모든 문서는 AI에 의해 자동 생성되며, <a rel="license" target="_blank" href="https://creativecommons.org/licenses/by-sa/4.0/deed.ko">CC BY-SA 4.0</a> 라이선스에 따라 이용할 수 있습니다.<br />
                        하지만, 위키백과나 뉴스 기사 자체에 오류, 부정확한 정보, 또는 가짜 뉴스가 포함될 수 있으며, AI는 이러한 내용을 완벽하게 걸러내지 못할 수 있습니다. <br />
                        따라서 제공되는 정보에 일부 오류나 편향이 있을 수 있으므로, 중요한 정보는 반드시 다른 출처를 통해 교차 검증하시기 바랍니다.<br />
                        <br />
                        문의하기 : <a href="mailto:help@durumis.com">help@durumis.com</a>
                    </p>
                </section>
            </main>
        </div>

if (tocToggle) {
                tocToggle.addEventListener("click", () => {
                    toc.classList.toggle("active");
                });
            }

document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
                anchor.addEventListener("click", function (e) {
                    e.preventDefault();

const targetId = this.getAttribute("href");
                    history.pushState(null, "", targetId);

document.querySelector(targetId).scrollIntoView({
                        behavior: "smooth"
                    });
                });
            });

// 검색 기능 추가
            document.querySelector(".search-button").addEventListener("click", function () {
                const searchTerm = document.querySelector(".search-input").value.trim();
                if (searchTerm) {
                    // 검색 처리 로직 구현
                    window.location.href = "https://www.google.com/search?q=site%3Awiki.onul.works+" + encodeURIComponent(searchTerm);
                }
            });

// Enter 키 검색 지원
            document.querySelector(".search-input").addEventListener("keypress", function (e) {
                if (e.key === "Enter") {
                    document.querySelector(".search-button").click();
                }
            });
        </script>
    </body>
</html>