html साठी एक फॉर्म घटक प्रोग्राम तयार करा. डेटा इनपुट. फॉर्म फील्ड - टॅग. II. लूपद्वारे डेटा प्रविष्ट करणे

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

पण टॅग स्वतःच काही अर्थ नाही, कारण फॉर्म डेटा प्रसारित करतो जो प्रथम कुठेतरी प्रविष्ट करणे आवश्यक आहे!

डेटा इनपुट. फॉर्म फील्ड - टॅग

टॅग करा फॉर्ममध्ये आढळणारा हा सर्वात सामान्य टॅग आहे. हे विविध घटक तयार करण्यासाठी डिझाइन केले आहे जे फॉर्ममध्ये डेटा प्रविष्ट करण्यासाठी सेवा देतात: मजकूर फील्ड, बटणे, चेकबॉक्सेस, रेडिओ बटणे.

type हा टॅगचा मुख्य गुणधर्म आहे . हे फील्ड प्रकार सेट करते ( घटक) फॉर्म:

ड्रॉपडाउन - टॅग आणि

टॅग करा

टॅग प्रमाणेच माहिती संकलित करण्यासाठी कार्य करते - ते एक सूची तयार करते ज्यामधून एक किंवा अधिक घटक निवडले जाऊ शकतात. प्रत्येक घटक मूल्याशी संबंधित असतो, जो प्रक्रियेसाठी सर्व्हरकडे पाठविला जातो.

तयार केलेल्या सूचीचा प्रकार आकार गुणधर्माच्या मूल्यावर अवलंबून असतो: आकार = "1" ( डीफॉल्ट मूल्य) यादी ड्रॉप-डाउन असेल.

आकार गुणधर्मासाठी वेगळे मूल्य प्रदर्शित सूची आयटमच्या संख्येशी संबंधित असेल. उदाहरणार्थ, size="3" सह, तीन घटक दृश्यमान होतील. इतर सूची आयटम पाहण्यासाठी ( काही असल्यास) तुम्ही अनुलंब स्क्रोल बार वापरावा, जो आपोआप जोडला जातो.

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

एकाधिक विशेषता उपस्थित असल्यास, सूचीतील सर्व किंवा काही भाग प्रदर्शित केले जातील ( ब्राउझरवर अवलंबून), जोपर्यंत आकार विशेषता दृश्यमान आयटमच्या विशिष्ट संख्येवर सेट केली जात नाही.

ड्रॉप-डाउन सूचीचा आवश्यक घटक टॅग आहे

. हे टॅगच्या आत स्थित आहे आणि प्रत्येक सूची आयटम तयार करते.

टॅगचे नाव गुणधर्म वापरणे यादीला नाव दिले जाते आणि टॅगचे मूल्य गुणधर्म वापरून सूची घटकाला मूल्य नियुक्त केले आहे. अशाप्रकारे, सर्व्हरला “नाव=मूल्य” जोडी पाठवली जाते - सूचीचे नाव आणि निवडलेल्या घटकाचे मूल्य.

टॅगची निवडलेली विशेषता

पूर्वी निवडलेल्या सूची आयटमची व्याख्या करते आणि अक्षम केलेली विशेषता सूची आयटमला अवरोधित करते - ती निवडली जाऊ शकत नाही.

मुख्य दिशा ही चार मुख्य दिशांपैकी एक आहे:

उत्तर
दक्षिण
पश्चिम
पूर्व

जगातील 7 आश्चर्ये!

चेप्सचा पिरॅमिड
बॅबिलोनच्या हँगिंग गार्डन्स
ऑलिम्पियातील झ्यूसचा पुतळा
इफिसस येथील आर्टेमिसचे मंदिर
हॅलिकर्नासस मधील समाधी
रोड्सचा कोलोसस
अलेक्झांड्रियन दीपगृह

मुख्य दिशा ही चार मुख्य दिशांपैकी एक आहे:

उत्तर दक्षिण पश्चिम पूर्व

जगातील 7 आश्चर्ये!

अलेक्झांड्रियाच्या रोड्स लाइटहाऊसच्या हॅलिकर्नासस कोलोसस येथे इफेसस मकबरा येथे ऑलिंपिया टेंपल ऑफ आर्टेमिस येथे बॅबिलोनच्या बॅबिलोन पुतळ्याचे पिरॅमिड हँगिंग गार्डन

मल्टीलाइन मजकूर फील्ड - टॅग </h3> <p>टॅग करा <textarea>मल्टीलाइन मजकूर फील्ड तयार करते. हँडलरला डेटा ट्रान्समिट करताना जतन केलेले लाइन ब्रेक बनवण्याची परवानगी आहे.</p> <p>टॅग नाव विशेषता <textarea>अनिवार्य आहे - ते वापरून, मजकूर फील्डला एक नाव दिले जाते.</p> <p>अक्षम केलेली विशेषता फील्ड अक्षम करते - फील्डची सामग्री बदलली जाऊ शकत नाही आणि ती प्रवेशयोग्य नाही. केवळ वाचनीय विशेषता फील्ड केवळ-वाचनीय असल्याचे दर्शवते - वापरकर्त्याकडे सामग्री संपादित करण्याची क्षमता नाही, परंतु ती उपलब्ध आहे - ती निवडली जाऊ शकते आणि उदाहरणार्थ, कॉपी केली जाऊ शकते.</p> <p>तुम्ही अक्षरांमध्ये मजकूर फील्डची रुंदी आणि ओळींमध्ये फील्डची उंची अनुक्रमे कॉल्स आणि रो विशेषता वापरून सेट करू शकता.</p> <p><img src='https://i0.wp.com/webpupil.ru/img/java/java_example.jpg' height="68" width="200" loading=lazy loading=lazy></p> <p><p> <textarea name= "text" cols= "40" rows= "5" readonly> <span>फील्डची सामग्री त्याच्या आकारापेक्षा जास्त असल्यास, एक स्लाइडर दिसेल.</span>

फील्डची सामग्री त्याच्या आकारापेक्षा जास्त असल्यास, एक स्लाइडर दिसेल.

फॉर्म वापरण्याचे उदाहरण

आता फॉर्म कसा काम करतो ते पाहू.

शैक्षणिक व्हिडिओ ऑर्डर फॉर्म:

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

1) एक साधा फॉर्म तयार करा

टॅग्ज

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

मग तुम्हाला हँडलर स्क्रिप्ट लिहिण्याची आवश्यकता आहे action.php. हँडलर लिहिण्यापूर्वी, आम्ही कोणत्या डिरेक्टरीमध्ये फाइल कॉपी करू हे ठरवावे लागेल:

if(isset($_FILES [ "myfile" ])) // फाइल अस्तित्वात असल्यास
{
$catalog = "../image/" ; // आमचा कॅटलॉग
जर (is_dir($catalog)) // अशी निर्देशिका अस्तित्वात असल्यास
{
$myfile = $_FILES [ "myfile" ][ "tmp_name" ]; // तात्पुरती फाइल
$myfile_name = $_FILES [ "myfile" ][ "name" ]; // फाईलचे नाव
if(! कॉपी ($myfile, $catalog)) echo "फाइल कॉपी करताना त्रुटी". $myfile_name // फाइल कॉपी अयशस्वी झाल्यास
}
अन्यथा mkdir ("../image/"); // अशी कोणतीही निर्देशिका नसल्यास, आम्ही ती तयार करू
}
?>

टिप्पणी

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

हे उदाहरण निर्देशिका तयार करणे आणि त्या डिरेक्ट्रीमध्ये फाइल कॉपी करणे हे सर्व्हरवर दाखवते.

मी घटकासह एक उदाहरण देखील दाखवू इच्छितो चेकबॉक्स. हा घटक इतर घटकांपेक्षा थोडा वेगळा आहे जर त्यातील एक घटक नसला तरी चेकबॉक्स’a निवडले नाही, नंतर सुपरग्लोबल व्हेरिएबल $_POSTरिक्त मूल्य परत करेल:

जर (!रिक्त($_POST [ "mycolor" ])) echo $_POST [ "mycolor" ]; // किमान 1 घटक निवडल्यास
इतर प्रतिध्वनी "मूल्य निवडा";
?>

HTML फॉर्म हा दस्तऐवजाचा एक भाग आहे जो वापरकर्त्याला स्वारस्य असलेली माहिती प्रविष्ट करण्यास अनुमती देतो, जी नंतर स्वीकारली जाऊ शकते आणि सर्व्हरच्या बाजूने प्रक्रिया केली जाऊ शकते. दुसऱ्या शब्दांत, फॉर्म वापरकर्त्यांनी प्रविष्ट केलेली माहिती गोळा करण्यासाठी वापरले जातात.

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

चला वापराचे उदाहरण पाहू:

या उदाहरणात आम्ही:

• आत पहिलाफॉर्म:
  • पोस्ट केले दोनरेडिओ बटणे ( ) मर्यादित पर्यायांपैकी एक निवडण्यासाठी. त्याच फॉर्ममधील रेडिओ बटणांसाठी पुन्हा लक्षात ठेवा समान नाव निर्दिष्ट करणे आवश्यक आहे, आम्ही भिन्न मूल्ये दर्शविली. च्या साठी पहिलाचेक केलेले , जे निर्दिष्ट करते की जेव्हा पृष्ठ लोड होते तेव्हा घटक पूर्वनिवडलेला असावा (या प्रकरणात, होय मूल्य असलेले रेडिओ बटण). याव्यतिरिक्त, आम्ही रेडिओ बटणांसाठी जागतिक गुणधर्म निर्दिष्ट केले आहेत, जे घटकासाठी एक अद्वितीय अभिज्ञापक परिभाषित करतात.
  • दोन घटक ठेवले , जे आमच्या मजकूर फील्डसाठी मजकूर लेबले परिभाषित करतात. लक्षात घ्या की वर्तमान लेबल कोणत्या फॉर्म घटकाशी संबंधित आहे हे निर्धारित करण्यासाठी आम्ही for ची विशेषता वापरली. for attribute चे मूल्य आम्हाला आवश्यक असलेल्या रेडिओ बटणाच्या जागतिक गुणधर्माच्या मूल्याशी संबंधित आहे.
• आत दुसराफॉर्म:
  • पोस्ट केले दोनरेडिओ बटणे ( ) मर्यादित पर्यायांपैकी एक निवडण्यासाठी. च्या साठी दुसरारेडिओ बटणांसाठी, आम्ही एक चेक केलेले गुणधर्म निर्दिष्ट केले आहेत, जे सूचित करते की पृष्ठ लोड झाल्यावर घटक पूर्व-निवडलेला असावा (या प्रकरणात, मूल्य क्रमांक असलेले रेडिओ बटण). याव्यतिरिक्त, आम्ही फॉर्ममधील रेडिओ बटणांसाठी आणि समान नावांसाठी अद्वितीय मूल्ये निर्दिष्ट केली आहेत.
  • दोन घटक ठेवले , आम्ही आमची रेडिओ बटणे त्यांच्या आत ठेवली. मागील पद्धतीच्या विपरीत, रेडिओ बटणांसाठी जागतिक विशेषता (घटकांसाठी अभिज्ञापक) निर्दिष्ट करण्याची आवश्यकता नाही, आणि मजकूर लेबल्ससाठी त्यांच्यासाठी गुणधर्म वापरा (बाइंडिंग करा).

ब्राउझरमध्ये, मजकूर लेबले वापरण्यासाठी दोन्ही पर्याय (पद्धती) एकसारखे दिसतात:

इनपुट फील्डसाठी टूलटिप

चला वापराचे उदाहरण पाहू:

या उदाहरणात, आम्ही घटकासाठी निर्दिष्ट केले आहे टाइप टेक्स्ट (एकल-ओळ मजकूर फील्ड) आणि टाइप पासवर्ड (पासवर्ड फील्ड), वापरकर्त्यासाठी टेक्स्ट प्रॉम्प्ट (प्लेसहोल्डर विशेषता) जे इनपुटसाठी अपेक्षित मूल्य वर्णन करते.

आमच्या उदाहरणाचा परिणाम:

विषयावरील प्रश्न आणि कार्ये

पुढील विषयावर जाण्यापूर्वी, सराव असाइनमेंट पूर्ण करा:

• तुम्हाला मिळालेल्या ज्ञानाचा वापर करून, खालील ऑर्डर फॉर्म तयार करा:

चेतावणी: निवड अपेक्षित असलेल्या फील्डमध्ये, केवळ घटकावरच नव्हे तर मजकूरावर क्लिक करून निवड करणे शक्य असावे.

तुम्ही व्यायाम पूर्ण केल्यानंतर, तुम्ही सर्वकाही योग्यरित्या केले आहे याची खात्री करण्यासाठी वेगळ्या विंडोमध्ये उदाहरण उघडून पृष्ठ कोडची तपासणी करा.

26.02.2016

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

मला वाटतं की HTML फॉर्म दृष्यदृष्ट्या कसे दिसतात याची उदाहरणे आपल्याला दाखवायची आहेत.

○ शोध फॉर्म:

○ साइट लॉगिन फॉर्म:

○ अभिप्राय फॉर्म:

○ ऑर्डर फॉर्म:

मला वाटते की तुम्ही HTML फॉर्म तयार करण्याचे सार समजून घेतले आहे. तर आजच्या धड्यात मी तुम्हाला सांगेन, साधे कसे तयार करावेHTMLफॉर्मआणि विविध फॉर्म फील्ड तयार करण्यासाठी कोणते टॅग वापरले जाऊ शकतात.

आतापासून, मी तुमचे विशेष लक्ष देण्याची विनंती करतो, कारण विषय गुंतागुंतीचा आणि महत्त्वाचा आहे.

HTMLफॉर्मएक फील्ड आहे ज्यामध्ये वापरकर्ता काही माहिती प्रविष्ट करतो. पण ही माहितीही कशीतरी पाठवली पाहिजे. एक प्रकारचा एचटीएमएल फॉर्म गॅसोलीन नसलेल्या मोटरसायकलसारखा आहे, त्यात सर्वकाही आहे असे दिसते, परंतु काही कारणास्तव ते हलत नाही. म्हणून, फॉर्म कार्य करण्यासाठी आणि वापरकर्त्याने प्रविष्ट केलेली माहिती पाठवण्यासाठी, तुम्हाला मध्ये फॉर्म हँडलर तयार करणे आवश्यक आहे. परंतु हँडलरला त्रास देऊ नका, कारण तुम्ही आता फक्त नवशिक्यांसाठी कोर्स घेत आहात. आम्ही “PHP” विभागात फॉर्म हँडलरचा विषय पाहू. त्यामुळे मी मुख्य विषयापासून कसेतरी विचलित झालो.

HTML फॉर्म तयार करण्यास शिकणे

कोणत्याही HTML फॉर्ममध्ये मुख्य टॅग असेल

फॉर्म टॅग दरम्यान ठेवला जाणे आवश्यक आहे

.
टॅगसाठी