좋은 하루 친구! PHP에서 사용자 등록에 대해 살펴보겠습니다. 먼저 사용자 등록 조건을 정의하겠습니다.

• 알고리즘을 사용하여 비밀번호를 암호화합니다. MD5
• 비밀번호는 "솔트"됩니다.
• 로그인 가능 여부 확인
• 문자로 사용자 활성화.
• 데이터 쓰기 및 저장 MySQL DBMS

쓰기용 이 스크립트사용자 등록이 무엇인지 이해해야 합니다. 사용자 등록은 실제 사용자로부터 데이터를 수신하여 데이터를 처리 및 저장하는 것입니다.

설명한다면 간단한 말로등록은 우리의 경우 사용자에게 권한을 부여할 수 있는 특정 데이터의 기록 및 저장일 뿐입니다. 이것이 로그인 및 비밀번호입니다.

권한 부여는 특정 개인 또는 개인 그룹에 특정 작업을 수행할 수 있는 권한을 부여하고 이러한 작업을 수행하려고 할 때 이러한 권한을 확인하는 프로세스입니다. 간단히 말해서, 승인을 사용하여 당사 웹사이트의 하나 또는 다른 콘텐츠에 대한 액세스를 제한할 수 있습니다.

인증 등록을 구현하기 위한 스크립트 디렉토리의 구조를 고려해 보겠습니다. 스크립트를 논리적 구성 요소로 분해해야 합니다. 등록 및 권한 부여 모듈을 별도의 디렉토리에 배치했습니다. 또한 데이터베이스에 대한 연결을 별도의 디렉터리에 배치합니다. MySQL, 사용자 정의 기능이 있는 파일, 스타일 파일 CSS그리고 우리의 템플릿 HTML. 이 구조스크립트를 빠르게 탐색할 수 있습니다. 모듈 등이 많은 대규모 사이트가 있다고 상상해보십시오. 그리고 순서가 없으면 그런 혼란 속에서 무언가를 찾기가 매우 어려울 것입니다.

우리는 모든 데이터를 MySQL DBMS, 등록 데이터를 저장할 작은 테이블을 만들어 보겠습니다.

먼저 데이터베이스에 테이블을 생성해야 합니다. 테이블이 호출됩니다 bez_reg어디 베즈는 테이블 접두어이고 등록테이블 이름.

테이블 구조: bez_reg

