Ajax 기반 HTML5 / CSS3 문의 양식 작성 방법

 
 
  
귀하의 이메일이 전송되었습니다. 후자!
  

  
양식을 제출하는 중 오류가 발생했습니다.
  
 
 이름   
  
 
 이메일   
  
 
 메시지 <?php if(isset($_POST['comments']))  if(function_exists('stripslashes'))  echo stripslashes($_POST['comments']);  else  echo $_POST['comments'];   ?>  
  
 우리에게 메일 보내기!  
 
  

다른 사람이 있다는 것을 눈치 챘을 수도 있습니다. 조건부 블록 시작 양식 직후. 이것은 이름이 지정된 변수를 검사합니다. $ hasError 확인시 오류 메시지가 표시됩니다. 이 대체 방법은 다음과 같습니다. 자바 스크립트가 비활성화 된 경우에만 사용됩니다. 브라우저에서 동적 오류를 생성 할 수 없습니다..

우리가 찾을 수있는 모든 길 개별 PHP 변수 확인 중입니다. 이 선언문은 이미 부분 데이터 만 채워져 양식이 제출 된 경우 규제됩니다. 이는 이미 채워진 필드의 내용을 표시하는 또 다른 대체 시스템입니다. 적절한 사용자 경험을위한 멋진 트릭입니다.!

양식 완성 후 직접적으로 jQuery 함수 우리는 썼다. pageload의 기본 구현이므로 먼저이 부분에 대해 설명하겠습니다. 그러나 브라우저가 JavaScript를 허용하지 않으면 기본적으로 PHP 코드를 사용할 수 있습니다.

jQuery로 열기

이 주제에 관해 이야기하는 가장 쉬운 방법은 바로 들어가기입니다. 각 블록을 한 줄씩 나눠서 스크립트가 실제로 무엇을 확인하는지 확인할 수 있습니다..

그러나 만약 당신이 단지 길을 잃으면 프로젝트 코드 파일을 검토한다.. 모든 전체 블록은 jQuery 웹 사이트에 미리 작성되어 문서화되어 있습니다. 시작하려면 다른 코드와 비슷한 코드를 엽니 다.

당신이 익숙하다면 콜백 당신은 우편() 함수에는 내장 된 매개 변수 집합이 있습니다. 콜백은 호출되는 더 작은 함수입니다. 다른 함수의 데이터 응답시.

예를 들어, 우리가 jQuery.post () 함수가 전자 메일을 성공적으로 촬영하면 자체 내부 함수를 호출하여 슬라이딩 애니메이션을 표시합니다. 이 코드는 모두 자체 블록으로 작성하고 다른 곳으로 이동할 수 있습니다. 그러나이 튜토리얼에서는 콜백을 인라인 함수로 작성하는 것이 훨씬 쉽습니다..

우리의 PHP를 깨고

언급해야 할 마지막 장애물은 논리 우리의 PHP 프로세서 뒤에. 이것은 실제로 사용할 백엔드 시스템입니다. 메일 기능 호출 과 메시지를 보내라.. 아래 예제에서 사용 된 모든 코드는 메인의 맨 위에 직접 있습니다. .PHP 파일, HTML 출력 전에.

또한 페이지를 새로 고치는 몇 가지 내부 스타일이 있습니다. 여기서 특별히 새로운 것은 없습니다. 그래서 우리는 세부 사항에 들어 가지 않을 것입니다. 그러나, 그 styles.css 문서는 프로젝트 코드에 포함되어 있으며 기초적인 CSS3 기술을 포함합니다..

 
시작하려면 PHP 절을 열고 확인하십시오. 양식이 제출 된 경우. 그만큼 우편 변하기 쉬운 “제출 된” 실제로 우리 양식의 끝에 추가 된 숨겨진 입력 필드였습니다. 그것은 유용한 방법입니다. 사용자가 아무것도 제출하지 않았는지 확인 아직 우리는 서버 리소스를 낭비하지 않습니다..
 
