फॉर्मवर HTML बटणे बनविणे

फॉर्म सबमिट करण्यासाठी इनपुट टॅग वापरणे

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

हे आपण आपले फॉर्म सबमिट करण्याचे बरेच मार्ग आहेत:

INPUT एलिमेंट

INPUT हा घटक फॉर्म सबमिट करण्याचा सर्वात सामान्य मार्ग आहे, आपण जे काही करता ते एक प्रकार (बटण, प्रतिमा किंवा सबमिट) निवडा आणि आवश्यक असल्यास फॉर्म क्रियेस सबमिट करण्यासाठी काही स्क्रिप्टिंग जोडा.

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

मूल्य = "फॉर्म सादर करा">

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

ऑनक्लिक = "सबमिट करा ();">

बटण प्रकार प्रमाणेच आहे, ज्यास फॉर्म सबमिट करण्यासाठी स्क्रिप्टची आवश्यकता आहे. त्याऐवजी एका मजकूर मूल्याऐवजी, आपल्याला एक प्रतिमा स्त्रोत URL जोडण्याची आवश्यकता आहे

src = "submit.gif">

बटण एलीमेंट

बटणाचा घटक दोन्ही एक उघडणे टॅग आणि एक बंद टॅग दोन्ही आवश्यक तेव्हा आपण ते वापरता, आपण टॅग आत संलग्न कोणतीही सामग्री एक बटण मध्ये सोबत जाईल. मग आपण एका स्क्रिप्टसह बटण सक्रिय करा.

आवेदन सादर करा

आपण आपल्या बटणामध्ये प्रतिमा समाविष्ट करू शकता किंवा अधिक मनोरंजक बटण निर्माण करण्यासाठी प्रतिमा आणि मजकूर एकत्रित करू शकता.

आवेदन सादर करा

COMMAND एलिमेंट

COMMAND घटक HTML5 सह नवीन आहे हे वापरण्यासाठी FORM ची आवश्यकता नाही, पण हे फॉर्मसाठी सबमिट बटण म्हणून कार्य करू शकते. हे घटक आपल्याला फॉर्मची आवश्यकता न घेता अधिक परस्परसंवादी पृष्ठे तयार करण्याची परवानगी देते कारण आपण काही म्हणावयाची आज्ञा इच्छित असल्यास, आपण लेबल विशेषतामध्ये माहिती लिहा.

label = "फॉर्म सादर करा">

आपण आपली आज्ञा प्रतिमेद्वारे सादर करू इच्छित असल्यास, आपण चिन्ह विशेषतेचा वापर कराल.

icon = "submit.gif">

हा लेख एचटीएमएल फॉर्म ट्यूटोरियलचा एक भाग आहे . HTML स्वरुप कसे वापरावे हे जाणून घेण्यासाठी संपूर्ण ट्यूटोरियल वाचा.

HTML फॉर्ममध्ये सबमिट करण्याचे बरेच वेगवेगळे प्रकार आहेत, जसे आपण मागील पृष्ठावर शिकलात यापैकी दोन पद्धती म्हणजे INPUT टॅग आणि बुटोन टॅग. या दोन्ही घटकांचा वापर करण्याची चांगली कारणे आहेत

INPUT एलिमेंट

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

समस्या ही आहे की हे बटण खूप कुरूप आणि साधा आहे. आपण त्यात प्रतिमा जोडू शकत नाही आपण इतर कोणत्याही घटकांप्रमाणेच शैली करू शकता, परंतु तरीही तो एक कुरुप बटण असल्यासारखे वाटू शकते.

ज्यात JavaScript चालू आहे अशा ब्राउझरमध्ये आपला फॉर्म कदाचित प्रवेशयोग्य असला तरीही INPUT पद्धतीचा वापर करा.

बटण एलीमेंट

बटणातील घटक फॉर्म सबमिट करण्यासाठी अधिक पर्याय प्रदान करतात. आपण काही बटणाचा घटक ठेवू शकता आणि त्याला सबमिट बटणमध्ये बदलू शकता. सामान्यतः लोक प्रतिमा आणि मजकूर वापरतात परंतु आपण एक div तयार करू शकता आणि जर आपल्याला पाहिजे असेल तर संपूर्ण वस्तू एक सबमिट बटण बनवा.

बटणातील घटकांमधील सर्वात मोठा दोष म्हणजे ते स्वयंचलितपणे फॉर्म सबमिट करीत नाही. याचा अर्थ असा की त्याला सक्रिय करण्यासाठी काही प्रकारचे स्क्रिप्ट असणे आवश्यक आहे. आणि म्हणून ती INPUT पद्धतीपेक्षा कमी उपलब्ध आहे. ज्या वापरकर्त्याने Javascript चालू केलेला नाही तो सबमिट करण्यासाठी फक्त एक बटण घटक असलेला फॉर्म सबमिट करण्यात सक्षम होणार नाही.

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

हा लेख एचटीएमएल फॉर्म ट्यूटोरियलचा एक भाग आहे. HTML फॉर्म कसे वापरावे याबद्दल अधिक जाणून घेण्यासाठी हे वाचा