KompoZer로 양식을 추가하는 방법

01 / 06

KompoZer로 양식 추가

KompoZer로 양식을 추가하십시오. 스크린 샷 의례 Jon Morin

로그인 페이지, 새 계정 작성 또는 질문 또는 의견 제출과 같이 사용자가 제출 한 입력을 처리해야하는 웹 페이지를 작성하는 경우가 많습니다. 사용자 입력이 수집되어 HTML 양식을 사용하여 웹 서버로 전송됩니다. 양식은 KompoZer에 내장 된 도구로 쉽게 추가 할 수 있습니다. HTML 4.0이 지원하는 모든 양식 필드 유형은 KompoZer로 추가 및 편집 할 수 있지만이 자습서에서는 텍스트, 텍스트 영역, 제출 및 재설정 버튼을 사용합니다.

02 of 06

KompoZer로 새로운 양식 만들기

KompoZer로 새로운 양식 만들기. 스크린 샷 의례 Jon Morin

KompoZer에는 양식을 웹 페이지에 추가하는 데 사용할 수있는 풍부한 양식 도구가 있습니다. 폼 단추를 클릭하거나 도구 모음에서 함께 나타나는 드롭 다운 메뉴를 클릭하여 양식 도구에 액세스합니다. 사용자 자신의 양식 처리 스크립트를 작성하지 않으면 설명서 또는 스크립트를 작성한 프로그래머로부터이 단계에 대한 정보를 얻어야합니다. mailto 양식을 사용할 수도 있지만 항상 작동하는 것은 아닙니다 .

  1. 양식을 페이지에 표시 할 위치에 커서를 놓으십시오.
  2. 도구 모음에서 양식 단추를 클릭하십시오. 양식 등록 정보 대화 상자가 열립니다.
  3. 양식의 이름을 추가하십시오. 이름은 양식을 식별하기 위해 자동 생성 된 HTML 코드에 사용되며 필수입니다. 양식을 추가하기 전에 페이지를 저장해야합니다. 저장되지 않은 새 페이지로 작업하는 경우 KompoZer는 저장하라는 메시지를 표시합니다.
  4. 조치 URL 필드에 양식 데이터를 처리 할 스크립트에 URL을 추가하십시오. 폼 핸들러는 대개 PHP 또는 유사한 서버 측 언어로 작성된 스크립트입니다. 이 정보가 없으면 웹 페이지는 사용자가 입력 한 데이터로는 아무 것도 할 수 없습니다. KompoZer는 입력하지 않으면 양식 처리기의 URL을 입력하라는 메시지를 표시합니다.
  5. 양식 데이터를 서버에 제출하는 데 사용되는 방법을 선택하십시오. 두 가지 선택 사항은 GET과 POST입니다. 스크립트가 요구하는 방법을 알아야합니다.
  6. 확인을 클릭하면 양식이 페이지에 추가됩니다.

03 / 06

KompoZer를 사용하여 텍스트 필드를 양식에 추가

KompoZer를 사용하여 텍스트 필드를 양식에 추가하십시오. 스크린 샷 의례 Jon Morin

KompoZer가있는 페이지에 양식을 추가하면 해당 양식이 연한 파란색 점선으로 표시됩니다. 이 영역 내에 양식 필드를 추가합니다. 페이지의 다른 부분과 마찬가지로 텍스트를 입력하거나 이미지를 추가 할 수도 있습니다. 텍스트는 사용자를 안내하기 위해 양식 필드에 프롬프트 또는 레이블을 추가하는 데 유용합니다.

  1. 텍스트 필드를 윤곽선이있는 양식 영역으로 이동할 위치를 선택하십시오. 레이블을 추가하려면 먼저 텍스트를 입력 할 수 있습니다.
  2. 도구 모음의 양식 버튼 옆에있는 아래쪽 화살표를 클릭하고 드롭 다운 메뉴에서 양식 필드를 선택하십시오.
  3. 양식 필드 등록 정보 창이 열립니다. 텍스트 필드를 추가하려면 필드 유형 드롭 다운 메뉴에서 텍스트를 선택하십시오.
  4. 텍스트 필드에 이름을 지정하십시오. 이름은 HTML 코드에서 필드를 식별하는 데 사용되며 양식 처리 스크립트는 데이터를 처리 할 이름이 필요합니다. 이 대화 상자에서 More Properties / Fewer Properties 단추를 누르거나 Advanced Edit 단추를 눌러 다른 많은 선택적 속성을 수정할 수 있습니다. 그러나 지금은 필드 이름을 입력합니다.
  5. 확인을 클릭하면 텍스트 필드가 페이지에 나타납니다.

