写一个html面试信息登记表程序,带定位,带时间日期自动填入
时间: 2023-09-18 20:05:35 浏览: 87
### 回答1:
下面是一个简单的HTML面试信息登记表代码,其中包含定位和当前日期时间的自动填入功能:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>面试信息登记表</title>
</head>
<body>
<form>
<fieldset>
<legend>面试信息登记表</legend>
<p>
<label for="name">姓名:</label>
<input type="text" id="name" name="name" required>
</p>
<p>
<label for="email">邮箱:</label>
<input type="email" id="email" name="email" required>
</p>
<p>
<label for="phone">电话:</label>
<input type="tel" id="phone" name="phone" required>
</p>
<p>
<label for="location">位置:</label>
<input type="text" id="location" name="location" readonly>
</p>
<p>
<label for="datetime">日期时间:</label>
<input type="text" id="datetime" name="datetime" readonly>
</p>
<button type="submit">提交</button>
</fieldset>
</form>
<script>
// 获取定位信息
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
document.querySelector("#location").value =
"经度:" +
position.coords.longitude +
",纬度:" +
position.coords.latitude;
});
} else {
document.querySelector("#location").value = "定位不可用";
}
// 获取当前日期时间
function getCurrentDateTime() {
var now = new Date();
var year = now.getFullYear();
var month = now.getMonth() + 1;
var day = now.getDate();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds();
return (
year +
"-" +
(month < 10 ? "0" + month : month) +
"-" +
(day < 10 ? "0" + day : day) +
"
### 回答2:
下面是一个简单的HTML面试信息登记表程序,带有定位功能,并且可以自动填入时间和日期:
```html
<!DOCTYPE html>
<html>
<head>
<title>面试信息登记表</title>
<style>
form {
display: flex;
flex-direction: column;
align-items: center;
}
label {
margin-top: 10px;
}
input {
margin-top: 5px;
}
</style>
</head>
<body>
<h1>面试信息登记表</h1>
<form>
<label for="name">姓名:</label>
<input type="text" id="name" required>
<label for="email">电子邮件:</label>
<input type="email" id="email" required>
<label for="phone">电话:</label>
<input type="tel" id="phone" required>
<label for="position">应聘职位:</label>
<input type="text" id="position" required>
<label for="date">日期:</label>
<input type="text" id="date" disabled>
<label for="time">时间:</label>
<input type="text" id="time" disabled>
<input type="submit" value="提交">
</form>
<script>
// 获取当前日期和时间
var today = new Date();
var date = today.getFullYear() + '-' + (today.getMonth() + 1) + '-' + today.getDate();
var time = today.getHours() + ':' + today.getMinutes();
document.getElementById('date').value = date;
document.getElementById('time').value = time;
</script>
</body>
</html>
```
这个程序包含一个表单,包括姓名、电子邮件、电话和应聘职位等输入字段。日期和时间字段被设置为禁用,以防用户手动输入。在页面加载时,使用JavaScript获取当前日期和时间,并将它们填入对应的输入框中。用户可以通过填写表单并点击提交按钮来提交面试信息。
### 回答3:
HTML是一种用于构建网页的标记语言,无法直接实现需求中的定位和时间日期自动填入功能。但可以通过结合JavaScript来实现该功能。
首先,我们需要创建一个HTML表单来收集面试信息。根据题目要求,我们可以包含面试者的姓名、性别、年龄等信息。
```html
<!DOCTYPE html>
<html>
<head>
<title>面试信息登记表</title>
</head>
<body>
<h1>面试信息登记表</h1>
<form id="interviewForm">
<label for="name">姓名:</label>
<input type="text" id="name" name="name" required>
<label for="gender">性别:</label>
<select id="gender" name="gender" required>
<option value="">请选择</option>
<option value="男">男</option>
<option value="女">女</option>
</select>
<label for="age">年龄:</label>
<input type="number" id="age" name="age" required>
<input type="submit" value="提交">
</form>
<script>
// 获取当前时间日期
var currentDateTime = new Date();
// 将时间日期填入表单
document.getElementById("interviewForm").addEventListener("submit", function(event) {
event.preventDefault(); // 阻止表单默认提交行为
var name = document.getElementById("name").value;
var gender = document.getElementById("gender").value;
var age = document.getElementById("age").value;
// 在控制台输出面试信息
console.log("姓名: " + name);
console.log("性别: " + gender);
console.log("年龄: " + age);
console.log("面试时间: " + currentDateTime);
});
</script>
</body>
</html>
```
以上代码创建了一个简单的面试信息登记表。用户需要填写姓名、选择性别、输入年龄,并点击提交按钮。当用户点击提交按钮后,面试信息将打印在浏览器的控制台中,而时间日期将自动填入。请注意,这里使用了`<script>`标签中的JavaScript代码来实现时间日期的自动填入和打印面试信息的功能。
希望这个程序能够帮助你完成你的任务。如有其他问题,请随时提问。
阅读全文