ITI COPA

HTML WEB DESIGNING लेबलों वाले संदेश दिखाए जा रहे हैं. सभी संदेश दिखाएं
HTML WEB DESIGNING लेबलों वाले संदेश दिखाए जा रहे हैं. सभी संदेश दिखाएं

HTML THEORY - HTML FORMS & ELEMENTS

HTML Form Elements | Hindi Notes

HTML Hindi Notes | फॉर्म एलिमेंट्स | Form Elements

HTML Form Elements

HTML Theory Notes in Hindi | HTML FORMS in Hindi


HTML फॉर्म्सटेक्स्ट बॉक्स, चेक बॉक्स एवं कॉम्बो बॉक्स


HTML फॉर्म का प्रयोग यूजर द्वारा दिए जाने वाले इनपुट के लिए किया जाता है,
 HTML मे Form को <form> टैग से डिफाइन करते है और इसे <body> टैग के अंदर रखा जाता है. HTML फॉर्म को विभिन्न प्रकार के यूजर से डाटा को इकट्ठा करने के लिए प्रयोग किया जाता है जैसे :  Name, Email Address, Phone Numbers की जानकारी आदि.
Form Element : HTML फॉर्म में फॉर्म एलिमेंट्स होते हैं, जैसे: टेक्स्ट फ़ील्ड, चेकबॉक्स, रेडियो बटन, सबमिट बटन आदि

Element

विवरण

उदाहरण

<input> 

<input> एलिमेंट फॉर्म का सबसे महत्वपूर्ण एलिमेंट है इसका प्रयोग टाइप एट्रिब्यूट के साथ किया जाता है. जैसे
<input type="text"> : -यह सिंगल लाइन टेस्ट इनपुट फ़ील्ड के लिए प्रयोग किया जाता है.
<input type="radio"> : यह रेडियो बटन के लिए प्रयोग किया जाता है.
<input type="submit"> : यह सबमिट बटन के लिए प्रयोग किया जाता है.

<form>
Username:<br>
<input type="text" name="username">
<br>
Email id:<br>
<input type="text" name="email_id">
<br><br>
<input type="submit" value="Submit">
</form>

<label>
<label> टैग कई फ़ॉर्म एलेमेंट्स के लिए एक लेबल को परिभाषित करता है।
<label>  टैग के for  एट्रिब्यूट को हमेशा <input> एलिमेंट के id एलिमेंट के अनुसार रखा जाना चाहिए जिससे दोनों को आपस में जोड़ा जा सके.

<form>
  <label for="fname"> First name: </label> <br>
  <input type="text" id = "fname" name ="fname" > <br>
  <label for="lname"> Last name: </label><br>
  <input type="text" id="lname" name="lname" ><br><br>
  <input type="submit" value="Submit">
</form>
<select>
<select> एलिमेंट ड्राप डाउन लिस्ट के लिए प्रयोग किया जाता है. इसके <option> एलिमेंट  से सेलेक्ट करने योग्य वैल्यू को दर्शाया जाता है.

<select id="cars" name="cars">
<option value="volvo">Volvo </option>
<option value="
bme">BMW </option>
<option value="
fiat">Fiat </option>
<option value="
audi">Audi </option>
</select>
<textarea>
<textarea> से एक से अधिक लाइन के input के लिए टेक्स्ट एरिया निर्धारित किया जाता है .  rows एट्रिब्यूट लाइन्स की संख्या के लिए उपयोग किया जाता है. जबकि  cols एट्रिब्यूट विड्थ के लिए उपयोग किया जाता है.  

<form>
  <textarea name="message" rows="10" cols="30">        </textarea>
  <br><br>
  <input type="submit">
</form>
<button>
<button> एलिमेंट क्लिक किए जाने वाले बटन को दर्शाने के लिए उपयोग किया जाता है.

<button type="button"  onclick= "alert ('Hello World!')">
Click Me!
</button>
<fieldset> and <legend>
<fieldset> एलिमेंट फॉर्म में एक ही प्रकार के डाटा की ग्रुपिंग के लिए उपयोग किया जाता है. <legend> का प्रयोग इसके कैप्शन के लिए किया जाता है.
<form>
<fieldset>
<legend> Personal Info : </legend>
    <label for="fname"> First name: </label><br>
    <input type="text" id="fname" name="fname" ><br>
    <label for="lname"> Last name:</label><br>
    <input type="text" id="lname" name="lname" ><br><br>
    <input type="submit" value="Submit">
  </fieldset>
</form>
<datalist>
<datalist> के द्वारा प्री डिफाइन लिस्ट  को दर्शाया जाता है.  जिसे ड्राप डाउन के मध्यम से सेलेक्ट किया जा सकता है.
<input> एलिमेंट के list एट्रिब्यूट एवं  <datalist> एलिमेंट की id एट्रिब्यूट की वैल्यू एक समान होना चाहिए.

<form >
  <input list="browsers" name="browser">
  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
  <input type="submit">
</form>


























Tags - HTML Form in Hindi Tutorial. HTML Form Tags in Hindi. All HTML Form Elements in Hindi. HTML Forms Hindi Notes HTML in Hindi PDF. Introduction to HTML Form in Hindi. HTML Form Tags in Hindi. All HTML Form Elements in Hindi. html Forms Hindi Notes. How to create html Pages and Forms in Hindi. HTML Notes in Hindi Completes PDF Notes for ITI-COPA, CCA, DCA, PGDCA, BCA & Computer Course.





