To restrict user input to integers only (excluding decimals), use the folowing HTML input with an oninput handler that strips non-digit characters:
<input type="text" name="amount" id="amount" oninput="this.value = this.value.replace(/[^\d]/g, '')" placeholder="Numbers only">
For date inputs, the native type="date" provides a standardized picker and stores values in ISO format (YYYY-MM-DD):
<input type="date" name="expenseDate" id="expenseDate" style="width:200px; height:30px; font-size:20px">
A sample expense entry form anforces non-empty fields and numeric-only cost input:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
<head>
<meta charset="UTF-8">
<title>Add Expense</title>
</head>
<body>
<div align="center">
<form action="MainServlet?method=add" method="post" onsubmit="return validateForm()">
<label><font size="5">Expense Type:</font></label>
<input type="text" name="name" id="name" style="width:200px; height:30px; font-size:20px"><br/>
<label><font size="5">Amount (¥):</font></label>
<input type="text" name="cost" id="cost" style="width:200px; height:30px; font-size:20px"
oninput="this.value = this.value.replace(/[^\d]/g, '')" placeholder="Integers only"><br/>
<label><font size="5">Location:</font></label>
<input type="text" name="place" id="place" style="width:200px; height:30px; font-size:20px"><br/>
<label><font size="5">Date:</font></label>
<input type="date" name="time" id="time" style="width:200px; height:30px; font-size:20px"><br/>
<input type="submit" value="Save" style="width:50px; height:40px; font-size:15px">
</form>
</div>
<script>
function validateForm() {
const fields = [
{ id: 'name', msg: 'Expense type cannot be empty!' },
{ id: 'cost', msg: 'Amount cannot be empty!' },
{ id: 'place', msg: 'Location cannot be empty!' },
{ id: 'time', msg: 'Date cannot be empty!' }
];
for (const field of fields) {
if (document.getElementById(field.id).value === '') {
alert(field.msg);
return false;
}
}
return true;
}
</script>
</body>
</html>
The application uses a frameset layout for navigation:
index.html
<frameset rows="15%,*">
<frame src="top.html" />
<frameset cols="10%,*">
<frame src="left.html" />
<frame name="content" src="main.html" />
</frameset>
</frameset>
left.html (navigation menu)
<body bgcolor="#1E90FF">
<a href="addnote.jsp" target="content"><font size="5" color="black">Add Expense</font></a><br/><br/>
<a href="MainServlet?method=show" target="content"><font size="5" color="black">View Expenses</font></a><br/><br/>
<a href="findnote.jsp" target="content"><font size="5" color="black">Search Expenses</font></a><br/><br/>
</body>
top.html (header)
<body bgcolor="#1E90FF">
<div style="text-align:center; margin-top:10px">
<font size="7">Household Expense Tracker</font>
</div>
</body>
main.html (background)
<body background="img/zhangdan.jpg"
style="background-repeat:no-repeat; background-size:100% 100%; background-attachment:fixed;">
</body>
In the expense listing view, clicking any field (name, amount, location, or date) navigates to an edit page, while a delete button removes the record. Filtering is supported via a dedicaetd search interface.