04 / 06

KompoZer로 양식에 텍스트 영역 추가

KompoZer를 사용하여 양식에 텍스트 영역 추가. 스크린 샷 의례 Jon Morin

경우에 따라 메시지 또는 질문 / 설명 필드와 같이 많은 텍스트를 양식에 입력해야 할 때가 있습니다. 이 경우 텍스트 필드는 적합하지 않습니다. 양식 도구를 사용하여 텍스트 영역 양식 필드를 추가 할 수 있습니다.

  1. 텍스트 영역을 원할 때 폼 개요에 커서를 놓습니다. 레이블을 입력하려면 레이블 텍스트를 입력하고 Enter 키를 눌러 새 줄로 이동 한 다음 양식 필드를 추가하는 것이 좋습니다. 페이지의 텍스트 영역 크기가 레이블이 왼쪽이나 오른쪽에 있어야합니다.
  2. 툴바에서 Form 버튼 옆에있는 아래쪽 화살표를 클릭하고 드롭 다운 메뉴에서 Text Area를 선택하십시오. 텍스트 영역 등록 정보 창이 열립니다.
  3. 텍스트 영역 필드의 이름을 입력하십시오. 이름은 HTML 코드의 필드를 식별하며 양식 처리 스크립트가 사용자 제출 정보를 처리하는 데 사용됩니다.
  4. 텍스트 영역에 표시 할 행 및 열 수를 입력하십시오. 이 치수는 페이지에서 필드의 크기와 스크롤이 발생하기 전에 필드에 입력 할 수있는 텍스트의 양을 결정합니다.
  5. 이 창에서 다른 컨트롤과 함께 고급 옵션을 지정할 수 있지만 필드 이름과 치수로 충분합니다.
  6. 확인을 클릭하면 텍스트 영역이 양식에 나타납니다.

05/06

KompoZer를 사용하여 Submit 버튼과 Reset 버튼을 폼에 추가하십시오.

KompoZer를 사용하여 Submit 버튼과 Reset 버튼을 폼에 추가하십시오. 스크린 샷 의례 Jon Morin

사용자가 페이지에서 양식을 채운 후에는 정보를 서버에 제출할 수있는 방법이 필요합니다. 또한 사용자가 다시 시작하거나 실수를하려는 경우 모든 양식 값을 기본값으로 재설정하는 컨트롤을 포함하는 것이 좋습니다. 특수 폼 컨트롤이 Submit 및 Reset 버튼이라는 각각의 기능을 처리합니다.

  1. 제출 또는 재설정 버튼을 원하는 부분에 커서를 위치시킵니다. 대부분 양식의 나머지 필드 아래에 위치합니다.
  2. 툴바에서 Form 버튼 옆에있는 아래쪽 화살표를 클릭하고 드롭 다운 메뉴에서 Define Button을 선택하십시오. 버튼 등록 정보 창이 나타납니다.
  3. 유형 드롭 다운 메뉴에서 버튼 유형을 선택하십시오. 선택은 제출, 재설정 및 단추입니다. 이 경우 제출 유형을 선택합니다.
  4. 버튼에 이름을 지정하십시오.이 이름은 HTML 및 양식 처리 코드에서 양식 요청을 처리하는 데 사용됩니다. 웹 개발자는 일반적으로이 필드의 이름을 "제출"합니다.
  5. 값이라는 상자에 단추에 표시 할 텍스트를 입력하십시오. 텍스트는 짧아야하지만 버튼을 눌렀을 때 발생할 내용을 설명해야합니다. '제출', '양식 제출'또는 '보내기'와 같은 것이 좋은 예입니다.
  6. 확인을 클릭하면 단추가 양식에 나타납니다.

재설정 단추는 동일한 프로세스를 사용하여 양식에 추가 할 수 있지만 제출 대신 유형 필드에서 재설정을 선택하십시오.

06 년 6 월

KompoZer로 양식 편집하기

KompoZer로 양식 편집. 스크린 샷 의례 Jon Morin

KompoZer에서 양식 또는 양식 필드를 편집하는 것은 매우 쉽습니다. 편집하려는 필드를 두 번 클릭하기 만하면 필요에 맞게 필드 속성을 변경할 수있는 적절한 대화 상자가 나타납니다. 위의 다이어그램은이 자습서에서 다루는 구성 요소를 사용하는 간단한 양식을 보여줍니다.