양식(HTML)

Form (HTML)

웹 페이지의 웹 양식, 웹 양식 또는 HTML 양식을 통해 사용자는 처리를 위해 서버로 전송된 데이터를 입력할 수 있다.웹 사용자가 확인란, 라디오 단추 또는 텍스트 필드를 사용하여 양식을 작성하기 때문에 양식은 종이 또는 데이터베이스 양식과 유사할 수 있다.예를 들어, 상품을 주문하기 위해 배송이나 신용카드 데이터를 입력하는 데 양식을 사용하거나 검색 엔진에서 검색 결과를 검색하는 데 사용할 수 있다.

설명

test
견본 양식.양식은 비주얼 레이아웃을 위해 HTML 표에 동봉되어 있다.

양식은 HTML에 동봉되어 있다. <form>원소의이 요소는 양식에 입력된 데이터를 제출해야 하는 통신 끝점과 데이터 제출 방법을 명시한다.GET또는POST.

요소들

양식은 표준 그래픽 사용자 인터페이스 요소로 구성될 수 있다.

  • <text>— 단일 줄의 텍스트를 입력할 수 있는 간단한 텍스트 상자
  • <email>- 의 일종<text>부분적으로 확인된 전자 메일 주소가 필요한 경우
  • <number>- 의 일종<text>그것은 번호를 필요로 한다.
  • <password>—와 유사한<text>에 입력된 문자가 보이지 않거나 *와 같은 기호로 대체되는 보안 목적으로 사용된다.
  • <radio>— 라디오 버튼
  • <file>— 파일 업로드를 위한 파일 선택 제어
  • <reset>— 활성화되면 브라우저에 초기 값으로 값을 복원하도록 지시하는 재설정 버튼.
  • <submit>— 브라우저에 양식에 대한 액션을 수행하도록 지시하는 단추(서버로 보내기 위해 필요)
  • <textarea>— 그 것과 아주 비슷하다.<text>a를 제외한 입력 필드<textarea>여러 데이터 행을 표시하고 입력할 수 있도록 허용
  • <select>— 사용자가 선택할 수 있는 항목 목록을 표시하는 드롭다운 목록

오른쪽의 샘플 이미지에는 다음과 같은 요소들이 대부분 표시된다.

  • 이름을 묻는 텍스트 상자
  • 섹스를 선택하라는 라디오 단추 한 벌
  • 선택할 수 있는 눈 색깔 목록을 제공하는 선택 상자
  • 적용되는 경우 클릭할 수 있는 한 쌍의 확인란
  • 당신의 운동 능력을 설명하는 텍스트 영역
  • 그것을 서버로 보내기 위한 제출 버튼

이러한 기본 요소는 대부분 일반적인 GUI(Graphic User Interface) 요소를 제공하지만 전부는 아니다.예를 들어, 트리 뷰 또는 그리드 뷰와 동등한 항목이 없다.

그러나 그리드 보기는 텍스트 입력 요소를 포함하는 각 셀이 있는 표준 HTML 표를 사용하여 모방할 수 있다.트리 뷰는 또한 중첩된 테이블을 통해 모방될 수도 있고, 의미적으로는 보다 적절하게 중첩된 목록을 통해 모방될 수도 있다.두 경우 모두 서버측 프로세스가 정보 처리를 담당하고, 자바스크립트는 사용자 상호작용을 처리한다.이러한 인터페이스 요소의 구현은 jQuery와 같은 JavaScript 라이브러리를 통해 이용할 수 있다.

HTML 4는 다음과 같이 소개되었다.<label>사용자 인터페이스에서 캡션을 나타내기 위한 태그로, 다음을 지정하여 특정 양식 제어와 연관시킬 수 있다.id레이블 태그의 컨트롤 속성for귀속시키다[1]이렇게 하면 창 크기가 조정될 때 레이블이 요소와 함께 유지되고 더 많은 데스크톱과 같은 기능(예: 라디오 버튼이나 확인란의 레이블을 클릭하면 관련 입력 요소가 활성화됨)을 허용할 수 있다.

