แบบฟอร์มการลงทะเบียนและการอนุญาตใน jquery สร้างระบบการลงทะเบียนที่ยอดเยี่ยมโดยใช้ PHP, MySQL และ jQuery แบบฟอร์มติดต่อ AJAX ที่น่าสนใจ

ทุกอย่างทำงานภายใต้ PHP และข้อมูลจะถูกจัดเก็บไว้ในฐานข้อมูล MySQL

ระบบใช้แผงเลื่อนที่ยอดเยี่ยมที่พัฒนาโดย Web-kreation

ก่อนอื่นเราต้องสร้างตารางที่จะมีข้อมูลทั้งหมดเกี่ยวกับผู้ใช้ที่ลงทะเบียน รหัสแบบสอบถามมีอยู่ในไฟล์ table.sql ในไฟล์เก็บถาวรซอร์ส

เรากำหนดรหัสเป็นจำนวนเต็มด้วยตัวเลือก auto_increation - มันจะถูกกำหนดให้กับผู้ใช้ที่ลงทะเบียนใหม่แต่ละรายโดยอัตโนมัติ นอกจากนี้ usr ยังถูกกำหนดให้เป็นคีย์เฉพาะ - ไม่อนุญาตให้มีสองระเบียนที่มีชื่อผู้ใช้เดียวกันในตาราง

หลังจากนั้นเราจะใช้คุณสมบัติที่ระบุในระหว่างขั้นตอนการลงทะเบียนเมื่อป้อนชื่อผู้ใช้

หลังจากสร้างตารางแล้ว คุณจะต้องกรอกตัวแปรสำหรับการเชื่อมต่อกับฐานข้อมูลของคุณในไฟล์ Connect.php เพื่อให้คุณสามารถรันโค้ดบนเซิร์ฟเวอร์ของคุณได้

ขั้นแรก เราต้องฝังแบบฟอร์มการสร้างเว็บลงในเพจของเรา

ข้อมูลสาธิต

• สวัสดี !



• 
  
  ปิดแผง
  

ในหลายๆ ตำแหน่งในโค้ดจะมีคำสั่ง PHP ที่ตรวจสอบว่า $_SESSION["usr"] หรือ $_SESSION["id"] ถูกกำหนดไว้หรือไม่ ข้อมูลเหล่านี้จะเป็นจริงก็ต่อเมื่อผู้เยี่ยมชมเพจเป็นผู้ใช้ที่ลงทะเบียน ซึ่งช่วยให้เราสามารถแสดงเนื้อหาที่ซ่อนอยู่สำหรับผู้เยี่ยมชมที่ลงทะเบียน

หลังจากแบบฟอร์มเราจะวางเนื้อหาส่วนที่เหลือของหน้า

แผงเลื่อน jQuery
จัดการการลงทะเบียนอย่างง่ายดายด้วย โดยใช้ PHPและ jQuery

ข้อความบางส่วน...

ไม่มีอะไรพิเศษในรหัส

ตอนนี้เราจะแปลงแบบฟอร์มเป็นระบบลงทะเบียนและเข้าสู่ระบบที่สมบูรณ์ ในการแก้ปัญหา คุณจะต้องมีสิ่งอื่นที่ไม่ใช่โค้ด PHP ปกติ รหัสทั้งหมดแบ่งออกเป็นสองส่วน

หากคุณวางแผนที่จะเพิ่มบางสิ่ง วิธีที่ดีที่สุดคือแบ่งทุกอย่างออกเป็นหลายๆ ส่วน แยกไฟล์และเปิดใช้งานตามความจำเป็น แนวทางนี้ช่วยในการพัฒนาโปรเจ็กต์ขนาดใหญ่และในขณะเดียวกันก็นำโค้ดกลับมาใช้ใหม่ในส่วนต่างๆ ของไซต์

ต่อไปนี้เป็นวิธีดำเนินการที่นี่

