แบบฟอร์มเข้าสู่ระบบ CSS3 ที่สวยงาม เราสร้างแบบฟอร์มการลงทะเบียน ปุ่มส่งแบบฟอร์ม

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

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

แบบฟอร์มเข้าสู่ระบบเกี่ยวข้องกับ HTML และ CSS อย่างไร ทั้งสองเป็นส่วนสำคัญของแบบฟอร์มเข้าสู่ระบบ

HTML (HyperText Markup Language) เป็นภาษามาร์กอัปมาตรฐานที่ใช้ในการสร้างหน้าเว็บ องค์ประกอบ HTML เป็นส่วนสำคัญของเว็บไซต์ทั้งหมด

CSS (Cascading Style Sheet) เป็นภาษาที่ใช้อธิบายรูปลักษณ์และการจัดรูปแบบของเอกสารที่เขียนด้วยภาษามาร์กอัป เช่น HTML!

เราใช้ HTML เพื่อสร้างเว็บไซต์และ CSS เพื่อให้ดูดี นั่นคือสิ่งที่ผู้ใช้ส่วนใหญ่พบขณะท่องเว็บ

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

สำรวจสินทรัพย์ดิจิทัล 2.5 ล้านรายการ รวมถึงเทมเพลต WordPress ที่ดีที่สุดประจำปี 2019

สินค้ามากกว่า 2 ล้านรายการจากตลาดที่ใหญ่ที่สุดในโลกสำหรับเทมเพลต HTML5 ธีม และเนื้อหาการออกแบบ ไม่ว่านั่นคือสิ่งที่คุณต้องการ หรือคุณต้องการรูปถ่ายสต็อกเพียงไม่กี่ภาพ ทั้งหมดนี้สามารถพบได้ที่นี่ที่ Envato Market

ดาวน์โหลดเดี๋ยวนี้

เครื่องมือปรับแต่งการเข้าสู่ระบบ WordPress

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

แบบฟอร์มเข้าสู่ระบบ 1 โดย Colorlib

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

การออกแบบแบบฟอร์มเข้าสู่ระบบที่สร้างสรรค์

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

เราค้นหาแบบฟอร์มเข้าสู่ระบบเจ๋ง ๆ ในอินเทอร์เน็ต แต่มันยากมากที่จะหาแบบฟอร์มที่ดูดี ดังนั้นเราจึงตัดสินใจที่จะดำเนินการกับแบบฟอร์มเหล่านี้ เราอยากจะนำเสนอแบบฟอร์มเข้าสู่ระบบ 20 รูปแบบที่ออกแบบและพัฒนาโดยทีมงาน Colorlib

แบบฟอร์มเข้าสู่ระบบ 2 โดย Colorlib

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

แบบฟอร์มเข้าสู่ระบบ 3 โดย Colorlib

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

แบบฟอร์มเข้าสู่ระบบ 4 โดย Colorlib

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

แบบฟอร์มเข้าสู่ระบบ 5 โดย Colorlib

รูปแบบที่สวยงาม สะอาดตา และทันสมัย ​​พร้อมตัวเลือกในการเข้าสู่ระบบด้วย Facebook หรือ Google ปุ่มทั้งหมดมีเอฟเฟกต์โฮฟที่ดีซึ่งช่วยเพิ่มประสบการณ์

แบบฟอร์มเข้าสู่ระบบ 6 โดย Colorlib

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

แบบฟอร์มเข้าสู่ระบบ 7 โดย Colorlib

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

แบบฟอร์มเข้าสู่ระบบ 8 โดย Colorlib

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

แบบฟอร์มเข้าสู่ระบบ 9 โดย Colorlib

หากคุณต้องการหลีกเลี่ยงพื้นหลังสีขาวหรือสีเดียว นี่คือหน้าแบบฟอร์มการเข้าสู่ระบบที่คุณควรพิจารณา ไม่เพียงแต่รองรับพื้นหลังภาพแบบเต็มเท่านั้น แต่ยังมาพร้อมกับการซ้อนทับแบบไล่ระดับสีและตัวเลือกในการเข้าสู่ระบบด้วย Facebook หรือ Google

แบบฟอร์มเข้าสู่ระบบ 10 โดย Colorlib

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

แบบฟอร์มเข้าสู่ระบบ 11 โดย Colorlib

ด้วยคอลเลกชั่นแบบฟอร์มเข้าสู่ระบบ HTML5 และ CSS3 ที่ดีที่สุดของเรา คุณจะประหยัดเวลาและความพยายาม (เงินด้วย) แทนที่จะสร้างใหม่ตั้งแต่ต้น นี่คือเทมเพลตที่พร้อมใช้งานอีกเทมเพลตหนึ่งที่พร้อมใช้งานสำหรับคุณ

แบบฟอร์มเข้าสู่ระบบ 12 โดย Colorlib

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

แบบฟอร์มเข้าสู่ระบบ 13 โดย Colorlib

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

แบบฟอร์มเข้าสู่ระบบ 14 โดย Colorlib

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

แบบฟอร์มเข้าสู่ระบบ 15 โดย Colorlib

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

แบบฟอร์มเข้าสู่ระบบ 16 โดย Colorlib

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