HTML 5는 다른 인터페이스 요소로 나타낼 수 있는 다수의 입력 태그를 도입한다.일부는 텍스트 입력 필드를 기반으로 하며 특정 공통 데이터를 입력 및 검증하기 위한 것이다.여기에는 다음이 포함된다.<email>이메일 주소를 입력하려면,<tel>전화번호는,<number>숫자 값의 경우필수 필드를 지정하는 추가 속성, 양식을 포함하는 웹 페이지가 로드될 때 키보드 포커스가 있어야 하는 필드, 필드 내에 표시되지만 사용자 입력은 아닌 자리 표시자 텍스트(예: 검색어를 입력하기 전에 많은 검색 입력 필드에 표시되는 '검색' 텍스트)가 있다.이러한 업무들은 자바스크립트로 처리되곤 했지만, 그들에 대한 지원이 표준에 추가될 정도로 보편화 되어 있었다.그<date>입력 유형에는 사용자가 날짜 또는 날짜 범위를 선택할 수 있는 달력이 표시된다.[2][3]그리고color입력 유형은 단순히 입력된 값이 사양에 따라 색상을 16진법으로 올바르게 표현하는지 확인하는 입력 텍스트 또는 색상 선택 위젯([4]후자는 이 속성을 지원하는 대부분의 브라우저에서 사용되는 솔루션임)으로 나타낼 수 있다.

제출

HTML 양식에 입력된 데이터를 제출하면 양식 요소의 이름과 값이 인코딩되어 GET 또는 POST를 사용하여 HTTP 요청 메시지로 서버로 전송된다.역사적으로, 이메일 전송도 사용되었다.[5]기본 MIME 유형(인터넷 미디어 유형), 응용 프로그램/x-www-폼-urlenced는 매우 초기 버전의 일반 URI 백분율-인코딩 규칙을 기반으로 하며, 뉴라인 정규화 및 공간 교체와 같은 여러 가지 수정 사항이 있다.+" 대신 "%20". 또 다른 가능한 인코딩인 인터넷 미디어 유형 멀티파트/폼 데이터도 사용할 수 있으며 POST 기반 파일 제출에 공통적이다.

프로그래밍 언어와 함께 사용

양식은 보통 개발자들이 역동적인 웹 사이트를 만들 수 있도록 다양한 프로그래밍 언어로 작성된 프로그램과 결합된다.가장 인기 있는 언어는 클라이언트 언어와/또는 서버 언어 모두를 포함한다.

어떤 프로그래밍 언어가든 서버에서 폼의 데이터를 처리하는 데 사용될 수 있지만, 가장 일반적으로 사용되는 언어는 스크립트 언어로서, C와 같은 프로그래밍 언어보다 문자열 처리 기능이 더 강한 경향이 있으며, 버퍼 오버런 공격을 방지하는 데 도움이 되는 자동 메모리 관리 기능도 가지고 있다.

클라이언트측

웹 사이트에 대한 사실상의 클라이언트측 스크립팅 언어는 자바스크립트다.DOM(Document Object Model)에서 자바스크립트를 사용하면 브라우저 내에서 웹 페이지를 동적으로 만들고 수정할 수 있는 동적 HTML의 방법이 나온다.

양식과 함께 사용되는 클라이언트측 언어는 제한적이지만, 종종 양식 데이터의 사전 검증을 수행하거나 서버측 프로그램으로 보낼 양식 데이터를 준비하는 역할을 할 수 있다.그러나 HTML5의 새로운 사용으로 대체되고 있다.input필드 유형 및required기여하다

서버측 실행