- - 테이블 구조 `bez_reg` - CREATE TABLE IF NOT EXISTS` bez_reg` (`id` int (11) NOT NULL AUTO_INCREMENT,` login` varchar (200) NOT NULL, `pass' varchar (32) NOT NULL , `salt ` varchar (32) NOT NULL,` active_hex` varchar (32) NOT NULL, `status` int (1) NOT NULL, PRIMARY KEY (` id`)) ENGINE = MyISAM DEFAULT CHARSET = utf8 AUTO_INCREMENT = 1;

이제 추가 작업을 위한 기본 스크립트를 작성해 보겠습니다.

INDEX.PHP 파일

CONFIG.PHP 파일

"); ?>

404.html 파일

오류 404

페이지에서 404 오류가 발생했습니다.

반품

BD.PHP 파일

INDEX.HTML 파일

FUNCT.PHP 파일

"." \ n "; if (is_array($ 데이터)) (foreach($ 데이터를 $ val로) $ err. ="

". $ val."

"." \n ";) 그렇지 않으면 $ 오류 ="

".$ 데이터."

"." \n "; $ 오류. =""." \ n "; return $ err;) / ** MySQL 쿼리를 위한 단순 래퍼 * @param string $ sql * / function mysqlQuery ($ sql) ($ res = mysql_query ($ sql); / * 결과 확인하기 MySQL에 보낸 실제 쿼리와 오류를 보여줍니다. 디버깅에 편리합니다. * / if (! $ res) ($ message = "Invalid query:". mysql_error (). "\ n"; $ message. = " 전체 쿼리: ". $ sql; die($ message);) return $ res;) / ** 단순 소금 생성기 * @param string $ sql * / function salt() ($ salt = substr(md5(uniqid()) ), - 8); 반환 $ 소금;)

글쓰기 등록을 해보자. 먼저 사용자가 처리를 위해 데이터를 입력할 수 있도록 등록 양식 템플릿을 만들어야 합니다. 다음으로, 입력된 사용자 데이터의 정확성을 검사하는 양식 처리기 자체를 작성해야 합니다. 데이터가 성공적으로 확인되면 데이터베이스에 기록하고 사용자에게 편지를 보내 계정을 활성화합니다.

REG.PHP 파일

성공적으로 등록했습니다! 계정을 활성화하세요!!"; // 계정 활성화 if (isset ($ _ GET [" key "])) (// 키 확인 $ sql =" SELECT * FROM `". BEZ_DBPREFIX. "Reg` WHERE` active_hex` = "". Escape_str ( $ _GET ["key"]). "" "; $ Res = mysqlQuery ($ sql); if (mysql_num_rows ($ res) == 0) $ err = 활성화 키가 올바르지 않습니다! "; // 오류를 확인하고 사용자에게 표시 if (count ($ err)> 0) echo showErrorMessage ($ err); else (// 사용자의 주소 가져오기 $ row = mysql_fetch_assoc ($ res); $ email = $ row ["login "]; // 계정 사용자 활성화 $ sql = "UPDATE` ".BEZ_DBPREFIX." reg` SET `status` = 1 WHERE` login` = "". $ email. "" "; $ res = mysqlQuery($ sql ); // 활성화를 위해 이메일을 보냅니다. $ title = "(! LANG: http: // 사이트의 계정이 성공적으로 활성화되었습니다."; $message = "Поздравляю Вас, Ваш аккаунт на http://сайт успешно активирован"; sendMessageMail($email, BEZ_MAIL_AUTOR, $title, $message); /*Перенаправляем пользователя на нужную нам страницу*/ header("Location:". BEZ_HOST ."less/reg/?mode=reg&active=ok"); exit; } } /*Если нажата кнопка на регистрацию, начинаем проверку*/ if(isset($_POST["submit"])) { //Утюжим пришедшие данные if(empty($_POST["email"])) $err = "Поле Email не может быть пустым!"; else { if(!preg_match("/^!} [이메일 보호됨](+ \.) + (2,6) $ / i ", $ _POST [" email "])) $ err =" 이메일이 잘못 입력되었습니다 "." \ N ";) if (empty ($ _ POST [ "pass"])) $ err = "비밀번호 필드는 비워둘 수 없습니다"; if (empty ($ _ POST ["pass2"])) $ err = "비밀번호 확인 필드는 비워 둘 수 없습니다"; // 오류 확인 그리고 사용자에게 표시 if (count ($ err)> 0) echo showErrorMessage ($ err); else (/ * 계속해서 입력된 데이터를 확인합니다. 일치하는 암호를 확인합니다 * / if ($ _ POST ["pass"]! = $ _POST ["pass2" ]) $ err = "비밀번호가 일치하지 않습니다"; // 오류를 확인하고 사용자에게 표시 if (count ($ err)> 0) echo showErrorMessage ($ err); else (/ * 확인 데이터베이스에 이러한 사용자가 있는 경우 * / $ sql = "SELECT` login` FROM `". BEZ_DBPREFIX. "reg` WHERE` login` = "". escape_str ($ _ POST ["email"]). "" "; $ res = mysqlQuery($ sql); if (mysql_num_rows($ res)> 0) $ err = "죄송합니다 로그인: ". $ _POST [" 이메일 "]." busy! "; // 오류를 확인하고 사용자에게 표시 if (count ($ err)> 0) echo showErrorMessage ($ err); else (// 소금의 HASH 가져오기 $ salt = salt (); / / 비밀번호 솔트 $ pass = md5 (md5 ($ _ POST ["pass"]). $ salt); / * 모든 것이 정상이면 데이터베이스에 데이터를 씁니다. * / $ sql = "INSERT INTO` ". BEZ_DBPREFIX ." reg` VALUES("", "" . escape_str($ _ POST ["이메일"]). "", "". $ 패스. "", "". $ 소금. "", "". md5( $ salt)."", 0) "; $ res = mysqlQuery($ sql); // 활성화를 위해 이메일을 보낸다. $ url = BEZ_HOST. "less / reg /? mode = reg & key =". md5($ salt ); $ title = "(! LANG: http://site에 등록"; $message = "Для активации Вашего акаунта пройдите по ссылке ". $url .""; sendMessageMail($_POST["email"], BEZ_MAIL_AUTOR, $title, $message); //Сбрасываем параметры header("Location:". BEZ_HOST ."less/reg/?mode=reg&status=ok"); exit; } } } } ?>!}

REG_FORM.HTML 파일

이메일 활성화를 통한 PHP MySQL 사용자 등록

이메일 *:
비밀번호 *:
비밀번호 확인 *:

아이콘이 있는 필드 *필수

사용자를 등록할 준비가 되었기 때문에 권한 부여를 작성할 시간입니다. 사용자 인증을 위한 폼을 생성하고 인증 폼 핸들러를 작성하고 마지막으로 스크립트를 만들어 봅시다. 쇼.php이것은 우리가 시스템에서 승인되었는지 여부를 보여줍니다.

AUTH.PHP 파일

0) echo showErrorMessage($ err); else (/ * 사용자의 신뢰성을 확인하기 위해 데이터베이스에서 가져오기 쿼리를 만듭니다. * / $ sql = "SELECT * FROM` ". BEZ_DBPREFIX." reg` WHERE `login` =" ". escape_str ($ _ POST [" email "]) . "" AND `status` = 1"; $ res = mysqlQuery ($ sql); // 로그인이 일치하면 비밀번호를 확인 if (mysql_num_rows ($ res)> 0) (//에서 데이터 가져오기 테이블 $ row = mysql_fetch_assoc ( $ res); if (md5 (md5 ($ _ POST ["pass"]). $ row ["salt"]) == $ row ["pass"]) ($ _SESSION [" user"] = true; // 매개변수 헤더 재설정("위치:". BEZ_HOST. "Less / reg /? Mode = auth"); exit;) else echo showErrorMessage("Wrong password!");) Else echo showErrorMessage( "로그인 ". $ _POST [" 이메일 "]."찾을 수 없습니다! ");))?>

최신 PHP 버전을 사용하는 사람들을 위해 다음을 사용하여 이 스크립트를 게시합니다. PDO~부터 확대 MySQL더 이상 사용되지 않으며 최신 PHP 버전에서 제거되었습니다. 등록 및 인증 PHP mysql pdo 다운로드

아카이브는 2015년 2월 24일에 업데이트되었습니다.

주목:다음과 같은 로컬 서버에서 이 스크립트를 사용하는 경우 덴버,XAMPP, 그러면 우편함에 편지가 올 때까지 기다리지 마십시오. 편지는 공백에 있습니다 메일을 보내다... V 덴워당신은 길을 따라 그들을 찾을 수 있습니다 Z: \ tmp \! Sendmail \모든 메일 클라이언트에서 이 파일을 열 수 있습니다.

이 기사에서는 단계별 등록 절차를 안내합니다. jQuery를 사용하여.

사이트 등록에 수십 개의 필드를 채우는 것이 포함되는 경우 한 페이지에 배치하는 것은 그다지 합리적이지 않습니다. 결국, 사용자는 매우 게으른 생물이며 이 모든 필드를 채우고 싶지 않을 것입니다.

다른 옵션은 등록을 여러 단계로 나누는 것입니다. 이것은 한 번에 많은 긍정적 인 피드백을 생성합니다. 결국 단계를 수행하기 시작하면 사용자는 가장 자주 구현을 완료하려는 욕구가 있습니다.

연락처 정보, 주소, 개인 데이터 등의 논리적 블록으로 등록을 분할하는 것도 논리적입니다.

단계별 등록을 위해 여러 양식을 작성하고 별도로 서버에 데이터를 보낼 필요가 전혀 없습니다. 모든 것을 하나의 양식에 넣는 것이 훨씬 편리하지만 각 단계에서 사용자에게 양식의 특정 부분만 보여줍니다. 이것이 바로 우리 예에서 논리가 될 것입니다.

논리 외에도 처음에는 링크만 표시된다는 점을 염두에 두어야 합니다. "앞으로"/"다음 단계", 그러나 마지막 단계에서는 보이지 않지만 볼 수 있습니다. "뒤"그리고 "등록".

예제 자체를 살펴보겠습니다.

1 단계

로그인:

이메일:

비밀번호:

2 단계

이름:

성:

나이:

3단계

국가:

도시:

거리:

뒤로 다음 단계

body (margin: 0;) / * 일반 스타일 이상 * / form (width: 30%; margin: 0 auto;) form div.step (display: none;) form div.step p.step (text-align: center ; font-size: 28px;) form div.step p () form div.step p input (float: right;) a.back (display: none;) form input (display: none;) a (color: # 006600 ; 텍스트 장식: 없음;) 양식 p.talign(텍스트 정렬: 가운데;)

js / steps_registration.js에 단계 전환을 담당하는 스크립트를 배치합니다. jQuery 라이브러리도 포함하는 것을 잊지 마십시오.

$ (document) .ready (function () (// 페이지가 로드될 때까지 기다립니다. var steps = $ ("form").children (". step"); // 형식의 모든 단계를 찾습니다. $ (steps) .show (); / / 첫 번째 단계를 표시 var current_step = 0; // 현재 단계를 설정합니다 $ ("a.next").click (function () (// "다음 단계" 링크를 클릭하는 이벤트 (current_step == steps.length-2) (// 다음 단계가 마지막 단계인지 확인합니다. $ (this) .hide (); // "다음 단계" 링크를 숨깁니다. $ ("form input"). show (); // "등록" 버튼 표시) $ (" a.back "). show (); //" 뒤로 "링크 표시 current_step ++; // 현재 슬라이드의 카운터 증가 changeStep(current_step) ; // 스텝 변경)); $ (" a.back ").click (function ( ) (// 작은 이미지를 클릭하는 이벤트 if (current_step == 1) (// 이전 스텝이 그대로 되는지 확인 첫 번째 $ (this) .hide (); // "뒤로" 링크 숨기기) $ ("양식 입력") .hide (); // "등록" 버튼 숨기기 $ ("a.next"). (); // "다음 단계" 링크 표시 current_step--; // 현재 슬라이드의 카운터 감소 changeStep(current_step); // 스텝 변경)); function changeStep (i) (// 단계 변경 function $ (steps) .hide (); // 모든 단계 숨기기 $ (steps [i]). show (); // 현재 단계 표시)));

이것은 이 강의에 적용되지 않기 때문에 여기에 PHP 전송 코드를 작성하지 않을 것입니다. 편지는 양식의 첫 번째 단계에 지정된 주소로 발송된다는 점에 유의해야 합니다. 어쨌든 데모 파일을 다운로드하여 직접 확인할 수 있습니다.

온라인 트위터깔끔하고 심플한 디자인으로 페이지 작업을 보실 수 있습니다. 페이지 우측 상단에 보시면 버튼이 있습니다 권한 부여클릭하여 시스템에 모양데이터를 채우기 위해. 오늘은 웹사이트에서 비슷한 효과를 내는 방법을 알려드리겠습니다. 실제로는 매우 간단합니다. 또한 페이지의 공간을 절약하고 방문자에게 편안함을 더하는 데 도움이 됩니다. 이 기사에서는 이 전체 시스템이 어떻게 작동하는지 단계별로 안내할 것이며, 이 가이드는 학습을 원하는 사람들에게도 유용할 것입니다. 제이쿼리... 앞으로!

HTML 코드

먼저 HTML 코드로 시작해야 합니다. HTML 코드는 매우 간단합니다. 여기에는 "fieldset" 태그와 함께 양식이 표시되는 "a" 태그가 포함됩니다.

이것을 코드에 복사하기만 하면 됩니다. 새 페이지:

CSS 코드

당신은 필요 CSS 사용인증 버튼 및 로그인 양식을 정의합니다. 아래 코드는 정확히 그 기능을 수행합니다.

이 코드를 CSS 파일에 복사하거나 스타일을 정의하는 HTML 코드에 추가하기만 하면 됩니다. 이 코드는 인증 버튼을 식별합니다.

#컨테이너(
너비: 780px;
여백: 0 자동;
위치: 상대;
}

#콘텐츠 (
너비: 520px;
최소 높이: 500px;
}
a: 링크, a: 방문(
색상: # 27b;
텍스트 장식: 없음;
}
a: 호버(
텍스트 장식: 밑줄;
}
이미지(
테두리 너비: 0;
}
#톱내비(
패딩: 10px 0px 12px;
글꼴 크기: 11px;
줄 높이: 23px;
텍스트 정렬: 오른쪽;
}
#topnav a.signin(
배경: # 88bbd4;
패딩: 4px 6px 6px;
텍스트 장식: 없음;
글꼴 두께: 굵게;
색상: #fff;
-웹킷 테두리 반경: 4px;
-moz-border-radius: 4px;
테두리 반경: 4px;
* 배경: 투명 URL("이미지/signin-nav-bg-ie.png") 반복 없음 0 0;
* 패딩: 4px 12px 6px;
}
#topnav a.signin: 호버(
배경: # 59B;
* 배경: 투명 URL("이미지/signin-nav-bg-hover-ie.png") 반복 없음 0 0;
* 패딩: 4px 12px 6px;
}
#topnav a.signin, #topnav a.signin: 호버(
* 배경 위치: 0 3px! 중요;
}

a.signin(
위치: 상대;
여백-왼쪽: 3px;
}
로그인 범위(
배경 이미지: url("이미지 / toggle_down_light.png");
background-repeat: 반복 없음;
배경 위치: 100% 50%;
패딩: 4px 16px 6px 0;
}
#topnav a.menu-open(
배경: # ddeef6!중요한;
색상: # 666!중요;
개요: 없음;
}
#작은_가입(
디스플레이: 인라인;
플로트: 없음;
줄 높이: 23px;
여백: 25px 0 0;
너비: 170px;
}
.signin.menu-열린 범위(
background-image: url("이미지 / toggle_up_dark.png");
색상: # 789;
}

그런 다음 로그인 양식의 정의가 나옵니다.

#signin_menu(
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
디스플레이: 없음;
배경색: # ddeef6;
위치: 절대;
너비: 210px;
z-인덱스: 100;
테두리: 1px 투명;
텍스트 정렬: 왼쪽;
패딩: 12px;
상단: 24.5px;
오른쪽: 0px;
여백 상단: 5px;
오른쪽 여백: 0px;
* 오른쪽 여백: -1px;
색상: # 789;
글꼴 크기: 11px;
}

#signin_menu 입력, #signin_menu 입력(
디스플레이: 블록;
-moz-border-radius: 4px;
-웹킷 테두리 반경: 4px;
테두리: 1px 솔리드 #ACE;
글꼴 크기: 13px;
여백: 0 0 5px;
패딩: 5px;
너비: 203px;
}
#signin_menu p(
여백: 0;
}
#signin_menu a(
색상: # 6AC;
}
#signin_menu 라벨(
글꼴 두께: 보통;
}
#signin_menu p.remember(
패딩: 10px 0;
}
#signin_menu p.forgot, #signin_menu p.complete (
클리어: 둘 다;
여백: 5px 0;
}
#signin_menu p a (
색상: # 27B!중요;
}
#signin_submit(
-moz-border-radius: 4px;
-웹킷 테두리 반경: 4px;
background: # 39d url ("이미지 / bg-btn-blue.png") repeat-x scroll 0 0;
테두리: 1px 솔리드 # 39D;
색상: #fff;
텍스트 그림자: 0 -1px 0 # 39d;
패딩: 4px 10px 5px;
글꼴 크기: 11px;
여백: 0 5px 0 0;
글꼴 두께: 굵게;
}
#signin_submit :: - moz-focus-inner(
패딩: 0;
테두리: 0;
}
#signin_submit: 호버, #signin_submit: 포커스(
배경 위치: 0 -5px;
커서: 포인터;
}

자바스크립트로 작업할 시간입니다

그럴 것 같다, HTML 코드 CSS는 매우 복잡하고 복잡하지만 자바스크립트에서는 모든 것이 매우 간단합니다. 이 자바스크립트 코드를 복사하면 로그인 양식 외부에서 클릭이 이루어진 경우에도 승인 버튼을 클릭하는 순간 양식을 표시하고 숨길 수 있습니다.

위의 코드에 따르면 방문자가 인증 버튼을 클릭하면 새로운 기능... 먼저 로그인 양식이 표시되고("filedset" 태그로 묶음) ".signin" 클래스에 포함된 링크는 배경 이미지를 변경하는 또 다른 "menu-open" 클래스를 추가합니다.

이 코드의 또 다른 이벤트는 방문자가 로그인 양식이 아니라 페이지의 어딘가를 클릭하면 양식이 자체적으로 닫히는 것입니다. 즉, "menu-open" 클래스는 ".signin" 클래스와의 링크를 제거하고 원래 배경 이미지를 반환합니다.

힌트는?

우리는 일반적으로 사용하는 것이 좋습니다 jQuery 플러그인 - tipsy... 툴팁의 내용은 링크의 "제목" 속성에 쓰여진 내용입니다. 동쪽, 서쪽, 남쪽 또는 북쪽을 기준으로 툴팁의 위치를 ​​변경할 수 있습니다. 이것은 위의 코드에 지정된 "중력" 매개변수를 통해 수행됩니다. 이 플러그인 전용 사이트에 대한 링크를 제공하여 해당 기능을 더 자세히 연구하고 플러그인을 다운로드할 수 있습니다. ...

마침내

이 기사의 모든 코드를 복사했다면 폴더 구조를 변경하지 마십시오. 변경하면 코드가 작동하지 않습니다. 이 코드는 드롭다운 승인 양식 jQuery를 사용하여 ... 연습에 행운을 빕니다!

페이지를 다시 로드하지 않고 동적 전환 가능성과 함께 로그인 및 등록 양식 기능에 대응합니다. 창이 나타나면 사용자는 쉽게 다른 것으로 전환할 수 있으며 필요한 경우 암호를 변경하는 옵션을 선택할 수 있습니다.
오늘 우리는 작지만 매우 기능적인 jQuery 플러그인과 새로운 CSS3 표준을 사용하여 이 모든 것을 구현하는 방법을 살펴볼 것입니다.

이 방법은 사이트의 모든 페이지에서 사용자가 로그인 및 등록 양식을 사용할 수 있도록 하려는 경우에 유용합니다. 사이트에 들어가거나 등록할 때 사용자는 다른 페이지로 리디렉션되지 않으며 "결제를 종료하지 않고" 필요한 모든 작업을 한 페이지에서 수행할 수 있습니다.

등록 모습로 구현된 팝업 양식 CSS 사용 3, 플러그인의 총 무게는 전혀 크지 않으며, 모달 창의 응답 및 로딩은 실제로 지연 없이 발생합니다.
100% 반응형 레이아웃, 양식 모달의 높이와 너비는 사용자 장치의 화면 크기에 맞게 자동으로 설정됩니다.

예제를 살펴보았고 이제 모달 창과 양식의 모든 주요 구성 요소를 살펴보고 웹 사이트에서 사용하는 방법을 알아보겠습니다.
로그인 및 등록 양식이 있는 팝업 창은 인기 있는 자바스크립트 라이브러리, jQuey 플러그인 실행 파일 및 생성된 CSS 스타일을 기반으로 합니다. 이러한 모든 도구는 사이트에 연결되어야 합니다. 마지막 현재 버전 jQuey 라이브러리는 Google에서 직접 연결할 수 있으며 main.js 플러그인 파일 자체와 생성된 스타일의 기성 세트인 style.css는 아카이브에서 찾을 수 있습니다.
닫는 태그 앞의 자바스크립트 , CSS 스타일복사하여 사이트의 stylesheet.css 파일에 추가할 수 있습니다.

HTML 구조:

어두운 배경에 있는 모달 창의 기본 컨테이너와 컨트롤이 있는 기본 제공 양식은 페이지 본문에 배치됩니다. 이해를 돕기 위해 섹터를 구분하고 주석을 추가했습니다. 모든 디자인 요소는 특정 클래스를 통해 CSS와 밀접하게 연결되어 있으므로 사이트의 전체 디자인에 맞게 양식을 쉽게 다시 디자인할 수 있습니다.

< div class = "cd-user-modal" > < div class = "cd-user-modal-container" > < ul class = "cd-switcher" > < li>< a href= "#0" >입구 < li>< a href= "#0" >등록 < div id= "cd-login" > < form class = "cd-form" > < p class = "fieldset" > < label class = "image-replace cd-email" for = "signin-email" >이메일 < input class = id= "signin-email" type= "email" placeholder= "이메일" > < span class = "cd-error-message" >다음은 오류 메시지입니다! < p class = "fieldset" > < label class = "image-replace cd-password" for = "signin-password" >비밀번호 < input class = "전폭 has-padding has-border" id = "signin-password" 유형 = "텍스트" 자리 표시자 = "(! LANG: 암호" > !}< a href= "#0" class = "hide-password" >숨다 < span class = "cd-error-message" >다음은 오류 메시지입니다! < p class = "fieldset" > < input type= "checkbox" id= "remember-me" checked> < label for = "remember-me" >날 기억해 < p class = "fieldset" > < input class = "full-width" type= "submit" value= "안으로" > < p class = "cd-form-bottom-message" >< a href= "#0" >비밀번호를 잊어 버렸습니까? < div id= "cd-signup" > < form class = "cd-form" > < p class = "fieldset" > < label class = "image-replace cd-username" for = "signup-username" >사용자 이름 < input class = "전폭 has-padding has-border" id = "가입 사용자 이름" 유형 = "텍스트" 자리 표시자 = "사용자 이름"> < span class = "cd-error-message" >다음은 오류 메시지입니다! < p class = "fieldset" > < label class = "image-replace cd-email" for = "signup-email" >이메일 < input class = "전폭 has-padding has-border" id = "가입 이메일" 유형 = "이메일" 자리 표시자 = "(! LANG: 이메일" > !}< span class = "cd-error-message" >다음은 오류 메시지입니다! < p class = "fieldset" > < label class = "image-replace cd-password" for = "signup-password" >비밀번호 < input class = "전폭 has-padding has-border" id = "가입 암호" 유형 = "텍스트" 자리 표시자 = "(! LANG: 암호" > !}< a href= "#0" class = "hide-password" >숨다 < span class = "cd-error-message" >다음은 오류 메시지입니다! < p class = "fieldset" > < input type= "checkbox" id= "accept-terms" > < label for = "accept-terms" >나는 동의한다< a href= "#0" >정황 < p class = "fieldset" > < input class = "full-width has-padding" type= "submit" value= "계정 만들기"> < div id= "cd-reset-password" > < p class = "cd-form-message" >비밀번호를 잊어 버렸습니까? 귀하의 주소를 입력하십시오 이메일... 새 비밀번호를 생성할 수 있는 링크를 받게 됩니다. < form class = "cd-form" > < p class = "fieldset" > < label class = "image-replace cd-email" for = "reset-email" >이메일 < input class = "전폭 has-padding has-border" id = "reset-email" type = "email" 자리 표시자 = "(! LANG: 이메일" > !}< span class = "cd-error-message" >다음은 오류 메시지입니다! < p class = "fieldset" > < input class = "full-width has-padding" type= "submit" value= "비밀번호 복원"> < p class = "cd-form-bottom-message" >< a href= "#0" >입구로 돌아가기 < a href= "#0" class = "cd-close-form" >닫다

CSS 스타일:

기본 템플릿 및 양식 컨트롤은 미니멀리즘에 중점을 둔 인기 있는 플랫 스타일로 설계되었습니다. 추가 없음, 적당히 투명한 배경흐리게, 읽기 쉬운 색상, 잘 선택된 글꼴 및 입력 필드를 나타내는 아이콘. CSS 속성을 사용하면 모든 양식 요소를 쉽게 수정할 수 있습니다.

.cd-user-modal(위치: 고정, 상단: 0, 왼쪽: 0, 너비: 100%, 높이: 100%, 배경: rgba(52, 54, 66, 0.9), z-색인: 3, 오버플로- y: 자동; 커서: 포인터; 가시성: 숨김; 불투명도: 0; -webkit-transition: 불투명도 0.3s 0, 가시성 0 0.3s; -moz-transition: 불투명도 0.3s 0, 가시성 0 0.3s; 전환: 불투명도 0.3 s 0, 가시성 0 0.3s;) .cd-user-modal .is-visible (가시성: 가시성; 불투명도: 1; -webkit-transition: 불투명도 0.3s 0, 가시성 0 0; -moz-transition: 불투명도 0.3s 0, 가시성 0 0, 전환: 불투명도 0.3s 0, 가시성 0 0;) .cd-user-modal .is-visible .cd-user-modal-container(-webkit-transform: translateY(0), -moz- 변환: translateY(0), -ms-transform: translateY(0), -o-transform: translateY(0), 변환: translateY(0);) .cd-user-modal-container(위치: 상대, 너비: 90%, 최대 Wi dth: 600px; 배경: #FFF; 여백: 3em 자동 4em; 커서: 자동; 경계 반경: 0.25em; -webkit-transform: translateY(-30px); -moz-transform: translateY(-30px); -ms-transform: translateY(-30px); -o-변환: translateY(-30px); 변환: translateY(-30px); -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; 전환 속성: 변환; -웹킷-전환-시간: 0.3초; -moz-transition-duration: 0.3초; 전환 시간: 0.3초; ) .cd-user-modal-container .cd-switcher: 후 (내용: ""; 디스플레이: 테이블; 지우기: 둘 다;) .cd-user-modal-container .cd-switcher li (폭: 50%; 부동 소수점 : 왼쪽, 텍스트 정렬: 가운데;) .cd-user-modal-container .cd-switcher li: 첫째 자식 a (테두리 반경: .25em 0 0 0;) .cd-user-modal-container .cd -switcher li: last-child a (border-radius: 0 .25em 0 0;) .cd-user-modal-container .cd-switcher a (디스플레이: 블록, 너비: 100%, 높이: 50px, 라인 높이 : 50px; background: # d2d8d8; color: # 809191;) .cd-user-modal-container .cd-switcher a.selected (background: #FFF; color: # 505260;) @media only screen and (min-width : 600px) (.cd-user-modal-container (여백: 4em 자동;) .cd-user-modal-container .cd-switcher a (높이: 70px; 줄 높이: 70px;)) .cd-form ( 패딩: 1. 4em; ) .cd-form .fieldset(위치: 상대, 여백: 1.4em 0;) .cd-form .fieldset: 첫 번째 자식(margin-top: 0;) .cd-form .fieldset: 마지막 자식(margin- 하단: 0;) .cd 형식 레이블 (글꼴 크기: 14px; 글꼴 크기: 0.875rem;) .cd 형식 레이블.이미지 교체( / * 텍스트를 아이콘으로 교체 * /디스플레이: 인라인 블록; 위치: 절대; 왼쪽: 15px; 상단: 50%; 하단: 자동; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-변환: translateY(-50%); 변환: translateY(-50%); 높이: 20px; 너비: 20px; 과다: 숨겨진; 텍스트 들여쓰기: 100% ; 공백: 지금 랩; 색상: 투명한; 텍스트 그림자: 없음; 배경 반복: 반복 금지; 배경 위치: 50% 0 ; } / * 입력 필드 아이콘 * / .cd 형식상표 .cd-사용자 이름 { 배경 이미지: URL("../img/cd-icon-username.svg") ; } .cd 형식상표 .cd-이메일 { 배경 이미지: URL("../img/cd-icon-email.svg") ; } .cd 형식상표 .cd-비밀번호 { 배경 이미지: URL("../img/cd-icon-password.svg") ; } .cd 형식입력 { 여유: 0 ; 심: 0 ; 경계 반경: 0.25em; } .cd 형식입력 .전체 넓이 { 너비: 100% ; } .cd 형식입력 .has 패딩 { 심: 12픽셀 20픽셀 12픽셀 50픽셀; } .cd 형식입력 .has-border { 국경: 1픽셀 단단한 # d2d8d8; -웹킷-외관 : 없음; -moz-외관 : 없음; -ms-외관 : 없음; -o-외관 : 없음; 모습 : 없음; } .cd 형식입력 .has-border: 집중하다 { 테두리 색상: #343642 ; 상자 그림자: 0 0 5픽셀 RGBA(52 , 54 , 66 , 0.1 ) ; 개요: 없음; } .cd 형식입력 .has-오류 { 국경: 1픽셀 단단한 # d76666; } .cd 형식입력 [ 유형 = 비밀번호 ] { / * 숨기기 버튼을 위한 공백 * / 패딩 오른쪽: 65픽셀; } .cd 형식입력 [ 유형 = 제출하다 ] { 심: 16픽셀 0 ; 커서: 바늘; 배경: # 2f889a; 색상: #FFF; 글꼴 두께: 굵게; 국경: 없음; -웹킷-외관 : 없음; -moz-외관 : 없음; -ms-외관 : 없음; -o-외관 : 없음; 모습 : 없음; } .만지지 마 .cd 형식입력 [ 유형 = 제출하다 ] : 호버, .만지지 마 .cd 형식입력 [ 유형 = 제출하다 ] : 집중하다 { 배경: # 3599ae; 개요: 없음; } .cd 형식 .비밀번호 숨기기 { 표시하다: 인라인 블록; 위치: 순수한; 오른쪽: 0 ; 맨 위: 0 ; 심: 6픽셀 15픽셀; 경계 왼쪽: 1픽셀 단단한 # d2d8d8; 맨 위: 50% ; 맨 아래: 자동; -웹킷 변환 : 번역하다 (-50% ) ; -moz 변환 : 번역하다 (-50% ) ; -ms-변환 : 번역하다 (-50% ) ; -o-변환 : 번역하다 (-50% ) ; 변환: 번역하다 (-50% ) ; 글꼴 크기: 14픽셀; 글꼴 크기: 0.875렘; 색상: #343642 ; } .cd 형식 .cd 오류 메시지 { 표시하다: 인라인 블록; 위치: 순수한; 왼쪽: -5픽셀; 맨 아래: -35픽셀; 배경: RGBA(215 , 102 , 102 , 0.9 ) ; 심: .8em; Z-인덱스: 2 ; 색상: #FFF; 글꼴 크기: 13픽셀; 글꼴 크기: 0.8125렘; 경계 반경: 0.25em; / * 클릭 및 터치 방지 * / 포인터 이벤트: 없음; 시계: 숨겨진; 불투명: 0 ; -웹킷 전환 : 불투명 0.2초 0 , 시계 0 0.2초; -moz-전환 : 불투명 0.2초 0 , 시계 0 0.2초; 이행: 불투명 0.2초 0 , 시계 0 0.2초; } .cd 형식 .cd 오류 메시지:: ~ 후에 { / * 오류 메시지의 모서리 * / 콘텐츠: "" ; 위치: 순수한; 왼쪽: 22픽셀; 맨 아래: 100% ; 키: 0 ; 너비: 0 ; 경계 왼쪽: 8픽셀 단단한 투명한; 경계 오른쪽: 8픽셀 단단한 투명한; 경계 바닥: 8픽셀 단단한 RGBA(215 , 102 , 102 , 0.9 ) ; } .cd 형식 .cd 오류 메시지.가시적 { 불투명: 1 ; 시계: 보이는; -웹킷 전환 : 불투명 0.2초 0 , 시계 0 0 ; -moz-전환 : 불투명 0.2초 0 , 시계 0 0 ; 이행: 불투명 0.2초 0 , 시계 0 0 ; } @미디어화면과 (최소 너비: 600픽셀) { .cd 형식 { 심: 2em; } .cd 형식 .fieldset { 여유: 2em 0 ; } .cd 형식 .fieldset: 첫째 아이 { 마진 탑: 0 ; } .cd 형식 .fieldset: 막내 { 여백-하단: 0 ; } .cd 형식입력 .has 패딩 { 심: 16픽셀 20픽셀 16픽셀 50픽셀; } .cd 형식입력 [ 유형 = 제출하다 ] { 심: 16픽셀 0 ; } } .cd 형식 메시지 { 심: 1.4em 1.4em 0 ; 글꼴 크기: 14픽셀; 글꼴 크기: 0.875렘; 줄 높이: 1.4 ; 텍스트 정렬: 센터; } @미디어화면과 (최소 너비: 600픽셀) { .cd 형식 메시지 { 심: 2em 2em 0 ; } } .cd-form-bottom-message { 위치: 순수한; 너비: 100% ; 왼쪽: 0 ; 맨 아래: -30픽셀; 텍스트 정렬: 센터; 글꼴 크기: 14픽셀; 글꼴 크기: 0.875렘; } .cd-form-bottom-message NS { 색상: #FFF; 텍스트 장식: 밑줄; } .cd-close-form { / * 스타일 X 버튼 오른쪽 상단 * / 표시하다: 블록; 위치: 순수한; 너비: 40픽셀; 키: 40픽셀; 오른쪽: 0 ; 맨 위: -40픽셀; 배경: URL("../img/cd-icon-close.svg") 반복 금지 센터 센터; 텍스트 들여쓰기: 100% ; 공백: 지금 랩; 과다: 숨겨진; } @미디어화면과 (최소 너비: 1170픽셀) { .cd-close-form { 표시하다: 없음; } } # cd 로그인, # CD 가입, # cd 재설정 비밀번호 { 표시하다: 없음; } # cd 로그인.선택됨, # CD 가입.선택됨, # cd 재설정 비밀번호.선택됨 { 표시하다: 블록; }

Cd-user-modal(위치: 고정, 상단: 0, 왼쪽: 0, 너비: 100%, 높이: 100%, 배경: rgba(52, 54, 66, 0.9), z-색인: 3, overflow-y : 자동; 커서: 포인터; 가시성: 숨김; 불투명도: 0; -webkit-transition: 불투명도 0.3s 0, 가시성 0.3s; -moz-transition: 불투명도 0.3s 0, 가시성 0 0.3s; 전환: 불투명도 0.3s 0, 가시성 0 0.3s;) .cd-user-modal.is-visible (가시성: 가시성; 불투명도: 1; -webkit-transition: 불투명도 0.3s 0, 가시성 0 0; -moz-transition: 불투명도 0.3s 0 , 가시성 0 0, 전환: 불투명도 0.3s 0, 가시성 0 0;) .cd-user-modal.is-visible .cd-user-modal-container(-webkit-transform: translateY (0), -moz-transform : translateY (0), -ms-transform: translateY (0), -o-transform: translateY (0), 변환: translateY (0);) .cd-user-modal-container (위치: 상대, 너비: 90 %, 최대 너비: 600픽셀, 배경: #FFF, 여백: 3em 자동 4em, 커서: 자동, 테두리 반경: 0.25em, -webkit-transform: translateY(-30px), -moz-transform: 번역Y(-30px); -ms-transform: translateY(-30px); -o-변환: translateY(-30px); 변환: translateY(-30px); -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; 전환 속성: 변환; -웹킷 전환 기간: 0.3초; -moz-전환-시간: 0.3초; 전환 시간: 0.3초; ) .cd-user-modal-container .cd-switcher: 이후 (내용: ""; 디스플레이: 테이블; 지우기: 둘 다;) .cd-user-modal-container .cd-switcher li (폭: 50%; 부동 소수점 : 왼쪽, 텍스트 정렬: 가운데;) .cd-user-modal-container .cd-switcher li: 첫 번째 자식 a (테두리 반경: .25em 0 0 0;) .cd-user-modal-container .cd -switcher li: last-child a (border-radius: 0 .25em 0 0;) .cd-user-modal-container .cd-switcher a (디스플레이: 블록, 너비: 100%, 높이: 50px, 라인 높이 : 50px; background: # d2d8d8; color: # 809191;) .cd-user-modal-container .cd-switcher a.selected (background: #FFF; color: # 505260;) @media only screen and (min-width : 600px) (.cd-user-modal-container (여백: 4em 자동;) .cd-user-modal-container .cd-switcher a (높이: 70px; 줄 높이: 70px;)) .cd-form ( 패딩: 1.4em;) .cd-form .fieldset(위치: 상대; 여백: 1.4em 0;) .cd-form .fieldset: 첫 번째 자식(margin-top: 0;) .cd-form .fieldset: 마지막 -child (margin-bottom: 0;) .cd-form label (font-siz e: 14px; 글꼴 크기: 0.875rem; ) .cd-form label.image-replace (/ * 텍스트를 아이콘으로 교체 * / display: inline-block; position: absolute; left: 15px; top: 50%; bottom: auto; -webkit-transform: translateY (- 50%), -moz-transform: translateY(-50%), -ms-transform: translateY(-50%), -o-transform: translateY(-50%), 변환: translateY(-50%), 높이 : 20픽셀, 너비: 20픽셀, 오버플로: 숨김, 텍스트 들여쓰기: 100%, 공백: nowrap, 색상: 투명, 텍스트 그림자: 없음, 배경 반복: 반복 없음, 배경 위치: 50% 0, ) / * 입력란 아이콘 * / .cd-form label.cd-username (background-image: url(". ./img/cd-icon-username.svg ");) .cd-form label.cd-email (배경 이미지: url (" ../ img / cd-icon-email.svg ");) .cd -form label.cd-password (background-image: url ("../ img / cd-icon-password.svg");) .cd-form 입력(여백: 0, 패딩: 0, 테두리 반경: 0.25 em;) .cd-form input.full-width (너비: 100%;) .cd-form input.has-padding (패딩: 12px 20px 12px 50px;) .cd-form input.has-border (테두리: 1px solid # d2d8d8; -webkit-appearance: 없음; -moz-appearance: 없음; -ms-appearance: 없음; -o-appearance: 없음; 모양: 없음;) .cd-form input.has-border: 초점(테두리 -color: # 343642; box-shadow: 0 0 5px rgba (52, 54, 66, 0.1); 외곽선: 없음;) .cd-form input.has-error (테두리: 1px solid # d76666;) .cd- 양식 입력 (/ * 숨기기 버튼의 공백 * / 패딩 오른쪽: 65px;) .cd-양식 입력 (패딩: 16px 0; 커서: 포인터; 배경: # 2f889a; 색상: #FFF; 글꼴 두께: 굵게; 테두리 : 없음, -webkit-모양: 없음, -moz-모양: 없음, -ms-모양: 없음, -o-외관: 없음; 외모: 없음; ) .no-touch .cd-form 입력: hover, .no-touch .cd-form 입력: focus (background: # 3599ae; outline: none;) .cd-form .hide-password (디스플레이: inline-block; 위치: 절대, 오른쪽: 0, 위쪽: 0, 패딩: 6px 15px, 테두리 왼쪽: 1px solid # d2d8d8, 위쪽: 50%, 아래쪽: 자동, -webkit-transform: translateY(-50%), -moz- 변환: translateY(-50%), -ms-transform: translateY(-50%), -o-transform: translateY(-50%), 변환: translateY(-50%), 글꼴 크기: 14px, 글꼴- 크기: 0.875rem; 색상: # 343642;) .cd-form .cd-error-message(디스플레이: 인라인 블록, 위치: 절대, 왼쪽: -5px, 하단: -35px, 배경: rgba(215, 102, 102, 0.9); 패딩: .8em; z-인덱스: 2; 색상: #FFF; 글꼴 크기: 13px; 글꼴 크기: 0.8125rem; 테두리 반경: 0.25em; / * 클릭 및 터치 방지 * / 포인터 -events: 없음, 가시성: 숨김, 불투명도: 0, -webkit-transition: 불투명도 0.2s 0, 가시성 0.2s, -moz-transition: 불투명도 0.2s 0, 가시성 0 0.2s, 전환: 불투명도 0.2s 0, 방문 담력 0 0.2초; ) .cd-form .cd-error-message :: 후 (/ * 오류 메시지의 모서리 * / 내용: ""; 위치: 절대; 왼쪽: 22px; 하단: 100%; 높이: 0; 너비: 0; 테두리 -왼쪽: 8픽셀 솔리드 투명, 테두리 오른쪽: 8픽셀 솔리드 투명, 테두리-하단: 8픽셀 솔리드 rgba(215, 102, 102, 0.9);) .cd-form .cd-error-message.is-visible(불투명도) : 1, 가시성: 가시성, -webkit-transition: 불투명도 0.2s 0, 가시성 0 0, -moz-transition: 불투명도 0. 2초 0, 가시성 0 0; 전환: 불투명도 0.2s 0, 가시성 0 0; ) @media only screen 및 (min-width: 600px) (.cd-form(padding: 2em;) .cd-form .fieldset(margin: 2em 0;) .cd-form .fieldset: first-child(margin- top: 0;) .cd-form .fieldset: last-child (margin-bottom: 0;) .cd-form input.has-padding (padding: 16px 20px 16px 50px;) .cd-form input (padding: 16px 0;)) .cd-form-message (패딩: 1.4em 1.4em 0; 글꼴 크기: 14px; 글꼴 크기: 0.875rem; 줄 높이: 1.4; 텍스트 정렬: 가운데;) @미디어 전용 화면 및 (최소 너비: 600px) (.cd-form-message (패딩: 2em 2em 0;)) .cd-form-bottom-message (위치: 절대, 너비: 100%, 왼쪽: 0, 하단: -30px, 텍스트 정렬: 가운데; 글꼴 크기: 14픽셀; 글꼴 크기: 0.875rem;) .cd-form-bottom-message a (색상: #FFF; 텍스트 장식: 밑줄;) .cd-close-form(/ * 버튼 우측 상단의 스타일 X * / display: block; position: absolute; width: 40px; height: 40px; right: 0; top: -40px; background: url ("../ img / cd-icon-close .svg ") 반복되지 않는 가운데 중심, 텍스트 들여쓰기: 100 %; 공백: nowrap; 오버플로: 숨김; ) @media only screen and (min-width: 1170px) (.cd-close-form (display: none;)) # cd-login, # cd-signup, # cd-reset-password (display: none;) # cd-login.is-selected, # cd-signup.is-selected, # cd-reset-password.is-selected (디스플레이: 블록;)

페이드 전환 효과에서 닫을 때 모달이 페이드 아웃되도록 지연이 추가되었습니다.

메모:. 모든 입력 필드의 기본 글꼴 크기는 16px입니다. 이것은 모바일 장치에서 볼 때 발생하는 자동 크기 조정을 방지합니다.

플러그인의 저자, ​​부르주아 버전이 있습니다. 같은 곳에서 원본을 다운로드할 수 있습니다.
러시아어 버전, 내 Yandex.Disk에서 선택할 수 있습니다. 필요한 모든 파일은 하나의 아카이브에 신중하게 포장되어 있습니다. 그 전에 이 멋진 jQuery 플러그인의 작업에 대한 완전히 조정된 라이브 예제를 보는 것을 잊지 마세요.

모든 존경과 함께 앤드류

1. 온라인 양식 "jFormer" 생성을 위한 플러그인

연락처 양식 만들기: 피드백, 댓글, 로그인 양식, 등록 양식에 입력한 정보의 정확성을 확인합니다.

2. jQuery를 이용한 단계별 등록 양식

깔끔한 모양으로 단계별 채우기... 아래는 양식 채우기 표시기입니다.

3. 단계별 양식

여러 단계로 양식을 작성하고 작성의 정확성을 확인합니다.

4. 사이트 문의 양식

정보 입력의 정확성 검증은 자바스크립트를 사용하여 메시지를 보내기 전에 "즉시" 수행됩니다.

5. jQuery를 사용한 애니메이션 전환

애니메이션 jQuery는 사이트 로그인, 등록 및 비밀번호 복구 필드 사이를 전환합니다. 데모 페이지에서 노란색 링크를 클릭하여 효과를 확인하십시오.

6. PHP 체크아웃 양식

방문자가 모든 페이지에서 사이트 소유자에게 신속하게 연락할 수 있도록 유사한 솔루션을 사용할 수 있습니다. 데모 페이지에서 아래 화살표를 클릭하여 양식을 밀어냅니다.

7. jQuery와 CSS3를 이용한 PHP 등록 양식

정보 입력의 정확성을 확인하는 양식.

8. PHP 페이스북 스타일의 등록 양식

CSS, PHP 및 jQuery로 구현된 멋진 등록 양식입니다.

9. jQuery "SheepIt" 문의 양식

메시지를 보내기 전에 새 필드를 추가하는 기능이 구현되었습니다.

10. 문의 양식 "Fancy AJAX 문의 양식"

입력된 정보의 유효성을 검사하는 멋진 PHP 피드백 양식입니다. 기술: CSS, PHP, jQuery.

11. 사이트에 대한 승인/등록 시스템

12. 자료 제출 양식

충전의 정확성을 확인합니다.

13. jQuery "연락 가능한" 플러그인

신속하게 메시지를 보내기 위해 결제 양식을 구현합니다.