हेल्लो दोस्तों स्वागत है आपका हमारी एक और HTML Language कि फायदेमंद पोस्ट में | इस पोस्ट में HTML Program Notes यानि कि HTML लैंग्वेज के सभी प्रोग्राम के नोट्स को बोहोत ही आसान तरीके से इस पोस्ट में दर्शाया गया है |
यहाँ पर कुछ जरुरी बेसिक HTML programs को उनके इनपुट और आउटपुट के साथ में दर्शाया गया है जिन्हें समझना बोहोत ही आसान है और इन सभी html programs के codes को आप बोहोत ही आसानी से right side में ऊपर की ओर दिए गए copy button पर क्लिक करके कॉपी करके अपने अभ्यास के लिए और समझने के लिए प्रयोग भी कर सकते है |
Contents
दिखाएँ
Ques 1. How to add favorite icon in webpage.
INPUT
<html>
<head>
<title>HTML-1</title>
<link href="logo.png" rel="icon">
</head>
<body>
<h1>Add Favorite Icon in webpage.</h1>
</body>
</html>
INPUT
<html>
<head>
<title>HTML-2</title>
</head>
<body>
<h1>This is first heading</h1>
<h2><s><u>This is second heading</u></s></h2>
<h3>This is third heading</h3>
<h4>This is fouth heading</h4>
<h5>This is fifth heading</h5>
<h6>This is sixth heading</h6>
For Horizental Rular
<hr/>
<p>This is a first paragraph</p>
<p>This is a second paragraph</p>
<p>This is a third paragraph</p>
<b>Text Bold</b>
<strong>Paragraph and Text Bold</strong><br>
<i>Italic</i>
<em>Italic Text</em>
<br>
<u>Underline</u>
<br>
<s>Heading</s>
<strike>Strike</strike>
<del>Delete</del>
<br>
<abbr title="i-phone 15 Pro Max">Title Tag</abbr><br>
<mark>Mark or highlight</mark>
<br>
<big>Text Size Big</big>
<br>
<small>Text Size Small</small>
<br>
</body>
</html>Ques 3. Use of font tag and its attributes.
INPUT
<html>
<head>
<title>HTML-3</title>
</head>
<body bgcolor="aqua">
<font color="navy" face="impact" size="10">
<h1>Welcome To The World Of HTML</h1>
</font>
<hr>
<font color="red" face="monotype corsiva">
<h1>Welcome To The World Of CSS</h1>
</font>
</body>
</html>Ques 4. Task for font tag and its attributes.
INPUT
<html>
<head>
<title>HTML-4</title>
</head>
<body>
<font size="4" face="Comic Sans MS"><b>Correct one fault at a time. Concentrate on the one fault you want to avercome.</b></font>
<br>
<font size="5" face="Bernard MT Condensed" color="red">Correct one fault at a time. Concentrate on the one fault you want to overcome.</font>
<br>
<font size="5" face="Algerian">Correct one fault at a time. Concentrate on the one fault you want to overcome.</font>
<br>
<font size="6">Correct one fault at a time. Concentrate on the one fault you want to overcome.</font>
<br>
<font size="4">Correct one fault at a time. Concentrate on the one fault you want to overcome.</font>
<br>
<font size="4">Correct one fault at a time. Concentrate on the one fault you want to overcome.</font>
</body>
</html>
INPUT
<html>
<head>
<title>HTML-5</title>
</head>
<body>
<h1>
a<sup>2</sup>+b<sup>2</sup>
<br>
H<sub>2</sub>O
</h1
<h1>Shubham Pal</h1>
</body>
</html>
INPUT
<html>
<head>
<title>HTML-6</title>
</head>
<body>
<font face="Arial" size="4">
HNO<sub>3</sub> + <u>H<sub>2</sub>SO<sub>4</sub></u> → H<sub>2</sub>NO<sub>3</sub><sup>+</sup> + HSO<sub>4</sub><sup>-</sup>
<br>
HSiO<sub>3</sub><sup>-</sup> + <u>HCN</u> → CN<sup>-</sup> + H<sub>2</sub>O + SiO<sub>2</sub>
<br>
HNO<sub>2</sub> + <u>HCO<sub>3</sub><sup>-</sup></u> → H<sub>2</sub>O + CO<sub>2</sub> + NO<sub>2</sub><sup>-</sup>
<br>
C<sub>6</sub>H<sub>5</sub>O<sup>-</sup> + <u>CH<sub>2</sub>ClCO<sub>2</sub>H</u> → C<sub>6</sub>H<sub>5</sub>OH + CH<sub>2</sub>ClCO<sub>2</sub><sup>-</sup>
</font>
</body>
</html>
INPUT
<html>
<head>
<title>HTML-7</title>
</head>
<body>
<h1>Mathematical Equations</h1>
<br>
<div style="display: inline-block">
<h3>Mathematical formulas</h3>
<b>Area of Square : </b>A = 1<sup>2</sup>
<br><br>
<b>Area of Circle : </b>A = 3.14*r<sup>2</sup>
<br><br>
<b>Area of Sphere : </b>A = 4*3.14*4<sup>2</sup>
<br><br>
<b>Area of Cube : </b>V = s<sup>3</sup>
<br><br>
<b>Area of Cylinder : </b>V = 3.14*r<sup>2</sup>
<br><br>
<b>Product : </b>A<sup>m</sup>*A<sup>n</sup> = a<sup>m+n</sup>
<br><br>
<b>Quotient : </b>A<sup>m</sup>/A<sup>n</sup> = a<sup>m-n</sup>
<br><br>
<b>Power of Power : </b>(a*b)<sup>n</sup> = a<sup>n</sup>*b<sup>n</sup>
<br><br>
<b>Power of Power : </b>(a/b)<sup>n</sup> = a<sup>n</sup>/b<sup>n</sup>
<br><br>
<b>Zero Exponents : </b>a<sup>0</sup> = 1
</div>
<div style="display: inline-block">
</div>
<div style="display: inline-block">
</div>
<div style="display: inline-block">
</div>
<div style="display: inline-block">
</div>
<div style="display: inline-block">
<h3>Factoring formulas</h3>
<b>a<sup>2</sup>-b<sup>2</sup> = (a-b)*(a+b)</b>
<br><br>
<b>a<sup>4</sup>-b<sup>4</sup> = (a-b)*(a+b)*(a<sup>2</sup>+b<sup>2</sup>)</b>
<br><br>
<b>a<sup>6</sup>-b<sup>6</sup> = (a-b)*(a+b)*(a<sup>2</sup>-ab+b<sup>2</sup>)*(a<sup>2</sup>+ab+b<sup>2</sup>)</b>
<br><br>
<b>a<sup>3</sup>+b<sup>3</sup> = (a+b)*(a<sup>2</sup>-ab+b<sup>2</sup>)</b>
<br><br>
<b>a<sup>3</sup>-b<sup>3</sup> = (a-b)*(a<sup>2</sup>+ab+b<sup>2</sup>)</b>
<br><br>
<b>(a+b)<sup>2</sup> = a<sup>2</sup>+2ab+b<sup>2</sup></b>
<br><br>
<b>(a-b)<sup>2</sup> = a<sup>2</sup>-2ab+b<sup>2</sup></b>
<br><br>
<b>(a+b+c)<sup>2</sup> = a<sup>2</sup>+b<sup>2</sup>+c<sup>2</sup>+2(ab+bc+ca)</b>
<br><br>
<b>(a+b)<sup>3</sup> = a<sup>3</sup>+b<sup>3</sup>+3ab(a+b)</b>
<br><br>
<b>(a-b)<sup>3</sup> = a<sup>3</sup>-b<sup>3</sup>-3ab(a-b)</b>
</div>
</body>
</html>
INPUT
<html>
<head>
<title>HTML-8</title>
</head>
<body>
<ul>
<font face="Arial" size="4">
<li>a<sup>2</sup> - b<sup>2</sup> = (a - b)(a + b)</li>
<li>(a + b)<sup>2</sup> = a<sup>2</sup> + 2ab + b<sup>2</sup></li>
<li>a<sup>2</sup> + b<sup>2</sup> = (a + b)<sup>2</sup> - 2ab</li>
<li>(a - b)<sup>2</sup> = a<sup>2</sup> - 2ab + b<sup>2</sup></li>
<li>(a + b + c)<sup>2</sup> = a<sup>2</sup> + b<sup>2</sup> + c<sup>2</sup> + 2ab + 2bc + 2ca</li>
<li>(a - b - c)<sup>2</sup> = a<sup>2</sup> + b<sup>2</sup> + c<sup>2</sup> - 2ab + 2bc - 2ca</li>
<li>(a + b)<sup>3</sup> = a<sup>3</sup> + 3a<sup>2</sup>b + 3ab<sup>2</sup> + b<sup>3</sup> ; (a + b)<sup>3</sup> = a<sup>3</sup> + b<sup>3</sup> + 3ab(a + b)</li>
<li>(a - b)<sup>3</sup> = a<sup>3</sup> - 3a<sup>2</sup>b + 3ab<sup>2</sup> - b<sup>3</sup> = a<sup>3</sup> - b<sup>3</sup> - 3ab(a - b)</li>
<li>a<sup>3</sup> - b<sup>3</sup> = (a - b)(a<sup>2</sup> + ab + b<sup>2</sup>)</li>
<li>a<sup>3</sup> + b<sup>3</sup> = (a + b)(a<sup>2</sup> - ab + b<sup>2</sup>)</li>
<li>(a + b)<sup>4</sup> = a<sup>4</sup> + 4a<sup>3</sup>b + 6a<sup>2</sup>b<sup>2</sup> + 4ab<sup>3</sup> + b<sup>4</sup></li>
<li>(a - b)<sup>4</sup> = a<sup>4</sup> - 4a<sup>3</sup>b + 6a<sup>2</sup>b<sup>2</sup> - 4ab<sup>3</sup> + b<sup>4</sup></li>
<li>a<sup>4</sup> - b<sup>4</sup> = (a - b)(a + b)(a<sup>2</sup> + b<sup>2</sup>)</li>
<li>a<sup>5</sup> - b<sup>5</sup> = (a - b)(a<sup>4</sup> + a<sup>3</sup>b + a<sup>2</sup>b<sup>2</sup> + ab<sup>3</sup> + b<sup>4</sup>)</li>
</font>
</ul>
</body>
</html>Ques 9. Use of mark tag in html.
INPUT
<html>
<head>
<title>HTML-9</title>
</head>
<body>
<p>Jimmy Kimmel hosted the <mark>89th</mark> Academy Awards in 2017.</p>
<p>Chris Rock hosted the <mark>88th</mark> Academy Awards in 2016.</p>
</body>
</html>Ques 10. Insert image in a webpage and Use of inline or block elements.
INPUT
<html>
<head>
<title>html10</title>
</head>
<body>
<img src="html.png" height="200px" width="200px" title="HTML" alt="HTML Language">
<img src="html.png" height="200px" width="200px" title="HTML" alt="HTML Language">
<img src="html.png" height="200px" width="200px" title="HTML" alt="HTML Language">
<font color="red">
<h1>HTML</h1>
<h1>CSS</h1>
<p>HTML</p>
<p>CSS</p>
<b>HTML</b>
<b>CSS</b>
<i>HTML</i>
<i>CSS</i>
</font>
</body>
</html>Ques 11. Use of marquee tag and its attributes.
INPUT
<html>
<head>
<title>html11</title>
</head>
<body>
<marquee direction="down" bgcolor="orange" height="150px" scrollamount="50"><p>HTML</p></marquee>
<marquee direction="right" bgcolor="white" behavior="alternate" loop="2" scrollamount="50" vspace="50"><p>HTML</p></marquee>
<marquee direction="left" bgcolor="white" behavior="slide" scrollamount="50" loop="2" hspace="200"><p>HTML</p></marquee>
<marquee direction="up" bgcolor="green" height="150px" scrollamount="50" onmouseover="stop()" onmouseleave="start()" behavior="up" hspace="50" vspace="50"><p>HTML</p></marquee>
</body>
</html>Ques 12. Use of marquee tag in images.
INPUT
<html>
<head>
<title>html12</title>
</head>
<body>
<marquee scrollamount="30" direction="right" behavior="slide" bgcolor="orange" onmouseover="stop()" onmouseleave="start()" loop="4">
<img src="html.png" height="120px" width="120px"></marquee>
<marquee scrollamount="40" direction="down" behavior="scroll" bgcolor="orange" onmouseover="stop()" onmouseleave="start()">
<img src="html.png" height="120px" width="120px"></marquee>
<center><marquee scrollamount="50" direction="right" behavior="alternate" bgcolor="white" onmouseover="stop()" onmouseleave="start()" loop="30" height="150px">
<img src="html.png" height="120px" width="120px"></marquee></center>
<marquee scrollamount="40" direction="up" behavior="scroll" bgcolor="green" onmouseover="stop()" onmouseleave="start()">
<img src="html.png" height="120px" width="120px"></marquee>
<marquee scrollamount="30" direction="left" behavior="slide" bgcolor="green" onmouseover="stop()" onmouseleave="start()" loop="4">
<img src="html.png" height="120px" width="120px"></marquee>
</body>
</html>
INPUT
<html>
<head>
<title>HTML-13</title>
</head>
<body>
<pre>
<h1>
Hey!
My name is
Unknown1
©
</h1>
</pre>
<xmp>
<h1>
Hey!
My name is
Unknown2
<img>
</h1>
</xmp>
<h2>
<xmp><h1>Hi</h1></xmp>
</h2>
</body>
</html>Ques 14. Codes for some character entities in html.
<html>
<head>
<title>HTML-13</title>
<link href="html.png" rel="icon">
</head>
<body>
<h1>How to use Charater entities</h1>
<h2>
Single Space:
<br>
Left arrow: ←
<br>
Right arrow: →
<br>
Down arrow: ↓
<br>
Up arrow: ↑
<br>
Copyright: ©
<br>
Registered Sign: ®
<br>
Trademark: ™
<h2>
</body>
</html>Ques 15. Print this ordered ,unordered and nested list in html.
INPUT
<html>
<head>
<title>HTML-15</title>
</head>
<body>
<h1>Types of List</h1>
<hr>
<h2>Unordered List</h2>
<h3>type="none"</h3>
<ul type="none">
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ul>
<h3>type="disc" (default)</h3>
<ul type="disc">
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ul>
<h3>type="dot"</h3>
<ul type="dot">
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ul>
<h3>type="circle"</h3>
<ul type="circle">
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ul>
<h3>type="square"</h3>
<ul type="square">
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ul>
<hr>
<h2>Ordered List</h2>
<h3>type="none"</h3>
<ol type="none">
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>
<h3>type="1" (default)</h3>
<ol type="1">
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>
<h3>type="A"</h3>
<ol type="A">
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>
<h3>type="a"</h3>
<ol type="a">
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>
<h3>Start from 10</h3>
<ol type="1" start="10">
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>
<h3>Start from c</h3>
<ol type="a" start="3">
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>
<h3>Start from reversed</h3>
<ol type="1" start="10" reversed>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>
<h3>Reversed Start</h3>
<ol type="1" reversed>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>
<hr>
<h2>Definition or Description List</h2>
<dl>
<dt><b>Your Name and Place?</b><dt>
<dd>My name is Hello. I am from hello world.</dd>
<dt><b>Your Name and Place?</b><dt>
<dd>My name is Alien. I am from space.</dd>
</dl>
<hr>
<h2>Nested List</h2>
<ol>
<li>Frontend Language
<ul type="square">
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>REACT JS</li>
<li>ANGULAR 15</li>
</ul>
</li>
<li>Backend Language</li>
<li>Database Language</li>
</ol>
</body>
</html>Ques 16. Print these basic unordered list with different types in html.
INPUT
<html>
<head>
<title>HTML-16</title>
</head>
<body>
<h2>Unordered lists</h2>
<h3>Disc</h3>
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
<h3>Square</h3>
<ul type="square">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
<h3>Circle</h3>
<ul type="circle">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
<h3>None - no bullets</h3>
<ul type="none">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
</body>
</html>Ques 17. Print this multilevel nested list in html.
INPUT
<html>
<head>
<title>HTML-17</title>
</head>
<body>
<h2>Multi-level list Nested List</h2>
<ul>
<li>Daily computing</li>
<li>Web design
<ol>
<li>html 5</li>
<li>hyperlinks</li>
<li>Inscrting Images</li>
</ol>
</li>
<li>Javascript
<ul type="circle">
<li>conditional structure
<ul type="square">
<li>If else statement</li>
<li>case statement</li>
<li>Inscrting Images</li>
</ul>
</li>
<li>loop statement</li>
</ul>
</li>
</ul>
</body>
</html>Ques 18. Print this ordered and unordered list in html.
INPUT
<html>
<head>
<title>HTML-18</title>
</head>
<body>
<h2>Welcome to this Page</h2>
<h3>Ordered Lists</h3>
<ul type="none">
<li>
<ol>
<li>INSIDE</li>
<li>two</li>
<li>three</li>
</ol>
</li>
</ul>
<ol type="i">
<li>OUTSIDE</li>
<li>two</li>
<li>three</li>
</ol>
<h3>Unordered Lists</h3>
<ul type="none">
<li>
<ul type="disc">
<li>INSIDE</li>
<li>two</li>
<li>three</li>
</ul>
<ul type="circle">
<li>INSIDE</li>
<li>two</li>
<li>three</li>
</ul>
</li>
</ul>
<ul type="square">
<li>DEFAULT</li>
<li>two</li>
<li>three</li>
</ul>
</body>
</html>Ques 19. Print this nested list using ordered and unordered list in html.
INPUT
<html>
<head>
<title>HTML-19</title>
</head>
<body>
List of Indian States with their capital
<ol>
<li>Delhi
<ul type="circle">
<li>New Delhi</li>
</ul>
</li>
<li>Haryana
<ul type="circle">
<li>Chandigarh</li>
</ul>
</li>
<li>Gujarat
<ul type="circle">
<li>Gandhi Nagar</li>
</ul>
</li>
<li>Rajasthan
<ul type="circle">
<li>Jaipur</li>
</ul>
</li>
<li>Maharashtra
<ul type="circle">
<li>Mumbai</li>
</ul>
</li>
<li>Uttar Pradesh
<ul type="circle">
<li>Lucknow</li>
</ul>
</li>
</ol>
</body>
</html>Ques 20. Add some heading and text using marquee tag in html.
INPUT
<html>
<head>
<title>HTML-21</title>
<link href="html.png" rel="icon">
</head>
<body>
<div style="background-color: pink; height: 120px; margin: 10px;">
<marquee direction="right" scrollamount="20"><p style="margin-bottom: 10px; font-size:30px; font-weight:bold; position: relative; top: 20px; color:blue">Welcome to Wikite</p></marquee>
<marquee direction="left" scrollamount="20"><p style="position: relative; top: 2px;">Kaashiv Infotech</p></marquee>
</div>
<marquee direction="right" scrollamount="20"><p style="position: relative; top: 0px; color:purple; font-family: arial;">wikitechy</p></marquee>
</body>
</html>Ques 21. Add image in webpage using marquee tag.
INPUT
<html>
<head>
<title>HTML-21</title>
<link href="html.png" rel="icon">
</head>
<body>
<marquee scrollamount="20" direction="right"><img src="Audi.png" height="150px" width="350px"></marquee>
<marquee scrollamount="20" direction="left"><img src="car.png" height="150px" width="350px"></marquee>
</body>
</html>Ques 22. Print this nested ordered list in html.
INPUT
<html>
<head>
<title>HTML-22</title>
</head>
<body>
<ol>
<li>Linux
<ol>
<li>Ubuntu</li>
<li>Kali Linux</li>
<li>Red Hat</li>
</ol>
</li>
<li>Windows
<ol>
<li>Windows 7</li>
<li>Windows 10</li>
</ol>
</li>
<li>Mac</li>
<li>Android</li>
</ol>
</body>
</html>Ques 23. Print this nested list using unordered and ordered list in html.
INPUT
<html>
<head>
<title>HTML-23</title>
</head>
<body>
<font color="skyblue">
<ol>
<li>Input Devices
<font color="brown">
<ol type="a">
<li>Pointing Devices
<font color="purple">
<ul type="disk">
<li>Mouse
<font color="green">
<ul type="circle">
<li>Optical Mouse</li>
<li>Mechanical Mouse</li>
<li>Wireless Mouse
<font color="orange">
<ul type="square">
<li>RF Mouse</li>
<li>Blutooth Mouse</li>
</ul>
</font>
</li>
</ul>
</font>
</li>
<li>Trackball</li>
<li>Touchpad</li>
<li>Pointing Stick</li>
</ul>
</font>
</li>
<li>Touch Screen</li>
<li>Video Input & Audio Input Devices
<font color="purple">
<ul type="disk">
<li>Digital Video Camera</li>
<li>Web Cams</li>
</ul>
</font>
</li>
</ol>
</font>
</li>
<li>Output Devices
<font color="orange">
<ol type="a">
<li>Printers
<font color="purple">
<ul type="disk">
<li>Impact Printer</li>
<li>Non-Impact Printer</li>
</ul>
</font>
</li>
</ol>
</font>
</li>
</ol>
</font>
</body>
</html>Ques 24. Print this unordered list in html.
INPUT
<html>
<head>
<title>HTML-24</title>
</head>
<body>
<font color="green" face="Rockwell" size="20px">Untitled</font>
<font face="arial">
<ul>
<li>first
<ul type="circle">
<li>second
<ul type="none">
<li>
<ul type="square">
<li>third</li>
</ul>
</li>
</ul>
<ul type="square">
<li>fourth</li>
</ul>
</li>
</ul>
</li>
</ul>
</font>
</body>
</html>Ques 25. Print this ordered list with different types in html.
INPUT
<html>
<head>
<title>HTML-25</title>
</head>
<body>
<font face="arial">
<h2>Ordered lists</h2>
<h3>Decimal</h3>
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
<h3>Decimal with leading zeros</h3>
<ol style="list-style-type: decimal-leading-zero;">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
<h3>Lowercase ascii letters</h3>
<ol type="a">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
<h3>Uppercase ascii letters</h3>
<ol type="A">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
<h3>Lowercase roman numerals</h3>
<ol type="i">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
<h3>Uppercase roman numerals</h3>
<ol type="I">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
</font>
</body>
</html>Ques 26. Create hyperlinks in webpage using Anchor Tag in html.
INPUT
<html>
<head>
<title>HTML-26</title>
</head>
<body topmargin="100px" leftmargin="100px" rightmargin="10px" text="red">
<h1>Anchor Tag in html</h1>
<a href="HTML-20.html" target="_self">HTML Page 20</a>
<br><br>
<a href="HTML-21.html" target="_blank">HTML Page 21</a>
<br><br>
<a href="HTML-22.html">HTML Page 22</a>
<br><br>
<a href="HTML-24.html">HTML Page 24</a>
<br><br>
<a href="tel:+911234567890">Contact Us</a>
<br><br>
<a href="mailto:html@gmail.com">Email Us</a>
</body>
</html>Ques 27. Add video and audio in html webpage.
INPUT
<html>
<head>
<title>HTML-27</title>
</head>
<body>
<h1>Multimedia Tags in html</h1>
<hr>
<video src="code.mp4" controls poster="blog.jpg" height="300px" width="500px"></video>
<video src="code.mp4" controls autoplay muted height="300px" width="500px"></video>
<br>
<audio src="video.mp3" controls autoplay muted height="300px" width="500px"></audio>
</body>
</html>Ques 28. Print this form using radio , checkbox and other attributes property in html.
INPUT
<html>
<head>
<title>HTML-28</title>
</head>
<body>
<h1>Form Tags in html</h1>
<hr>
<form>
<fieldset style="width:400px">
<legend>Fill this form</legend>
Name<br><input type="text" placeholder="Type your name"><br>Qualifications<br>
<input type="checkbox" checked> 10<sup>th</sup>
<input type="checkbox" checked> 12<sup>th</sup>
<input type="checkbox" checked> Diploma
<input type="checkbox"> Kuch Nahi
<input type="checkbox"> Kuch Nahi
<input type="checkbox"> Kuch Nahi
<input type="checkbox" checked> Apprenticeship
<br>
Gender<br>
<input type="radio" name="gender" checked> Male
<input type="radio" name="gender"> Female
<input type="radio" name="gender"> Others
<br>
DOB
<br>
<input type="date">
<br>
Time
<br>
<input type="time">
<br>
Date & Time
<br>
<input type="datetime-local">
<br>
Color
<br>
<input type="color">
<br>
Mobile
<br>
<input type="number">
<br>
Password
<br>
<input type="password">
<br>
Email
<br>
<input type="email">
<br>
Image
<br>
<input type="file">
<br>
Address
<br>
<textarea style="resize: none;" rows="5" cols="10"></textarea>
<br>
<textarea placeholder="Enter address"></textarea>
<br>
</fieldset>
</form>
</body>
</html>
INPUT
<html>
<head>
<title>HTML-29</title>
</head>
<body>
<h1>Dropdown list (Combo Box) in html</h1>
<hr>
Select Your City
<select onchange="demo(this)">
<option>Select City</option>
<option>Lucknow</option>
<option value="STP">Sitapur</option>
<option disabled>Kanpur</option>
<option selected>Agra</option>
<option>Lakhimpur</option>
</select>
<br><br><br><br><br><br><br><br>
Select Your City
<select multiple>
<option>Lucknow</option>
<option value="STP">Sitapur</option>
<option disabled>Kanpur</option>
<option selected>Agra</option>
<option>Lakhimpur</option>
</select>
<script>
function demo(x)
{
alert(x.value)
}
</script>
</body>
</html>Ques 30. Print this dropdown list with group in html.
INPUT
<html>
<head>
<title>HTML-30</title>
</head>
<body>
<h1>Dropdown list with option group in html</h1>
<hr>
Select Your City
<select>
<optgroup label="Frontend Technology">
<option>HTML</option>
<option>CSS</option>
<option disabled>BOOTSTRAP</option>
<option selected>JAVASCRIPT</option>
<option>REACT JS</option>
</optgroup>
<optgroup label="Backend Technology" disabled>
<option>C#</option>
<option >JAVA</option>
<option>PYTHON</option>
</optgroup>
</select>
</body>
</html>Ques 31. Print this dropdown list using Datalist tag.
INPUT
<html>
<head>
<title>HTML-31</title>
</head>
<body>
<h1>Data List tags in html</h1>
<hr>Search
<input list="a" type="text">
<datalist id="a">
<option>HTML</option>
<option>DHTML</option>
<option>BOOTSTRAP</option>
<option>JAVA PROGRAMMING</option>
<option>JAVASCRIPT</option>
<option>REACT JS</option>
<option>C PROGRAMMING</option>
<option>C++ PROGRAMMING</option>
</datalist>
</body>
</html>
INPUT
<html>
<head>
<title>HTML-32</title>
</head>
<body>
<h1>HTML form</h1>
First name: <input type="text">
<br><br>
Last name: <input type="text">
<br><br>
E-mail: <input type="email">
<br><br>
<input type="radio" name="gen"> Male
<br>
<input type="radio" name="gen"> Femal
</body>
</html>
INPUT
<html>
<head>
<title>HTML-33</title>
</head>
<body>
User info form:
<hr>
<br>
Name: <input type="text" placeholder="Smith">
<br>
Password: <input type="password" placeholder="******">
<br><br>
Party:
<br>
<input type="radio" name="party" checked> Democrat
<br>
<input type="radio" name="party"> Republican
<br><br>
State:
<br>
<select>
<option>Oregon</option>
<option>Uttar Pradesh</option>
<option>Andhra Pradesh</option>
<option disabled>Madhya Pradesh</option>
<option >Rajasthan</option>
<option>Uttrakhand</option>
</select>
<br><br>
Comments:
<br>
<textarea placeholder="Quit spying on me!" rows="5" cols="30"></textarea>
</body>
</html>Ques 34. Print this dropdown list using Datalist tag.
INPUT
<html>
<head>
<title>HTML-34</title>
</head>
<body>
<h1>HTML Task-3 (29 September 2023)</h1>
Fruits:
<input list="sel" type="text">
<datalist id="sel">
<option>Apple</option>
<option>Cherry</option>
<option>Lemon</option>
<option>Orange</option>
<option>Peach</option>
<option>Strawberry</option>
</datalist>
</body>
</html>
INPUT
<html>
<head>
<title>HTML-35</title>
</head>
<body>
<h1>Basic HTML Form</h1>
<fieldset>
<legend>Name</legend>
<br>
First Name
<br>
<input type="text">
<br><br>
Last Name
<br>
<input type="text">
<br><br>
</fieldset>
<fieldset>
<legend>Other Questions</legend>
<br>
Choose a drink:
<br>
<input type="radio" name="drink"> coffee
<br>
<input type="radio" name="drink" checked> tea
<br>
<input type="radio" name="drink"> hot chocolate
<br><br>
What ice cream do you like?
<br>
<input type="checkbox"> Chocolate
<br>
<input type="checkbox"> Chocolate Pudding
<br>
<input type="checkbox" checked> Chocolate Peanut Butter
<br>
<input type="checkbox"> Vanilla
<br>
<input type="checkbox"> Strawberry
<br><br>
Select a school:
<br>
<select>
<option>Harvard</option>
<option>Agarwal School</option>
<option>Lucknow Public School</option>
<option>Delhi Public School</option>
</select>
<br><br>
Please provide comments:
<br>
<textarea rows="5" cols="35"></textarea>
<br> <br>
</fieldset>
</body>
</html>Ques 36. Print this dropdown list using Datalist tag in html.
INPUT
<html>
<head>
<title>HTML-36</title>
</head>
<body>
<h1>List of IIT colleges in INDIA</h1>
<input type="text" list="college">
<datalist id="college">
<option>IIT Madras</option>
<option>IIT Delhi</option>
<option>IIT Bombay</option>
<option>IIT Kharagpur</option>
<option>IIT Kanpur</option>
<option>IIT Roorkee</option>
<option>IIT Guwahati</option>
<option>IIT Hydrabaa</option>
<option>IIT Indore</option>
<option>IIT Bhubaneswar</option>
<option>IIT Tirupati</option>
<option>IIT Bhilai</option>
<option>IIT Goa</option>
<option>IIT Jammu</option>
<option>IIT Dhanbad</option>
<option>IIT Palakkad</option>
<option>IIT Dharwad, Est</option>
</datalist>
</body>
</html>
INPUT
<html>
<head>
<title>HTML-37</title>
</head>
<body>
<select>
<optgroup label="Picnic">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</optgroup>
<optgroup label="Camping">
<option>Tent</option>
<option>Flashlight</option>
<option>Toilet Paper</option>
</optgroup>
</select>
</body>
</html>Ques 38. Print this form using form tag and its attributes.
INPUT
<html>
<head>
<title>HTML-38</title>
</head>
<body>
<h1>Sign up</h1>
Name:
<br>
<input type="text" placeholder="Full name">
<br><br>
Email:
<br>
<input type="email" placeholder="Gmail Id">
<br><br>
Password:
<br>
<input type="password" placeholder="8 Charaters">
<br><br>
Confirm Password:
<br>
<input type="password" placeholder="8 Charaters">
<br><br>
Date Of Birth:
<br>
<input type="date">
<br><br>
Gender:
<br>
<input type="radio" name="gender"> Male <input type="radio" name="gender"> Female <input type="radio" name="gender"> Other
<br><br>
Insert your photo:
<br>
<input type="file">
<br><br>
Insert your resume:
<br>
<input type="file">
</body>
</html>Ques 39. Print this dropdown list using optgroup tag in html.
INPUT
<html>
<head>
<title>HTML-39</title>
</head>
<body>
<select>
<optgroup label="Browse Webdesign Tuts+">
<option>Home</option>
<option>Tutorials</option>
<option>Articles</option>
<option>Tips</option>
<option>Sessions</option>
<option>Videos</option>
<option>Premium</option>
</optgroup>
<optgroup label="About Webdesign Tuts+">
<option>Advertise</option>
<option>Write For Us</option>
<option>About</option>
<option>Usage</option>
</optgroup>
<optgroup label="Tuts+ Network">
<option>Tuts+ Hub</option>
<option>Psdtuts+</option>
<option>Nettuts+</option>
<option>VectorTuts+</option>
<option>Audiotuts+</option>
<option>Aetuts+</option>
<option>Cgtuts+</option>
<option>Phototuts+</option>
<option>Mobiletuts+</option>
<option>Webdesigntuts+</option>
<option>Wptuts+</option>
<option>Mactuts+</option>
<option>Gemedevtuts+</option>
<option>Crafttuts+</option>
</optgroup>
</select>
</body>
</html>
INPUT
<html>
<head>
<title>HTML-40</title>
</head>
<body>
<hr>
<table>
<tr><td>*Content ID</td><td></td><td></td><td></td><td></td><td><input type="text"></td><tr>
<tr><td>*Type</td><td></td><td></td><td></td><td></td><td><select>
<option>ADACCT - Acme Accounting Department</option>
<option>ADACCT - Acme Security Department</option>
<option>ADACCT - Acme Tech Department</option>
</select></td><tr>
<tr><td>*Title</td><td></td><td></td><td></td><td></td><td><input type="text"></td><tr>
<tr><td>*Filer</td><td></td><td></td><td></td><td></td><td><input type="text" placeholder="sysadmin"><select>
<option>sysadmin</option>
<option>sysuser</option>
<option>sysdesigner</option>
</select></td><tr>
<tr><td>*Security Group</td><td></td><td></td><td></td><td></td><td><select>
<option>Public</option>
<option>Privet</option>
<option>Unknown</option>
</select></td><tr>
</table>
<hr>
<font color="brown">
Template Formate
<input type="radio" name="temp" checked> HTML Conversion Template <input type="radio" name="temp"> Classinc HTML Conversion Template
</font>
<hr>
<table>
<tr><td>*Revision</td><td></td><td></td><td></td><td></td><td><input type="text"></td><tr>
<tr><td>Folder</td><td></td><td></td><td></td><td></td><td><input type="text"><button value="Browse">Browse...</button></td><tr>
<tr><td>Hidden</td><td></td><td></td><td></td><td></td><td><select>
<option></option>
<option>Public</option>
<option>Privet</option>
<option>Unknown</option>
</select></td><tr>
<tr><td>Comments</td><td></td><td></td><td></td><td></td><td><textarea style="resize: none;" rows="4" cols="30"></textarea></td><tr>
<tr><td>User Access List</td><td></td><td></td><td></td><td></td><td><textarea style="resize: none;" rows="4" cols="30"></textarea></td><tr>
<tr><td>Trash Delete Old Name</td><td></td><td></td><td></td><td></td><td><textarea style="resize: none;" rows="4" cols="30"></textarea></td><tr>
<tr><td>Trash Delete Location</td><td></td><td></td><td></td><td></td><td><input type="text"><button value="Browse">Browse...</button></td><tr>
<tr><td>Trash Delete Date</td><td></td><td></td><td></td><td></td><td><input type="date"></td><tr>
<tr><td>Trash Deleter</td><td></td><td></td><td></td><td></td><td><input type="text"></td><tr>
</table>
</body>
</html>Ques 41. Print this Simple form with different-different fields using html.
INPUT
<html>
<head>
<title>HTML-41</title>
</head>
<body>
<h2>Simple form with different-different fields.</h2>
<fieldset style="width: 450px">
<legend style="text-align: center" >Fill this form</legend>
<form method="post" autocomplete="off" enctype="multipart/form-data">
User Id
<br>
<input type="text" placeholder="Enter Name" name="userid" required autofocus value="Pata Nahi" readonly size="50"/>
<br>
<label>
Name
<br>
<input type="text" placeholder="Enter Name" required tabindex="1">
</label>
<br>
<label for="a">Father's Name</label>
<br>
<input type="text" id="a" placeholder="Enter Father's Name" autocomplete="on" tabindex="1">
<br>
<label for="b">Password</label>
<br>
<input type="password" id="b" placeholder="Enter Password">
<br><br>
File Upload: <input type="file">
<br><br>
<input type="image" src="submit.png" height="35px" width="100px">
<input type="submit" value="Submit button">
<input type="button" value="Dummy button">
<input type="reset" value="Reset button">
<br><br>
</form>
</fieldset>
</body>
</html>
INPUT
<html>
<head>
<title>HTML-42</title>
</head>
<body>
<h1>Use of submit and dummy button</h1>
<form>
<h2>Web Development</h2>
<input type="submit" onclick=demo() value="Submit">
<input type="button" onclick=demo() value="Dummy">
</form>
<script>
function demo()
{
document.querySelector("h2").innerText="HTML & CSS";
}
</script>
</body>
</html>Ques 43. Use of minimum & maximum attributes of ‘Date of birth’ in html.
INPUT
<html>
<head>
<title>HTML-43</title>
</head>
<body>
<h2>Use of min & max in Date of birth</h2>
<form method="post">
Date of Birth: <input type="date" min="2023-01-01" max="2023-09-30">
<br>
<br>
<input type="submit" value="SAVE">
</form>
</body>
</html>Ques 44. Use accept=” ” attribute of file type in html.
INPUT
<html>
<head>
<title>HTML-44</title>
</head>
<body>
<h2>Use accept=" " attribute of file type.</h2>
only .jpg files: <input type="file" accept=".jpg" multiple>
<br><br>
only .png files: <input type="file" accept=".png" multiple>
<br><br>
only .jpg & .png files: <input type="file" accept=".jpg,.png" multiple>
<br><br>
only audios files: <input type="file" accept="image/*" multiple>
<br><br>
only videos files: <input type="file" accept="video/*" multiple>
</body>
</html>Ques 45. Print this HTML form with all fields using html.
INPUT
<html>
<head>
<title>HTML-45</title>
</head>
<body>
<h1>HTML form with all fields</h1>
<form method="post" enctype="multipart/form-data" autocomplete="off">
<fieldset style="width: 400px; background-color: khaki;">
<legend>Fill all fields</legend>
<label for="name">Name:</label>
<input
type="text"
id="name"
placeholder="Enter your name"
required
>
<br>
<br>
<label for="fname">Father's Name:</label>
<input type="text" id="fname" placeholder="Enter Fahter's name">
<br>
<br>
<label for="mname">Mother's Name:</label>
<input type="text" id="mname" placeholder="Enter Mother's name">
<br>
<br>
<label>Gender:</label>
<input type="radio" name="gender">
Male
<input type="radio" name="gender">
Female
<input type="radio" name="gender">
Other
<br>
<br>
<label>Education:</label>
<input type="checkbox">
10
<sup>th</sup>
<input type="checkbox">
12
<sup>th</sup>
<input type="checkbox">
Diploma
</sup>
<input type="checkbox">
B.Tech
</sup>
<br>
<br>
<label for="address">Address:</label>
<textarea
rows="5"
cols="30"
id="address"
placeholder="Enter your address"
></textarea>
<br>
<br>
<label for="image">Upload Image:</label>
<input type="file" accept="image/*" id="image">
<br>
<br>
<label>State:</label>
<select>
<option>Uttar Pradesh</option>
<option>Uttarakhand</option>
<option>Madhya Pradesh</option>
</select>
<br>
<br>
<label>College:</label>
<input type="text" list="college">
<datalist id="college">
<option>Lucknow Public</option>
<option>Delhi Public</option>
<option>Sitapur Public</option>
</datalist>
<br>
<br>
<label>DOB:</label>
<input type="date">
<br>
<br>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</fieldset>
</form>
</body>
</html>Ques 46. Print this HTML Form for DOB from 18 Years to 65 Years using html.
INPUT
<html>
<head>
<title>HTML-46</title>
</head>
<body>
<h1>HTML Form for DOB from 18 Years to 65 Years</h1>
<form method="post" enctype="multipart/form-data" autocomplete="off">
<fieldset style="width: 400px; background-color: lightgrey;">
<legend>Fill all details</legend>
<label for="name">Name: </label>
<input type="text" id="name">
<br><br>
<label for="name">Father's Name: </label>
<input type="text" id="name">
<br><br>
<label for="name">Date of Birth: </label>
<input type="date" id="name" min="1958-01-01" max="2005-01-01">
<br><br>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</fieldset>
</form>
</body>
</html>Ques 47. Print this HTML Form for 2001 to Current Date using html.
INPUT
<html>
<head>
<title>HTML-47</title>
</head>
<body>
<h1>HTML Form for Current Date</h1>
<form method="post" enctype="multipart/form-data" autocomplete="off">
<fieldset style="width: 400px; background-color: lightblue;">
<legend>Fill all details</legend>
<label for="name">Name: </label>
<input type="text" id="name">
<br><br>
<label for="name">Father's Name: </label>
<input type="text" id="name">
<br><br>
<label for="name">Date of Birth: </label>
<input type="date" id="name" min="2001-01-01" max="2023-10-03">
<br><br>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</fieldset>
</form>
</body>
</html>Ques 48. Print this HTML Form for date from 1999-02-20 to 2023-05-20 using html.
INPUT
<html>
<head>
<title>HTML-48</title>
</head>
<body>
<h1>HTML Form for date from 1999-02-20 to 2023-05-20</h1>
<form method="post" enctype="multipart/form-data" autocomplete="off">
<fieldset style="width: 400px; background-color: lightblue;">
<legend>Fill all details</legend>
<label for="name">Name: </label>
<input type="text" id="name">
<br><br>
<label for="name">Father's Name: </label>
<input type="text" id="name">
<br><br>
<label for="name">Date of Birth: </label>
<input type="date" id="name" min="1999-02-20" max="2023-05-20">
<br><br>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</fieldset>
</form>
</body>
</html>Ques 49. Print this HTML form which accept multiple files using html.
INPUT
<html>
<head>
<title>HTML-49</title>
</head>
<body>
<h1>HTML form which accept multiple files</h1>
<form method="post" enctype="multipart/form-data" autocomplete="off">
<fieldset style="width: 400px; background-color: orange;">
<legend>Fill all fields</legend>
<label for="name">Name:</label>
<input
type="text"
id="name"
placeholder="Enter your name"
required
>
<br>
<br>
<label for="fname">Father's Name:</label>
<input
type="text"
id="fname"
placeholder="Enter your name"
required
>
<br>
<br>
<label for="address">Address:</label>
<textarea
rows="5"
cols="30"
id="address"
placeholder="Enter your address"
></textarea>
<br>
<br>
<label for="image">Upload Image:</label>
<input type="file" id="image">
<br>
<br>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</fieldset>
</form>
</body>
</html>Ques 50. Print this HTML form which accept only images files using html.
INPUT
<html>
<head>
<title>HTML-50</title>
</head>
<body>
<h1>HTML form which accept only images files</h1>
<form method="post" enctype="multipart/form-data" autocomplete="off">
<fieldset style="width: 400px; background-color: pink;">
<legend>Fill all fields</legend>
<label for="name">Name:</label>
<input
type="text"
id="name"
placeholder="Enter your name"
required
>
<br>
<br>
<label for="fname">Father's Name:</label>
<input
type="text"
id="fname"
placeholder="Enter your name"
required
>
<br>
<br>
<label for="address">Address:</label>
<textarea
rows="5"
cols="30"
id="address"
placeholder="Enter your address"
></textarea>
<br>
<br>
<label for="image">Upload Image:</label>
<input type="file" accept="image/*" id="image">
<br>
<br>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</fieldset>
</form>
</body>
</html>Ques 51. Print this HTML form which accept only audios files using html.
INPUT
<html>
<head>
<title>HTML-51</title>
</head>
<body>
<h1>HTML form which accept only audios files</h1>
<form method="post" enctype="multipart/form-data" autocomplete="off">
<fieldset style="width: 400px; background-color: lightgreen;">
<legend>Fill all fields</legend>
<label for="name">Name:</label>
<input
type="text"
id="name"
placeholder="Enter your name"
required
>
<br>
<br>
<label for="fname">Father's Name:</label>
<input
type="text"
id="fname"
placeholder="Enter your name"
required
>
<br>
<br>
<label for="address">Address:</label>
<textarea
rows="5"
cols="30"
id="address"
placeholder="Enter your address"
></textarea>
<br>
<br>
<label for="image">Upload Image:</label>
<input type="file" accept="audio/*" id="image">
<br>
<br>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</fieldset>
</form>
</body>
</html>Ques 52. Print this HTML form which accept only videos files using html.
INPUT
<html>
<head>
<title>HTML-52</title>
</head>
<body>
<h1>HTML form which accept only videos files.</h1>
<form method="post" enctype="multipart/form-data" autocomplete="off">
<fieldset style="width: 400px; background-color: lightyellow;">
<legend>Fill all fields</legend>
<label for="name">Name:</label>
<input
type="text"
id="name"
placeholder="Enter your name"
required
>
<br>
<br>
<label for="fname">Father's Name:</label>
<input
type="text"
id="fname"
placeholder="Enter your name"
required
>
<br>
<br>
<label for="address">Address:</label>
<textarea
rows="5"
cols="30"
id="address"
placeholder="Enter your address"
></textarea>
<br>
<br>
<label for="image">Upload Image:</label>
<input type="file" accept="video/*" id="image">
<br>
<br>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</fieldset>
</form>
</body>
</html>Ques 53. Print this HTML form which accept only PDFs files using html.
INPUT
<html>
<head>
<title>HTML-53</title>
</head>
<body>
<h1>HTML form which accept only PDFs files</h1>
<form method="post" enctype="multipart/form-data" autocomplete="off">
<fieldset style="width: 400px; background-color: aqua;">
<legend>Fill all fields</legend>
<label for="name">Name:</label>
<input
type="text"
id="name"
placeholder="Enter your name"
required
>
<br>
<br>
<label for="fname">Father's Name:</label>
<input type="text" id="fname" placeholder="Enter your name" required>
<br>
<br>
<label for="address">Address:</label>
<textarea
rows="5"
cols="30"
id="address"
placeholder="Enter your address"
></textarea>
<br>
<br>
<label for="image">Upload Image:</label>
<input type="file" accept=".pdf" id="image">
<br>
<br>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</fieldset>
</form>
</body>
</html>Ques 54. Print this html page with all given fields using html.
INPUT
<html>
<head>
<title>HTML-54</title>
</head>
<body>
<h1>Print this html page with all given fields.</h1>
<form method="post" enctype="multipart/form-data" autocomplete="off">
<fieldset style="width: 600px;">
<legend>Personal Details</legend>
<label>Salutation</label>
<br>
<select>
<option>--None--</option>
<option>Number 1</option>
<option>Number 2</option>
<option>Number 3</option>
<option>Number 4</option>
<option>Number 5</option>
</select>
<br>
<br>
<label for="fname">First Name:</label>
<input type="text" id="fame" required>
<br>
<br>
<label for="lname">Last Name:</label>
<input type="text" id="lname">
<br>
<br>
<label>Gender:</label>
<input type="radio" name="gender">
Male
<input type="radio" name="gender">
Female
<br>
<br>
<label for="mail">Email:</label>
<input type="email" id="mail" required>
<br>
<br>
<label>Date of Birth:</label>
<input type="date">
<br>
<br>
<label for="address">Address:</label>
<br>
<textarea
rows="3"
cols="30"
id="address"
></textarea>
<br>
<br>
<input type="submit" value="Submit">
</fieldset>
</form>
</body>
</html>Ques 55. Print this given html page with all fields using html.
INPUT
<html>
<head>
<title>HTML-55</title>
</head>
<body>
<h1>Print this html page with all fields.</h1>
<fieldset style="border:2px solid black; width:600px; padding: 0px;">
<form method="post" enctype="multipart/form-data" autocomplete="off">
<fieldset style="padding-top: 0px;">
<legend>
<h3>A. Personal Information</h3>
</legend>
<label for="name">Name:</label>
<input type="text" id="name">
<br>
<label>Date of Birth:</label>
<input type="date">
<br>
<label>Interest:</label>
<input type="checkbox">Surfing the web
<input type="checkbox">
Reading books
<br>
<label for="mail">Email:</label>
<input type="email" id="mail">
<br>
<label>Country:</label>
<select>
<option>Philippines</option>
<option>India</option>
<option>United States</option>
<option>Japan</option>
<option>South Korea</option>
</select>
</fieldset>
<fieldset style="padding-top: 0px;">
<legend>
<h3>B. Rate Our Website</h3>
</legend>
<input type="radio" name="rate" checked>It's Great!
<input type="radio" name="rate">It's Good!
<input type="radio" name="rate">It's Fair!
<input type="radio" name="rate">
It's Poor!
</fieldset>
<fieldset style="padding-top: 0px;">
<legend>
<h3>C. Give Us Your Comment To Further Improve Our Website</h3>
</legend>
<textarea style="resize: none;" rows="5" cols="55"></textarea>
</fieldset>
<p>Thanks for visiting!</p>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
</fieldset>
</body>
</html>Ques 56. Print this given html page with all fields in webpage using html.
INPUT
<html>
<head>
<title>HTML-56</title>
</head>
<body>
<h1>Print this html page with all fields.</h1>
<fieldset style="border: 2px solid black; width: 400px; padding-bottom: 0px;">
<form method="post" enctype="multipart/form-data" autocomplete="off">
<label for="fname">Firstname:</label>
<input type="text" id="fname">
<br><br>
<label for="lname">Lastname:</label>
<input type="text" id="lname">
<br><br>
<label>Course:</label>
<select>
<option>Course</option>
<option>10th</option>
<option>12th</option>
<option>Diploma</option>
<option>B.Tech</option>
<option>M.tech</option>
</select>
<br>
<br>
<label>Gender:</label>
<br>
<input type="radio" name="gender">Male
<br>
<input type="radio" name="gender">Female
<br>
<input type="radio" name="gender">Other
<br>
<br>
<label>Hobbies:</label>
<br>
<input type="checkbox">Programming
<br>
<input type="checkbox">Cricket
<br>
<input type="checkbox">Football
<br>
<input type="checkbox">Reading Novel
<br>
<br>
<label for="phone">Phone:</label>
<input type="number" id="phone">
<br>
<br>
<label for="address">Address:</label>
<br>
<textarea id="address" rows="4" cols="60" style="resize: none"></textarea>
<br>
<br>
<label for="mail">Email:</label>
<input type="email" id="mail">
<br>
<br>
<label for="pass">Password:</label>
<input type="password" id="pass">
<br><br>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
</fieldset>
</body>
</html>Ques 57. Print this given short registration form in webpage using html.
INPUT
<html>
<head>
<title>HTML-57</title>
</head>
<body>
<center>
<fieldset style="border: 2px solid black; width:350px;">
<h2>Register Here</h2>
<form method="post" enctype="multipart/form-data" autocompelete="off">
<table>
<tr><td><label for="uname">Username:</label></td><td><input type="text" id="uname"></td></tr>
<tr><td><label for="pass">Password:</label></td><td><input type="password" id="pass"></td></tr>
<tr><td><label for="mail">Email:</label></td><td><input type="email" id="mail"></td></tr>
<tr><td><label>Gender:</label></td><td> <input type="radio" name="gender">Male<input type="radio" name="gender">Female<input type="radio" name="gender">Others</td></tr>
<tr><td><label for="phone">Phone:</label></td>
<td><select>
<option>+256</option>
<option>+93</option>
<option>+91</option>
<option>+355</option>
<option>+244</option>
<option>+672</option>
</select>
<input type="number" id="phone"></td></tr>
<tr><td><input type="submit" value="Submit"></td></tr>
</table>
</form>
</fieldset>
<center>
</body>
</html>Ques 58. Print this given form with control in webpage using html.
INPUT
<html>
<head>
<title>HTML-58</title>
</head>
<body>
<fieldset style="border: 2px solid black; width:450px;">
<center><h2>Form and Controls</h2></center>
<form method="post" enctype="multipart/form-data" autocomplete="off">
<label for="name">Student Name:</label>
<input type="text" id="name">
<br><br>
<label>Gender:</label>
<input type="radio" name="gender">Boy <input type="radio" name="gender">Girl
<br><br>
<label>Subjects:</label>
<input type="checkbox">Tamil <input type="checkbox">Telugu <input type="checkbox">English <input type="checkbox">Physics <input type="checkbox">Economics
<br><br>
<input type="reset" value="Clear"> <input type="submit" value="Submit">
</form>
</fieldset>
</body>
</html>Ques 59. Set a minimum and maximum value in date and number types using html.
INPUT
<html>
<head>
<title>HTML-59</title>
</head>
<body>
<fieldset style="border:2px solid black; width:500px; padding-top: 0px;">
<font color="green"><h1>GeeksForGeeks</h1></font>
<h2>Set a minimum and maximum value</h2>
<form method="get" enctype="multipart/form-data" autocomplete="off">
<label>Enter Number (between 1 and 100):</label>
<input type="number" min="01" max="100">
<br><br>
<label>Enter a date after 01-01-2020 and before 01-01-2021:</label>
<input type="date" min="2020-01-01" max="2021-01-01">
<br><br>
<input type="submit" value="Submit">
</form>
</fieldset>
</body>
</html>Ques 60. Print this given contact form in webpage using html.
INPUT
<html>
<head>
<title>HTML-60</title>
</head>
<body>
<fieldset style="border: 2px solid black; width:500px">
<h2>Contact Us</h2>
<p>Note: Reqiured fields are marked with an asteriskt(')</p>
<form method="post" enctype="multipart/form-data" autocomplete="off">
<fieldset width="500px">
<legend>[ Your Details ]</legend>
<center><table>
<tr><td><label for="name">Name * </label></td><td><input type="text" id="name"></td><td><font color="red"><span>Enter Name</span></font></td></tr>
<tr><td><label for="mail">Email Id * </label></td><td><input type="email" id="mail"></td><td><font color="red"><span>Enter Email</span></font></td></tr>
<tr><td><label for="num">Contact Number </label></td><td><input type="number" id="num"></td><td><font color="red"><span>Enter ContactNo.</span></font></td></tr>
<tr><td><label for="city">City * </label></td><td><input type="text" id="city"></td><td><font color="red"><span>Enter City</span></font></td></tr>
<tr><td><label for="address" style="position: relative; bottom: 25px;">Description * </label></td><td><textarea id="address" rows="4"></textarea></td><td><font color="red"><span style="position: relative; top: 25px;">Enter Description</span></font></td></tr>
</table>
</center>
</fieldset>
<br>
<center>
<input type="submit" value="Submit"> <input type="reset" value="Cancel">
</center>
</form>
</fieldset>
</body>
</html>Ques 61. Print this form in webpage with all given fields using html.
INPUT
<html>
<head>
<title>HTML-61</title>
</head>
<body>
<fieldset style="border: 2px solid black; width:400px; padding-bottom: 0px;">
<form method="post" enctype="multipart/form-data" autocomplete="off">
<label for="sname">Student Name: </label><input type="text" id="sname" value="Michael">
<br> <br>
<label for="fname">Father Name: </label><input type="text" id="fname" readonly>
<br> <br>
<label>Browse files: </label><input type="file">
<br> <br>
<label for="num">Phone Number: </label><input type="number" id="num" placeholder="0123-111-1111">
<br> <br>
<input type="submit" value="Submit">
</form>
</fieldset>
</body>
</html>Ques 62. Print this given simple form in webpage using html.
INPUT
<html>
<head>
<title>HTML-62</title>
</head>
<body>
<fieldset style="border: 2px solid black; width: 250px; padding-bottom: 0px;">
<form method="post" enctype="multipart/form-data" autocomplete="off">
<label for="name">Name:</label>
<br>
<input type="text" id="name">
<br>
<br>
<label for="mail">Email:</label>
<br>
<input type="email" id="mail">
<br>
<br>
<label for="message">Message:</label>
<br>
<textarea id="message" style="resize: none;" rows="4" cols="30"></textarea>
<br>
<br>
<label for="file">Select A File To Upload:</label>
<br>
<input type="text" id="file"><input type="button" value="Browse...">
<br>
<br>
<input type="submit" value="Submit">
</form>
</fieldset>
</body>
</html>Ques 63. Print this given login form in webpage using html.
INPUT
<html>
<head>
<title>HTML-63</title>
</head>
<body>
<fieldset style="border: 2px solid black; width: 400px; padding-bottom: 0px;">
<h2>Login Form</h2>
<form method="post" enctype="multipart/form-data" autocomplete="off">
<label for="uname">User Name:</label>
<br>
<input type="text" id="name" placeholder="Enter User Name">
<br>
<br>
<label for="pass">Password:</label>
<br>
<input type="password" id="pass" placeholder="Enter Password">
<br>
<br>
<input type="submit" value="Login">
</form>
</fieldset>
</body>
</html>Ques 64. Print this given registration form in webpage using html.
INPUT
<html>
<head>
<title>HTML-64</title>
</head>
<body>
<fieldset style="border: 2px solid black; width: 400px; padding-bottom: 0px;">
<h3>Registration Form</h3>
<form method="post" enctype="multipart/form-data" autocomplete="off">
<label for="fname">First Name</label>
<br>
<input type="text" id="fname" placeholder="Enter First Name here">
<br>
<label for="lname">Last Name</label>
<br>
<input type="text" id="lname" placeholder="Enter Last Name here">
<br>
<label for="mail">Email_ID</label>
<br>
<input type="email" id="mail" placeholder="Enter Email ID here">
<br>
<label for="num">Contact No</label>
<br>
<input type="number" id="num" placeholder="Enter Contact No here">
<br>
<label for="address">Address</label>
<br>
<textarea id="address" style="resize: none;" rows="1" cols="20" placeholder="Enter Address here"></textarea>
<br>
<br>
<input type="submit" value="Register">
</form>
</fieldset>
</body>
</html>Ques 65. Print this Employee registration form using html.
INPUT
<html>
<head>
<title>HTML-65</title>
</head>
<body>
<fieldset style="width: 550px;">
<legend>Employee Details</legend>
<form method="post" enctype="multipart/form-data" autocomplete="off">
<br>
<label for="fname">First Name: </label>
<input type="text" id="fname">
<br><br>
<label for="lname">Last Name: </label>
<input type="text" id="lname">
<br><br>
<label>Gender: </label>
<input type="radio" name="gender">Male <input type="radio" name="gender"> Female
<br><br>
<label for="id">Employee ID: </label>
<input type="text" id="id">
<br><br>
<label for="design">Designation: </label>
<input type="text" id="design">
<br><br>
<label for="num">Phone Number: </label>
<input type="number" id="num">
<br><br>
<input type="submit" value="Submit">
</form>
</fieldset>
</body>
</html>Ques 66. Print this travel reservation form using html.
INPUT