HTML Form – कैसे बनाते हैं submit button by newhtmlcode.com

HTML Form – Input Type and Submit Button Example: 

चलिए आपको मैं हिंदी में आशिक हूं बाकी आप सबमिट बटन को कैसे प्रयोग कर सकते हैं। और सबमिट बटन का एचटीएमएल में कैसे उपयोग किया जाता है इसके बारे में पूरी जानकारी आपको दूंगा तो चलिए देखते हैं कि एचटीएमएल के अंदर में आने वाले इंपोर्टेंट तथ्य क्या क्या है?

Basic HTML Form Syntax

<form action="mywebsite.com" method="POST">

    <!--Input of any type and textareas goes in here-->

</form>

HTML Form Input Types

एचटीएमएल फॉर्म बनाते समय बहुत सारे इनपुट के कोर्ट को लिखा जा सकता है।  जिसके अंदर में आता है कि आप किसी भी रो कॉलम किसी भी कॉलम के डिब्बे सेक्शन और सभी को ठीक कर सकते हैं। पिछली हम कुछ आपको इंपोर्टेंट वैल्युएबल कोडिंग के कुछ वर्ल्ड बता रहे हैं जिसका आप उपयोग एचटीएमएल फॉर्म बनाते समय प्रयोग कर सकते हैं-- 

<input> type, name, minlength, maxlength, placeholder, and so on.

इसी प्रकार 20 इनपुट टेक्स्ट है। जिसका उपयोग करके अपनी एचटीएमएल फॉर्म को सही कर सकते हैं। 

Type Text

इस प्रकार के जो इनपुट टाइप होते हैं इसमें किसी भी टेक्स्ट को लिखा जाता है। और इसके लिए प्रयोग किया जाता है यह शब्द इंग्लिश में "text"

<input type="text" placeholder="Enter name" />

Type Password

इस प्रकार से जो भी पासवर्ड होते हैं। इसमें किसी भी टेक्स्ट को लिखा जाता है। इस टेक्स्ट को विजुअल नहीं रखते हैं। और इस प्रकार से पासवर्ड कार्य करता है। चलिए हम आपको कुछ एचपीएमएल में करके दिखाते हैं कि किस प्रकार से पासवर्ड को टाइप किया गया और किस प्रकार से पासवर्ड कार्य करता है।

<input type="password" placeholder="Enter your password" />

Type Email

इस संदर्भ में आप अपने ईमेल को लिखते हैं। इसके लिए एक बॉक्स बनाई जाता है। जिससे टाइप इमेल कहा जाता है। यह एक एचटीएमएल फॉर्म का एक जरूरी हिस्सा होता है। जिसमें आप अपने यूजर अर्थात उपभोक्ता के ईमेल आईडी को लेते हैं। 

<input type="email" placeholder="Enter your email" />

Type Number

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

<input type="number" placeholder="Enter a number" />

Type Radio

उपभोक्ता कुछ समय अपनी लिखते समय या किसी दृश्य को देखते समय एक बिंदु को देखते हैं। जिसे हम लोग एचटीएमएल कोडिंग करते समय इन शब्दों का प्रयोग करते हैं। चलिए देखते हैं इन शब्दों को. .. 

<input type="radio" />

Type Checkbox

 हम किसी फोरम को भरते हैं तो उसमें बहुत सारी एग्रीमेंट होते हैं। जिसके ऊपर पिक करना होता है। जिसे हम लोग चेक बॉक्स कहते हैं। इसका कोडिंग करते समय, हम लोग इन इंग्लिश के वर्डओं का प्रयोग करते हैं। जिसको आपको देखना होगा और इसी प्रकार से आपको भी प्रयोग करना होगा। जिसके कारण आप चेक चेक बॉक्स का आसानी से उपयोग कर सकते हैं।

<input type="checkbox" />

Type Submit

जब हम फार्म में दिए गए सभी कार्यों को भर लेते हैं। उसके उपरांत हम लोग इस फार्म को सबमिट कर देते हैं। जिसके लिए हम सबमिट बटन का प्रयोग करते हैं। तो चलिए जानते हैं कि सबमिट बटन का कोड क्या होता है?

<input type="submit" value="Enter to Win" />

Type Button

कुछ समय पहले आपने सबमिट के बारे में सुना है और पड़ा है। उसके बारे में आप मैं आपको बताता हूं। यहां पर एक बटन का प्रयोग होता है। उस समय में टेक्स्ट के जस्ट नीचे और जैसे ही कोई व्यक्ति उस सबमिट के बटन पर क्लिक करता है तो वह बटन कार्य कर लेता है। 

<input type="button" value="Submit" />

Type File