서버측 코드는 기술적 또는 보안상의 이유로 클라이언트측 코드는 로그인 인증에서 데이터베이스 내 데이터 검색 및 저장, 철자 검사, 전자우편 발송에 이르기까지 다양한 작업을 수행하여 동적 웹 사이트를 만들 수 있다.클라이언트측 실행보다 서버측 실행의 중요한 이점은 기능성이 서로 다른 웹 브라우저에 의존하여 일관되고 표준화된 방법으로 다양한 기능을 구현하는 것이 아니라 서버에 집중된다는 것이다.또한, 서버측 실행이 클라이언트가 제공하는 데이터를 신뢰하지 않도록 설계되고 HTML 삭제와 같은 기법을 포함하는 경우, 서버에서의 처리 양식은 종종 보안 향상을 초래한다.서버측 코드의 한 가지 단점은 확장성이다. 즉, 모든 사용자에 대한 서버측 처리는 서버에서 발생하는 반면 클라이언트측 처리는 개별 클라이언트 컴퓨터에서 발생한다.

PHP 기반 전자상거래 웹샵 소프트웨어 ZenCart 등록 양식

해석된 언어

웹 개발에서 인터랙티브 형식을 설계하는 데 일반적으로 사용되는 해석 언어로는 PHP, Python, Ruby, Perl, JSP, Adobe ColdFusion이 있으며, 일반적으로 사용되는 컴파일 언어로는 ASP와 함께 자바와 C#가 있다.네트.

PHP

PHP는 서버측 "프로그래밍"에 사용되는 매우 일반적인 언어 중 하나이며, 웹 프로그래밍을 위해 특별히 만들어진 몇 안 되는 언어 중 하나이다.[6][7]

HTML 양식과 함께 PHP를 사용하려면 PHP 스크립트의 URL을action양식 태그의 속성그런 다음 대상 PHP 파일이 PHP를 통해 양식으로 전달된 데이터에 액세스한다.$_POST또는$_GET변수, 의 값에 따라method양식에 사용된 속성입력 필드의 내용을 페이지에 표시하는 기본 양식 처리기 PHP 스크립트는 다음과 같다.

form.html 

<!DOCTYPE html> <html lang="en"> <head> <title>양식</제목> <본문><양식 동작="양식_핸들러.php"><p><label> 이름: <입력 이름="이름" /</p></p><버튼 타입="제출"></p 버튼> </form> </html> 제출

form_handler.php 

<!DOCTYPE html> <html lang="en"> <head> <title>출력 </제목> <?php // 사용자가 양식.html 페이지에 입력한 모든 것을 인쇄한다.$firstName = filter_input(INPUT_GET, "first-name", FILERT_SANITIZE_string); "Hello, ${firstName}!"; ?> </body> </html>을 울린다.

위의 샘플 코드는 PHP를 사용한다.filter_input()페이지에 입력하기 전에 사용자의 입력을 검사하는 기능.먼저 확인하지 않고 브라우저에 사용자 입력을 인쇄(에코잉)하는 것은 보안 양식 프로세서에서 피해야 할 사항이다: 사용자가 자바스크립트 코드를 입력한 경우<script>alert(1)</script>필드로, 브라우저는 마치 개발자에 의해 코딩된 것처럼 페이지의 스크립트를 실행할 것이다; 악성 코드는 이런 방식으로 실행될 수 있다. filter_input()PHP 5.2에 도입되었다.이전 PHP 버전의 사용자는htmlspecialchars()기능 또는 사용자 입력을 사용하기 전에 검사하기 위한 정규식.

펄 프로그래밍 언어

펄은 웹 개발에 자주 사용되는 또 다른 언어다.Perl 스크립트는 전통적으로 CGI(Common Gateway Interface Applications)로 사용된다.사실 펄은 CGI를 쓰는 너무나 흔한 방법이라 두 사람은 종종 헷갈린다.CGI는 Perl이 아닌 다른 언어로 작성될 수 있으며(다중 언어와의 호환성은 CGI 프로토콜의 설계 목표) Perl 스크립트를 CGI(FastCGI, Plack 또는 Apache의 mod_perl 등)를 사용하는 것보다 웹 서버와 상호운용하도록 하는 다른 방법이 있다.