ที่นี่ คุกกี้ tzRemember ทำหน้าที่เป็นองค์ประกอบควบคุมเพื่อพิจารณาว่าจะออกจากระบบผู้ใช้ที่ไม่ได้ทำเครื่องหมายในช่อง "จดจำฉัน" หรือไม่ หากคุกกี้หายไป (เนื่องจากการรีสตาร์ทเบราว์เซอร์) และผู้เข้าชมไม่ได้เลือกตัวเลือก "จดจำฉัน" เราจะลบเซสชันนั้น

เซสชันจะยังคงใช้งานได้เป็นเวลาสองสัปดาห์ (ตามที่กำหนดไว้ในพารามิเตอร์ session_set_cookie_params)

และนี่คือส่วนที่สองของ demo.php

อย่างอื่น if($_POST["submit"]=="Register")
{
// หากคำขอถูกส่งจากแบบฟอร์มลงทะเบียน
$err = อาร์เรย์();
ถ้า(strlen($_POST["ชื่อผู้ใช้"])32)
{
$err="ชื่อผู้ใช้ต้องมีความยาวระหว่าง 3 ถึง 32 ตัวอักษร!";
}
if(preg_match("/[^a-z0-9\-\_\.]+/i",$_POST["ชื่อผู้ใช้"]))
{
$err="ชื่อผู้ใช้มีอักขระที่ไม่ถูกต้อง!";
}
if(!checkEmail($_POST["อีเมล"]))
{
$err="ของคุณ ที่อยู่อีเมลผิด!";
}
ถ้า(!นับ($ผิดพลาด))
{
// หากไม่มีข้อผิดพลาด
$pass = substr(md5($_SERVER["REMOTE_ADDR"].microtime().rand(1.100000)),0.6);
// สร้างรหัสผ่านแบบสุ่ม
$_POST["อีเมล"] = mysql_real_escape_string($_POST["อีเมล"]);
$_POST["ชื่อผู้ใช้"] = mysql_real_escape_string($_POST["ชื่อผู้ใช้"]);
//เตรียมข้อมูล
mysql_query(" INSERT INTO tz_members(usr,pass,email,regIP,dt)
ค่านิยม(
"".$_POST["ชื่อผู้ใช้"]."",
"".md5($ผ่าน)",
"".$_POST["อีเมล"]"",
"".$_SERVER["REMOTE_ADDR"]"",
ตอนนี้()
)");
ถ้า(mysql_affected_rows($ลิงค์)==1)
{
send_mail("demo-test@site",
$_POST["อีเมล"],
"สาธิตระบบการลงทะเบียน - การสร้างรหัสผ่าน",
"รหัสผ่านของคุณ: ".$pass);
$_SESSION["msg"]["reg-success"]="เราได้ส่งอีเมลพร้อมรหัสผ่านใหม่ของคุณแล้ว!";
}
else $err="ชื่อผู้ใช้นี้มีการใช้งานแล้ว!";
}
ถ้า(นับ($ผิดพลาด))
{
$_SESSION["msg"]["reg-err"] = ระเบิด("
",$ผิดพลาด);
}
header("ตำแหน่ง: demo.php");
ออก;
}
$สคริปต์ = "";
ถ้า($_SESSION["ข้อความ"])
{
// สคริปต์แสดงแผงเลื่อนบนหน้าโหลด
$สคริปต์ = "

$(ฟังก์ชั่น())(
$("div#panel").show();
$("#toggle a").toggle();
});
";
}

เราจัดเก็บข้อผิดพลาดที่กำหนดไว้ทั้งหมดไว้ในอาร์เรย์ $err ซึ่งกำหนดให้กับตัวแปร $_SESSION ในภายหลัง ด้วยวิธีนี้ การเข้าถึงจะยังคงอยู่หลังจากที่เบราว์เซอร์ถูกเปลี่ยนเส้นทาง

บางไซต์อาจได้รับคำเตือนเมื่อมีการส่งแบบฟอร์มหรือครั้งต่อไปที่เพจรีเฟรชว่าส่งข้อมูลไปแล้ว นี่อาจเป็นปัญหาได้ เนื่องจากจะนำไปสู่การลงทะเบียนซ้ำซ้อนและโหลดที่ไม่จำเป็นบนเซิร์ฟเวอร์

เราใช้ฟังก์ชันส่วนหัวเพื่อป้องกันข้อผิดพลาดโดยการเปลี่ยนเส้นทางเบราว์เซอร์ไปยังหน้าเดียวกัน สิ่งนี้จะอัปเดตมุมมองของเพจโดยที่เบราว์เซอร์ไม่รับรู้ว่าเป็นคำขอแบบฟอร์ม ด้วยเหตุนี้ เพจจึงถูกรีเฟรชและไม่มีการถ่ายโอนข้อมูล

แต่เนื่องจากเราใช้ $_SESSION เพื่อจัดเก็บข้อผิดพลาดที่ตรวจพบทั้งหมด จึงเป็นสิ่งสำคัญมากที่เราต้องรีเซ็ตตัวแปรทั้งหมดทันทีที่ข้อผิดพลาดปรากฏต่อผู้ใช้ มิฉะนั้นจะปรากฏในทุกการดูเพจ

ยังใช้ สคริปต์เพิ่มเติมซึ่งแสดงแถบบนหน้าดาวน์โหลดเพื่อให้ผู้ใช้มองเห็นข้อความได้

แผงเลื่อนใช้ไฟล์สไตล์ของตัวเอง สิ่งที่เราต้องทำคือสร้างสไตล์ให้กับเพจของเรา

แผงเลื่อนมีไฟล์ jQuery ของตัวเอง

บรรทัดแรกประกอบด้วยไลบรารี jQuery จาก CDN ของ Google ถัดมาคือแพตช์ IE6 PNG สำหรับองค์ประกอบความโปร่งใส จากนั้นแผงสคริปต์จะเปิดขึ้น

ตัวแปร $script จะแสดงพาเนลบนหน้าการโหลดหากจำเป็น

ใน เครือข่ายทวิตเตอร์คุณสามารถดูหน้าเว็บที่มีการออกแบบที่สะอาดตาและเรียบง่าย ดูที่ส่วนด้านขวาบนของหน้า คุณจะเห็นปุ่มเพื่อเข้าสู่ระบบ โดยการคลิกคุณจะเห็นแบบฟอร์มสำหรับการกรอกข้อมูล วันนี้เราจะมาบอกวิธีสร้างเอฟเฟกต์ที่คล้ายกันบนเว็บไซต์ของคุณเอง จริงๆ แล้วมันเป็นเรื่องง่ายมาก นอกจากนี้ ยังช่วยประหยัดพื้นที่บนหน้าเว็บและเพิ่มความรู้สึกสบายใจให้กับผู้เยี่ยมชมอีกด้วย ในบทความนี้ เราจะบอกคุณทีละขั้นตอนว่าระบบทั้งหมดทำงานอย่างไร และคู่มือนี้จะเป็นประโยชน์สำหรับผู้ที่ต้องการเรียนรู้ jQuery ด้วย ซึ่งไปข้างหน้า!

รหัสเอชทีเอ็มแอล

ก่อนอื่นคุณต้องเริ่มต้นด้วยโค้ด HTML โค้ด HTML นั้นง่ายมาก - ประกอบด้วยแท็ก "a" ซึ่งไปพร้อมกับแท็ก "fieldset" เนื่องจากมีการแสดงแบบฟอร์ม

เพียงคัดลอกสิ่งนี้ลงในรหัสของคุณ หน้าใหม่:

มีบัญชีอยู่แล้ว? เข้าสู่ระบบ


ชื่อผู้ใช้หรืออีเมล

รหัสผ่าน

จำฉันไว้

ลืมรหัสผ่าน?

ลืมชื่อผู้ใช้ของคุณ?

คุณจะต้อง ใช้ CSSเพื่อกำหนดปุ่มอนุญาตและแบบฟอร์มเข้าสู่ระบบ รหัสด้านล่างทำหน้าที่นี้ทุกประการ

เพียงคัดลอกโค้ดนี้ลงในไฟล์ css ของคุณ หรือเพิ่มลงในโค้ด HTML ที่คุณกำหนดสไตล์ รหัสเหล่านี้กำหนดปุ่มเข้าสู่ระบบ

#คอนเทนเนอร์ (
ความกว้าง:780px;
ระยะขอบ:0 อัตโนมัติ;
ตำแหน่ง: ญาติ;
}

