इनपुट फील्डची किमान रुंदी. सुंदर सीएसएस इनपुट (इनपुट फील्ड). लपलेले फील्ड HIDDEN

प्रत्येक कंटेनर त्याची भूमिका पार पाडतो:

1. इनपुट-रुंदी- हा कंटेनर मजकूर फील्डची परिणामी रुंदी निर्दिष्ट करतो;
2. रुंदी-सेटर- हा कंटेनर इनपुट घटकाची रुंदी वजा क्षैतिज पॅडिंग निर्दिष्ट करतो.

येथे शैलींचा एक संच आहे जो हे बांधकाम स्पष्ट करेल:

इनपुट-रुंदी (उंची:23px; सीमा:1px ठोस #999; पार्श्वभूमी:#fff; ) .रुंदी-सेटर (उंची:23px; समास:0 9px; ) .रुंदी-सेटर इनपुट ( रुंदी:100%; उंची:14px पॅडिंग: 4px 9px;
उदाहरण १

शैलींवरून असे दिसून येते की घटक इनपुट-रुंदीमजकूर फील्डने व्यापलेली रुंदी निर्दिष्ट करते. घटक रुंदी-सेटरइनपुट घटकाची रुंदी क्षैतिज पॅडिंगद्वारे लहान करण्यासाठी सेट करते. हे लक्षात घेण्यासारखे आहे की ते समासफील्ड ( समास) समान असणे आवश्यक आहे पॅडिंग-डावीकडेआणि पॅडिंग-उजवीकडेइनपुट घटकासाठी.
या वर्णनासह, इनपुट घटक बाहेर पडेल रुंदी-सेटरत्याच्या क्षैतिज इंडेंट्सच्या प्रमाणात ( पॅडिंग), आणि IE6 मध्ये - सर्व “पालकांना” त्यांच्या स्वतःच्या आकारात पसरवा (उदाहरण 1). तसेच IE6-7 ब्राउझरमध्ये, इनपुट घटकामध्ये पॅडिंग असते जी मालमत्ता साफ करून काढली जाऊ शकत नाही समास. ही व्यवस्था बदलण्यासाठी, तुम्हाला मजकूर फील्ड डावीकडे हलवावे लागेल, डाव्या इंडेंटच्या आकारानुसार ( पॅडिंग-डावीकडे). तुम्ही पोझिशन:रिलेटिव्ह वापरून हे करू शकता, परंतु IE6 मध्ये इनपुट कंटेनर मजकूर फील्डच्या रुंदीमध्ये बसण्यासाठी ताणलेला राहील. रुंदी-सेटर. स्ट्रेचिंग दूर करण्यासाठी, आपल्याला हे सुनिश्चित करणे आवश्यक आहे की घटक त्याच्या पालकांच्या आकारावर प्रभाव टाकू शकत नाही, उदाहरणार्थ ते सेट करून स्थिती: निरपेक्ष.
कंटेनरच्या मूळ संचाचे नवीन प्रकारे वर्णन करूया:

इनपुट-रुंदी ( उंची:23px; सीमा:1px ठोस #999; पार्श्वभूमी:#fff; ) .रुंदी-सेटर (उंची:23px; समास:0 9px; स्थिती:सापेक्ष; ) .रुंदी-सेटर इनपुट (रुंदी:100% ;उंची: 4px 5px;
उदाहरण २

परिणामी, अशा शैली वापरताना, सुरुवातीला सेट केलेली कार्ये पूर्ण केली जातात. मजकूर फील्ड निघाला दिलेले इंडेंटरबरी आणि कोणत्याही ठिकाणी क्लिक करण्यायोग्य.
अंतिम घटकासाठी विशिष्ट रुंदी सेट करण्यासाठी, तुम्हाला फक्त गुणधर्म निर्दिष्ट करणे आवश्यक आहे रुंदीकंटेनर साठी इनपुट-रुंदी.

नोंद. रबर मजकूर फील्ड लागू करण्यासाठी दिलेल्या पद्धतीची डॉक्टाइप: HTML 4.01, XHTML 1.0 आणि HTML (HTML 5) वर चाचणी केली जाते - आणि क्रॉस-ब्राउझर सुसंगत आहे: IE6-8, Opera 9+, FF 2.0+, Safari 2.0+, Chrome . Doctype नसल्यास, पद्धतीच्या क्रॉस-ब्राउझर कार्यक्षमतेची हमी दिली जात नाही.

प्रविष्ट केलेल्या मजकुराची मर्यादा ही वेगळी समस्या आहे. एकीकडे, डेटाबेससाठी मर्यादा चांगली आहे. दुसरीकडे, नेहमी असे वापरकर्ते असतील ज्यांच्यासाठी वर्ण-मर्यादित इनपुट फील्ड खूप लहान असेल. म्हणून, विशिष्ट परिस्थितीशी संबंधित या समस्येचे निराकरण करणे आवश्यक आहे.

सक्रियन कोड

तांदूळ. 40. मोठ्या प्रमाणात माहिती प्रविष्ट केलेल्या इनपुट फील्डचे उदाहरण.

अशी फील्ड केवळ आळशी दिसत नाहीत तर वापरकर्त्याने सर्व माहिती प्रविष्ट केली नाही हे दर्शवून ते वापरकर्त्यांना फसवतात. याव्यतिरिक्त, फील्ड भरल्यानंतर, तुम्हाला इनपुट फोकस स्वतः हलवावे लागेल, जरी सिस्टम हे हाताळू शकते.

मागील दोन परिच्छेदातील माहिती सारांशित केल्यास, आम्ही निश्चित करू शकतो इनपुट फील्ड तयार करताना विकासक सर्वात मोठी चूक करतात. जेव्हा जेव्हा इनपुट फील्डची रुंदी त्यात एंटर करता येण्याजोग्या मजकूराच्या कमाल रकमेपेक्षा जास्त असते आणि प्रविष्ट करता येणारा मजकूर मर्यादित असतो, तेव्हा वापरकर्त्यांना जागा असूनही ते मजकूर प्रविष्ट करू शकत नाहीत हे पाहून अप्रिय आश्चर्य वाटते. स्क्रीनवर त्यासाठी.

त्यानुसार, तुम्ही इनपुट फील्ड मजकूरापेक्षा जास्त रुंद करू शकत नाही.

स्वाक्षऱ्या.

प्रश्न "इनपुट फील्डसाठी लेबले कोठे ठेवावी?" प्रोग्रामरमध्ये सर्वात लोकप्रिय आहे: समर्थकांची लढाई भिन्न दृष्टिकोनरक्तहीन असले तरी ते लक्षणीय आहेत. येथे अनेक युक्तिवाद आणि दृष्टिकोन आहेत.

सामान्यतः, खालील साधा नियम लागू होतो: वारंवार वापरल्या जाणाऱ्या स्क्रीनमध्ये, स्वाक्षऱ्या फील्डच्या शीर्षस्थानी असाव्यात (त्यांना वाचणे सोपे नाही म्हणून), परंतु क्वचित वापरल्या जाणाऱ्या स्क्रीनमध्ये, स्वाक्षर्या डावीकडे असाव्यात (नेहमी लक्षात येण्यासाठी आणि त्यामुळे त्रुटींची संख्या कमी होते).

इनपुट फील्डसाठी लेबल्समध्ये इतर लेबल्सपेक्षा विशिष्ट फरक असतो. इनपुट फील्डमध्ये, स्वाक्षरी घटकाच्या पुढे ठेवल्या जाऊ शकत नाहीत, परंतु त्याच्या आत, ज्यामुळे स्क्रीनची जागा वाचते. स्वाक्षरी इनपुट फील्डमध्येच प्रदर्शित केली जाते, जसे की त्यात प्रविष्ट करणे आवश्यक आहे. फक्त इनपुट फोकसचे निरीक्षण करणे आवश्यक आहे जेणेकरून फील्डमध्ये फोकस सेट केल्यावर, स्वाक्षरी काढली जाईल. हे समाधान, अ-मानक असल्याने, सॉफ्टवेअरमध्ये चांगले कार्य करत नाही, परंतु इंटरनेटवर चांगले कार्य करते.

फिरकीपटू

स्पिनर (छोटा बाण) हे इनपुट फील्ड आहे जे नियमित फील्डसारखे सार्वत्रिक नाही, कारण ते तुम्हाला मजकूर डेटा1 प्रविष्ट करण्याची परवानगी देत ​​नाही, परंतु त्यात दोन उपयुक्त वैशिष्ट्ये आहेत.

तांदूळ. 41. ट्विस्ट.

प्रथम, स्पिनरमध्ये मूल्य प्रविष्ट करण्यासाठी, वापरकर्त्याला माउस सोडण्याची आणि कीबोर्डवर हात हलवण्याची गरज नाही (नियमित इनपुट फील्डच्या विपरीत). एका ठिकाणाहून दुसऱ्या ठिकाणी हात हलवायला तुलनेने वेळ लागतो मोठा वेळ(सरासरी, जवळजवळ अर्धा सेकंद आणि लक्ष केंद्रित करण्यास व्यत्यय आणतो, कीबोर्डची आवश्यकता नसणे हा एक मोठा आशीर्वाद ठरतो. कोणत्याही परिस्थितीत, कीबोर्डवरून नॉबमध्ये मूल्य प्रविष्ट करण्याची प्रकरणे अत्यंत दुर्मिळ आहेत, म्हणजे वापरकर्ते नॉब्स पूर्णपणे सकारात्मकपणे समजतात.

दुसरे म्हणजे, माउससह मूल्य प्रविष्ट करताना, सिस्टम वापरकर्त्यांना फक्त योग्य डेटा आणि सर्वात महत्त्वाचे म्हणजे योग्य स्वरूपात प्रविष्ट करण्याची परवानगी देऊ शकते. हे नाटकीयरित्या मानवी चुकांची शक्यता कमी करते. अशा प्रकारे, कोणतीही संख्यात्मक मूल्ये प्रविष्ट करण्यासाठी नॉबचा वापर न्याय्य पेक्षा अधिक आहे.

स्लाइडर

पूर्वी वर्णन केलेल्या नियंत्रणांप्रमाणे, स्लाइडर वापरकर्त्यांना सानुकूल मूल्य प्रविष्ट करण्यास अनुमती देण्याऐवजी सूचीमधून मूल्य निवडण्याची परवानगी देतात. एक वाजवी प्रश्न उद्भवतो: जर आधीपासून भरपूर समान घटक असतील तर दुसरा नियंत्रण घटक का आवश्यक आहे. उत्तर सोपे आहे: जर वापरकर्त्यांना सुप्रसिद्ध मालिकेतील मूल्य निवडण्याची संधी देणे आवश्यक असेल तर स्लाइडर अपरिहार्य आहेत जर:

ü मालिकेत अनेक मूल्ये आहेत

ü वापरकर्त्यांना मूल्यांची क्रमवारी सांगणे आवश्यक आहे.

ü वापरकर्त्यांना त्यांच्यापैकी मोठ्या संख्येने मूल्य निवडण्याची परवानगी देणे आवश्यक आहे (अशा प्रकरणांमध्ये, स्लाइडर सर्वात जास्त असल्याचे दिसून येते. प्रभावी घटक, जरी संभाव्य मानवी चुकांमुळे धोकादायक आहे).

तांदूळ. 42. स्लाइडर्सची उदाहरणे.

हे पाहिले जाऊ शकते की स्लाइडरमधील पॅरामीटर्सची संख्या लक्षणीय असू शकते (जरी ग्रेडेशनमधील अंतर स्लाइडरच्या रुंदीच्या अर्ध्यापेक्षा कमी असू शकत नाही; आवश्यक असल्यास, अतिरिक्त मूल्ये सामावून घेण्यासाठी तुम्ही फक्त शासकाची रुंदी वाढवू शकता) .

स्लाइडरकडे एक मनोरंजक पैलू आहे. ते मजकूर पर्याय निवडण्यासाठी देखील वापरले जाऊ शकतात, परंतु केवळ अशा प्रकरणांमध्ये जेथे ते पर्याय स्पष्टपणे मांडले जाऊ शकतात. अशी अनेक प्रकरणे आहेत, उदाहरणार्थ, “नाश्ता”, “दुपारचे जेवण” आणि “डिनर”, बाह्य संप्रेषणाच्या अनुपस्थितीत ते रँकिंगसाठी पूर्णपणे सक्षम आहेत.

मेनू

जेव्हा इंटरफेसच्या संदर्भात मेनू शब्दाचा उल्लेख केला जातो, तेव्हा बरेच लोक लगेच मानक ड्रॉप-डाउन मेनूचा विचार करतात. प्रत्यक्षात, मेनूची संकल्पना खूप विस्तृत आहे. मेनू ही प्रणालीशी वापरकर्त्याच्या परस्परसंवादाची एक पद्धत आहे ज्यामध्ये वापरकर्ता सिस्टमला त्याच्या आदेशासह प्रदान करण्याऐवजी प्रस्तावित पर्यायांमधून निवडतो.

तांदूळ. 43. मानक ड्रॉप-डाउन मेनू.

त्यानुसार, अनेक बटणे असलेला डायलॉग बॉक्स (आणि एका इनपुट फील्डशिवाय) देखील एक मेनू आहे.

तांदूळ. 44. हा देखील एक मेनू आहे.

सध्या, व्यावहारिकपणे अशी कोणतीही प्रणाली शिल्लक नाही जी एक किंवा दुसर्या स्वरूपात मेनू वापरत नाही. हे सोप्या पद्धतीने स्पष्ट केले आहे. मेनू तुम्हाला वापरकर्त्यांच्या मेंदूवरील भार कमी करण्यास अनुमती देतो, कारण कमांड निवडण्यासाठी तुम्हाला नेमकी कोणती कमांड आवश्यक आहे आणि ती नेमकी कशी वापरायची आहे हे लक्षात ठेवण्याची गरज नाही - सर्व (किंवा जवळजवळ सर्व) आवश्यक माहितीस्क्रीनवर आधीपासूनच समाविष्ट आहे. याव्यतिरिक्त, मेनू वापरकर्त्याच्या क्रियांची श्रेणी मर्यादित करत असल्याने, या श्रेणीतून लक्षणीयरीत्या काढून टाकणे शक्य होते. चुकीच्या कृती. शिवाय, मेनू वापरकर्त्यांना कृतींची व्याप्ती दर्शवितो ज्या ते सिस्टमला धन्यवाद देऊ शकतात आणि त्याद्वारे वापरकर्त्यांना शिक्षित करते (एका अभ्यासात असेही दिसून आले आहे की मेनू सर्वात जास्त आहे. प्रभावी माध्यमप्रशिक्षण 1). अशा प्रकारे, बऱ्याच प्रणाल्यांमध्ये, मेनू हे वस्तुनिष्ठ चांगले असतात (मुख्यत: अशा प्रणालींमध्ये ते कुचकामी असतात. बाह्य वातावरणकिंवा कालांतराने).

मेनू प्रकार

अनेक भिन्न मेनू वर्गीकरण आहेत, परंतु त्यापैकी फक्त दोन प्राथमिक स्वारस्य आहेत. प्रथम वर्गीकरण मेनू दोन प्रकारांमध्ये विभाजित करते:

ü स्थिर मेनू, i.e. स्क्रीनवर नेहमी उपस्थित असलेले मेनू. एक नमुनेदार उदाहरणया प्रकारचा मेनू टूलबार आहे.

ü डायनॅमिक मेनू, ज्यामध्ये घटक निवडण्यासाठी वापरकर्त्याने मेनू कॉल करणे आवश्यक आहे. एक उदाहरण नेहमीचे आहे संदर्भ मेनू.

काही परिस्थितींमध्ये, हे दोन प्रकारचे मेनू एकामध्ये विलीन होऊ शकतात:

उदाहरणार्थ, मेनू ऍक्सेस बटणांचा समावेश असलेले मेनू (पृष्ठ 68 पहा) एकतर स्थिर (वापरकर्ते बटणांवर क्लिक करतात) किंवा डायनॅमिक (वापरकर्ते कॉल अप मेनू) म्हणून कार्य करू शकतात.

दुसरा वर्गीकरण देखील मेनूला दोन प्रकारांमध्ये विभाजित करते:

ü स्पेसमध्ये विस्तारणारे मेनू (उदाहरणार्थ, नियमित ड्रॉप-डाउन मेनू). जेव्हा वापरकर्ता एक घटक निवडतो खालची पातळी, शीर्ष घटक दृश्यमान राहतात.

ü कालांतराने उलगडणारा मेनू. अशा मेनू, आयटम वापरताना शीर्ष स्तर(किंवा, व्यापक अर्थाने, आधीच पूर्ण झालेले घटक) एका कारणास्तव स्क्रीनवरून अदृश्य होतात. उदाहरणार्थ, मागील चित्रात, मेनू डायलॉग बॉक्सने मेन्यूला आमंत्रण देणारे नियंत्रण ओव्हरलॅप केले.

दोन्ही वर्गीकरणातील प्रत्येक मेनू प्रकाराचे काही तोटे आहेत.

पहिल्या वर्गीकरणातील स्थिर मेनू, नियमानुसार, वापरकर्त्यांसाठी कमी वेग, चांगले प्रशिक्षण प्रदान करतात, परंतु स्क्रीन जागा घेतात. याउलट, डायनॅमिक मेनूसह परिस्थिती उलट आहे. दुसऱ्या वर्गीकरणामध्ये, पहिला प्रकार (विस्तार करण्यायोग्य मेनू) वापरकर्त्याच्या क्रियांच्या संदर्भासाठी अधिक समर्थन प्रदान करतो, परंतु हा समर्थन गमावण्याच्या किंमतीवर येतो. स्क्रीन स्पेस. दुसरा प्रकार जागा अधिक काळजीपूर्वक वापरतो, परंतु संदर्भाला कमी समर्थन देतो.

वास्तविकता, तथापि, दोन्ही वर्गीकरणांपेक्षा काहीसे विस्तृत असल्याचे दिसून येते. उदाहरणार्थ, मास्टर (पृष्ठ 99 वर “क्रमिक विंडो” पहा), असणे आणि डायनॅमिक मेनूपहिल्या वर्गीकरणातून, आणि दुसऱ्यामधून वेळ-विस्तार करणारा मेनू, उदाहरणार्थ, ड्रॉप-डाउन मेनूपेक्षा वेगवान होत नाही. परंतु त्यामध्ये समाविष्ट असलेल्या नियंत्रणांचे व्हॉल्यूम आणि विशिष्टता, नियम म्हणून, त्यातून इतर कोणताही मेनू बनविण्यास परवानगी देत ​​नाही, उदाहरणार्थ, ड्रॉप-डाउन मेनू.

म्हणून, प्रभाव आणि आंतरप्रवेशाचे विश्लेषण करणे शिकणे खूप उपयुक्त आहे वेगळे प्रकारमेनू, आणि इंटरफेसमध्ये त्यांचे स्थान देखील जाणून घ्या. उदाहरणार्थ, अमूर्ततेच्या भिन्न स्तरावरील संदर्भ मेनू तात्पुरता (म्हणजे डायनॅमिक) असल्याचे दिसून येते. डायलॉग बॉक्स, केवळ मानक नसलेल्या संरचनेसह. ही रचना समजून घेतल्याने तुम्हाला अशा मेनूमध्ये बटणांव्यतिरिक्त कोणती नियंत्रणे वापरली जाऊ शकतात हे निर्धारित करण्यास अनुमती मिळते जेणेकरून त्यात मेनूचे गुण आणि डायलॉग बॉक्सचे गुण दोन्ही असतील. दुर्दैवाने, या पुस्तकाची लांबी या विषयावर अधिक संपूर्ण उपचार करण्याची परवानगी देत ​​नाही. म्हणून, या विभागात फक्त मुख्य आणि संदर्भ मेनूचे वर्णन केले जाईल.

मेनू डिव्हाइस

मेनू कार्यक्षमता वर सर्वात मोठा प्रभावडिव्हाइस प्रस्तुत करा वैयक्तिक घटकआणि त्यांचे गट. घटकांचे हायलाइटिंग आणि मेनूचे मानक स्वरूप यासारखे इतर घटक काहीसे कमी महत्त्वाचे आहेत.

HTML फॉर्मच्या शेलमध्ये टॅग दरम्यान स्वतः

आणि

डेटा पाठवण्यासाठी किंवा साफ करण्यासाठी बटणे, निवडीची पुष्टी करण्यासाठी बटणे, स्विचेस, ड्रॉप-डाउन सूची आणि डेटा प्रविष्ट करण्यासाठी फील्ड समाविष्ट केले आहेत;

टॅग करा मजकूर इनपुट फील्ड सूचित करते, हा टॅग खालील गुणधर्म स्वीकारू शकतो:

परिणाम:
प्रकारइनपुट टॅगची विशेषता जी फील्डचा प्रकार दर्शवते, या प्रकरणात ते आवश्यक नाही, एचटीएमएल स्पेसिफिकेशनच्या दृष्टिकोनातून हे डीफॉल्ट मूल्य (मजकूर) आहे, परंतु वैयक्तिकरित्या मी तुम्हाला नेहमी ते घालण्याचा सल्ला देतो.
नावहा एक अतिशय महत्वाचा गुणधर्म आहे आणि अनिवार्य आहे !!! तो कोडीफायर आहे या क्षेत्राचे, स्क्रिप्ट काही मूल्य असलेल्या फील्ड नावांची वाट पाहत आहेत. या गुणधर्माचे नाव केवळ लॅटिन अक्षराने सुरू आणि समाप्त होऊ शकते आणि अक्षरांमध्ये हायफन वापरला जाऊ शकतो.
मूल्यफील्डचे मूल्य किंवा अधिक अचूकपणे विशेषताचे मूल्य दर्शवणारी विशेषता नाव, या विशेषता नेहमी स्क्रिप्टला जोड्यांमध्ये पाठवल्या जातात, नाव = मूल्यकिंवा login=your_login. ही विशेषता ऐच्छिक आहे, आणि फक्त माझ्या उदाहरणात, फील्डमध्ये काही मजकूर प्रदर्शित करण्यासाठी घातला आहे लॉगिन प्रविष्ट करा.
आकारही विशेषता ऐच्छिक आहे, आणि फक्त दाखवण्यासाठी वर्णांची संख्या सेट करते, माझ्या उदाहरणात ते 20 आहे, परंतु तुम्ही 1000 प्रविष्ट करू शकता, परंतु केवळ 20 प्रदर्शित केले जातील कारण 20 सेट करण्यात काही अर्थ नाही हे डीफॉल्ट मूल्य आहे, तुम्हाला प्रदर्शित करण्यासाठी 20 पेक्षा जास्त किंवा कमी वर्णांची आवश्यकता असल्यास ही विशेषता वापरा.
कमाल लांबीही विशेषता इनपुटसाठी वर्ण मर्यादित करण्यासाठी वापरली जाते, माझ्या उदाहरणातील मजकूर पुसून टाकण्याचा प्रयत्न करा लॉगिन प्रविष्ट कराआणि 5 पेक्षा जास्त गुण मिळवा आणि तुम्ही यशस्वी होणार नाही !!! कल्पना करा की कोणीतरी पुस्तकाचा मजकूर कॉपी करतो आणि लॉगिन असलेल्या फील्डमध्ये पेस्ट करतो, यामुळे तुमच्या सर्व्हरवरील भार नाटकीयरित्या वाढू शकतो आणि या मर्यादेसह हा अद्भुत अभ्यागत यशस्वी होणार नाही!!! मी ते 5 वर्णांपर्यंत मर्यादित ठेवण्याची शिफारस करत नाही; हे मूल्य सुमारे 32 किंवा 64 असावे !!!

पासवर्ड फील्ड
type="पासवर्ड" name="password" value="पासवर्ड एंटर करा" size="20" maxlength="32"> !}
परिणाम: वगळता सर्व समान गुणधर्म प्रकार गुणधर्मासाठी "पासवर्ड" मूल्ये. हे फील्ड पासवर्ड किंवा इतर मजकूर प्रविष्ट करण्यासाठी वापरले जाते जे डोळ्यांनी पाहू नये.

लपलेले फील्ड:
type="लपवलेले" name="partner" value="identifier"> !}
हे फील्ड लपविलेले डेटा पाठविण्यासाठी वापरले जाते उदाहरणार्थ, आपण भागीदार म्हणून काही ई-चलन एक्सचेंज साइटवर नोंदणी केली आहे आणि थोडे पैसे कमावणार आहात, यासाठी आपल्याला एक संलग्न कोड प्राप्त होईल आणि तो आपल्या वेबसाइटवर टाका. लपविलेल्या फील्ड आयडेंटिफायरमध्ये (भागीदार क्रमांक) आणि तुमच्या साइटच्या वापरकर्त्याने हस्तांतरण दिशा निवडल्यानंतर आणि "एक्सचेंज" बटणावर क्लिक केल्यानंतर, तो तुमचा अभिज्ञापक या डेटासह पाठवेल आणि तुम्ही या ऑपरेशनमधून दोन पेनी कापाल. लपलेल्या फील्डसाठी ही एकमेव शक्यता नाही.

फाइल अपलोड फील्ड:
type="file" name="upload_file" size="50">
परिणाम:
या फील्डचा वापर करून तुम्ही जवळजवळ कोणत्याही प्रकारची फाइल, चित्रे, संग्रहण, संगीत, व्हिडिओ आणि इतर अपलोड करू शकता. तुम्ही हे फील्ड फॉर्ममध्ये वापरल्यास, विशेषताचे मूल्य एन्टाइपटॅग मध्ये फॉर्मअसणे आवश्यक आहे "मल्टीपार्ट/फॉर्म-डेटा", जेणेकरुन ब्राउझर एन्कोड होत नाही आणि ज्या सर्व्हरवर स्क्रिप्ट आहे तो या फायली डीकोड करत नाही, कारण यामुळे त्या नष्ट होऊ शकतात.

टिप्पणी पाठवण्यासाठी फील्ड:
</b>डीफॉल्ट मजकूर <b>
परिणाम: डीफॉल्ट मजकूर
मजकूर- हे फील्डसाठी एक टॅग आहे, ते जोडलेले आहे!!!
विशेषता नावतुला आधीच माहित आहे.
पंक्तीही विशेषता ओळींची संख्या सेट करते, माझ्या उदाहरणात 4 ओळी.
कॉल्सआणि ही विशेषता एका ओळीत अक्षरांची संख्या सेट करते.

ही सर्व फील्ड आहेत जी वापरकर्ता अपवाद वगळता स्वतंत्रपणे भरू शकतो type="लपवलेले" .

हा लेख केवळ CSS वापरून आणि स्क्रिप्टचा वापर न करता, तुम्ही सुंदर कसे बनवायला शिकाल यासाठी समर्पित आहे. इनपुट फील्ड, निवड फील्ड (इनपुट, निवडा). यासाठी आपल्याला फक्त गरज नाही css ज्ञान, परंतु फील्डची पार्श्वभूमी म्हणून काम करतील अशा प्रतिमा देखील. दुर्दैवाने, चालू शुद्ध cssगोलाकार कोपऱ्यांसारख्या गोष्टी करणे अद्याप शक्य नाही, म्हणून आमच्याकडे दोन पर्याय शिल्लक आहेत: एकतर स्क्रिप्ट वापरण्याचा प्रयत्न करा किंवा ते करण्याचा प्रयत्न करा. css मदतआणि पार्श्वभूमी प्रतिमा. प्रत्येक पद्धतीचे, अर्थातच, त्याचे स्वतःचे तोटे आणि फायदे आहेत. हा लेख स्क्रिप्ट्सबद्दल नसल्यामुळे, आम्ही त्या पद्धतीचा तपशीलवार विचार करू css वापरून, ज्यासाठी आपण सर्वच नाही तर अनेक फायदे आणि तोटे ठरवू शकतो.

दोष:

कदाचित डिझाइन म्हणून पार्श्वभूमी वापरण्याचा सर्वात मोठा तोटा इनपुट फील्डत्याची अव्यवहार्यता आहे. आजकाल, इंटरनेटवरील बहुतेक साइट्स cms वापरतात, ज्यामध्ये सर्वकाही इनपुट फील्डमानवी हस्तक्षेपाशिवाय तयार केले जातात; त्यामुळे, बरेचदा अतिरिक्त कंटेनर (divs) वापरणे केवळ अशक्य असते. या परिस्थितीतून बाहेर पडण्याचे अनेक मार्ग आहेत: आपण सुंदर नाकारू शकता css इनपुटआणि निवडाआणि डिझाइनसाठी मानक वापरा css गुणधर्म, तुम्ही तेच निर्दिष्ट करू शकता निश्चित रुंदीआणि सर्व सीएसएस इनपुट आणि सिलेक्टसाठी उंची, नंतर तुम्ही डिझाइनसाठी एक इमेज वापरू शकता किंवा इनपुट बटणाच्या संयोगाने वापरू शकता, ज्यामुळे आमचे हात थोडे मोकळे होतील आणि आम्हाला सुंदर, तुलनेने लवचिक इनपुट फील्ड बनवता येतील. मी त्यांना “तुलनेने लवचिक” का म्हटले आहे, उदाहरणे विचारात घेतल्यावर तुम्हाला अधिक समजेल.

फायदे:

या पद्धतीचा एक फायदा आहे, परंतु सर्वात महत्वाची गोष्ट अशी आहे की ती आम्हाला डिझाइनसाठी स्क्रिप्ट वापरणे टाळण्यास अनुमती देईल.

आम्ही खालील प्रतिमा वापरून एक सुंदर तयार करू:

आणि शोध फॉर्म तयार करण्यासाठी आम्ही ही प्रतिमा वापरतो:

स्क्रिप्टशिवाय सुंदर सीएसएस इनपुट

दिशेने पहिले पाऊल सुंदर आणि मूळ इनपुटआम्ही मूलभूत स्थापना करू css मूल्येशैली...

रुंदी: 206px;
उंची: 24px;
सीमा: काहीही नाही;
पार्श्वभूमी: ;

}

