HTML Programs With Their Input And Output

पोस्ट को शेयर करे!

हेल्लो दोस्तों स्वागत है आपका हमारी एक और HTML Language कि फायदेमंद पोस्ट में | इस पोस्ट में HTML Program Notes यानि कि HTML लैंग्वेज के सभी प्रोग्राम के नोट्स को बोहोत ही आसान तरीके से इस पोस्ट में दर्शाया गया है |

यहाँ पर कुछ जरुरी बेसिक HTML programs को उनके इनपुट और आउटपुट के साथ में दर्शाया गया है जिन्हें समझना बोहोत ही आसान है और इन सभी html programs के codes को आप बोहोत ही आसानी से right side में ऊपर की ओर दिए गए copy button पर क्लिक करके कॉपी करके अपने अभ्यास के लिए और समझने के लिए प्रयोग भी कर सकते है |

Ques 1. How to add favorite icon in webpage.

HTML Programs With Their Input And Output
INPUT
<html>
    <head>
        <title>HTML-1</title>
        <link href="logo.png" rel="icon">
    </head>
    <body>
        <h1>Add Favorite Icon in webpage.</h1>
    </body>
</html>

Ques 2. Use of headings ,paragraph and some font style tags.

HTML Programs With Their Input And Output
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.

HTML Programs With Their Input And Output
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.

HTML Programs With Their Input And Output
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>

Ques 5. Use of subscript and superscript tags.

HTML Programs With Their Input And Output
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>

Ques 6. Task-1 for subscript and superscript tags.

HTML Programs With Their Input And Output
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>

Ques 7. Task-2 for subscript and superscript tags.

HTML Programs With Their Input And Output
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>

Ques 8. Task-3 for subscript and superscript tags.

HTML Programs With Their Input And Output
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.

HTML Programs With Their Input And Output
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.

HTML Programs With Their Input And Output
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.

html11

HTML

HTML

HTML

HTML

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.

html12

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>

Ques 13. Use of pre and xmp tags.

HTML Programs With Their Input And Output
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 Programs With Their Input And Output
<html>
<head>
<title>HTML-13</title>
<link href="html.png" rel="icon">
</head>
<body>
<h1>How to use Charater entities</h1>
<h2>
Single Space: &nbsp;
<br>
Left arrow: &larr;
<br>
Right arrow: &rarr;
<br>
Down arrow: &darr;
<br>
Up arrow: &uarr;
<br>
Copyright: &copy;
<br>
Registered Sign: &reg;
<br>
Trademark: &trade;
<h2>
</body>
</html>

Ques 15. Print this ordered ,unordered and nested list in html.

HTML Programs With Their Input And Output
HTML Programs With Their Input And Output
HTML Programs With Their Input And Output
HTML Programs With Their Input And Output
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.

HTML Programs With Their Input And Output
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.

HTML Programs With Their Input And Output
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.

HTML Programs With Their Input And Output
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.

HTML Programs With Their Input And Output
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.

HTML-21

Welcome to Wikite

Kaashiv Infotech

wikitechy

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.

HTML-21

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.

HTML Programs With Their Input And Output
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.

HTML Programs With Their Input And Output
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.

HTML Programs With Their Input And Output
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.

HTML Programs With Their Input And Output
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.

HTML Programs With Their Input And Output
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.

HTML Programs With Their Input And Output
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.

HTML Programs With Their Input And Output
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>

Ques 29. Print this dropdown list using html tags.

HTML Programs With Their Input And Output
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.

HTML Programs With Their Input And Output
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.

HTML Programs With Their Input And Output
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>

Ques 32. Print this html form using html tags.

HTML Programs With Their Input And Output
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>

Ques 33. Print this form using tags and attributes in html.

HTML Programs With Their Input And Output
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.

HTML Programs With Their Input And Output
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>

Ques 35. Print this basic form using html form tags.

HTML Programs With Their Input And Output
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.

HTML Programs With Their Input And Output
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>

Ques 37. Print this dropdown list using html tags.

HTML Programs With Their Input And Output
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.

HTML Programs With Their Input And Output
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.

HTML Programs With Their Input And Output
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>

Ques 40. Print this from using html tags.

HTML Programs With Their Input And Output
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.

HTML Programs With Their Input And Output
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>

Ques 42. Use of submit and dummy buttons of form in html.

HTML Programs With Their Input And Output
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.

HTML Programs With Their Input And Output
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.

HTML Programs With Their Input And Output
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.

HTML Programs With Their Input And Output
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.

HTML Programs With Their Input And Output
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.

HTML Programs With Their Input And Output
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.

HTML Programs With Their Input And Output
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.

HTML Programs With Their Input And Output
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.

HTML Programs With Their Input And Output
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.

HTML Programs With Their Input And Output
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.

HTML Programs With Their Input And Output
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.

HTML Programs With Their Input And Output
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.

HTML Programs With Their Input And Output
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.

HTML Programs With Their Input And Output
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.

HTML Programs With Their Input And Output
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.

HTML Programs With Their Input And Output
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.

HTML Programs With Their Input And Output
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.

HTML Programs With Their Input And Output
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.

HTML Programs With Their Input And Output
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.

HTML Programs With Their Input And Output
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.

HTML Programs With Their Input And Output
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>