이 후에 우리는 3 개의 분리 된 다른 경우라면 보고 확인하는 진술 각 입력 필드가 채워진 경우. 나는 그들이 본질적으로 모두 매우 반복적이기 때문에 여기에 논리의 각 비트를 포함하지 않을 것이다. 그러나 간단한 예제를 제공하기 위해 아래에 전자 메일 확인 절을 포함 시켰습니다.
 
// 유효한 전자 메일이 필요한 경우 if (trim ($ _ POST [ 'email']) === ") $ emailError = '전자 메일 주소를 입력하는 것을 잊어 버렸습니다.'; $ hasError = true; else if (! preg_match ( "/^[[::num:]][a-z0-9_.-]*@[a-z0-9.-]+\.[az]2,4$/i", trim ($ $ emailError = '잘못된 이메일 주소를 입력했습니다.'; $ hasError = true; else $ email = trim ($ _ POST [ 'email']); 
 
PHP는 값에서 모든 공백을 없애고 남은 것이 있는지 확인합니다. 그렇다면 우리는 상세한 정규 표현식 (Regex) 사용자의 입력 문자열이 전자 메일 패턴과 일치하는지 확인.
 
당신은 확실히 어떻게 이해할 필요가 없습니다. preg_match () 이 스크립트를 작성합니다. 그것은 유용한 기능이다. 성공적인 데이터 유형에 대한 규칙 및 요구 사항 결정, 그러나 진짜로 파악하기 위하여 진보 된 프로그래밍 지식을 명령한다. 이 시나리오에서는 사용자가 선택한 몇 개의 문자 만 입력하도록하고 있습니다. @ 기호 다음에 2 ~ 4 자 ~을 대표하는 최상위 도메인.
 
우리의 모든 논리가 통과하고 아무런 오류도 반환하지 않으면 메시지를 보낼 시간입니다! 이 코드는 개별 변수를 설정하여 전자 메일 메시지를 사용자 정의하고 일부를 설정합니다. 메일 헤더 그 과정을 위해.
 
// 오류가 없으면 오류를 이메일에 보내십시오! if (! isset ($ hasError)) $ emailTo = 'youremailhere@googlemail.com'; $ 제목 = '보낸 사람의 메시지'. $ name; $ sendCopy = trim ($ _ POST [ 'sendCopy']); $ body = "Name : $ name \ n \ nEmail : $ email \ n \ n 코멘트 : $ comments"; $ headers = '보낸 사람 :'. ' <'.$emailTo.'>'. "\ r \ n". '답장하다: ' . $ email; mail ($ emailTo, $ subject, $ body, $ headers); // 부울 완료 값을 TRUE로 설정합니다. $ emailSent = true;  
 
코드가 전자 메일 주소를 알아내는 방법을 궁금해했다면,이 부분을 채울 부분입니다. 우리 집합의 첫 번째 변수는 제목이 붙었습니다 $ emailTo 어느 것이 든 포함해야한다. 메시지를받을 전자 메일 주소.
 
우리 내부 $ body 변수 우리는 \엔 메시지에 줄 바꿈 문자를 추가하십시오. 이렇게하면 보낸 사람의 이름, 이메일 주소, 그들의 휴식을 위해 메시지 내용. 당연히 디스플레이를 멋지게 꾸밀 수 있지만이 구조는 잘 작동합니다..
 
결론
 
이것은 고급 문의 양식에 대한 자습서를 닫습니다. 내 요소와 관련된 요소의 스타일을 지정하려면 예제를 확인하십시오. styles.css 프로젝트 코드 내에서. 그러나이 페이지는 자신 만의 룩앤필을 쉽게 디자인 할 수 있도록 충분히 구조화되어 있습니다..
 
소스 코드를 다운로드하고 조금 더 가까이서 무엇을했는지 살펴보십시오. 튜토리얼을 따르는 것이 좋지만 프로젝트 소스에 직접 액세스하는 것은 매우 중요합니다. 또한 사용자 정의를 손쉽게 만들 수있는 간단한 스타일 시트를 포함 시켰습니다.보기에 감사드립니다.!