जसे आपण पाहू शकता, आम्ही मुख्य सूचित केले आहे css शैलीआमच्या इनपुटसाठी. रुंदी आणि उंची समान परिमाणांवर सेट केल्याचे सुनिश्चित करा पार्श्वभूमी प्रतिमा. आणि आम्ही मूल्य देखील रीसेट करतो सीमा गुणधर्म, प्रत्येकाकडे ते डीफॉल्टनुसार असते इनपुट फील्डस्थापित सीमा सीमा. आणि अर्थातच, त्यांनी प्रतिमेचा मार्ग दर्शविला जो पार्श्वभूमी म्हणून वापरला जाईल. यातून काय निष्पन्न झाले ते पाहूया:

छान दिसत आहे, नाही का? फील्डमध्ये मजकूर टाइप करण्याचा प्रयत्न करा. जसे आपण पाहू शकता, ते फार चांगले दिसत नाही. म्हणून, दुसरी गोष्ट आपण फॉन्ट आणि अंतर्गत गुणधर्म सेट करू इनपुट सीमांवरील मजकूरासाठी पॅडिंग.

फॉन्ट-आकार: 12px;
रेषा-उंची: सामान्य;
रंग : #A7ADB6 ;
पॅडिंग: 4px 10px 4px 10px;
सीमा: काहीही नाही;
रुंदी: 186px;
उंची: 24px;
पार्श्वभूमी: url("/images/sample_input.gif") 0 0 नाही-पुनरावृत्ती;

}

आता, आपण मजकूर प्रविष्ट केल्यास, सर्वकाही चांगले दिसते. पहिल्या पर्यायाच्या तुलनेत तुमच्या लक्षात आले असेल इनपुटसाठी css, रुंदी आणि उंचीची मूल्ये बदलली आहेत. आम्ही अर्ज केल्यापासून इनपुट फील्डसाठी पॅडिंग, मध्ये निर्दिष्ट केलेली मूल्ये पॅडिंग मालमत्ता, म्हणून आम्ही आकार कमी केले जेणेकरून त्यांची रक्कम पूर्वीसारखीच होईल.

मी पुनरावृत्ती करू इच्छितो की ही पद्धत योग्य आहे जर ती लागू केलेली सर्व इनपुट फील्ड असतील समान आकार.
साइटवर असल्यास इनपुट रुंदी गतिमानपणे बदलेल, नंतर ही पद्धत योग्य नाही.

लवचिक सुंदर सीएसएस इनपुट

साइटला "बाइंड" करण्याचा पर्याय असल्यास इनपुट div कंटेनर, नंतर त्यासह सुंदर रचनाअजिबात समस्या नाहीत. फक्त एक एक मोठी समस्या- हे पृष्ठाचे वजन आहे, कारण प्रत्येक इनपुट फील्डसाठी आपल्याला 8 div कंटेनर वापरावे लागतील. 8 पर्यंत का? - कारण सर्वात जटिल CSS बंधनासाठी जास्तीत जास्त 8 स्तरांची आवश्यकता असते.

आमच्या वेबसाइटवर असे लेख आहेत जे सीएसएस बाइंडिंग कसे तयार करायचे याचे तपशीलवार वर्णन करतात, म्हणून या लेखात आम्ही याबद्दल तपशीलवार विचार करणार नाही, तुम्ही हे लेख स्वतः वाचू शकता: ब्लॉकसाठी एक साधे सीएसएस बंधन तयार करणे. , ग्रेडियंट बॅकग्राउंडवर सीएसएस ब्लॉक रॅप तयार करणे. . हे इनपुट फील्डवर कसे लागू करायचे ते मी तुम्हाला दाखवतो.

लवचिक सीएसएस इनपुटसाठी प्रतिमा

करण्यासाठी लवचिक इनपुट फील्ड, तुम्हाला पार्श्वभूमीसाठी वरील प्रतिमा 3 भागांमध्ये कापण्याची आवश्यकता आहे:

सीएसएस इनपुट बाइंडिंगसाठी शैली

भरा-इनपुट(

पार्श्वभूमी: url("/images/sample_input_02.gif") 0 0 पुनरावृत्ती-x;
रुंदी: 100%;
सीमा: काहीही नाही;
उंची: 24px;
पॅडिंग: 4px 0;

}
.लेफ्ट-इनपुट(

पार्श्वभूमी: url("/images/sample_input_01.gif") डावीकडे शीर्षस्थानी नाही-पुनरावृत्ती;
रुंदी: 50%;

}
.उजवे-इनपुट(

पार्श्वभूमी: पार्श्वभूमी:url("/images/sample_input_03.gif") उजवा शीर्षपुनरावृत्ती नाही;
पॅडिंग: 0 14px 0 16px;

}
.उजवे-इनपुट(

फॉन्ट-फॅमिली: एरियल, हेल्वेटिका, सॅन्स-सेरिफ;
फॉन्ट-आकार: 12px;
रेषा-उंची: सामान्य;
रंग : #A7ADB6 ;
पॅडिंग: 0 0 0 10px;
सीमा: काहीही नाही;
रुंदी: 95%;
उंची: 16px;
पार्श्वभूमी: काहीही नाही;

}