양식은 양식 요소를 사용하여 정의됩니다. 그러면 폼 내의 모든 요소는 해당 폼에 속하게 됩니다.
<form> ... </form>
action 속성은 도입부인 <form>에서 예상됩니다. 이는 양식 데이터에 어떤 일이 일어날지 지정하는 데 사용됩니다. 이것은 일반적으로 php 애플리케이션입니다.
<form method="post" action="form.php"> ... </form>
지정한 파일을 실제로 찾을 수 있는지 확인합니다. 따라서 올바른 경로를 설정해야 합니다.
스크립트 대신 이메일 주소를 입력할 수도 있습니다.
<form method="post" action=mailto:kontakt@psd-tutorials.de method="post" enctype="text/plain"> ... </form>
이 경우 양식 데이터가 이메일로 전송됩니다. 물론 이것은 우아하지 않기 때문에 스크립트 변형이 거의 항상 사용되는 이유입니다. 그러나 스크립트가 준비되어 있지 않다면 필요한 경우 이메일로 양식을 보낼 수도 있습니다.
양식 요소의 또 다른 중요한 속성은 메소드입니다. 이 속성은 양식 콘텐츠를 전송하기 위한 HTTP 전송 방법을 정의하는 데 사용됩니다. 두 가지 변형을 사용할 수 있습니다.
- post = 양식 데이터는 두 단계에 걸쳐 지정된 주소로 전송됩니다. 먼저 브라우저가 지정된 주소에 접속합니다. 이 작업이 성공하면 양식 데이터가 스크립트로 전송됩니다.
- get = 이 방법을 사용하면 양식 데이터가 작업 속성에 할당된 URL 끝에 추가됩니다. 따라서 양식 데이터는 브라우저의 주소 표시줄에서도 볼 수 있습니다.
이 두 가지 변형 중 어떤 것을 사용하여 양식 데이터를 전송해야 하는지에 대한 질문이 자연스럽게 생깁니다. 원칙적으로는 둘 다 사용할 수 있습니다. 그러나 특히 많은 양의 데이터를 서버에 업로드하거나 파일을 서버에 업로드하는 경우에는 게시물을 사용해야 합니다.
간단한 양식 필드
지금까지는 양식의 외부 프레임워크만 정의되었습니다. 그러나 양식 자체는 아직 브라우저에 표시되지 않습니다.
<form method="post" action="form.php"> ... </form>
이제 양식을 콘텐츠/생명으로 채울 차례입니다.
가장 자주 필요한 필드 유형은 아마도 한 줄 입력 필드일 것입니다. 예를 들어 성, 이름 및 이메일 주소를 쿼리하는 데 사용됩니다. 한 줄 입력 필드는 다음과 같이 정의됩니다.
<입력 유형="텍스트" 이름="이름" />
입력 요소에 속성-값 조합 type="text" 가 할당됩니다. 또한 각 입력 필드에 내부 식별자를 지정해야 합니다. 이 식별자는 문서 내에서 고유해야 합니다. 스크립트를 사용하여 양식 데이터를 처리할 때 특히 유용합니다. 식별자에 공백이나 특수 문자를 사용하지 마세요.
브라우저에서 결과를 보면 다음 그림이 표시됩니다:
전체가 아직 특별히 멋지게 보이지는 않습니다. 하지만 텍스트 필드를 클릭하면 이미 입력이 가능하다는 것을 알 수 있습니다.
방문자가 필드에 무엇을 입력해야 하는지 알 수 있도록 레이블은 물론 아직 누락되어 있습니다.
이름: <입력 유형="텍스트" 이름="이름" />
여기에서도 브라우저에서 보면 원하는 결과를 얻을 수 있습니다.
크기 속성을 사용하여 필드 너비를 결정할 수 있습니다.
이름: <입력 유형="text" name="firstname" size="30" /> <br /> 우편번호: <입력 유형="text" name="plz" size="5" />
원하는 필드 너비가 크기 속성에 할당됩니다.
여기서 5는 정확히 5글자에 해당합니다. 최대 길이 속성도 이 맥락에서 흥미롭습니다. 필드에 입력할 수 있는 최대 문자 수를 지정하기 때문입니다. 다음은 또 다른 예입니다:
이름: <입력 유형="text" name="firstname" size="30" maxlength="40" />
최대 길이에 지정된 값이 크기에 지정된 값보다 크면 필드가 자동으로 스크롤되어 더 긴 항목을 입력할 수 있습니다.value 속성을 사용하여 필드를 미리 설정할 수 있습니다.
이름: <입력 유형="텍스트" 이름="이름" 값="사용자 이름" />
할당된 값은 필드 사전 할당으로 간주됩니다.
사용자는 이 기본값을 삭제할 수 있습니다.
필드에서 값이 삭제되지 않도록 할 수도 있습니다. 여기에는 더 이상 진정한 의미의 입력 필드가 아닌 입력 필드를 정의하는 것이 포함됩니다. 실제로 이러한 필드는 종종 출력에 사용됩니다. 예를 들어 스크립트에 의해 결정된 값을 표시하는 데 유용할 수 있습니다. 예를 들어 계산기를 생각해 보세요. 그러나 방문자가 더 이상 변경할 수 없는 텍스트로 필드를 수동으로 미리 지정할 수도 있습니다. (참고: 안타깝게도 PDF 보기에서 유로 기호가 올바르게 표시되지 않습니다.)
<입력 이름="가격" 유형="텍스트" 값="€ 699.-" 읽기 전용 />
필드를 읽기 전용으로 설정하려면 필드에 읽기 전용 속성을 할당합니다. 다시 한 번 결과를 살펴보세요:
미리 정의된 텍스트를 바로 볼 수 있습니다. 하지만 삭제할 수는 없습니다.
비밀번호 필드 정의
비밀번호 필드는 당연히 알고 계실 겁니다. 등록할 때마다 비밀번호를 입력해야 합니다. (보통 두 번 입력해야 하는 경우도 있습니다).
입력 필드에 입력한 데이터는 표시되지 않지만 브라우저에서 별표/점으로 자동 대체됩니다. 이 변형의 장점은 비밀번호를 입력할 때 어깨 너머로 보고 있는 사람이 비밀번호를 해독할 수 없다는 것입니다. 하지만 비밀번호 입력란이 자동으로 안전하다는 것은 오해입니다. 실제로 일반 HTTP에서는 양식이 전송될 때 비밀번호가 일반 텍스트로 전송됩니다.
비밀번호 필드는 다음과 같이 정의됩니다:
<입력 유형="비밀번호" 이름="비밀번호" />
유형 속성에는 password라는 값이 할당됩니다. 다시 한 번 결과를 살펴보세요.
여기에 무언가를 입력하면 브라우저에서 입력할 때 인식할 수 없게 됩니다.