แบบฟอร์มเข้าสู่ระบบ 17 โดย Colorlib

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

แบบฟอร์มเข้าสู่ระบบ 18 โดย Colorlib

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

แบบฟอร์มเข้าสู่ระบบ 19 โดย Colorlib

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

แบบฟอร์มเข้าสู่ระบบ 20 โดย Colorlib

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

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

การออกแบบแบบฟอร์มลงทะเบียนโดยใช้แท็บและป้ายกำกับแบบฟอร์มแบบลอย

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

เข้าสู่ระบบแบบเรียบ – แบบฟอร์มลงทะเบียน

เมื่อคุณคลิกปุ่ม “คลิกฉัน” ที่มุมขวาบน คุณจะได้รับภาพเคลื่อนไหวที่ราบรื่นซึ่งเปลี่ยนแบบฟอร์มเข้าสู่ระบบนี้เป็นแบบฟอร์มลงทะเบียน

เข้าสู่ระบบด้วยแบบฟอร์ม SCSS ที่มีอยู่ในตัวเอง

นี่คือแบบฟอร์มที่มี SCSS ที่มีอยู่ในตัวเอง ส่วนขยายของ CSS ที่เพิ่มพลังและความสง่างามให้กับภาษาพื้นฐาน อนุญาตให้ใช้ตัวแปร กฎที่ซ้อนกัน มิกซ์อิน การนำเข้าอินไลน์ และอื่นๆ

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

นี่คือตัวอย่างเกี่ยวกับวิธีสร้างแบบฟอร์มเข้าสู่ระบบอย่างง่ายโดยใช้ HTML5 และ CSS3 แบบฟอร์มนี้ใช้องค์ประกอบหลอก (:หลัง และ:ก่อน) เพื่อสร้างเอฟเฟกต์แบบหลายหน้า องค์ประกอบเหล่านี้ถูกหมุนโดยใช้คุณสมบัติการแปลง CSS3 แบบฟอร์มนี้ใช้ HTML5 เพื่อทำให้การตรวจสอบและส่งเป็นเรื่องง่าย

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

แบบฟอร์มเข้าสู่ระบบแบบกล่องพร้อมความประหลาดใจเล็กน้อย ลองใช้ "admin" เป็นชื่อผู้ใช้ และ "1234" เป็นรหัสผ่าน เพื่อประสบการณ์การใช้งานเต็มรูปแบบ

แบบฟอร์มเข้าสู่ระบบเล็ก ๆ น้อย ๆ เรียบร้อย เมื่อคุณคลิกที่ “เข้าสู่ระบบ” ทางด้านซ้าย เอฟเฟกต์ภาพเคลื่อนไหวจะสร้างแบบฟอร์มเข้าสู่ระบบเล็กๆ ทางด้านขวามือ แนวทางไม่ซ้ำใครแน่นอน!

แบบฟอร์มการออกแบบวัสดุ

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

แบบฟอร์มตัวอย่าง Bootstrap

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

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

แบบฟอร์มชุด UI ที่ทันสมัย

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

ฟอร์มแดชบอร์ด CSS3 HTML5

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

เข้าสู่ระบบด้วยแบบฟอร์มการกู้คืน

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

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

เข้าสู่ระบบที่โปร่งใส

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

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

รูปทรงเรียบหรู

รูปแบบเรียบหรูที่คุณสามารถต่อท้ายพื้นที่เว็บของคุณเป็นป๊อปอัปหรือโฆษณาเป็นวิดเจ็ตบนหน้าเว็บ ไม่ว่ากรณีใดก็ตาม มันจะทำให้แนวทางแบบมืออาชีพของคุณยังคงอยู่ มันง่ายและสะดวกต่อสายตา และยังมี CTA สำหรับทุกคนที่พลาดการลงทะเบียนในพื้นที่สมาชิกของคุณ ใช้ตามที่เป็นอยู่หรือปรับปรุงตามรสนิยมของคุณ

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

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

Log 'N โหลดแบบฟอร์มภาพเคลื่อนไหว

หากคุณฝึกฝนแอนิเมชั่นและเอฟเฟกต์พิเศษบนเพจของคุณอยู่แล้ว ให้รักษาเทรนด์ด้วยแบบฟอร์มเข้าสู่ระบบด้วย แทนที่จะสร้างรูปแบบของคุณเอง คุณสามารถใช้รูปแบบภาพเคลื่อนไหว Log 'N Load ที่โดดเด่นซึ่งจะช่วยแก้ปัญหาได้ เมื่อคุณวางเมาส์เหนือปุ่มเข้าสู่ระบบ แบบฟอร์มจะแสดงต่อหน้าคุณ มันยังมีการโหลดแบบวงกลมที่ช่วยเพิ่มประสบการณ์

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

แบบฟอร์ม CSS3 พร้อมเงา

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

