Scribd
Upload
31 views9 pages

HTML Coding Examples for Forms and Lists

The document provides various HTML coding exercises, including creating unordered and ordered lists for websites, forms for collecting user data such as hospital information and student details, and displaying styled text using internal CSS. Each exercise includes a coding example and is dated March 2023 or 2024. The document serves as a guide for practicing HTML programming skills.

Uploaded by

purest
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
31 views9 pages

HTML Coding Examples for Forms and Lists

The document provides various HTML coding exercises, including creating unordered and ordered lists for websites, forms for collecting user data such as hospital information and student details, and displaying styled text using internal CSS. Each exercise includes a coding example and is dated March 2023 or 2024. The document serves as a guide for practicing HTML programming skills.

Uploaded by

purest
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

TPS Information Technology 1-127

Chapter 1
25. Write a htmlcode to display unordered list for search engine website
and [Link]) and ordered list of social media websites ([Link]
[Link])
([Link] and
(March 2024)
Ans. :
Coding:
<DOCTYPE HTML>
<html>
<head>
<title>

|Search Engines
</titles
</head
<body>
<hl align="center">Search Engines</hl>
<ul>
<li>[Link]</li>
<li>[Link]</li>
</ul>
<ol>

<li>[Link]</li>
<li>[Link]</li>
</ol>
</body>
</html>

Examples for Practice


1.
Write a htmlprogram to display "Digital India" in Verdana font using Internal CSS.
Add any two sentencesabout Digital India below in orange color. March 2024
2
Write a htm program to insert Inline frame on web page. Use [Link] file as a
SOurce file for Inline frame, size of Inline frame should be 300x 300 pixels.
3
Write a html program to create a form to accept Doctor's Name, Number of patients
(maximum 20), date of examining the patients. March 2024
4.
Write a html program to create a form to accept Student's Name, number of
Practical he has completed and provide facility to upload his completion certificate.
5
Write a html program to accept namne of the college, total number of students in the
college, total number of halls (range till100), The data should be sent to the server.
24. Write ahtml codeto display a list of any3 scientist names (g8-g Vikram Sarabhai,
Homi Jahangir bhabhaetc) having alphabetical numbering (a , b.......) using
relevant list. (March 2024)
Ans. :

Coding:
<!DOCTYPEHTML>
<html>
<head>
<title>
List of Scientist
</title>
</head>
|<body>
<hl align="center'>List of Scientist</hl>
<ol type="a">
<li>Vikram Sarabhai</li>
<li>Homi Jahangir bhabha</li>
<li>A. P. J. Abdul Kalam</li>
</ol>
</body>
</html>
TPS Information Technology 1-125 Chapter 1

22. Write ahtml program to accept name of hospital, Email Id of the hospital,
number of beds in hospital. The data should be sent to the server.
(March 2023, 24)
Ans. :
<DOCTYPE html>
<html>
<heads
<title>
City Hospital
</title>
<body>
<form name="f1">
Enter Name of Hospital
<input type="text" name="t1"><br><br>
Enter Enmail ld
<input type="email" name="t2"><br><br>
Enter Number of beds in hospital
<inputtype="number" name="t3"><br><br>
<input type-"submit" name="b1">
</form>
</body>
</html>
23. Writea html program to create Registration Form to accept name, mobile number,
date of birth. The form should have register caption on the button to submit data.
(March 2024)
Ans.:
Coding:
<!DOCTYPE HTML>
<html>
khead>
<title>
Registration Form
</title>
</head>
body>
|<hl align="center"'>Registration Form</hl>
<form name="f1">
21. Write HTMLcode to display alist of any student names
using relevant list tags. having 4 to 1 nrnbe%
(March 2023)
Ans. :

<!DOCTYPE html>
<html>
<head>
<title>
List of Student Names
</title>
</head>
<body>
<hl align="center"> Name of Students in XII IT</hl>
<ol reversed>
<li>Pooja Chavan</li>
<li>Amit Sharma</li>
<li>Mahesh Verma</li>
<li>Nitin Singh</li>
</ol>
</body>
</html>
TPSInformation Technology 1-123 Chapter 1
19. Write html program to display "Save
30 pixel font size. Add any two sent Water" in blue color with dotted border and
color. Use Internal CSS. about how to save water in apara in gree
Ans. :
(March 2023, 24)
<DOCTYTE htnmls
<html>
<head
<titles
Save Water
</title>
<stvles

hl{color:blue;border-style:dotted;font-size:30px}
plcolor:green)
</stvle>
</head
<body>
<hl align="center">Save Water</hl>
<p>
<p align="right">
Earth is the only known planet in this universe where life is possible only because of
the availability of water and oxygen. Water is most important necessity of life for all
the living beings on the earth. Without water no one can exist even for aday. We also
know that there is very less percentage of clean water means drinking water available
on the earth. So, we should not waste clean water and save it for future generations.
</p>
</body>
</html>
20. Write a html program to accept student Id (combination of alphabets and
umbers), date of joining college,percentage in previous class (in digits). The data
should be sent to the server. (March 2023, 24)
Ans.
<!DOCTYPEhtml>
<html>
<head>
<title>
Student Information
no(ln numbey
16. Write a html program to create a form to accept students rollmarksmaximum
format), Unit test marks(maximum 30 marks), Terminal exam
and send the data to the server
80 marks). Include the namne of the Subject teacher (March 2022, 23, 24)
Ans. : Coding :
<ldoctype html>
<html>
<head>
<title>
Student Details
</title>
</head>

