以下是一个简单的构建工程领域失信人查询网站的HTML代码示例:
html
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
main {
padding: 20px;
}
form {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 20px;
}
input[type="text"] {
width: 300px;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
background-color: #333;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
#result {
border: 1px solid #ccc;
padding: 10px;
border-radius: 5px;
white-space: pre-wrap;
}
const searchForm = document.getElementById('searchForm');
const resultDiv = document.getElementById('result');
searchForm.addEventListener('submit', (event) => {
event.preventDefault();
const nameInput = document.getElementById('nameInput');
const name = nameInput.value.trim();
if (name) {
// 这里应该添加查询失信人的逻辑
// 例如发送 AJAX 请求到后端服务接口
// 并在这里显示查询结果
resultDiv.textContent = `未找到名为"${name}"的失信人信息。`;
} else {
resultDiv.textContent = '请输入姓名或企业名称。';
}
});
这个网站包含了一个简单的查询表单,用户可以输入姓名或企业名称进行查询。查询结果会显示在下方的结果区域。
当用户提交查询时,JavaScript 代码会阻止默认的表单提交行为,并根据输入的内容显示相应的结果。实际的查询逻辑需要添加到 JavaScript 代码中,例如发送 AJAX 请求到后端服务接口并显示查询结果。
这个示例代码提供了一个基本的结构,您可以根据具体的需求和设计要求进行扩展和优化。
查看详情
查看详情