วิดเจ็ตการเข้าสู่ระบบที่เรียบง่าย ทันสมัย ​​และยืดหยุ่นนี้เป็นมากกว่าเทมเพลตแบบฟอร์มการเข้าสู่ระบบถัดไปของคุณ รูปลักษณ์ภายนอกดูสะอาดตาและตรงประเด็นโดยนำเสนอพื้นฐานบางส่วนแล้ว และปุ่ม “บางอัน” นั้นเป็นปุ่มสำหรับลิงค์ไปยังส่วนลืมชื่อผู้ใช้และรหัสผ่าน ยิ่งไปกว่านั้น สำหรับทุกคนที่เพิ่งเริ่มใช้ Space ของคุณ ปุ่มบัญชีใหม่จะพลิกวิดเจ็ตการเข้าสู่ระบบและแสดงไฟล์ . ฉลาด!

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

แบบฟอร์มสีเขียวและสีเหลือง

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

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

แบบฟอร์มป้องกันด้วยรหัสผ่าน

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

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

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

ขอบคุณสำหรับการเยี่ยมชม Colorlib และอ่านบทความนี้! เราซาบซึ้งเป็นอย่างยิ่ง! ตอนนี้คุณอาจต้องการเรียนรู้วิธีใช้งานฟรีของเรา

นักพัฒนาเว็บไซต์ส่วนหน้าและนักออกแบบเว็บไซต์ที่เชี่ยวชาญด้านการพัฒนาธีม WordPress ฟรีและพรีเมียม เริ่มเรียนรู้การเขียนโค้ดเมื่อ 2 ปีที่แล้ว และตอนนี้ฉันคุ้นเคยกับ CSS/HTML/JavaScript (jQuery) และ PHP แล้ว หลงใหลในประสิทธิภาพของแอปพลิเคชัน ประสบการณ์ผู้ใช้ และความเรียบง่าย

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

ในบทความนี้คุณจะได้เรียนรู้ วิธีสร้างแบบฟอร์มลงทะเบียนและการอนุญาตใช้ HTML, JavaScript, PHP และ MySql แบบฟอร์มดังกล่าวใช้ในเกือบทุกเว็บไซต์ โดยไม่คำนึงถึงประเภท สร้างขึ้นสำหรับฟอรัม ร้านค้าออนไลน์ โซเชียลเน็ตเวิร์ก (เช่น Facebook, Twitter, Odnoklassniki) และเว็บไซต์ประเภทอื่น ๆ อีกมากมาย

หากคุณมีเว็บไซต์บน คอมพิวเตอร์ท้องถิ่นฉันหวังว่าคุณจะมีอยู่แล้ว หากไม่มีมันก็ไม่มีอะไรทำงาน

การสร้างตารางในฐานข้อมูล

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

ดังนั้นเราจึงมีฐานข้อมูล (ตัวย่อว่า DB) ตอนนี้เราจำเป็นต้องสร้างตาราง ผู้ใช้โดยเราจะเพิ่มผู้ใช้ที่ลงทะเบียนของเรา

ฉันยังอธิบายวิธีสร้างตารางในฐานข้อมูลในบทความด้วย

ดังนั้นเราจึงคิดและจินตนาการว่าแบบฟอร์มของเราจะมีฟิลด์ใดและสร้างตารางขึ้นมา ผู้ใช้ด้วยฟิลด์เหล่านี้:

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

ทุกฟิลด์ประเภท “VARCHAR” ต้องมีค่าเริ่มต้นเป็น NULL

หากคุณต้องการให้แบบฟอร์มการลงทะเบียนของคุณมีช่องอื่นๆ คุณสามารถเพิ่มได้ที่นี่

แค่นั้นแหละโต๊ะของเรา ผู้ใช้พร้อม. เรามาดูขั้นตอนต่อไปกันดีกว่า

การเชื่อมต่อฐานข้อมูล

เราได้สร้างฐานข้อมูลแล้ว ตอนนี้เราต้องเชื่อมต่อกับมัน เราจะเชื่อมต่อโดยใช้ส่วนขยาย PHP MySQLi

ในโฟลเดอร์ของเว็บไซต์ของเรา ให้สร้างไฟล์ที่มีชื่อ dbconnect.phpและเขียนสคริปต์ต่อไปนี้ลงไป:

ข้อผิดพลาดในการเชื่อมต่อฐานข้อมูล- คำอธิบายข้อผิดพลาด: ".mysqli_connect_error()"

ไฟล์นี้ dbconnect.phpจะต้องเชื่อมต่อกับตัวจัดการแบบฟอร์ม

สังเกตตัวแปร $address_siteที่นี่ฉันระบุชื่อไซต์ทดสอบที่ฉันจะดำเนินการ กรุณาระบุชื่อเว็บไซต์ของคุณตามนั้น

โครงสร้างเว็บไซต์

ตอนนี้เรามาดูโครงสร้าง HTML ของเว็บไซต์ของเรากันดีกว่า

เราจะย้ายส่วนหัวและส่วนท้ายของเว็บไซต์ไปที่ แยกไฟล์, header.phpและ footer.php- เราจะรวมไว้ในทุกหน้า คือในหน้าหลัก (ไฟล์ ดัชนี.php) ไปยังหน้าที่มีแบบฟอร์มลงทะเบียน (file form_register.php) และไปยังหน้าที่มีแบบฟอร์มการอนุญาต (file form_auth.php).