<body>
<hlalign="center">Student Details</hl>
<form name="f1">
Enter RollNo of Student
<input type='number" name="r1"s<br><br>
TPS Infornmation Technology Chapter l
Marks
Enter UnitTest
<input type-"number" name-"1" max-"30"><brschr
Enter TerminalMarks
<input pe-"'number"name-"2" max="80"><br>br
Enter Name of the Subject Teacher
<input vpe="text" name="t3"><br»<brs
kinputtype"submit" name="b1">
torm>
</bodv>
</html>

Output:
S Student Details X

File F/TPS%202022-23/examples/[Link]

Student Details
Enter RolNoof Student

Enter Unt Test Marks

Enter Terminal Marks

Enter Name of the Subject Teacher

Submit

17.
Write a htmlprogram to display "T-20 Cricket Match" inbold format and Calibri
tont. Add any two sentence about "Cricket" subject below in orange color.
Design this using internal CSS. (March 2023, 24)
Ans. :
<!DOCTYPE html>
<html>
TPSInformation Technology 1-119 Chapter 1

15. write a html programto acceptName of the Employee (cannot be blank), Email
Id of the Employee, Salary (maximum 40000). The data should be sent to the
server. (March 2022, 23, 24)
Ans.: Coding:

<ldoctypehtmls
khtml>

<head>

<titles
EmployeeDetails
k/title>
k/head>

<body>
khl align='center">Employee Details</h1>
<form name="f1"

Enter Name of Employee


|<input type="text" name="t1" required><br><br>
Enter Email ID
Kinput type="email" name="t2"><br><br>

Enter Salary of Employee


Kinput type="number" name="t3" max="40000"><br><br>
Kinput type="'submit" name="bl"'>
k/form>
</body>
</html>
TPSInformation Technology 1-118

14. Chapter
Write a html program to create registration form to accept namne, mobile no. A..
of [Link] form should have register caption on the button to submit the d

