मालवेअर हे अनाहूत किंवा धोकादायक प्रोग्राम आहेत जे...
येथे html लॉगिन पृष्ठ कोडचे उदाहरण आहे. या उदाहरणात, आम्ही एक मजकूर फील्ड, पासवर्ड, रीसेट बटण आणि लॉगिन बटण प्रदर्शित केले आहे. आम्ही रीसेट बटण वापरले आहे जे सर्व फील्ड रिक्त वर रीसेट करते. आम्ही लॉगिन पृष्ठामध्ये JavaScript प्रमाणीकरण वापरले आहे. आम्ही वापरकर्तानाव सेट केले आहे आणि पासवर्डमूल्य.
येथे html लॉगिन पृष्ठ कोडचे उदाहरण आहे. या उदाहरणात, आम्ही एक मजकूर फील्ड, पासवर्ड, रीसेट बटण आणि लॉगिन बटण प्रदर्शित केले आहे. आम्ही रीसेट बटण वापरले आहे जे सर्व फील्ड रिक्त वर रीसेट करते. आम्ही लॉगिन पृष्ठामध्ये JavaScript प्रमाणीकरण वापरले आहे. आम्ही वापरकर्तानाव आणि पासवर्ड मूल्य सेट केले आहे.येथे html लॉगिन पृष्ठ कोडचे उदाहरण आहे. या उदाहरणात, आम्ही एक मजकूर फील्ड, पासवर्ड, रीसेट बटण आणि लॉगिन बटण प्रदर्शित केले आहे. आम्ही रिसेट बटण वापरले आहे जे सर्व फील्ड रिक्त वर रीसेट करते. आम्ही लॉगिन पृष्ठामध्ये JavaScript प्रमाणीकरण वापरले आहे. आम्ही वापरकर्तानाव आणि पासवर्ड मूल्य सेट केले आहे. जर एखाद्या व्यक्तीने चुकीचे वापरकर्तानाव किंवा संकेतशब्द किंवा दोन्ही प्रविष्ट केले तर, "त्रुटी: चुकीचे वापरकर्तानाव किंवा पासवर्ड" असलेला त्रुटी संदेश प्रदर्शित केला जाईल. जोपर्यंत व्यक्ती योग्य वापरकर्तानाव आणि पासवर्ड टाकत नाही तोपर्यंत तो लॉगिन होणार नाही.
एकदा तुम्ही योग्य वापरकर्तानाव आणि पासवर्ड टाकल्यानंतर, तुम्हाला दुसऱ्या पृष्ठावर पुनर्निर्देशित केले जाईल.
लॉगिन पृष्ठ बहुतेक डायनॅमिक वेबसाइटमध्ये वापरकर्त्यांना त्यांच्या क्रेडेन्शियल्सवर आधारित प्रमाणित करण्यासाठी वापरले जाते. लॉगिन करण्यासाठी साठी पृष्ठवेबसाइट्स HTML फॉर्मआणि HTML घटक वापरले जातात. मजकूर फील्ड वापरकर्तानाव स्वीकारण्यासाठी वापरला जातो आणि पासवर्ड मजकूर फील्ड वापरकर्त्याकडून पासवर्ड स्वीकारण्यासाठी वापरला जातो.
सबमिट बटण प्रमाणीकरणासाठी सर्व्हरवर डेटा सबमिट करण्यासाठी वापरले जाते. JavaScript वापरून ब्राउझरमध्ये वापरकर्ता इनपुट सत्यापित करणे चांगले आहे. या ट्युटोरियलमध्ये आपण a तयार करत आहोत HTML लॉगिनपृष्ठ कोड आणि JavaScript सह वापरकर्ता इनपुट सत्यापित करणे. आधुनिक वेब ऍप्लिकेशनमध्ये सर्व्हर-साइड व्हॅलिडेशन देखील खूप महत्वाचे आहे सर्व्हर बाजू सहसर्व्हरवर चालणारा प्रोग्राम.
येथे व्हिडिओ ट्यूटोरियल आहे:
परंतु या ट्यूटोरियलमध्ये तुम्ही HTML मध्ये लॉगिन पेज तयार करणे आणि JavaScript सह वापरकर्ता इनपुट सत्यापित करणे शिकाल. HTML लॉगिन पृष्ठाचा डेमो पहा.
आम्ही करत असलेल्या लॉगिन पृष्ठाचा स्क्रीन शॉट येथे आहे:
हे लॉगिन पृष्ठ वापरकर्तानाव, पासवर्ड मजकूर फील्ड आणि नंतर रीसेट आणि लॉगिनसाठी बटणे प्रदर्शित करते. एकदा वापरकर्त्याने डेटा प्रविष्ट केल्यानंतर आणि लॉगिन बटणावर क्लिक केल्यानंतर, फॉर्म सत्यापित करण्यासाठी JavaScript वापरला जातो आणि सत्यापन अयशस्वी झाल्यास त्रुटी संदेश प्रदर्शित केला जातो.
JavaScript प्रमाणीकरणासह HTML लॉगिन पृष्ठ
लॉगिन पृष्ठ
| HTML लॉगिन पृष्ठ | |
| वापरकर्तानाव: | |
| पासवर्ड: | |
सर्वांना नमस्कार. म्हणून आम्ही आकार तयार करण्यासाठी काही घटक शिकलो आहोत. एका मोठ्या समस्येचे निराकरण करण्यासाठी आपले ज्ञान एकत्र करण्याची वेळ आली आहे. चला जास्तीत जास्त तयार करूया साधे फॉर्मसाइटवर अधिकृततेसाठी. हे करण्यासाठी, आम्हाला दोन फील्डची आवश्यकता आहे, आम्ही त्यांना स्वाक्षरी तयार करतो आणि संलग्न करतो.
पहिले फील्ड लॉगिनसाठी आहे, दुसरे फील्ड पासवर्डसाठी आहे. आणि दुसऱ्यासह ते इतके सोपे नाही. पासून हा क्षणहे फक्त एक मजकूर इनपुट फील्ड आहे.
| लॉगिन करा | |
| पासवर्ड |
ब्राउझरमध्ये परिणाम:
त्यामध्ये प्रविष्ट केलेला मजकूर तारकाने बदलण्यासाठी, या प्रकारच्या फील्डसाठी प्रथाप्रमाणे, आपल्याला एक साधी क्रिया करणे आवश्यक आहे. अर्थात, टाइप विशेषताचे मूल्य पासवर्डसह बदला:
परिणाम: 
येथे तुम्ही जा. आमचा फॉर्म जवळजवळ तयार आहे. आता, त्याची निर्मिती पूर्ण करण्यासाठी, तुम्हाला एक बटण तयार करणे आवश्यक आहे जे फॉर्म सबमिट करण्यासाठी वापरले जाईल. सबमिट टाइपसह टॅग वापरून समस्या सोडवली जाते.
जर बटणावर काही प्रकारचे शिलालेख असावे, तर ते मूल्य गुणधर्म वापरून केले जाऊ शकते. बटणाला नाव देणे किंवा नाही हे आपल्यावर अवलंबून आहे; आपण असे केल्यास, सर्व्हरला हे नाव तसेच बटणाचे मूल्य प्राप्त होईल.
नियमानुसार, फॉर्ममध्ये अनेक बटणे असतात तेव्हा फॉर्म सबमिट बटणाचे नाव आवश्यक असते, ज्यापैकी प्रत्येक विशिष्ट क्रिया करतो. याबद्दल धन्यवाद, सर्व्हर, ब्राउझरकडून बटणाचे नाव आणि मूल्य प्राप्त करून, वापरकर्त्याने कोणते बटण क्लिक केले आणि त्यानुसार काय करणे आवश्यक आहे हे समजते.
परिणामी, आमच्या फॉर्मचा कोड खालीलप्रमाणे असेल:
| लॉगिन करा | |
| पासवर्ड | |
ब्राउझरमध्ये परिणाम: 
फॉर्म स्वतःच सामान्यतः सर्व्हरवर पाठवण्यासाठी वापरकर्त्याकडून माहिती प्राप्त करण्याच्या उद्देशाने असतो, जेथे हँडलर प्रोग्रामद्वारे फॉर्म डेटा प्राप्त होतो. असा प्रोग्राम PHP, पर्ल इत्यादीसारख्या कोणत्याही सर्व्हर-साइड प्रोग्रामिंग भाषेमध्ये लिहिला जाऊ शकतो. उदाहरण 1 मध्ये दर्शविल्याप्रमाणे प्रोग्राम पत्ता टॅगच्या ऍक्शन विशेषतामध्ये दर्शविला जातो.
उदाहरण १: फॉर्म डेटा सबमिट करणे
HTML5 IE Cr Op Sa Fx
फॉर्म डेटा
या उदाहरणामध्ये, फॉर्म डेटा दर्शविला आहे नाव विशेषता(लॉगिन आणि पासवर्ड) फाईलला /example/handler.php येथे पाठवले जाईल. क्रिया विशेषता निर्दिष्ट न केल्यास, वर्तमान पृष्ठाच्या पत्त्यावर हस्तांतरण होते.
सर्व्हरवर हस्तांतरण दोनमध्ये होते विविध पद्धती: GET आणि POST, टॅगमध्ये पद्धत सेट करण्यासाठी, पद्धत विशेषता वापरली जाते आणि त्याची मूल्ये आहेत कीवर्डमिळवा आणि पोस्ट करा. जर पद्धत विशेषता निर्दिष्ट केलेली नसेल, तर डीफॉल्टनुसार डेटा सर्व्हरवर पाठविला जातो GET पद्धत. टेबलमध्ये आकृती 1 या पद्धतींमधील फरक दर्शविते.
कोणती पद्धत वापरली जाते हे सहज ठरवता येते पत्ता लिहायची जागाब्राउझर ते दिसले तर प्रश्न चिन्हआणि पत्ता असा दिसतो, मग तो नक्कीच एक GET आहे.
http://www.google.ru/search?q=%D1%81%D0%B8%D1%81%D1%8C%D0%BA%D0%B8&ie=utf-8
ॲड्रेस बारमधील पॅरामीटर्सचे अनन्य संयोजन पृष्ठाला अद्वितीयपणे ओळखते, म्हणून पत्ते असलेली पृष्ठे ?q=node/add आणि ?q=node भिन्न मानली जातात. हे वैशिष्ट्य अनेक वेबसाइट पृष्ठे तयार करण्यासाठी सामग्री व्यवस्थापन प्रणाली (CMS, सामग्री व्यवस्थापन प्रणाली) द्वारे वापरले जाते. प्रत्यक्षात, एक फाइल वापरली जाते, जी प्राप्त होते विनंती मिळवाआणि त्यानुसार दस्तऐवजाची सामग्री तयार होते.
साइटवर या पद्धतींचे ठराविक अनुप्रयोग खाली सूचीबद्ध आहेत.
मिळवासर्व्हरवर लहान मजकूर डेटा हस्तांतरित करणे; साइट शोध.
शोध इंजिन आणि साइट शोध फॉर्म नेहमी GET पद्धत वापरून पाठवले जातात, हे आपल्याला शोध परिणाम मित्रांसह सामायिक करण्यास, मेलद्वारे लिंक पाठविण्यास किंवा फोरमवर पोस्ट करण्यास अनुमती देते.
पोस्टफायली हस्तांतरित करणे (फोटो, संग्रहण, प्रोग्राम इ.); टिप्पण्या पाठवणे; फोरम, ब्लॉगवर संदेश जोडणे आणि संपादित करणे.
डीफॉल्टनुसार, वर्तमान ब्राउझर टॅबमध्ये फॉर्मवर प्रक्रिया केली जाते; तथापि, फॉर्म सबमिट करताना, तुम्ही हे पॅरामीटर बदलू शकता आणि फॉर्म हँडलरला नवीन टॅब किंवा फ्रेममध्ये उघडू शकता. हे वर्तन "संदर्भ नाव" द्वारे निर्दिष्ट केले आहे, जे टॅगच्या लक्ष्य गुणधर्माचे मूल्य आहे. नवीन विंडो किंवा टॅबमध्ये फॉर्म उघडण्यासाठी लोकप्रिय मूल्ये _blank आहेत आणि फ्रेमचे नाव, जे टॅगच्या नावाच्या विशेषताने निर्दिष्ट केले आहे (उदाहरण 2).
उदाहरण २: फ्रेममध्ये फॉर्म उघडणे
HTML5 IE Cr Op Sa Fx
फ्रेम वापरणे
IN या उदाहरणातजेव्हा तुम्ही "सबमिट करा" बटणावर क्लिक करता, तेव्हा फॉर्म सबमिट केल्याचा परिणाम क्षेत्र नावाच्या फ्रेममध्ये उघडतो.
फॉर्म घटक पारंपारिकपणे टॅगमध्ये स्थित असतात, ज्यामुळे सर्व्हरवर प्रसारित केला जाणारा डेटा परिभाषित केला जातो. त्याच वेळी, HTML5 मध्ये एक फॉर्म त्याच्या घटकांपासून वेगळे करण्याची क्षमता आहे. हे सोयीसाठी आणि अष्टपैलुत्वासाठी केले जाते, म्हणून जटिल लेआउटमध्ये अनेक फॉर्म असू शकतात जे एकमेकांना छेदू नयेत, किंवा, उदाहरणार्थ, काही घटक पृष्ठावरील एका ठिकाणी स्क्रिप्ट वापरून प्रदर्शित केले जातात आणि फॉर्म स्वतः दुसर्या ठिकाणी स्थित आहे. . फॉर्म आणि त्याच्या घटकांमधील कनेक्शन या प्रकरणात फॉर्म आयडेंटिफायरद्वारे होते आणि या आयडेंटिफायरच्या समान मूल्यासह फॉर्म विशेषता घटकांमध्ये जोडली जावी (उदाहरण 3).
उदाहरण 3: फील्डशी फॉर्म लिंक करणे
HTML5 IE Cr Op Sa Fx
फॉर्म
या उदाहरणात, टॅग ओळखपत्राद्वारे अद्वितीयपणे ओळखला जातो आणि फॉर्मद्वारे सबमिट केलेल्या फील्डमध्ये form="auth" जोडला जातो. या प्रकरणात, घटकांचे वर्तन बदलत नाही जेव्हा बटण क्लिक केले जाते, तेव्हा लॉगिन आणि पासवर्ड handler.php हँडलरला पाठविला जातो.
जरी फॉर्म सबमिशन पॅरामीटर्स टॅगमध्ये पारंपारिकपणे निर्दिष्ट केले असले तरी, ते फॉर्म सबमिट बटण (आणि ) वर देखील हस्तांतरित केले जाऊ शकतात. यासाठी, फॉर्मेशन , फॉर्ममेथड , फॉर्मेंकटाइप आणि फॉर्मटारगेटचा एक संच वापरला जातो, जे फॉर्म उपसर्ग शिवाय संबंधित गुणधर्मांचे ॲनालॉग आहेत. उदाहरण 4 या विशेषतांचा वापर दर्शविते.
उदाहरण ४: फॉर्म सबमिट करणे
HTML5 IE Cr Op Sa Fx
एक फॉर्म सबमिट करणे
सर्व नवीन फॉर्म विशेषता काही ब्राउझरद्वारे समर्थित नाहीत, विशेषतः इंटरनेट एक्सप्लोररआणि सफारी.
हे सदस्यत्व आधारित वेबसाईट बनवण्याच्या ट्यूटोरियलच्या पुढे आहे. अधिक तपशीलांसाठी कृपया मागील पृष्ठ पहा.
आपण संपूर्ण स्त्रोत डाउनलोड करू शकता साठी कोडखालील लिंकवरून नोंदणी/लॉगिन प्रणाली:
डाउनलोडमधील ReadMe.txt फाइलमध्ये तपशीलवार सूचना आहेत.
लॉगिन फॉर्मसाठी HTML कोड येथे आहे.
लॉगिन वापरकर्तानाव*: पासवर्ड*:
लॉग इन करत आहेआम्हाला मिळालेले वापरकर्तानाव आणि पासवर्ड आम्ही पडताळतो आणि नंतर डेटाबेसमध्ये शोधतो. हा कोड आहे:
फंक्शन लॉगिन() ( if(empty($_POST["username"])) ( $this->HandleError("UserName is empty!"); रिटर्न असत्य; ) if(empty($_POST["पासवर्ड"]))) ( $this->HandleError("पासवर्ड रिक्त आहे!"); रिटर्न असत्य; ) $username = trim($_POST["username"]); $this- >CheckLoginInDB($username,$password)) ( return false; ) session_start($_SESSION[$this->GetLoginSessionVar()] = $username;
एखाद्या वापरकर्त्याला अधिकृत म्हणून ओळखण्यासाठी, आम्ही त्याच्या वापरकर्तानाव/संकेतशब्दाच्या संयोजनासाठी डेटाबेस तपासणार आहोत आणि जर योग्य संयोजन एंटर केले असेल, तर आम्ही सत्र व्हेरिएबल सेट करतो.
वापरकर्तानाव आणि पासवर्ड पाहण्यासाठी हा कोड आहे.
फंक्शन CheckLoginInDB($username,$password) ( if(!$this->DBLogin()) ( $this->HandleError("डेटाबेस लॉगिन अयशस्वी!"); रिटर्न असत्य; ) $username = $this->SanitizeForSQL($ वापरकर्तानाव ; परिणाम = mysql_query($qry,$this->कनेक्शन); if(!$result || mysql_num_rows($result) HandleError("लॉग इन करताना त्रुटी." "वापरकर्तानाव किंवा पासवर्ड जुळत नाही") ; खोटे परत करा खरे ;
कृपया लक्षात घ्या की आम्ही डेटाबेसमधील पासवर्डच्या मूल्याची तुलना वापरकर्त्याने प्रविष्ट केलेल्या पासवर्डच्या MD5 एनक्रिप्टेड मूल्याशी केली पाहिजे. क्वेरीने परिणाम दिल्यास, आम्ही "अधिकृत" सत्र व्हेरिएबल सेट करतो आणि नंतर संरक्षित सामग्रीवर पुनर्निर्देशित करतो. प्रविष्ट केलेल्या डेटासह कोणत्याही पंक्ती नसल्यास, आम्ही वापरकर्त्यास पुन्हा लॉगिन फॉर्मवर पुनर्निर्देशित करतो.
नियंत्रित पृष्ठांवर प्रवेश कराज्या पृष्ठांवर फक्त नोंदणीकृत सदस्यांद्वारे प्रवेश केला जाऊ शकतो, आम्हाला पृष्ठाच्या शीर्षस्थानी एक चेक ठेवणे आवश्यक आहे.
लक्षात घ्या की आम्ही वरील लॉगिन कोडमध्ये "अधिकृत" सत्र व्हेरिएबल सेट करत आहोत. आम्ही संरक्षित करू इच्छित असलेल्या पृष्ठांच्या शीर्षस्थानी, आम्ही ते सत्र व्हेरिएबल तपासतो. वापरकर्ता अधिकृत असल्यास, आम्ही त्याला संरक्षित सामग्री दाखवतो, अन्यथा आम्ही त्याला लॉगिन फॉर्मवर निर्देशित करतो.
तुमच्या संरक्षित पृष्ठांच्या शीर्षस्थानी कोडचा हा नमुना समाविष्ट करा:
फाइल पहा: access-controlled.phpउदाहरणार्थ डाउनलोड केलेल्या कोडमध्ये.
येथे CheckLogin() फंक्शन कोड आहे.
फंक्शन CheckLogin() ( session_start(); $sessionvar = $this->GetLoginSessionVar(); if(empty($_SESSION[$sessionvar])) ( false return; ) true return; )
सदस्यत्व साइट तयार करण्याच्या या मूलभूत गोष्टी आहेत. आता तुम्हाला मूलभूत ज्ञान आहे, तुम्ही त्याचा प्रयोग करू शकता आणि नवीन वैशिष्ट्ये जोडू शकता, जसे की "पासवर्ड विसरलात" पृष्ठ वापरकर्त्याने तो विसरला असल्यास तो पुनर्प्राप्त करू किंवा बदलू शकतो.
अपडेट्स9 जानेवारी 2012
पासवर्ड रीसेट करा/पासवर्ड बदला वैशिष्ट्ये जोडली आहेत.
कोड आता GitHub वर शेअर केला आहे.
कोड LGPL परवान्या अंतर्गत सामायिक केला आहे. आपण ते व्यावसायिक किंवा गैर-व्यावसायिक वेबसाइटवर मुक्तपणे वापरू शकता.
संबंधित पोस्ट नाहीत.
या नोंदीवरील टिप्पण्या बंद आहेत.
स्वरूपात हा धडा CSS मध्ये अधिकृतता फॉर्म तयार करू, फॉन्ट चिन्ह कसे जोडायचे, घटकांसाठी पारदर्शकता कशी सेट करायची आणि फॉर्ममध्ये ॲनिमेटेड होव्हर प्रभाव कसे वापरायचे ते दाखवू.
HTML मध्ये फॉर्म फ्रेमवर्कप्रथम आम्ही फॉर्मची फ्रेम तयार करतो. html टेम्प्लेट उघडा आणि टॅग्जमध्ये खालील कोड लिहा.
चला एक ब्लॉक तयार करू जो फॉर्मसाठी कंटेनर म्हणून काम करेल. चला ते वर्ग .कंटेनर असाइन करूया, त्यात इनपुटसह एक फॉर्म ठेवा, तुमचा लॉगिन प्रकार="टेक्स्ट" नाव="वापरकर्तानाव" प्लेसहोल्डर="आपले लॉगिन प्रविष्ट करा) प्रविष्ट करण्यासाठी प्रथम इनपुट" , второй input type="password" name="password" placeholder="पासवर्ड टाका" принимает пароль и за ним !} सबमिट बटण. खाली आम्ही संकेतशब्द पुनर्प्राप्तीसाठी एक शिलालेख ठेवतो, आम्ही त्यास एक साधा दुवा बनवू.
पासवर्ड पुनर्संचयित करा
आम्ही मध्ये वर्णन करतो CSS घटकफॉर्ममग आपण हे फॉर्म घटक फॉरमॅट करू. चला एक अतिरिक्त CSS डिरेक्टरी तयार करू ज्यामध्ये आपण स्टाईल फाइल्स ठेवू. त्यामध्ये आपण style.css ही फाईल तयार करतो आणि ती आपल्या पेजला जोडतो.
मी वर सुचवतो पार्श्वभूमीएक प्रतिमा ठेवा, यासाठी आपण अतिरिक्त img निर्देशिका तयार करू आणि त्यात आपली प्रतिमा ठेवू. आम्ही शरीरासाठी style.css मध्ये प्रतिमा समाविष्ट करतो. आम्ही चित्राचा मार्ग लिहितो, बाहेर पडा वर्तमान निर्देशिका, img फोल्डरवर जा आणि नंतर चित्राचे नाव.
मुख्य भाग (पार्श्वभूमी-प्रतिमा: url(../img/bg.png");)
A(रंग: #fff;) a:hover (मजकूर-सजावट: काहीही नाही;)
कंटेनरला .container फॉर्मसह स्टाईल करूया. चला रुंदी 450 पिक्सेलवर सेट करू आणि तात्पुरती उंची 500 पिक्सेलवर सेट करू. चला रंग #182134 वर सेट करू आणि स्क्रीनच्या मार्जिनच्या मध्यभागी ठेवू: 250px auto 0 auto; . मजकूर मध्यभागी ब्लॉकच्या आत ठेवा, शीर्षस्थानी 20 पिक्सेलच्या इंडेंटसह.
कंटेनर (रुंदी: 450px; उंची: 500px; पार्श्वभूमी-रंग: #182134; समास: 250px स्वयं 0 स्वयं; मजकूर-संरेखित: मध्यभागी; )
चला मग तुमचे लॉगिन आणि पासवर्ड टाकण्यासाठी एक इनपुट तयार करू. बटणावर परिणाम होऊ नये म्हणून, आम्ही 300 पिक्सेलची रुंदी निर्दिष्ट करून मजकूर आणि संकेतशब्द गुणधर्मांनुसार त्यांची निवड करतो. , 50 शिखरांची उंची. आम्ही मजकूर 18 पिक्सेलने वाढवतो, त्यांच्यामध्ये 25 पिक्सेलचे इंडेंट बनवतो आणि त्यास गोलाकार करतो कोपरे सीमा-त्रिज्या: 4px; , मजकूर 10 पिक्सेलवर हलवा. च्या डावी कडे.
इनपुट, इनपुट (रुंदी: 300px; उंची: 50px; फॉन्ट-आकार: 18px; समास-तळाशी: 25px; सीमा-त्रिज्या: 4px; पॅडिंग-डावीकडे: 10px;)
नंतर आम्ही inpyt ला अतिरिक्त ब्लॉकमध्ये गुंडाळून आणि वर्ग .dws-input देऊन केंद्रस्थानी ठेवू. चला बटणानंतर लाइन ब्रेक करूया आणि बटणाच्या आधी शीर्षस्थानी आमच्या लोगोसह एक चित्र घाला. हे करण्यासाठी, ते img फोल्डरमध्ये कॉपी करा आणि त्यावर img src="img/men.png" हा मार्ग लिहा.
पासवर्ड पुनर्संचयित करा
पुढे आपण त्याच्या शैलींचे वर्णन करू. प्रतिमेला 120 पिक्सेलची रुंदी आणि उंची देऊ. , नंतर ते आकार मार्जिनच्या अगदी वर वाढवा: -60px 0 30px 0; , सुमारे 5 शिखरांवर वोडका बनवा. सीमा: 5px घन #1a394f; , गोल कोपऱ्यात 50%.
कंटेनर img (रुंदी:120px; उंची:120px; समास: -60px 0 30px 0; सीमा: 5px घन #1a394f; सीमा-त्रिज्या: 50%;)
आता बटणाच्या शैलीचे वर्णन करूया. चला त्याला .dws-submit हा वर्ग नियुक्त करू आणि त्यास शैली नियुक्त करू. आम्ही इंडेंट नियुक्त करतो, मजकूर 15 पिक्सेलने वाढवतो, तो पांढरा करतो आणि बटणाची पार्श्वभूमी निळी बनवतो, वोडका काढतो आणि तळाशी एक चौरस बनवतो, तसेच पॉइंटर कर्सर करतो.
Dws-सबमिट ( पॅडिंग: 13px 30px; समास: 5px 0 20px 0; फॉन्ट-आकार: 15px; रंग: #fff; पार्श्वभूमी-रंग: #2ca8c6; सीमा: काहीही नाही; बॉर्डर-बॉटम: 4px सॉलिड #6ee9fd; कर्सर: पॉइंट ;)
इनपुट आणि बटण केंद्रस्थानी ठेवण्यासाठी, प्रत्येकाला त्यांच्या स्वतःच्या ब्लॉकमध्ये स्वतंत्रपणे ठेवूया. फिरवल्यावर बटणाच्या शैलींचे वर्णन करूया. आम्ही एक गुळगुळीत संक्रमण करतो, बटणाचा रंग पांढरा बदलतो आणि त्याच वेळी फॉन्ट गडद रंगात बदलतो.
Dws-submit:hover( संक्रमण: सर्व 0.5s; पार्श्वभूमी: #fff; रंग: #2c536c; )
चला आपल्या आकाराच्या वर एक निळा ब्लॉक बनवूया, बॉक्स-शॅडो: 0 -5px 0 #3adbfd; , आणि त्यास इमेज बॉक्स-शॅडोमध्ये जोडा: 0 -5px 0 #3adbfd; . फॉर्मची पार्श्वभूमी थोडी अधिक पारदर्शक बनवूया, आम्ही हा रंग RGBA स्वरूपात लिहू.
मी w3schools.com ही सेवा वापरतो, कलर पिकर वर जातो, आमचा रंग फॉर्ममध्ये टाकतो आणि तो RGB मध्ये बदलतो. कंटेनर शैलीमध्ये कॉपी आणि पेस्ट करा.
कंटेनर (रुंदी: 450px; उंची: 500px; पार्श्वभूमी-रंग: rgba(24, 33, 52, 0.7); समास: 250px ऑटो 0 ऑटो; मजकूर-संरेखित: केंद्र; बॉक्स-छाया: 0 -5px 0 #3adbfd; ) .container img( रुंदी:120px; उंची:120px; समास: -60px 0 30px 0; सीमा: 5px ठोस #1a394f; सीमा-त्रिज्या: 50%; बॉक्स-छाया: 0 -5px 0 #3adbfd; )
प्रभावासाठी, तळाच्या कोपऱ्यांवर गोल करा, यासाठी आम्ही सीमा-त्रिज्या लिहू: 0 0 10px 10px; .
चला फॉन्टच्या स्वरूपात आयकॉन जोडू, fontawesome.io सेवेवर जा आणि ते तुमच्या संगणकावर डाउनलोड करू. चला संग्रहण अनपॅक करू आणि कॉपी करू फॉन्ट फोल्डर, ज्यामध्ये फॉन्ट आहेत आणि सीएसएस निर्देशिकेत शैली फाइल कॉपी करा. मग आम्ही शैलींना पृष्ठाशी जोडतो.
चला आपल्या इनपुट्ससाठी आयकॉन्स निवडू या, यासाठी आपण आयकॉन्स पेजवर जाऊ, प्रथम आपण लॉगिन एंटर करण्यासाठी स्टाईल कनेक्ट करू, वापरकर्ता वापरतो, त्याचा कोड f007 कॉपी करतो आणि स्यूडो-एलिमेंट वापरून त्याचे शैलींमध्ये वर्णन करतो.
जोडत आहे फॉन्ट-फॅमिली फॉन्ट: "FontAwesome"; , नंतर स्वतःच चिन्ह, ते अगदी समासात ठेवा, ते 30 पिक्सेलने वाढवा, मध्यभागी ठेवा आणि रंग बदला.
Dws-input::before(font-family: "FontAwesome"; सामग्री: "\f007"; स्थिती: परिपूर्ण; फॉन्ट-आकार: 30px; पॅडिंग: 10px 0 0 7px; रंग: #2c536c; )
चला इनपुटमधील मजकूर थोडा हलवू - पॅडिंग-डावीकडे: 40px; .
चला लॉक नावाचा दुसरा आयकॉन निवडा, त्याचा कोड f023 कॉपी करू आणि त्याच्या शैलीचे वर्णन करू.
हे करण्यासाठी, दुसरा घटक निवडा .dws-input:nth-child(2)::before() , आणि इमेज सामग्री लिहा: "\f023 ";.
Dws-input::before(font-family: "FontAwesome"; सामग्री: "\f007"; स्थिती: परिपूर्ण; फॉन्ट-आकार: 30px; पॅडिंग: 10px 0 0 7px; रंग: #2c536c; ) .dws-इनपुट: nth-मुल(2)::पूर्वी( सामग्री: "\f023";)
Dws-input:hover::before( रंग: #319ebc; संक्रमण: सर्व 0.3s; )
आणि तसेच, इनपुटसाठी शैली फिरवा.
Dws-इनपुट इनपुट:होवर (बॉक्स-शॅडो: 0 0 6px 3px rgba(58, 219, 253, 0.35);)
सोयीसाठी, त्यांना .social वर्गासह ब्लॉकमध्ये गुंडाळा आणि त्यांच्या शैलींचे वर्णन करूया. चला त्यांचा रंग पांढरा करूया, त्यांना 20 पिक्सेलने वाढवू, त्यांना 20 पिक्सेल रुंद करू आणि पॅडिंग जोडू.
Dws-social i (रंग: #fff; फॉन्ट-आकार: 20px; रुंदी: 20px; पॅडिंग: 10px;)
पुढे, आम्ही होवर शैलींचे वर्णन करू. चला एक पांढरा ब्लॉक बनवू, आयकॉनची पार्श्वभूमी गडद मध्ये बदलू, कोपरे गोल करू आणि कर्सर फिरवत असताना प्रदर्शित करू.
सामाजिक i:होवर (पार्श्वभूमी-रंग: #fff; रंग: #1a394f; सीमा-त्रिज्या: 5px; कर्सर: पॉइंटर; )
चला फॉर्म ब्लॉकची उंची काढून टाकू, जी अगदी सुरुवातीला सेट केली गेली होती आणि त्याच्या जागी तळाशी पॅडिंग-तळाशी जोडा: 20px; .
तत्वतः, इतकेच, आम्हाला एक सुंदर फॉर्म मिळाला आहे जो साइटशी कनेक्ट केला जाऊ शकतो आणि अधिकृततेसाठी वापरला जाऊ शकतो.
या धड्याचे, सरावाचे उदाहरण वापरून काहीतरी मूळ करण्याचा प्रयत्न करा आणि ही सामग्री शेअर करायला विसरू नका.
