html制作查询界面
时间: 2023-08-22 17:24:01 浏览: 40
HTML 可以用来制作查询界面,以下是一个简单的示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>查询界面</title>
</head>
<body>
<h1>查询界面</h1>
<form>
<label for="name">姓名:</label>
<input type="text" id="name" name="name"><br><br>
<label for="age">年龄:</label>
<input type="number" id="age" name="age"><br><br>
<label for="gender">性别:</label>
<select id="gender" name="gender">
<option value="male">男</option>
<option value="female">女</option>
</select><br><br>
<input type="submit" value="查询">
</form>
</body>
</html>
```
这个查询界面包含了三个输入框和一个下拉框,用户可以输入姓名、年龄和性别来进行查询。当用户点击查询按钮时,表单将会被提交到服务器端进行处理。
相关问题
html制作查询界面,查询按钮下面显示表格
好的,下面是一个简单的HTML查询界面的示例代码,点击查询按钮后会在下面显示一个表格:
```html
<!DOCTYPE html>
<html>
<head>
<title>查询界面</title>
</head>
<body>
<h1>查询界面</h1>
<form onsubmit="return showTable();" id="query-form">
<label for="query">请输入查询关键字:</label>
<input type="text" id="query" name="query"><br><br>
<label for="category">请选择查询分类:</label>
<select id="category" name="category">
<option value="all">所有分类</option>
<option value="category1">分类1</option>
<option value="category2">分类2</option>
<option value="category3">分类3</option>
</select><br><br>
<button type="submit">查询</button>
</form>
<div id="results-table"></div>
<script>
function showTable() {
var query = document.getElementById("query").value;
var category = document.getElementById("category").value;
// 模拟查询结果
var results = [
{ name: "结果1", category: "分类1", description: "这是结果1的描述" },
{ name: "结果2", category: "分类2", description: "这是结果2的描述" },
{ name: "结果3", category: "分类3", description: "这是结果3的描述" },
];
// 构造表格
var table = "<table><tr><th>名称</th><th>分类</th><th>描述</th></tr>";
for (var i = 0; i < results.length; i++) {
var result = results[i];
if (category == "all" || result.category == category) {
table += "<tr><td>" + result.name + "</td><td>" + result.category + "</td><td>" + result.description + "</td></tr>";
}
}
table += "</table>";
// 显示表格
document.getElementById("results-table").innerHTML = table;
// 阻止表单提交
return false;
}
</script>
</body>
</html>
```
这个查询界面和上面的示例类似,但是增加了一个div元素用于显示查询结果表格。当用户点击提交按钮时,调用了一个名为“showTable()”的JavaScript函数,该函数获取查询关键字和查询分类,模拟查询结果,构造表格,并将表格插入到div元素中显示出来。最后,该函数返回false,阻止表单提交。
HTML制作登陆界面
好的,制作登陆界面需要用到HTML、CSS和JavaScript。下面是一个简单的登陆界面的HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="login-box">
<h2>Login Here</h2>
<form>
<p>Username</p>
<input type="text" name="username" placeholder="Enter Username">
<p>Password</p>
<input type="password" name="password" placeholder="Enter Password">
<input type="submit" name="submit" value="Login">
<a href="#">Forgot Password</a><br>
<a href="#">Don't have an account? Sign up</a>
</form>
</div>
</body>
</html>
```
其中,`<link>` 标签用于引入样式表,样式表的代码如下:
```css
body {
margin: 0;
padding: 0;
background: #f1f1f1;
}
.login-box {
width: 320px;
height: 420px;
background: #fff;
color: #000;
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
box-sizing: border-box;
padding: 70px 30px;
}
h2 {
margin: 0;
padding: 0 0 20px;
text-align: center;
font-size: 22px;
}
.login-box p {
margin: 0;
padding: 0;
font-weight: bold;
}
.login-box input {
width: 100%;
margin-bottom: 20px;
}
.login-box input[type="text"], input[type="password"] {
border: none;
border-bottom: 1px solid #000;
background: transparent;
outline: none;
height: 40px;
color: #000;
font-size: 16px;
}
.login-box input[type="submit"] {
border: none;
outline: none;
height: 40px;
background: #000;
color: #fff;
font-size: 18px;
border-radius: 20px;
}
.login-box input[type="submit"]:hover {
cursor: pointer;
background: #ffc107;
color: #000;
}
.login-box a {
text-decoration: none;
font-size: 14px;
color: #000;
}
.login-box a:hover {
color: #ffc107;
}
```
这个样式表定义了登陆界面的样式,包括背景颜色、登陆框的大小和位置、字体大小和颜色等。