펄 CGI는 한때 웹 애플리케이션을 작성하는 매우 일반적인 방법이었다.그러나 오늘날 많은 웹호스트들은 PHP만을 효과적으로 지원하며, 웹응용프로그램의 개발자들은 종종 그것들과의 호환성을 추구한다.

위와 유사한 형태의 CGI 모듈을 사용하는 현대식 Perl 5 CGI는 다음과 같이 보일 수 있다.

form_handler.pl 

#!/usr/bin/env perl 사용하다 엄한; 사용하다 CGI qw(:표준);  나의 달러명 = PARAM.("이름"); 인쇄하다 머리글; 인쇄하다 html(     보디(         p("안녕, 달러이름!"),     ), );

양식-전자 메일 스크립트

서버측 스크립트의 가장 단순하고 가장 일반적으로 필요한 유형으로는 단순히 제출된 양식의 내용을 이메일로 전송하는 것이 있다.그러나 이런 종류의 스크립트는 스팸 발송자들에 의해 자주 악용되고 있으며, 현재 사용되고 있는 많은 인기 있는 폼투이메일 스크립트들은 스팸 메일을 보내기 위한 목적으로 하이잭킹에 취약하다.이런 유형의 대본 중 가장 인기 있는 것은 맷의 스크립트 아카이브가 만든 'FormMail.pl'이었다.오늘날, 이 스크립트는 업데이트의 부족, 보안상의 문제, 그리고 구성의 어려움으로 인해 더 이상 새로운 개발에서 널리 사용되지 않는다.

폼 빌더

일부 회사들은 양식을 호스트 서비스로 제공한다.보통, 이 회사들은 웹 페이지에 내장될 수 있는 양식을 만들고 호스팅하기 위한 일종의 시각적 편집기, 보고 도구, 인프라 등을 제공한다.[8]웹 호스팅 회사는 고객에게 추가 서비스로 템플릿을 제공한다.다른 양식 호스팅 서비스는 서비스 코드를 사이트의 HTML에 붙여 사용자가 자신의 웹사이트에 설치할 수 있는 무료 연락처 양식을 제공한다.

역사

HTML 양식은 Viola 브라우저에 의해 처음 구현되었다.[9]

참고 항목

참조

  1. ^ "HTML/Elements/label". w3.org wiki.
  2. ^ Satrom, Brandon (November 2011). "Better Web Forms with HTML5 Forms". MSDN Magazine. Microsoft. Retrieved 2014-02-20.
  3. ^ "Forms – HTML5". w3.org. W3C. Retrieved 2014-02-20.
  4. ^ "input type=color – color-well control". w3.org. W3C. Retrieved 2014-10-31.
  5. ^ 'mailto' URL을 양식 작업으로 사용한 이메일 기반 HTML 양식 제출에 대한 사용자 에이전트 지원은 HTML 3.2 시대 동안 RFC 1867 섹션 5.6에서 제안되었다.다양한 웹브라우저는 별도의 이메일 프로그램을 호출하거나, 그들만의 초보적인 SMTP 기능을 사용하거나, 전체 이메일 클라이언트를 구현함으로써 인터넷 제품군이 됨으로써 그것을 구현했다.때로는 신뢰할 수 없지만 웹 서버나 CGI 스크립트를 사용하지 않고 폼 데이터를 전송할 수 있는 간단한 방법으로 잠시 인기가 있었다.
  6. ^ "PHP: Hypertext Preprocessor".
  7. ^ "Encyclopedia Web".
  8. ^ Garofalo, Josh. "Intro to Online Forms and Form Builders". Blitzen Blog.
  9. ^ "ViolaWWW". webdesignmuseum.org. Web Design Museum. Retrieved 17 February 2022.

외부 링크