HTML PROGRAMS:
Forms:
1. Write a html program to create a form to accept Patient’s name, mobile number and date of birth. Keep all
fields compulsory.
<!DOCTYPE html>
<html>
<head>
<title>Patients Details</title>
</head>
<body>
<form>
Patients Name:<input type="text" required><br><br>
Mobile Number:<input type="tel" pattern="[0-9]{2}-[0-9]{10}" required><br><br>
Date of birth:<input type="date" required><br><br>
<input type="submit">
</form>
</body>
</html>
2. Write a html program to create registration form to accept name, mobile no, date of birth. The form should
have register caption on the button to submit the data.
<!DOCTYPE html>
<html>
<head>
<title>Registration Form</title>
</head>
<body>
<form>
Enter your Name:<input type="text"><br><br>
Mobile Number:<input type="tel" pattern="[0-9]{2}-[0-9]{10}"><br><br>
Date of birth:<input type="date"><br><br>
<input type="submit" value="Register">
</form>
</body>
</html>
3. Write a html program to create a form to accept Doctor’s name, number of patients (max 20), Date of examining
patients.
<!DOCTYPE html>
<html>
<head>
<title>Doctors Details</title>
</head>
<body>
<form>
Doctors Name:<input type="text"><br><br>
Number of Patients:<input type="number" min="0" max="20"><br><br>
Date of examining:<input type="date"><br><br>
<input type="submit">
</form>
</body>
</html>
4. Write a html program to create a form to accept students roll no (in number format) ,unit test marks (maximum
25 marks), terminal exam marks(maximum 50 marks). Include the name of the subject teacher and send the
data to the server.
<!DOCTYPE html>
<html>
<head>
<title>Student Details</title>
</head>
<body>
<form method="post">
Enter your Roll No:<input type="number" min="1"><br><br>
Unit Test Marks:<input type="number" min="0" max="25"><br><br>
Terminal Marks:<input type="number" min="0" max="50"><br><br>
Name of Subject Teacher:<input type="text"><br><br>
<input type="submit">
</form>
</body>
</html>
5. Write a html program to create a form to accept name of hospital, email id of the hospital, number of beds in
the hospital. The data should be sent to the server.
<!DOCTYPE html>
<html>
<head>
<title>Hospital Details</title>
</head>
<body>
<form method="post">
Hospital Name:<input type="text"><br><br>
Hosptial Email-Id:<input type="email"><br><br>
Number of beds:<input type="number" min="0" max="100"><br><br>
<input type="submit">
</form>
</body>
</html>
6. Write a html program to accept student name, date of birth and attendance in percentage in number form. The
data should be sent to the server.
<!DOCTYPE html>
<html>
<head>
<title>Student Details</title>
</head>
<body>
<form method="post">
Student Name:<input type="text"><br><br>
Date of Birth:<input type="date"><br><br>
Attendance:<input type="number" min="0" max="100"><br><br>
<input type="submit">
</form>
</body>
</html>
7. Write a html program to create a form to accept email id of the hotel, date of foundation, number of tables in
hotel. The data should be sent to the server.
<!DOCTYPE html>
<html>
<head>
<title>Hotel Details</title>
</head>
<body>
<form method="post">
Email-Id of Ho[Link] type="email"><br><br>
Date of Foundation:<input type="date"><br><br>
Number of tables:<input type="number" min="1" max="50"><br><br>
<input type="submit">
</form>
</body>
</html>
8. Write a html program to accept name of the employee (cannot be blank), email id of the employee, salary
(maximum 50000). The data should be sent to the server.
<!DOCTYPE html>
<html>
<head>
<title>Employee Details</title>
</head>
<body>
<form method="post">
Employee Name:<input type="text" required><br><br>
Email-Id of Employee:<input type="email"><br><br>
Salary:<input type="number" max="50000"><br><br>
<input type="submit">
</form>
</body>
</html>
9. Write a html program to accept the name of the college, total number of students in the college, total number
of halls (range till 100). The data should be sent to the server.
<!DOCTYPE html>
<html>
<head>
<title>College Details</title>
</head>
<body>
<form method="post">
College Name:<input type="text"><br><br>
Total number of Students:<input type="number" min="0"><br><br>
Total number of Halls:<input type="number" max="100"><br><br>
<input type="submit">
</form>
</body>
</html>
10. Write a html program to create form to accept students name, number of practical’s attends and provide facility
to upload his completion certificate.
<!DOCTYPE html>
<html>
<head>
<title>Student Details</title>
</head>
<body>
<form>
Student Name:<input type="text"><br><br>
Number of practicals attend:<input type="number" min="1" max="12"><br><br>
Completion Certificate:<input type="file"><br><br>
<input type="submit">
</form>
</body>
</html>
11. Write a html program to accept Student Id(combination of alphabets and numbers), date of joining, college
percentage in previous class(in digits). The data should be sent to the server.
<!DOCTYPE html>
<html>
<head>
<title>Student Details</title>
</head>
<body>
<h1>Student Details</h1>
<form method="post">
Student Id:<input type="text" pattern="[A-Z0-9]{4}"><br><br>
Date of Joining:<input type="date"><br><br>
Percentage(Previous class):<input type="number" min="1" max="100"><br><br>
<input type="submit">
</form>
</body>
</html>
List:
12. Write a html program to create a list of 3 flowers in ordered list and list of 3 fruits in unordered list.
<!DOCTYPE html>
<html>
<head>
<title>Lists</title>
</head>
<body>
<h1>Flowers Name</h1>
<ol>
<li>Rose</li>
<li>Lotus</li>
<li>Lily</li>
</ol>
<h1>Fruits Name</h1>
<ul>
<li>Apple</li>
<li>Mango</li>
<li>Banana</li>
</ul>
</body>
</html>
13. Write a html program to create an unordered list having names of two students. Add ordered list of subject
they selected.
<!DOCTYPE html>
<html>
<head>
<title>Lists</title>
</head>
<body>
<ul>
<li>Movishka</li>
<ol>
<li>IT</li>
<li>Psychology</li>
</ol>
<li>Sara</li>
<ol>
<li>CS-1</li>
<li>CS-2</li>
</ol>
</ul>
</body>
</html>
14. Write a html program to create an ordered list of 3 languages used for speaking and unordered list having 2
computer language.
<!DOCTYPE html>
<html>
<head>
<title>Lists</title>
</head>
<body>
<h1>Speaking Language</h1>
<ol>
<li>Hindi</li>
<li>Marathi</li>
<li>English</li>
</ol>
<h1>Computer Language</h1>
<ul>
<li>PHP</li>
<li>JavaScript</li>
</ul>
</body>
</html>
15. Write a html program to display name of two friends in ordered list and also display their hobbies under their
name in unordered list.
<!DOCTYPE html>
<html>
<head>
<title>Lists</title>
</head>
<body>
<ol>
<li>Anushka</li>
<ul>
<li>Painting</li>
<li>Calligraphy</li>
</ul>
<li>Aparna</li>
<ul>
<li>Dancing</li>
<li>Singing</li>
</ul>
</ol>
</body>
</html>
16. Write a html program to display names of 2 departments in ordered list and also display course like [Link] , [Link],
B.A.,M.A, under department name in unordered list.
<!DOCTYPE html>
<html>
<head>
<title>Lists</title>
</head>
<body>
<ol>
<li>Science Department</li>
<ul>
<li>[Link]</li>
<li>[Link]</li>
</ul>
<li>Arts Department</li>
<ul>
<li>B.A</li>
<li>M.A</li>
</ul>
</ol>
</body>
</html>
17. Write a html code to display a list of any 3 scientist names(e.g. Vikram Sarabhai, Homi Jahangir Bhabha, etc.)
having alphabetical numbering (a,b,..) using relevant list tags.
<!DOCTYPE html>
<html>
<head>
<title>Scientist Name</title>
</head>
<body>
<h1>Scientist Name</h1>
<ol type="a">
<li>Vikram Sarabhai</li>
<li>Homi Jahangir Bhabha</li>
<li>[Link]</li>
</ol>
</body>
</html>
18. Write a HTML program to print ordered list of any two html tags and list their attributes in unordered list under
each tag.
<!DOCTYPE html>
<html>
<head>
<title>Tags and Attributes</title>
</head>
<body>
<h1>Tags and Attributes</h1>
<ol>
<li>Audio Tag</li>
<ul>
<li>Type</li>
<li>Muted</li>
<li>autoplay</li>
</ul>
<li>Video Tag</li>
<ul>
<li>Preload</li>
<li>Poster</li>
<li>Controls</li>
</ul>
</ol>
</body>
</html>
19. Write a HTML code to display names of two animals in ordered list and two flower names in unordered list.
<!DOCTYPE html>
<html>
<head>
<title>Animals and Flowers name</title>
</head>
<body>
<h1>Animals name</h1>
<ol>
<li>Lion</li>
<li>Cow</li>
<li>Tiger</li>
</ol>
<h1>Flowers name</h1>
<ul>
<li>Rose</li>
<li>Lotus</li>
<li>Champa</li>
</ul>
</body></html>
20. Write a HTML program to display list of two subjects in unordered list and add chapter name (any two) under
each subject in ordered list.
<!DOCTYPE html>
<html>
<head>
<title>Subject and their chapters</title>
</head>
<body>
<h1>Subject and their chapters</h1>
<ul>
<li>Information Technology</li>
<ol>
<li>E-commerce and E-Governance</li>
<li>Digital Marketing</li>
</ol>
<li>Maths</li>
<ol>
<li>Logic</li>
<li>Trignometry</li>
</ol>
</ul>
</body>
</html>
21. Write a HTML code to display a list of any student names having 4 to 1 numbering using relevant list tags.
<!DOCTYPE html>
<html>
<head>
<title>Students Name</title>
</head>
<body>
<h1>Students name</h1>
<ol reversed>
<li>Movishka</li>
<li>Sara</li>
<li>Anushka</li>
<li>Aparna</li>
</ol>
</body>
</html>
22. Write a html program to create an ordered list of tea and coffee under tea display unordered list as Green Tea
and Black Tea using relevant tags.
<!DOCTYPE html>
<html>
<head>
<title>Tea and Coffee</title>
</head>
<body>
<h1>Tea and Coffee</h1>
<ol>
<li>Tea</li>
<ul>
<li>Green Tea</li>
<li>Black Tea</li>
</ul>
<li>Coffee</li>
</ol>
</body>
</html>
Inline Frame:
23. Write a html program to insert inline frame on webpage. Use [Link] file as a source for inline frame size of
inline frame should be 300*300 pixels.
<!DOCTYPE html>
<html>
<head>
<title>Inline frame</title>
</head>
<body>
<h2>Inline Frame</h2>
<iframe src=[Link] height=300 width=300>
</iframe>
</body>
</html>