양식을 채우기 위해 - 인형

양식을 사용하여 웹 사이트 방문자의 의견을 얻을 수 있습니다. 방문자로부터 입력을 캡처하면 페이지의 기존 내용을 수정할 수 있습니다. 예를 들어, 항공사 웹 사이트의 가격 및 날짜 필터를 사용하면 원하는 항공편을 더 빨리 찾을 수 있습니다. 나중에 사용할 수 있도록 입력을 저장할 수도 있습니다.

예를 들어 웹 사이트는 등록 양식을 사용하여 이메일, 사용자 이름 및 암호 정보를 수집하여 나중에 액세스 할 수 있습니다.

양식 작동 방식 이해

양식은 다음 프로세스를 사용하여 사용자가 서버에 입력 한 정보를 전달합니다.

1. 브라우저는 클라이언트 컴퓨터에 양식을 표시합니다.

2. 사용자가 양식을 완성하고 제출 버튼을 누릅니다.

3. 브라우저는 양식에서 수집 한 데이터를 서버로 제출합니다.

4. 서버는 데이터를 처리 및 저장하고 클라이언트 시스템에 응답을 보냅니다.

5. 브라우저는 대개 제출이 성공했는지 여부를 나타내는 응답을 표시합니다.

이제는 Python, PHP 및 Ruby와 같은 서버 측 프로그래밍 언어를 사용하여 양식 제출을 수신하고 저장하는 스크립트를 작성한다는 사실을 알아야합니다. 양식은 매우 유연하며 다양한 사용자 입력을 기록 할 수 있습니다. 양식에 사용되는 입력 필드에는 자유 텍스트 필드, 라디오 버튼, 체크 박스, 드롭 다운 메뉴, 범위 슬라이더, 날짜, 전화 번호 등이 포함될 수 있습니다. 또한 입력 필드는 사용자 입력없이 초기 기본값으로 설정할 수 있습니다.

선택된 양식 속성 속성 이름

가능한 값	설명	유형
확인란	전자 메일 제출 텍스트 암호 라디오 (간단히하기 위해 값의 전체 목록이 생략되었습니다.) 양식에 표시 할 입력 필드의 유형을 정의합니다.	예에서 텍스트는 자유 텍스트 필드에 사용되고 제출은 제출 버튼을 만드는 데 사용됩니다. value text
입력 컨트롤의 초기 값.	기본 서식 작성하기

양식 요소로 양식 정의로 기본 양식을 작성합니다.

시작 태그와 닫기 태그를 추가하여 시작하십시오.

1. action 속성을 사용하여 양식 요소에서 양식 데이터를 보낼 위치를 지정하십시오.

   시작 태그에 작업 속성을 추가하고 사용자 입력을 처리하고 저장하는 스크립트의 URL과 동일하게 설정하십시오.

2. method 속성을 사용하여 양식 요소에서 양식 데이터를 보내는 방법을 지정하십시오.

   여는 태그에 메소드 속성을 추가하고 POST와 동일하게 설정하십시오.

3. method 속성은 GET 또는 POST와 동일하게 설정됩니다. 일반적으로 POST는 중요한 정보 (예: 신용 카드 번호)를 저장하는 데 사용되는 반면 GET은 사용자가 제출 된 양식 (예: 항공사 편성 목록)의 결과를 다른 사람들과 북마크하거나 공유 할 수있게하는 데 사용됩니다.

   사용자가 입력 요소를 사용하여 응답을 입력하고 제출하는 방법을 제공합니다.

   여는 태그와 닫는 태그 사이에 하나의 태그를 만듭니다.

4. 양식에는 시작 및 종료 태그가 하나만 있습니다. 그러나 사용자 데이터를 수집하고 제출하는 태그가 두 개 이상 있어야합니다.

   입력 요소의 type 속성을 사용하여 입력 유형을 지정하십시오.

   이 예에서는 type 속성을 "text"로 설정합니다.

5. 태그에는 닫는 태그가 없습니다.이 태그는 사용자가 여는 모든 태그 닫기 규칙 대신 예외입니다. 이러한 태그를 자체 닫기 태그라고합니다.

   마지막으로 다른 태그를 만들고 type 속성을 submit과 동일하게 설정합니다.

   다음 예제 코드는 표시된 양식을 작성하는 구문을 보여줍니다.

6. 이 양식의 작업 속성은 mailto와 같게 설정됩니다.이 속성은 기본 메일 클라이언트 (예: Outlook 또는 Gmail)를 사용하여 이메일을 보내도록 브라우저에 신호를 보냅니다. 브라우저가 전자 메일 링크를 처리하도록 구성되지 않은 경우이 양식은 작동하지 않습니다. 일반적으로 양식은 서버에 제출되어 양식의 내용을 처리하고 저장하지만이 예제 양식에서는 내용이 사용자의 전자 메일 응용 프로그램에 제출됩니다.