#เนื้อหา (
ความกว้าง:520px;
ความสูงขั้นต่ำ: 500px;
}
a:link, a:เยี่ยมชมแล้ว (
สี:#27b;
การตกแต่งข้อความ: ไม่มี;
}
a:โฮเวอร์ (
การตกแต่งข้อความ:ขีดเส้นใต้;
}
ไอจี (
เส้นขอบกว้าง:0;
}
#ท็อปนาฟ (
การขยาย:10px 0px 12px;
ขนาดตัวอักษร:11px;
ความสูงของบรรทัด:23px;
การจัดแนวข้อความ: ขวา;
}
#topnav a.signin (
พื้นหลัง:#88bbd4;
การขยาย:4px 6px 6px;
การตกแต่งข้อความ: ไม่มี;
แบบอักษรน้ำหนัก: ตัวหนา;
สี:#fff;
-webkit-ขอบรัศมี:4px;
-moz-ขอบรัศมี:4px;
รัศมีเส้นขอบ: 4px;
*พื้นหลัง: URL แบบโปร่งใส ("images/signin-nav-bg-ie.png") ไม่ทำซ้ำ 0 0;
*ช่องว่างภายใน:4px 12px 6px;
}
#topnav a.signin:hover (
พื้นหลัง:#59B;
*พื้นหลัง: URL โปร่งใส ("images/signin-nav-bg-hover-ie.png") ไม่ทำซ้ำ 0 0;
*ช่องว่างภายใน:4px 12px 6px;
}
#topnav a.signin, #topnav a.signin:hover (
*ตำแหน่งพื้นหลัง:0 3px!สำคัญ;
}