บล็อกด้วยลิงก์ของเรา การลงทะเบียนและ การอนุญาตให้เพิ่มลงในส่วนหัวของไซต์เพื่อให้แสดงบนทุกหน้า ลิงค์หนึ่งจะเข้าที่ หน้าแบบฟอร์มลงทะเบียน(ไฟล์ form_register.php) และอีกอันไปยังหน้าด้วย แบบฟอร์มการอนุญาต(ไฟล์ form_auth.php).

เนื้อหาของไฟล์ header.php:

ชื่อของเว็บไซต์ของเรา

ด้วยเหตุนี้ หน้าหลักของเราจึงมีลักษณะดังนี้:

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

ตอนนี้เรามาดูแบบฟอร์มการลงทะเบียนกันดีกว่า ตามที่คุณเข้าใจแล้ว เราได้บันทึกไว้ในไฟล์แล้ว form_register.php.

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

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

ก่อนที่จะแสดงแบบฟอร์ม ให้เพิ่มบล็อกเพื่อแสดงข้อความแสดงข้อผิดพลาดจากเซสชัน

และอีกประการหนึ่งหากผู้ใช้ได้รับอนุญาตแล้วและด้วยความอยากรู้อยากเห็นเขาจึงไปที่หน้าลงทะเบียนโดยตรงโดยเขียนลงในแถบที่อยู่ของเบราว์เซอร์ site_address/form_register.phpจากนั้นในกรณีนี้ แทนที่จะแสดงแบบฟอร์มการลงทะเบียน เราจะแสดงส่วนหัวที่ระบุว่าเขาได้ลงทะเบียนแล้ว

โดยทั่วไปแล้วรหัสไฟล์ form_register.phpเราได้รับสิ่งนี้:

คุณได้ลงทะเบียนแล้ว

ในเบราว์เซอร์ หน้าที่มีแบบฟอร์มลงทะเบียนจะมีลักษณะดังนี้:

โดยการใช้ คุณลักษณะที่จำเป็นเราได้กำหนดให้ทุกช่องเป็นข้อมูลบังคับ

ให้ความสนใจกับรหัสแบบฟอร์มลงทะเบียนอยู่ที่ไหน แคปช่าจะปรากฏขึ้น:

เราระบุเส้นทางไปยังไฟล์ในค่าของแอตทริบิวต์ src สำหรับรูปภาพ captcha.phpซึ่งสร้างแคปช่านี้

มาดูโค้ดไฟล์กัน captcha.php:

โค้ดได้รับการวิจารณ์อย่างดี ดังนั้นผมจะเน้นเพียงจุดเดียวเท่านั้น

ภายในฟังก์ชั่น รูปภาพTtfText()มีการระบุเส้นทางไปยังแบบอักษร verdana.ttf- ดังนั้นเพื่อให้ captcha ทำงานได้อย่างถูกต้อง เราต้องสร้างโฟลเดอร์ขึ้นมา แบบอักษรและวางไฟล์ฟอนต์ไว้ตรงนั้น verdana.ttf- คุณสามารถค้นหาและดาวน์โหลดได้จากอินเทอร์เน็ตหรือนำมาจากไฟล์เก็บถาวรพร้อมเนื้อหาของบทความนี้

เราสร้างโครงสร้าง HTML เสร็จแล้ว ก็ถึงเวลาดำเนินการต่อ

ตรวจสอบความถูกต้องของอีเมลโดยใช้ jQuery

แบบฟอร์มใดๆ จำเป็นต้องตรวจสอบความถูกต้องของข้อมูลที่ป้อน ทั้งในฝั่งไคลเอ็นต์ (โดยใช้ JavaScript, jQuery) และฝั่งเซิร์ฟเวอร์

เราต้องให้ความสนใจเป็นพิเศษกับฟิลด์อีเมล เป็นสิ่งสำคัญมากที่ที่อยู่ไปรษณีย์ที่ป้อนนั้นถูกต้อง

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

และในกรณีนี้เราต้องทำการตรวจสอบที่น่าเชื่อถือกว่านี้ ในการดำเนินการนี้ เราจะใช้ไลบรารี jQuery จาก JavaScript

หากต้องการเชื่อมต่อไลบรารี jQuery ในไฟล์ header.phpระหว่างแท็ก ก่อนแท็กปิด ให้เพิ่มบรรทัดนี้:

หลังจากบรรทัดนี้ เราจะเพิ่มรหัสตรวจสอบอีเมล ที่นี่เราจะเพิ่มรหัสเพื่อตรวจสอบความยาวของรหัสผ่านที่ป้อน ความยาวต้องมีอย่างน้อย 6 ตัวอักษร

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

เสร็จสิ้นการตรวจสอบแบบฟอร์มในฝั่งไคลเอ็นต์แล้ว ตอนนี้เราสามารถส่งไปยังเซิร์ฟเวอร์ได้ โดยเราจะตรวจสอบและเพิ่มข้อมูลลงในฐานข้อมูลด้วย

การลงทะเบียนผู้ใช้

