我有一个在谷歌工作表的Web应用程序中的一个HTML文件，我有2个必填字段，但用户仍然可以提交表单，而不是用"获取位置"按钮填充这些字段，即使它们是必填字段.这些字段是纬度和经度.
我试着go 掉占位符，也试着go 掉样式，但到目前为止什么都没起作用.
这里有一个指向表格的链接和代码:Sheet
以下是HTML代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-16">
<title>Google Sheet Form</title>
<style>
form {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
label {
font-weight: bold;
}
input[type="text"],
input[type="email"] {
padding: 0.5rem;
border: 2px solid gray;
border-radius: 0.5rem;
font-size: 2rem;
width: 100%;
}
/* Adjust Get Location button size */
button[type="button"] {
padding: 0.5rem;
border: none;
border-radius: 0.5rem;
font-size: 5rem; /* Change this value to adjust the font size */
background-color: green;
color: white;
cursor: pointer;
}
button[type="submit"] {
padding: 0.5rem;
border: none;
border-radius: 0.5rem;
font-size: 5rem;
background-color: blue;
color: white;
cursor: pointer;
}
button[type="submit"]:hover {
background-color: darkblue;
}
</style>
<script>
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
alert("Geolocation is not supported by this browser.");
}
}
function showPosition(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
document.getElementById("Latitude").value = latitude;
document.getElementById("Longitude").value = longitude;
}
function showSuccessMessage() {
const successMessage = document.getElementById('successMessage');
successMessage.style.display = 'block';
}
// I added this function.
function sample1(e) {
google.script.run.withFailureHandler(err => console.log(err))
.withSuccessHandler(f => {
const responseText = '{"result": "success"}';
const response = JSON.parse(responseText);
if (response.result === 'success') {
showSuccessMessage();
}
}).sample2(e);
}
</script>
</head>
<body>
<form>
<span>Logged In: <?= email ?></span>
<p> <input size="20" name="Email" type="email" placeholder="Email" required value="<?= email ?>" readonly> </p>
<p> <input size="20" type="text" id="Latitude" name="Latitude" required readonly> </p>
<p> <input size="20" type="text" id="Longitude" name="Longitude" placeholder="Longitude" required readonly> </p>
<p> <button size="20" type="button" onclick="getLocation()">Get Location</button> </p>
<p> <button size="20" type="submit" onclick="sample1(this.parentNode.parentNode); return false;">Sign In/Sign Out</button>
</p>
<!-- Add a div to display the success message -->
<div id="successMessage" style="display: none;">Form submitted successfully!</div>
<!-- Add a div to display the error message -->
<div id="errorMessage" style="display: none;">An error occurred. Please try again.</div>
</form>
</body>
</html>
我试着go 掉占位符，也试着go 掉样式，但到目前为止什么都没起作用.