ก.ลงชื่อเข้าใช้(
ตำแหน่ง:ญาติ;
ขอบซ้าย:3px;
}
a.ช่วงการลงชื่อเข้าใช้(
ภาพพื้นหลัง: url ("images/toggle_down_light.png");
พื้นหลังซ้ำ: ไม่ซ้ำ;
ตำแหน่งพื้นหลัง:100% 50%;
การขยาย:4px 16px 6px 0;
}
#topnav a.menu-open (
พื้นหลัง:#ddeef6!สำคัญ;
สี:#666!สำคัญ;
โครงร่าง:ไม่มี;
}
#small_สมัครสมาชิก (
จอแสดงผล: อินไลน์;
ลอย:ไม่มี;
ความสูงของบรรทัด:23px;
ระยะขอบ:25px 0 0;
ความกว้าง:170px;
}
a.signin.menu-ช่วงเปิด (
ภาพพื้นหลัง: url ("images/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-ขอบรัศมี:4px;
-webkit-ขอบรัศมี:4px;
เส้นขอบ: 1px ทึบ #ACE;
ขนาดตัวอักษร:13px;
ระยะขอบ:0 0 5px;
ช่องว่างภายใน:5px;
ความกว้าง:203px;
}
#signin_menu ป (
ระยะขอบ:0;
}
#signin_menu ก (
สี:#6AC;
}
#signin_ป้ายเมนู (
แบบอักษรน้ำหนัก:ปกติ;
}
#signin_menu อย่าลืม (
การขยาย:10px 0;
}
#signin_menu p.forgot, #signin_menu p.complete (
ชัดเจน:ทั้งสอง;
ระยะขอบ:5px 0;
}
#signin_menu ป๊า (
สี:#27B!สำคัญ;
}
#signin_submit (
-moz-ขอบรัศมี:4px;
-webkit-ขอบรัศมี:4px;
พื้นหลัง: #39d url ("images/bg-btn-blue.png") ทำซ้ำ-x เลื่อน 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 ค่อนข้างซับซ้อนและน่าสับสน แต่ในจาวาสคริปต์ทุกอย่างนั้นง่ายมาก เพียงคัดลอกโค้ดจาวาสคริปต์นี้ ซึ่งจะช่วยให้คุณสามารถแสดงและซ่อนแบบฟอร์มเมื่อคุณคลิกที่ปุ่มเข้าสู่ระบบ แม้ว่าการคลิกจะเกิดขึ้นนอกแบบฟอร์มเข้าสู่ระบบก็ตาม