เราส่งแบบฟอร์มไปยังไฟล์เพื่อการประมวลผล register.phpผ่านทางวิธี POST ชื่อ ไฟล์นี้ตัวจัดการที่ระบุในค่าแอตทริบิวต์ การกระทำ- และวิธีการส่งระบุไว้ในค่าแอตทริบิวต์ วิธี.

เปิดไฟล์นี้ register.phpและสิ่งแรกที่เราต้องทำคือเขียนฟังก์ชันเปิดเซสชันและเชื่อมต่อไฟล์ที่เราสร้างไว้ก่อนหน้านี้ dbconnect.php(ในไฟล์นี้เราได้เชื่อมต่อกับฐานข้อมูล) และเรามาประกาศเซลล์กันทันที error_messagesและ ความสำเร็จ_ข้อความในอาเรย์เซสชันส่วนกลาง ใน error_mesagesเราจะบันทึกข้อความแสดงข้อผิดพลาดทั้งหมดที่เกิดขึ้นระหว่างการประมวลผลแบบฟอร์มและใน ความสำเร็จ_ข้อความเราจะบันทึกข้อความอันน่ายินดี

ก่อนที่เราจะดำเนินการต่อไปเราต้องตรวจสอบ แบบฟอร์มถูกส่งไปแล้วเหรอ?- ผู้โจมตีสามารถดูค่าแอตทริบิวต์ได้ การกระทำจากแบบฟอร์ม และดูว่าไฟล์ใดกำลังประมวลผลแบบฟอร์มนี้ และเขาอาจมีแนวคิดที่จะไปที่ไฟล์นี้โดยตรงโดยพิมพ์เข้าไป แถบที่อยู่ที่อยู่เบราว์เซอร์คือ: http://site_address/register.php

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

หากผู้โจมตีพยายามเข้าถึงไฟล์นี้โดยตรง พวกเขาจะได้รับข้อความแสดงข้อผิดพลาด ฉันขอเตือนคุณว่าตัวแปร $address_site มีชื่อของไซต์และมีการประกาศไว้ในไฟล์ dbconnect.php.

ข้อผิดพลาด!หน้าหลัก

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

ตอนนี้เรามาดำเนินการตรวจสอบกันต่อ ในไฟล์ register.phpภายในบล็อก if ซึ่งเราจะตรวจสอบว่ามีการคลิกปุ่ม "ลงทะเบียน" หรือแสดงความคิดเห็น " // (1) ช่องว่างสำหรับโค้ดชิ้นถัดไป"เราเขียน:

//ตรวจสอบ captcha ที่ได้รับ //ตัดช่องว่างจากจุดเริ่มต้นและจุดสิ้นสุดของบรรทัด $captcha = trim($_POST["captcha"]);