Ans. : Coding :
(March 2022, 23, 2A
<ldoctype html>
<html>
<head>
ktitle>
Registration Form
/title>
</head>
<body>
<hl align='center">Registration Form</hl>
<form name="f1">
Enter Name
|<input type="'text" name="t1"><br><br>,
Enter Mobile Number
<input type="tel" name="2" pattern="[0-9]{10}"><br><br>
|Select Date of Birth
<inputtype='date" name-"t3"><br><br>
<input type="'submit" name="b1" value="Register">
k/form>
</body>
</html>
Output:
X
S lo X| List X

OFile F/TPS%202022-23/h. e . D

Registration Form
Enter Name

Enter Mobile Number

Select Date of Birth dd -mi -yyyy D

Register

Common questions

Powered by AI

Internal CSS provides several benefits over inline CSS, such as maintaining a cleaner and more structured HTML document. It applies consistent styles across an entire document from a central location, which is crucial in educational or institutional contexts for maintaining uniformity across pages handling student data or academic submissions. Internal CSS allows properties like font size and color to be controlled more flexibly, reducing redundancy and enhancing performance by minimizing repetitive coding .

Semantic HTML elements, such as using '<form>', '<input>', and properly labeling these with semantics, help search engines understand page structure better, thereby improving SEO. For users, it enhances form clarity and accessibility. Elements like '<legend>' and '<label>' ensure screen readers can discern each field's purpose, improving the experience for visually impaired users. Such semantic structuring aids information retrieval by optimizing the understanding of a webpage's content by both bots and users, leading to improved accessibility and search ranking .

HTML can be enhanced using internal CSS for styling elements and providing functional UI components like submit buttons and input validations. For example, one can create a registration form with well-defined input fields and validation patterns for elements like mobile numbers and email addresses ensuring accurate data capture before submission . Additionally, forms can be styled using CSS to set fonts, colors, and borders for a professional and consistent look .

Using internal CSS, we can style HTML text to enhance visibility and thematic presentation. For instance, important messages like 'Save Water' can be displayed in blue with a dotted border and 30-pixel font size to make it stand out, while supporting paragraphs are styled in green to maintain thematic consistency . Choosing appropriate font sizes, colors, and text alignments helps convey information effectively.

Different list types significantly impact user navigation and comprehension by structuring information based on logical order or priority. Educational websites benefit from unordered lists for equal-status content, like program offerings, while ordered lists can present sequences, such as steps in a learning pathway. This facilitates effective user navigation by providing clear and immediate context to list entries, enhancing the educational experience . Proper list usage reflects meticulous information organization and can drive better engagement.

Unordered lists are often used when there is no specific priority or sequence, making them apt for representing items like available search engines. Ordered lists, which convey rank or order, are ideal for hierarchical data or processes, such as listing social media platforms by user engagement metrics . This choice enhances readability, allowing users to quickly grasp the relational context of items listed.

HTML forms can ensure data validity and cleanliness through input types and attributes like ‘required’ and ‘pattern’. Input type ‘email’ automatically checks for a valid email format, while ‘number’ can specify ranges or maximum values. Additional patterns can be set for specific data, such as phone numbers, using regex-like formats . By employing such methodologies, erroneous user inputs are minimized, maintaining data integrity when sent to the server.

Lists can be used to organize and segment content logically on web pages. Unordered lists are effective for items without inherent order, like search engines, whereas ordered lists define sequences, suitable for rank-based content like social media sites. For scientific profiles, alphabetical ordering using types like 'a' can efficiently organize such content . These practices facilitate better readability and a structured presentation.

HTML forms can be optimized for mobile responsiveness by using CSS media queries to adjust inputs’ widths and button sizes according to screen dimensions ensuring usability on various devices. Accessibility considerations include correct HTML5 input types, labels, and utilizing attributes like ‘aria-label’ for screen readers to improve usability for users with disabilities . Such optimizations lead to forms that are easier to navigate on small screens and accessible for all users.

HTML allows the integration of external content through the use of inline frames (iframes), which can display content from another HTML document within a page. This technique is beneficial for embedding videos, maps, and dynamic web applications. By setting specific dimensions for the iframe, such as 300 by 300 pixels, you can ensure the content fits neatly within the page layout . Utilizing iframes saves time, bandwidth, and enhances user interaction by avoiding redirections.

You might also like