इसके लिए कभी भी आपको अगर अपने मोबाइल, टैबलेट, लैपटॉप का प्रयोग करके, किसी भी फाइल का एक सेट करना होता है। आप चूज फाइल या टाइप फाइल का एक बटन होता है। वहां पर क्लिक करते हैं। उसके बाद वह फाइल सेलेक्ट कर लेते हैं तो चलिए उसका भी कोड आप देख लीजिए।

<input type="file" />

Type Color

हम लोग वेब डिजाइनिंग या एप्लीकेशन डिजाइनिंग के अंतर्गत में कलर का बहुत ही बहुत बड़ा महत्व होता है। अगर आपको ना पता हो तो हम बता दें कि अगर कलर नहीं रहेंगे तो कोई भी टेक्स्ट अच्छा नहीं लगेगा। चलिए कुछ कलर के बारे में बताते हैं जो html5 के अंदर में कोड होते हैं।

RGB, HSL and alphanumeric formats. #000000 #ffffff

<input type="color" />

Type Search

अगर आप किसी भी एप्लीकेशन है। वेबसाइट के ऊपर जाते हैं। आपको सबसे ऊपर सर्च बॉक्स सकता है। उस सर्च बॉक्स के अंदर में आप किसी भी टैक्स को लिखते हैं। अब आप उसे साथ वक्त तो कैसे लिख सकते हैं। उसका कोडिंग में आपको दिखाया था जो कि इंग्लिश में है। 

<input type="search" />

Type URL

जब आपको रिंग करते हैं। उसके अंदर में आपको यूआरएल को लिखने के लिए कुछ कोड करने होते हैं। जिसके कारण वह यूआरएल प्रोफाइल ए रीडायरेक्ट होता है। एक वेबसाइट से दूसरी वेबसाइट पर या एक एप्लीकेशन से किसी भी दूसरे ब्राउज़र पर तो चलिए उसका कोड में आपको लिख कर दिखा देता हूं। 

<input type="url" />

Type Tel

input type of tel lets you collect telephone numbers from users... <input type="tel" />

Type Date

अगर हम लोग किसी भी एचटीएमएल फॉर्म को बनाते हैं। उसमें दिनांक की बहुत ही महत्वपूर्ण भूमिका होती है। इस दिनांक का कोडिंग करते समय हम लोग इनपुट टाइप में डेट लिखते हैं। जिसके कारण कभी भी फार्म में डेट को सेलेक्ट करने का एक ऑप्शन आता है। जहां पर आप वर्ष और दिनांक चयन कर सकते हैं। चलिए देखते हैं इसका कोड कैसे कर सकते हैं।

<input type="date" />

Type Datetime-local

अगर आप एचटीएमएल फॉर्म बना रहे हैं। उस समय विशेष रुप से समय का भी बहुत ध्यान रखना पड़ता है। अगर आप किसी भी सलेक्शन के अंतर्गत में कौन से व्यक्ति ने सबसे पहले फॉर्म भरा है। उसकी परिवर्ती देना चाहते हैं। उसके लिए आपको समय भी निर्धारण करना अर्थात समय को भी लगाना बहुत ही आवश्यक हो जाता है। एचटीएमएल फॉर्म में किस प्रकार से समय को लगाते हैं। उसका कोड में आपको दिखा रहा हूं।

<input type="datetime-local" />

Type Week

अगर आप एचटीएमएल फॉर्म बना रहे हैं। तो उसमें 1 सप्ताह से दूसरे सप्ताह के बीच के समय में कितने लोगों ने फॉर्म भरा है। कितने लोगों ने क्या-क्या कार्य किया है। उन सब को देखने के लिए आप एचटीएमएल में कोडिंग करते हैं। जिसमें इनपुट के अंदर विक लिखते हैं। तो चलिए मैं इसका भी कोड आपको दिखा देता हूं। 

<input type="week" />

Type Month

एटीएम फॉर्म बनाने पर अगर आपको महीने का ही सिर्फ और सिर्फ चयनित कराना है।  अपने उपभोक्ता से तो आप उसके लिए भी अलग से कोड करते हैं। उसका कोड क्या होता है मैं आपको दिखाया जाता हूं। 

<input type="month" />

Textarea

एरिया जब आप एचटीएमएल फॉर्म को बनाते हैं। उस समय किसी भी मैसेज या किसी भी बात को अपने उपभोक्ता के माध्यम से लेना चाहते हैं। उसके लिए भी आप एक बॉक्स बनाते हैं। उस बॉक्स के अंदर वह उपभोक्ता अपनी बातों को लिख सकता है। इस टेक्स्ट एरिया को कैसे लिखा जाता है। इसका कोड क्या होता है। उसे भी देख लीजिए

<textarea cols="50" rows="20"></textarea>

Multiple Select Box

अगर कोई फोरम को आप भरते हैं तो उस फोरम में बहुत ही सारे चेकबॉक्स मिलते हैं अर्थात आपने जो जो कार्य किए हैं उस पर आपको सही कार्तिक या बॉक्स पर क्लिक करना होता है जिसके कारण वह बॉक्स चयन हो जाता है तो इसका कोड कैसे करते हैं इसके बारे में मैं आपको दिखा देता हूं।

<select>

      <option value="HTML">Select a Language</option>

      <option value="HTML">HTML</option>

      <option value="CSS">CSS</option>

      <option value="JavaScript">JavaScript</option>

      <option value="React">React</option>

</select>

How to Label HTML Inputs 

जब आप कभी भी फोरम को बनाते हैं। फॉर्म बनाने पर सबसे पहले उसका नाम लिखना होता है। उसके नीचे कुछ एग्रीमेंट आते हैं। या उसमें आपको सेलेक्ट करना होता है। कि आपने कौन सी क्वालिफिकेशन की है इन सब को चयन करना होता है। इसका प्रक्रिया इसका एचटीएमएल कोड कैसे होता है। इस कोड को भी मैं आपके सामने दिखा रहा हूं।

<label for="name">Name</label>

<input type="text" id="name" /> <br />

<label for="check">Agree with terms</label>

<input type="checkbox" id="check" />

How HTML Forms Work

एचटीएमएल फॉर्म उस समय कार्य करता है। जब आप किसी भी फोरम को भरते हैं और उसके बाद उसको सबमिट करते हैं। इसमें मुख्यता दो कोड काम करते हैं जिसमें एक गेट होता है और एक पोस्ट होता है। चलिए इसका भी कोडिंग में आपको दिखाया जाता हूं।

GET or POST

Mini Project: Build a Basic Contact Form

बहुत सारे लोग एचटीएमएल कोडिंग का प्रयोग करके, अपने बेसिक इनफार्मेशन जैसे कांटेक्ट या किसी की जरूरी जानकारी को मांगते हैं और इसको बनाने के लिए भी एचपीएमएल का ही प्रयोग किया जाता है। चलिए इसका एचटीएमएल कोड मैं आपको दिखाया जाता हूं। 

<form action=example-server.com">

      <fieldset>

        <legend>Contact me</legend>

        <div class="form-control">

          <label for="name">Name</label>

          <input type="name" id="name" placeholder="Enter your name" required />

        </div>

        <div class="form-control">

          <label for="email">Email</label>

          <input

            type="email"

            id="email"

            placeholder="Enter your email"

            required

          />

        </div>

        <div class="form-control">

          <label for="message">Message</label>

          <textarea

            id="message"

            cols="30"

            rows="10"

            placeholder="Enter your message"

            required

          ></textarea>

        </div>

        <input type="submit" value="Send" class="submit-btn" />

      </fieldset>

</form>

What’s going on in this HTML code?

अगर कोई आपसे किसी प्रश्न का उत्तर प्राप्त करना चाहता है। उसके लिए उसको कांटेक्ट मी के फॉर्म को सबमिट कर रहा होता है। आपको कांटेक्ट मी का फोरम कैसे बनाना है। इसके लिए आपको सबसे पहले नाम उसके बाद एक टेक्स्ट एरिया का एचटीएमएल कोड करना होगा। उसके बाद ईमेल काकोडकर के और टेक्स्ट एरिया का एचटीएमएल कोड करना होगा। उसके बाद आपको मैसेज और टेक्स्ट एरिया का कोडिंग करना होगा। उसके नीचे आपको सब अमित या सेंड का टेक्स्ट लिख कर। उस पर बटन सेलेक्ट करके यूआरएल लगाना होगा। उसके उपरांत आप कांटेक्ट मी का फॉर्म पूर्ण रुप से बना चुके हैं। यह सत्यापित हो चुका है, चलिए मैं इसका कोड दिखा देता हूं कि कैसे कोडिंग करना है।

body {

    display: flex;

    align-items: center;

    justify-content: center;

    height: 100vh;

    font-family: cursive;

  }

 input,

    textarea {

    width: 100%;

    padding: 5px;

    outline: none;

  }

  label {

    line-height: 1.9rem;

  }

  input[type="submit"] {

   transform: translate(2.2%);

   padding: 3px;

   margin-top: 0.6rem;

   font-family: cursive;

   font-weight: bold;

  }

 fieldset {

   padding: 20px 40px;

 }

What’s the CSS code doing here?

सीएसएस का कार्य एचटीएमएल को बेहतर रूप से दिखाना होता है। चलिए मैं इसका कुछ उदाहरण- जैसे- आप किसी छोले की दुकान पर जाते हो तो उसने एक प्लेट में छोला दिया है। 

एक दूसरी दुकान पर जाते हो तो उसने उस प्लेट में छोले के साथ नमकीन प्याज और भी कुछ जरूरी टेस्टी मसाले कर दिया है तो आप किस दुकान से सबसे ज्यादा छोले खाना पसंद करेंगे, जाहिर हैं आपका उत्तर होगा जो दुकानदार ने सबसे ज्यादा चटपटा और अच्छा छोला दिया है। उसी तरह काम करता है सीएसएस, एचटीएमएल कोडिंग के अंतर्गत में जब आप कोड करते हैं। वह भाषा सिर्फ और सिर्फ एक पढ़ने योग्य दिखती है लेकिन जब आप उस पर css का प्रयोग करते हैं। उसमें वह टेक्स्ट किस size में होगा, उसका कलर क्या होगा, कितना उसका साइज होगा, वह मोबाइल में कैसे खुलेगा, टेबलेट में कैसे खुलेगा, पीसी में कैसे खुलेगा। इन सभी चीजों का ध्यान बहुत अच्छी तरीके से रखा जाता है। आपने बहुत अच्छी तरीके सीखा और जाना की एचटीएमएल के बाद सीएसएस बहुत ही महत्वपूर्ण चीजें हैं। जिसका प्रयोग हर एक कोडिंग प्रोफेशनल करता है।

Conclusion

मुझे आशा है कि आपने पूरा कोडिंग की बातों को पढ़ा होगा और कोडिंग किस प्रकार से होगा। एचटीएमएल फॉर्म कैसे करके बनेगा। इन सब के बारे में जान लिया होगा और ऐसी और कंटेंट देखने के लिए आपको इस आर्टिकल को लाइक शेयर और सब्सक्राइब फॉलो करना होगा धन्यवाद!

What is the use of forums in HTML?

A Web forum is a website or section of a website that allows visitors to communicate with each other by posting messages. Most forums allow anonymous visitors to view forum postings, but require you to create an account in order to post messages in the forum.

How do you make a simple forum?

1. Pick a location to host your forum.
2. Choose a software to create your forum website.
3. Organize your forum's structure.
4. Design your forum's theme.
5. Create user rules for your forum website.
6. Start conversations with interesting discussion topics.
7. Publish your forum on your website.

What is a forum on a website?

An Internet forum, or message board, is an online discussion site where people can hold conversations in the form of posted messages. They differ from chat rooms in that messages are often longer than one line of text, and are at least temporarily archived.

Which is the best forum software?

1. Best forum software
2. Wix Forum.
3. phpBB.
4. vBulletin.
5. MyBB.
6. Vanilla.
7. Flarum.
8. Simple Machines Forum.
9. Discourse.

What is an example of a forum?

The definition of a forum is a place or a method for discussion. An example of a forum is an online message board.

How do I find an online forum?

Reddit − Reddit is a social news collection of web content along with ratings, and the discussion forum website.

Stack Overflow − Stack Overflow is a quite popular question and answers based website for any type of computer programming related queries.

What is difference between blog and forum?

Blogs are full of posts and comments, created by authors, organised into categories. Forums are full of topics and comments created by members, organised into different sub-forums.

What are the two main types of forums?

Discussion – Discussion forums are the most traditional type of forum.

Question (Q&A) – The Q&A format presents the initial thread post as a question, requesting responses.

Both Q&A and Discussion - Both Q&A and traditional discussions are enabled for this type of forum thread.

What is a forum as an assignment?

A discussion forum, also known as a discussion board, is an online location for asynchronous written communication. Each discussion is typically defined by a specific function (such as “I need help” or “Water Cooler Chat”) or focused on a specific topic from the course.

What are blogs Wikis and forums?

Blogs, wikis, and discussion boards are web-based platforms through which students can create and share content as well as interact with each other and the instructor.

What is forum activity?

The Forum activity allows students and teachers to exchange ideas by posting comments as part of a 'thread'. Files such as images and media maybe included in forum posts. The teacher can choose to grade and/or rate forum posts and it is also possible to give students permission to rate each others' posts.

How do you use forums in the classroom?

Here is a quick list of ideas on how forums can be used in the classroom: Class discussion – Try asking an open ended question on a regular basis. Have students make an initial reply and then follow up replies to two or more of their classmates.

What is an introductory forum?

1 Cougar Courses –Introduction to Forums. An Introduction to Forums. Forums are used for asynchronous discussions between the Instructor and the students. In an online or blended course, appropriately used forums build a sense of commitment and community and allow students to reflect on and apply course material.

What is a forum or advanced forum?

Unlike standard forums advanced forums are responsive, so users can read and post from their mobile or tablet. Advanced forums have been specifically designed to improve the usability and accessibility of Moodle forums.

How do I join an online forum?

Just click “Agree to the terms,” or something along those lines, to begin registering. Fill in a registration form. Most forums will have a typical registration form, with fields that you need to fill in with information like your e-mail address, name, date of birth, language, username, and password.