ข้อผิดพลาด! if(isset($_POST["captcha"]) && !empty($captcha))( //เปรียบเทียบค่าที่ได้รับกับค่าจากเซสชัน if(($_SESSION["rand"] != $captcha) && ($_SESSION ["rand"] != ""))( // หาก captcha ไม่ถูกต้อง เราจะส่งคืนผู้ใช้ไปที่หน้าการลงทะเบียน และที่นั่นเราจะแสดงข้อความแสดงข้อผิดพลาดให้เขาทราบว่าเขาป้อน captcha ผิด . $error_message = "

ข้อผิดพลาด!"; // บันทึกข้อความแสดงข้อผิดพลาดลงในเซสชัน $_SESSION["error_messages"] = $error_message; // ส่งผู้ใช้กลับไปยังส่วนหัวของหน้าการลงทะเบียน ("HTTP/1.1 301 ย้ายอย่างถาวร"); header("Location: " .$address_site "/form_register.php"); //หยุดสคริปต์ exit(); // (2) วางโค้ดชิ้นถัดไป )else( //หาก captcha ไม่ผ่านหรือเป็นทางออกที่ว่างเปล่า( "

ไม่มีรหัสยืนยัน ซึ่งก็คือรหัส captcha คุณสามารถไปที่หน้าหลักได้

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

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

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

// (2) ช่องว่างสำหรับโค้ดชิ้นถัดไป /* ตรวจสอบว่ามีข้อมูลที่ส่งจากแบบฟอร์มในอาเรย์ส่วนกลาง $_POST หรือไม่ และล้อมข้อมูลที่ส่งในตัวแปรปกติ*/ if(isset($_POST["first_name"]))( //ตัดช่องว่างจากจุดเริ่มต้น และจุดสิ้นสุดของสตริง $first_name = trim($_POST["first_name"]); //ตรวจสอบตัวแปรเพื่อดูความว่างเปล่า if(!empty($first_name))( // เพื่อความปลอดภัย ให้แปลงอักขระพิเศษ

ในเอนทิตี HTML $first_name = htmlspecialchars($first_name, ENT_QUOTES);

)else( // บันทึกข้อความแสดงข้อผิดพลาดลงในเซสชัน $_SESSION["error_messages"] .= "

กรุณากรอกนามสกุลของคุณ

ช่องนามสกุลหายไป

ใส่อีเมลของคุณ

ใส่รหัสผ่านของคุณ

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

ณ สถานที่ที่กำหนด" // (3) รหัสที่ตั้งเพื่อตรวจสอบรูปแบบของที่อยู่ไปรษณีย์และความเป็นเอกลักษณ์" เพิ่มรหัสต่อไปนี้:

//ตรวจสอบรูปแบบของที่อยู่อีเมลที่ได้รับโดยใช้นิพจน์ทั่วไป $reg_email = "/^**@(+(*+)*\.)++/i";

//หากรูปแบบของที่อยู่อีเมลที่ได้รับไม่ตรงกับนิพจน์ทั่วไป if(!preg_match($reg_email, $email))( // บันทึกข้อความแสดงข้อผิดพลาดลงในเซสชัน $_SESSION["error_messages"] .= "

"; //ส่งผู้ใช้กลับไปยังส่วนหัวของหน้าการลงทะเบียน("HTTP/1.1 301 ย้ายอย่างถาวร"); header("ตำแหน่ง: ".$address_site."/form_register.php"); //หยุดสคริปต์ออก(); ) // เราตรวจสอบว่าที่อยู่ดังกล่าวอยู่ในฐานข้อมูลแล้วหรือไม่ $result_query = $mysqli->query("SELECT `email` FROM `users` WHERE `email`="".$email"""); มีเพียงหนึ่งแถวเท่านั้น ซึ่งหมายความว่าผู้ใช้ที่มีที่อยู่อีเมลนี้ได้ลงทะเบียนแล้ว if($result_query->num_rows == 1)( //หากผลลัพธ์ที่ได้รับไม่เป็นเท็จ if(($row = $result_query->fetch_assoc() ) != false) ( // บันทึกข้อความแสดงข้อผิดพลาดลงในเซสชัน $_SESSION["error_messages"] .= "

"; //ส่งผู้ใช้กลับไปยังส่วนหัวของหน้าการลงทะเบียน("HTTP/1.1 301 ย้ายอย่างถาวร"); header("Location: ".$address_site."/form_register.php"); )else( // บันทึกข้อความแสดงข้อผิดพลาด ไปที่เซสชัน . $_SESSION["error_messages"] .= "

"; //ส่งผู้ใช้กลับไปยังส่วนหัวของหน้าการลงทะเบียน("HTTP/1.1 301 ย้ายอย่างถาวร"); header("ตำแหน่ง: ".$address_site."/form_register.php"); ) /* ปิดส่วนที่เลือก */ $ result_query-> close(); // หยุดสคริปต์ exit(); ) /* ปิดส่วนที่เลือก */ $result_query->close(); เมื่อตรวจสอบทั้งหมดเสร็จแล้ว ก็ถึงเวลาเพิ่มผู้ใช้ลงในฐานข้อมูล ณ สถานที่ที่กำหนด"" เพิ่มรหัสต่อไปนี้:

// (4) วางโค้ดสำหรับเพิ่มผู้ใช้เข้าฐานข้อมูล

//แบบสอบถามเพื่อเพิ่มผู้ใช้ในฐานข้อมูล $result_query_insert = $mysqli->query("INSERT INTO `users` (first_name, Last_name, email,password) VALUES ("".$first_name."", "".$last_name ” , "".$อีเมล์", "".$รหัสผ่าน"")");

เกิดข้อผิดพลาดในการขอเพิ่มผู้ใช้ลงในฐานข้อมูล
ตอนนี้คุณสามารถเข้าสู่ระบบโดยใช้ชื่อผู้ใช้และรหัสผ่านของคุณ

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

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

สคริปต์สำหรับตรวจสอบรูปแบบที่อยู่อีเมลและความยาวของรหัสผ่านอยู่ในไฟล์ header.phpดังนั้นจะนำไปใช้กับฟิลด์จากแบบฟอร์มนี้ด้วย

เซสชันจะเริ่มต้นในไฟล์ด้วย header.phpดังนั้นในไฟล์ form_auth.phpไม่จำเป็นต้องเริ่มเซสชันเนื่องจากเราจะได้รับข้อผิดพลาด

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

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

การอนุญาตผู้ใช้

เพื่อระบุคุณค่า การกระทำแฮนดิแคปการอนุญาตมีไฟล์ระบุไว้ auth.phpซึ่งหมายความว่าแบบฟอร์มจะถูกประมวลผลในไฟล์นี้

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

//ประกาศเซลล์เพื่อเพิ่มข้อผิดพลาดที่อาจเกิดขึ้นขณะประมวลผลแบบฟอร์ม

$_SESSION["error_messages"] = "";

ข้อผิดพลาด!//ประกาศเซลล์สำหรับเพิ่มข้อความที่สำเร็จ $_SESSION["success_messages"] = "";

//ตรวจสอบ captcha ที่ได้รับ if(isset($_POST["captcha"]))( //ตัดช่องว่างจากจุดเริ่มต้นและจุดสิ้นสุดของบรรทัด $captcha = trim($_POST["captcha"]); if(! Empty($captcha ))( //เปรียบเทียบค่าที่ได้รับกับค่าจากเซสชัน if(($_SESSION["rand"] != $captcha) && ($_SESSION["rand"] != "")) ( // หาก captcha ไม่ถูกต้อง เราจะส่งคืนผู้ใช้ไปที่หน้าการอนุญาต และที่นั่นเราจะแสดงข้อความแสดงข้อผิดพลาดให้เขาทราบว่าเขาป้อน captcha ผิด $error_message = "

ข้อผิดพลาด! if(isset($_POST["captcha"]) && !empty($captcha))( //เปรียบเทียบค่าที่ได้รับกับค่าจากเซสชัน if(($_SESSION["rand"] != $captcha) && ($_SESSION ["rand"] != ""))( // หาก captcha ไม่ถูกต้อง เราจะส่งคืนผู้ใช้ไปที่หน้าการลงทะเบียน และที่นั่นเราจะแสดงข้อความแสดงข้อผิดพลาดให้เขาทราบว่าเขาป้อน captcha ผิด . $error_message = "

ข้อผิดพลาด!ช่องรายการ captcha ต้องไม่เว้นว่าง

ข้อผิดพลาด!ไม่มีรหัสยืนยัน ซึ่งก็คือรหัส captcha คุณสามารถไปที่หน้าหลักได้

หากผู้ใช้ป้อนรหัสยืนยันอย่างถูกต้อง เราจะดำเนินการต่อไป ไม่เช่นนั้นเราจะส่งคืนเขาไปที่หน้าการอนุญาต

กำลังตรวจสอบที่อยู่ทางไปรษณีย์

//ตัดช่องว่างจากจุดเริ่มต้นและจุดสิ้นสุดของบรรทัด $email = trim($_POST["email"]);

if(isset($_POST["email"]))( if(!empty($email))( $email = htmlspecialchars($email, ENT_QUOTES); //ตรวจสอบรูปแบบของที่อยู่อีเมลที่ได้รับโดยใช้นิพจน์ทั่วไป $ reg_email = " /^**@(+(*+)*\.)++/i"; //หากรูปแบบของที่อยู่อีเมลที่ได้รับไม่ตรงกับนิพจน์ทั่วไป if(!preg_match($reg_email, $email ))( // บันทึกข้อความแสดงข้อผิดพลาดของเซสชัน $_SESSION["error_messages"] .= "

"; //ส่งผู้ใช้กลับไปยังส่วนหัวของหน้าการอนุญาต("HTTP/1.1 301 ย้ายอย่างถาวร"); header("ตำแหน่ง: ".$address_site."/form_auth.php"); //หยุดสคริปต์ออก(); ) )else ( // บันทึกข้อความแสดงข้อผิดพลาดไปยังเซสชัน $_SESSION["error_messages"] .= "

ช่องสำหรับป้อนที่อยู่ไปรษณีย์ (อีเมล) ต้องไม่เว้นว่าง

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

การตรวจสอบรหัสผ่าน

ฟิลด์ถัดไปที่ต้องดำเนินการคือฟิลด์รหัสผ่าน ไปยังสถานที่ที่กำหนด” //(3) สถานที่สำหรับการประมวลผลรหัสผ่าน"เราเขียน:

If(isset($_POST["password"]))( //ตัดช่องว่างจากจุดเริ่มต้นและจุดสิ้นสุดของสตริง $password = trim($_POST["password"]); if(!empty($password))( $password = htmlspecialchars($password, ENT_QUOTES); //เข้ารหัสรหัสผ่าน $password = md5($password"top_secret");else( //บันทึกข้อความแสดงข้อผิดพลาดลงในเซสชัน $_SESSION["error_messages"] .= "

ใส่รหัสผ่านของคุณ

ช่องรหัสผ่านหายไป

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

ตอนนี้คุณต้องสร้างแบบสอบถามในฐานข้อมูลเพื่อเลือกผู้ใช้ที่มีที่อยู่อีเมลเท่ากับที่อยู่อีเมลที่ได้รับและมีรหัสผ่านเท่ากับรหัสผ่านที่ได้รับ

//สืบค้นในฐานข้อมูลตามการเลือกของผู้ใช้

$result_query_select = $mysqli->query("SELECT * FROM `users` WHERE email = "".$email."" AND รหัสผ่าน = "".$password""");