||   Theory   ||   Practicals    ||   Video Tutorials   ||   Online Test Seris   ||  

HTML PRACTICALS - USING MARQUEE AND HYPERLINK

HTML HTML Marquee and Hyperlinks | Hindi Notes

HTML मार्की एवं हाइपरलिंक्स | HTML Marquee and Hyperlinks

HTML  Marquee and Hyperlinks

आईटीआई कोपा प्रेक्टिकल्स – वेब डिजाईन विद HTML

Objective : MARQUEE  टैग्स एवं HYPERLINK का प्रयोग   

प्रायोगिक कार्य के द्वारा आप सीखेंगे :
HTML MARQUEE टैग्स के विभिन्न उपयोग
HTML में हाइपरलिंक का प्रयोग

Requirements : (Tools / Equipments / Instruments)

पर्सनल कंप्यूटर / माइक्रोसॉफ्ट विंडोज / नोटपैड / वेब ब्राउज़र

प्रैक्टिकल 5 - HTML में MARQUEE  का प्रयोग

Step 1 :  नोटपैड में निम्नानुसार HTML कोड टाइप कीजिए
<html>
<body>
<h2>
<marquee>
WELCOME TO COPA GUIDE
</marquee>
</h2>
</body>
</html>

Step 2 : ऊपर लिखे गए HTML Code को आप LIST.html के नाम से Save कीजिए।

Step 3 : MARQUEE.html फाइल को Open कीजिए। आपकी फाईल आपके डिफ़ॉल्ट ब्राउज़र में ओपन हो जाएगी। इसमें दी गई हैडिंग बाएँ ओर स्क्रॉल करेंगी ।
प्रैक्टिकल 5.1 -  MARQUEE  टैग्स के साथ WIDTH, HEIGHT  एवं BGCOLOR का प्रयोग
Step 1 :  नोटपैड में निम्नानुसार HTML कोड टाइप कीजिए
<html>
<body>
<h2>
<marquee bgcolor="yellow" width=250 height=50>
WELCOME TO COPA GUIDE
</marquee>
</h2>
</body>
</html>

Step 2 : ऊपर लिखे गए HTML Code को MARQUEE1.html  के नाम से Save कीजिए।

Step 3: MARQUEE1.html फाइल को Open कीजिए। आपकी फाईल आपके डिफ़ॉल्ट ब्राउज़र में ओपन हो जाएगी।

प्रैक्टिकल 5.-  MARQUEE  टैग्स के साथ direction, behaviour एवं scrollamount का प्रयोग
Step 1 :  नोटपैड में निम्नानुसार HTML कोड टाइप कीजिए
<html>
<body>
<h2>
<marquee bgcolor="yellow" direction=right behavior=slide scrollamount=10>
WELCOME TO COPA GUIDE
</marquee>
</h2>
</body>
</html>

Step 2 : ऊपर लिखे गए HTML Code को आप marquee2.html के नाम से Save कीजिए।

Step 3 : MARQUEE2.html फाइल को Open कीजिए। आपकी फाईल आपके डिफ़ॉल्ट ब्राउज़र में ओपन हो जाएगी।

प्रैक्टिकल 5.3 - HTML में hyperlinks का प्रयोग

Step 1 :  नोटपैड में निम्नानुसार HTML कोड टाइप कीजिए
<html>
<body>
<a href="https://copaguide.blogspot.com/"> ITI COPA GUIDE </a>
</body>
</html>

Step 2 : ऊपर लिखे गए HTML Code को आप link.html के नाम से Save कीजिए।

Step 3 : link.html फाइल को Open कीजिए। आपकी फाईल आपके डिफ़ॉल्ट ब्राउज़र में ओपन हो जाएगी।
प्रैक्टिकल 5.4 -  hyperlinks में  target एवं  image का प्रयोग
Step 1 :  नोटपैड में निम्नानुसार HTML कोड टाइप कीजिए
<html>
<body>
<a href="https://copaguide.blogspot.com/" target="_blank">
ITI COPA GUIDE </a>
<h2> click on image </h2>
<a href="https://copaguide.blogspot.com/">
<img src="image1.jpg"
alt="COPA" style="width:50;height:50px;"> </a>
</body>
</html>

Step 2 : ऊपर लिखे गए HTML Code को आप link.html के नाम से Save कीजिए।

Step 3 : link1.html फाइल को Open कीजिए। आपकी फाईल आपके डिफ़ॉल्ट ब्राउज़र में ओपन हो जाएगी।


























Tags - What is HTML? History of HTML. Applications of HTML, Web Designing and HTML. How to use HTML for Web Designing. HTML Hindi Notes. Using HTML in Hindi. HTML Hindi Notes Heading Tags,ITI-COPA Web Design HTML Practicals Notes Marquee & HTML in Hindi. HTML-marquee Tag, Scrolling Text with Marquee. Using Hyperlinks in HTML Hindi Notes Using Hyperlinks in HTML Hindi Notes PDF Books. HTML Hindi Tutorials.




 

||    Theory    ||    Practicals    ||    Video Tutorials    ||    Online Test Series   ||


Translate