$(เอกสาร).ready(ฟังก์ชั่น() (

$(".signin").คลิก(ฟังก์ชั่น(e) (
e.preventDefault();
$("fieldset#signin_menu").toggle();
$(".signin").toggleClass("เมนูเปิด");
});

$("fieldset#signin_menu").mouseup(function() (
กลับเท็จ
});
$(เอกสาร).mouseup(ฟังก์ชั่น(e) (
if($(e.target).parent("a.signin").length==0) (
$(".signin").removeClass("เมนูเปิด");
$("fieldset#signin_menu").hide();
}
});

});

ตามรหัสที่นำเสนอข้างต้น เมื่อผู้เยี่ยมชมคลิกที่ปุ่มเข้าสู่ระบบ คุณลักษณะใหม่- ขั้นแรก แบบฟอร์มเข้าสู่ระบบจะแสดงขึ้น (อยู่ในแท็ก “filedset”) จากนั้นลิงก์ที่อยู่ในคลาส “.signin” จะเพิ่มคลาส “menu-open” อีกคลาสหนึ่ง เนื่องจากภาพพื้นหลังมีการเปลี่ยนแปลง

อีกเหตุการณ์หนึ่งในโค้ดนี้คือเมื่อผู้เยี่ยมชมไม่ได้คลิกบนแบบฟอร์มเข้าสู่ระบบ แต่อยู่ที่ใดที่หนึ่งบนหน้า แบบฟอร์มจะปิดเอง กล่าวอีกนัยหนึ่ง คลาส "menu-open" จะถูกแยกออกจากลิงก์ที่มีคลาส ".signin" และเปลี่ยนกลับไปเป็นภาพพื้นหลังดั้งเดิม

สำหรับเคล็ดลับ?

$(ฟังก์ชั่น() (
$("#forgot_username_link").tipsy((แรงโน้มถ่วง: "w"));
});

เรามักจะแนะนำให้ใช้ปลั๊กอิน jQuery – ยุ่งยาก เนื้อหาของคำแนะนำเครื่องมือคือสิ่งที่เขียนไว้ในแอตทริบิวต์ "title" ที่เกี่ยวข้องกับลิงก์ คุณสามารถเปลี่ยนตำแหน่งของคำแนะนำเครื่องมือโดยสัมพันธ์กับตะวันออก ตะวันตก ใต้ หรือเหนือ สิ่งนี้ถูกนำไปใช้โดยใช้พารามิเตอร์ "แรงโน้มถ่วง" ที่ระบุในโค้ดด้านบน เรามีลิงก์ไปยังเว็บไซต์สำหรับปลั๊กอินนี้โดยเฉพาะ ซึ่งคุณสามารถศึกษาความสามารถของมันในรายละเอียดเพิ่มเติมและดาวน์โหลดปลั๊กอินได้ -

สรุปแล้ว

หากคุณคัดลอกโค้ดทั้งหมดจากบทความนี้ โปรดอย่าเปลี่ยนโครงสร้างโฟลเดอร์ หากคุณเปลี่ยนรหัสจะไม่ทำงาน รหัสนี้เป็นเพียงตัวอย่างการสร้างแบบฟอร์มการเข้าสู่ระบบแบบเลื่อนลงโดยใช้ jQuery ขอให้โชคดีกับการฝึกฝนของคุณ!

ปรับให้เข้ากับฟังก์ชันการเข้าสู่ระบบและแบบฟอร์มการลงทะเบียน พร้อมความสามารถในการสลับแบบไดนามิกโดยไม่ต้องโหลดหน้าซ้ำ หลังจากที่หน้าต่างปรากฏขึ้น ผู้ใช้สามารถสลับจากที่หนึ่งไปยังอีกที่หนึ่งได้อย่างง่ายดาย และหากจำเป็น ให้เลือกตัวเลือกในการเปลี่ยนรหัสผ่าน
วันนี้เราจะมาดูกันว่าทั้งหมดนี้สามารถนำไปใช้ได้อย่างไรโดยใช้ปลั๊กอิน jQuery ขนาดเล็ก แต่ใช้งานได้ดีมากและมาตรฐาน CSS3 ใหม่

วิธีนี้จะมีประโยชน์หากคุณต้องการให้ผู้ใช้สามารถเข้าถึงแบบฟอร์มเข้าสู่ระบบและลงทะเบียนได้ในทุกหน้าของไซต์ของคุณ เมื่อเข้าสู่เว็บไซต์หรือลงทะเบียน ผู้ใช้จะไม่ถูกเปลี่ยนเส้นทางไปยังหน้าอื่นและจะสามารถดำเนินการได้ทั้งหมด การดำเนินการที่จำเป็น“โดยไม่ต้องออกจากการชำระเงิน” ทุกอย่างในหน้าเดียว

การลงทะเบียน รูปร่างแบบฟอร์มป๊อปอัปถูกนำมาใช้โดยใช้ CSS3 น้ำหนักโดยรวมของปลั๊กอินนั้นไม่ใหญ่นักการตอบสนองและการโหลดหน้าต่างโมดอลเกิดขึ้นเกือบจะโดยไม่ชักช้า
รูปแบบที่ตอบสนอง 100% ความสูงและความกว้างของหน้าต่างโมดอลพร้อมแบบฟอร์มจะถูกตั้งค่าโดยอัตโนมัติตามขนาดหน้าจอของอุปกรณ์ของผู้ใช้

เราดูตัวอย่างแล้ว ตอนนี้เรามาดูรายละเอียดส่วนประกอบหลักทั้งหมดของหน้าต่างโมดอลและแบบฟอร์มเพื่อเรียนรู้วิธีใช้งานบนเว็บไซต์ของคุณ
หน้าต่างป๊อปอัปพร้อมแบบฟอร์มเข้าสู่ระบบและลงทะเบียนสร้างขึ้นจากไลบรารีจาวาสคริปต์ยอดนิยม ปลั๊กอิน jQuey ที่ปฏิบัติการได้ และสไตล์ CSS ที่สร้างขึ้น เครื่องมือทั้งหมดเหล่านี้จำเป็นต้องเชื่อมต่อกับเว็บไซต์ของคุณ อันสุดท้าย รุ่นปัจจุบันไลบรารี jQuey สามารถเชื่อมต่อได้โดยตรงจาก Google ไฟล์ปลั๊กอิน main.js และชุดสไตล์ที่สร้างขึ้นสำเร็จรูป style.css สามารถพบได้ในไฟล์เก็บถาวร
Javascript ถูกเขียนก่อนแท็กปิด สไตล์ CSSสามารถคัดลอกและเพิ่มลงในไฟล์ styles.css ของเว็บไซต์ของคุณได้

คอนเทนเนอร์พื้นฐานของหน้าต่างโมดอลบนพื้นหลังสีเข้มและแบบฟอร์มในตัวพร้อมตัวควบคุมจะถูกวางไว้ในส่วนเนื้อหาของหน้า เพื่อความเข้าใจที่มากขึ้น ฉันจึงแยกส่วนต่างๆ และเพิ่มความคิดเห็น องค์ประกอบการออกแบบทั้งหมดเชื่อมโยงอย่างแน่นหนากับ CSS ผ่านคลาสบางคลาส ดังนั้นการเปลี่ยนแปลงการออกแบบแบบฟอร์มให้สอดคล้องกับการออกแบบโดยรวมของไซต์ของคุณจึงไม่ใช่เรื่องยาก

• ทางเข้า
• การลงทะเบียน

อีเมลแจ้งข้อผิดพลาดที่นี่!

รหัสผ่าน ซ่อนมีข้อความแสดงข้อผิดพลาดที่นี่!

จำฉันไว้

ลืมรหัสผ่าน?

ชื่อผู้ใช้ ข้อความแสดงข้อผิดพลาดที่นี่!

อีเมลแจ้งข้อผิดพลาดที่นี่!

รหัสผ่าน ซ่อนมีข้อความแสดงข้อผิดพลาดที่นี่!

ฉันเห็นด้วยกับ เงื่อนไข

ลืมรหัสผ่าน? กรุณากรอกที่อยู่อีเมลของคุณ คุณจะได้รับลิงค์สำหรับสร้างรหัสผ่านใหม่

อีเมลแจ้งข้อผิดพลาดที่นี่!

กลับไปที่ทางเข้า

ผู้เขียนได้สร้างเทมเพลตพื้นฐานและการควบคุมแบบฟอร์มในรูปแบบยอดนิยม สไตล์แบน(Flat) โดยเน้นความเรียบง่ายชัดเจน ไม่มีอะไรฟุ่มเฟือย พื้นหลังสีเข้มโปร่งใสปานกลาง สีที่อ่านง่าย แบบอักษรและไอคอนที่เลือกมาอย่างดีเพื่อระบุช่องป้อนข้อมูล โดยการใช้ คุณสมบัติซีเอสเอสคุณสามารถแก้ไของค์ประกอบแบบฟอร์มใดๆ ได้อย่างง่ายดาย

Cd-user-modal ( ตำแหน่ง: คงที่; ด้านบน: 0; ซ้าย: 0; ความกว้าง: 100%; ความสูง: 100%; พื้นหลัง: rgba (52, 54, 66, 0.9); z-index: 3; overflow-y : อัตโนมัติ การมองเห็น: ซ่อนเร้น; ความทึบ: 0; -webkit-transition: ความทึบ 0.3s; -moz-transition: ความทึบ 0.3s; 0, การมองเห็น 0 0.3s; ความทึบแสง: 1; -webkit-transition: ความทึบ 0.3s 0, การมองเห็น 0 0; -moz-transition: ความทึบแสง 0.3s 0; -modal.is-visible .cd-user-modal-container ( -webkit-transform: แปล Y(0); -moz-transform : แปล Y(0); -ms-transform: แปล Y(0); -o-transform: แปล Y (0); .cd-user-modal-container (ตำแหน่ง: สัมพันธ์; ความกว้าง: 90 %; ความกว้างสูงสุด: 600px; ระยะขอบ: 3em อัตโนมัติ 4em; รัศมีเส้นขอบ: 0.25em; -webkit-transform: แปล Y(- 30px); ./img/cd-icon-username.svg"); ) .cd-form label.cd-email ( ภาพพื้นหลัง: url("../img/cd-icon-email.svg"); ) .cd -form label.cd-password ( ภาพพื้นหลัง: url("../img/cd-icon-password.svg"); ) อินพุตแบบฟอร์ม .cd ( ระยะขอบ: 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: ไม่มี; -o-appearance: ไม่มี; .cd-form input.has-border:focus -color: #343642; (52, 54, 66, 0.1); โครงร่าง: none ) .cd-form input.has-error ( border: 1px solid #d76666; ) .cd- form input ( /* space for Hide button */ padding-right: 65px; ) อินพุตรูปแบบ .cd ( ช่องว่างภายใน: 16px 0; เคอร์เซอร์: ตัวชี้; พื้นหลัง: #2f889a; สี: #FFF; น้ำหนักแบบอักษร: ตัวหนา; เส้นขอบ: ไม่มี; -webkit-ลักษณะที่ปรากฏ: ไม่มี; -moz-ลักษณะที่ปรากฏ: ไม่มี; -ms-ลักษณะที่ปรากฏ: ไม่มี; 2 วินาที 0, การมองเห็น 0 0;

ในเอฟเฟ็กต์การเปลี่ยนภาพจาง มีการเพิ่มการหน่วงเวลาเพื่อให้แน่ใจว่าโมดอลจะจางลงอย่างราบรื่นเมื่อปิด

บันทึก:. ขนาดตัวอักษรของช่องป้อนข้อมูลทั้งหมดถูกตั้งค่าเป็น 16px ตามค่าเริ่มต้น วิธีนี้จะป้องกันการซูมอัตโนมัติที่เกิดขึ้นเมื่อดูบนอุปกรณ์มือถือ

มีปลั๊กอินเวอร์ชันชนชั้นกลางของผู้เขียนตั้งอยู่ คุณสามารถดาวน์โหลดต้นฉบับได้ที่นั่น
เวอร์ชันรัสเซียคุณสามารถรับได้จาก Yandex.Disk ของฉันนั่นแหละ ไฟล์ที่จำเป็นซึ่งบรรจุไว้ในไฟล์เก็บถาวรเดียวอย่างระมัดระวัง ก่อนหน้านั้นอย่าลืมดูตัวอย่างการใช้งานจริงของปลั๊กอิน jQuery ที่ยอดเยี่ยมนี้:

ขอแสดงความนับถืออันเดรย์

การสร้างแบบฟอร์มการติดต่อ: ข้อเสนอแนะ ความคิดเห็น แบบฟอร์มเข้าสู่ระบบ แบบฟอร์มการลงทะเบียนพร้อมตรวจสอบความถูกต้องของข้อมูลที่ป้อน

รูปร่างเรียบร้อยด้วย เติมทีละขั้นตอน- ด้านล่างนี้คือตัวบ่งชี้การกรอกแบบฟอร์ม

กรอกแบบฟอร์มหลายขั้นตอนและตรวจสอบว่ากรอกถูกต้องหรือไม่

การตรวจสอบความถูกต้องของข้อมูลที่ป้อนจะดำเนินการทันทีก่อนที่จะส่งข้อความโดยใช้จาวาสคริปต์

การสลับภาพเคลื่อนไหวโดยใช้ jQuery ระหว่างแบบฟอร์มการเข้าสู่ระบบไซต์ แบบฟอร์มการลงทะเบียน และฟิลด์การกู้คืนรหัสผ่าน ในหน้าสาธิต คลิกลิงก์สีเหลืองเพื่อดูเอฟเฟกต์

สามารถใช้โซลูชันที่คล้ายกันเพื่อให้ผู้เยี่ยมชมสามารถติดต่อเจ้าของไซต์ได้อย่างรวดเร็วจากหน้าใดก็ได้ ในหน้าสาธิต ให้คลิกที่ลูกศรด้านล่างเพื่อเปิดแบบฟอร์ม

แบบฟอร์มพร้อมการตรวจสอบความถูกต้องของข้อมูลที่ป้อน

แบบฟอร์มลงทะเบียนที่ดีที่ใช้งานโดยใช้ CSS, PHP และ jQuery

ความสามารถในการเพิ่มฟิลด์ใหม่ก่อนที่จะส่งข้อความได้ถูกนำมาใช้

แบบฟอร์มตอบรับ PHP ที่ประณีตสวยงามพร้อมการตรวจสอบความถูกต้องของข้อมูลที่ป้อน เทคโนโลยี: CSS, PHP, jQuery

พร้อมการตรวจสอบการเติมที่ถูกต้อง

เพื่อใช้แบบฟอร์มตอบรับขาออกเพื่อการส่งข้อความอย่างรวดเร็ว