header("ตำแหน่ง: ".$address_site."/index.php");

การเข้าสู่ระบบและ/หรือรหัสผ่านไม่ถูกต้อง

"; //ส่งผู้ใช้กลับไปยังส่วนหัวของหน้าการอนุญาต("HTTP/1.1 301 ย้ายอย่างถาวร"); header("ตำแหน่ง: ".$address_site."/form_auth.php"); //หยุดสคริปต์ออก(); ) ) ออกจากเว็บไซต์และสิ่งสุดท้ายที่เราดำเนินการคือ

ขั้นตอนการออกจากสถานที่ header.php- ในขณะนี้ ในส่วนหัว เราจะแสดงลิงก์ไปยังหน้าการอนุญาตและหน้าการลงทะเบียน ในส่วนหัวของไซต์ (ไฟล์.

) โดยใช้เซสชันเพื่อตรวจสอบว่าผู้ใช้ได้รับอนุญาตแล้วหรือไม่ ถ้าไม่เช่นนั้น เราจะแสดงลิงก์การลงทะเบียนและการอนุญาต มิฉะนั้น (หากได้รับอนุญาต) เราจะแสดงลิงก์แทนลิงก์การลงทะเบียนและการอนุญาต header.php:

ออก

แก้ไขโค้ดบางส่วนจากไฟล์

การลงทะเบียน ออกเมื่อคุณคลิกลิงก์ออกจากไซต์ เราจะไปที่ไฟล์ logout.php.

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

รหัสไฟล์ ออกจากระบบ.php:นั่นคือทั้งหมดที่ ตอนนี้คุณรู้วิธีแล้ว

ดำเนินการและประมวลผลแบบฟอร์มการลงทะเบียนและการอนุญาต ผู้ใช้บนเว็บไซต์ของคุณ แบบฟอร์มเหล่านี้พบได้ในเกือบทุกเว็บไซต์ ดังนั้นโปรแกรมเมอร์ทุกคนจึงควรรู้วิธีสร้างแบบฟอร์มเหล่านี้นอกจากนี้เรายังได้เรียนรู้วิธีตรวจสอบข้อมูลอินพุต ทั้งบนฝั่งไคลเอ็นต์ (ในเบราว์เซอร์ โดยใช้ JavaScript, jQuery) และบนฝั่งเซิร์ฟเวอร์ (โดยใช้ ภาษาพีพีพี.

- เราก็ได้เรียนรู้เช่นกัน

ดำเนินการตามขั้นตอนการออกจากไซต์

หากคุณมีคำถามใด ๆ โปรดติดต่อฉัน และหากคุณสังเกตเห็นข้อผิดพลาดใด ๆ ในบทความ โปรดแจ้งให้เราทราบ

แผนการสอน (ตอนที่ 5):

1. การสร้างโครงสร้าง HTML สำหรับแบบฟอร์มการอนุญาต
2. เราประมวลผลข้อมูลที่ได้รับ
3. เราแสดงคำทักทายของผู้ใช้ในส่วนหัวของเว็บไซต์

คุณชอบบทความนี้หรือไม่?

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

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

ลองใช้เทมเพลตแบบฟอร์มการเข้าสู่ระบบฟรีเหล่านี้ เนื่องจากส่วนใหญ่มีคุณสมบัติการตรวจสอบความถูกต้องของ HTML ที่สร้างไว้ล่วงหน้า เช่นเดียวกับการตรวจสอบความถูกต้องของ jQuery หรือ HTML บางส่วน (เช่น แบบฟอร์มเข้าสู่ระบบ/ลงทะเบียนที่มีตัววัดรหัสผ่านด้านล่าง)

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

แบบฟอร์มเข้าสู่ระบบสีแดง

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

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

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

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

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

แบบฟอร์มเข้าสู่ระบบขั้นต่ำพร้อมภาพเคลื่อนไหวที่ลื่นไหล

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

แบบฟอร์มเข้าสู่ระบบที่เรียบง่ายด้วย css

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

แบบฟอร์มเข้าสู่ระบบแบบเคลื่อนไหว

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

เข้าสู่ระบบที่หรูหรา

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

หน้าจอเข้าสู่ระบบอย่างสงบ

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

แบบฟอร์มเข้าสู่ระบบและลงทะเบียน

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

แบบฟอร์มเข้าสู่ระบบด้วยการสร้างบัญชี

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

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

เทมเพลตฟอร์มขั้นต่ำสำหรับการเข้าสู่ระบบ

การตรวจสอบความถูกต้องของอีเมลอยู่ในระบบและเทมเพลตนี้เป็น CSS, html ล้วนๆ โดยไม่มีโมดูล jquery ที่หรูหรา

แบบฟอร์มลงทะเบียน/เข้าสู่ระบบ

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

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

โดยมีให้ทั้งในรูปแบบ PSD และเวอร์ชัน HTML/CSS แบบเข้ารหัสเต็มรูปแบบ ดังนั้นคุณจึงสามารถเริ่มบูรณาการได้ทันที

แบบฟอร์มเข้าสู่ระบบ (รหัส)

แบบฟอร์มเข้าสู่ระบบแบบมืออาชีพ การดาวน์โหลดมีไฟล์ PSD และฉันก็รู้สึกอยากเขียนโค้ดด้วย ดังนั้นฉันจึงรวมไฟล์ xHTML, Js และ CSS ไว้ด้วย

แบบฟอร์มเข้าสู่ระบบเรียบง่ายสีขาว

แบบฟอร์มเข้าสู่ระบบที่สะอาดและเรียบง่ายพร้อมปุ่มส่งแบบวงกลมและสถานะโฟกัสที่สวยงาม

เพียงเข้าสู่ระบบแบบฟอร์ม

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

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

ช่องแรกใช้สำหรับเข้าสู่ระบบ ช่องที่สองใช้สำหรับรหัสผ่าน และอย่างที่สองมันไม่ง่ายเลย เพราะขณะนี้เป็นเพียงช่องกรอกข้อความเท่านั้น

ผลลัพธ์ในเบราว์เซอร์:

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

ผลลัพธ์:

ปุ่มส่งแบบฟอร์ม

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

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

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

ดังนั้นโค้ดสำหรับแบบฟอร์มของเราจะเป็นดังนี้:

ผลลัพธ์ในเบราว์เซอร์: