<div id="main"> <form method="post" action="/submit"> <!-- 每个表单元素放在一个 form-row div 中 --> <div class="form-row"> <label for="line">确认线别:</label> <input type="text" name="line" id="line" placeholder="请选择线别"/> </div> <div class="form-row"> <label for="date">确认日期:</label> <input type="date" name="date" id="date"/> </div> <div class="form-row"> <label for="model">异常机种:</label> <input type="text" name="model" id="model" placeholder="请输入机种"/> </div>
时间: 2024-03-23 21:43:09 浏览: 154
您可以添加CSS样式来美化表单,例如使用以下代码:
```
#main {
max-width: 500px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.form-row {
display: flex;
flex-direction: column;
margin-bottom: 15px;
}
label {
font-weight: bold;
margin-bottom: 5px;
}
input[type="text"],
input[type="date"] {
padding: 10px;
border: none;
border-radius: 5px;
background-color: #f9f9f9;
font-size: 16px;
color: #333;
}
input[type="text"]::placeholder {
color: #999;
}
input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-calendar-picker-indicator {
display: none;
}
input[type="date"] {
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
}
```
将以上代码添加到您的CSS文件中,就可以美化表单。请注意,这只是一种基本的样式,您可以根据需要进行修改或添加其他样式。
阅读全文
相关推荐




<!doctype html> <html lang="en" dir="ltr" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content="ceosdesigns.sk"> <title>登录</title> </head> <body> <main id="page-content" class="d-flex nm-aic nm-vh-md-100"> 书画展览管理系统 <form th:action="@{/loginUser}" method="post"> 登录 输入您的账户和密码以访问帐户 <label for="username">账户</label> <input type="text" class="form-control" id="username" name="username" tabindex="1" placeholder="请输入有效账户" required> <label for="password"> 密码 </label> <input type="password" class="form-control" tabindex="2" placeholder="请输入密码" id="password" name="password" required> <label for="username">账户</label> <select class="form-select" name="type"> <option value="1" selected>管理员</option> <option value="2">用户</option> </select> <button type="submit" class="btn btn-primary btn-block nm-hvr nm-btn-1"> 登录</button> </form> </main> <script src="login/js/jquery-3.6.0.min.js"></script> <script src="login/js/bootstrap.bundle.min.js"></script> <script src="login/js/script.js"></script> </body> </html>登录页面如何实现的

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>异常记录</title> </head> <body> 首页 登记数据 查询数据 查询数据 异常记录登记 <form method="post" action="/https/wenku.csdn.net/submit"> <label for="line">确认线别:</label> <input name="line" class="layui-input" placeholder="请选择线别" /> <label for="date">确认日期:</label> <input type="date" name="date" id="date" /> <label for="model">异常机种:</label> <input type="text" name="model" id="model" placeholder="请输入机种"/> <label for="prod_line">异常现象:</label> <input type="text" name="prod_line" id="prod_line" placeholder="请输入现象"> <label for="prod_date">生产日期:</label> <input type="date" name="prod_date" id="prod_date"> <label for="shift">生产班别:</label> <select name="shift" id="shift"> <option value="白班">白班</option> <option value="夜班">夜班</option> </select> <label for="prod_line_2">生产线别:</label> <input type="text" name="prod_line_2" id="prod_line_2"> <label for="responsible">责任人:</label> <input type="text" name="responsible" id="responsible" placeholder="请输入责任人"> <button type="submit">提交</button> </form> </body> </html>

請你按照上面要求將這段代碼重新修改,左邊為菜單欄,右邊是表格登記<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>异常记录</title> <style> .main { display: flex; flex-direction: row; justify-content: space-between; align-items: center; float: right; } .info { display: flex; align-items: center; } .info span { margin-right: 10px; } </style> </head> <body> 首页 登记数据 查询数据 异常记录登记 <form method="post" action="/https/wenku.csdn.net/submit"> <label>确认线别:</label> <input type="text" name="line">
<label>确认日期:</label> <input type="date" name="date">
<label>异常机种:</label> <input type="text" name="model">
<label>异常现象:</label> <textarea name="issue"></textarea>
<label>生产日期:</label> <input type="date" name="prod_date">
<label>生产班别:</label> <input type="text" name="shift">
<label>生产线别:</label> <input type="text" name="prod_line">
<label>责任人:</label> <input type="text" name="responsible">
<input type="submit" value="提交"> </form> 欢迎访问
</body> </html>

<%--
Created by IntelliJ IDEA.
User: Administrator
Date: 2025/6/4
Time: 22:04
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="java.sql.*"%>
<html>
<head>
<title>Title</title>
<style>
body{
background-color: aquamarine;
}
.main{
background-color: antiquewhite;
margin:0 auto;
width:60%;
padding-left: 40px;
padding-right: 40px;
}
.main div{
background-color: #F0F8FF;
padding:10px;
}
</style>
</head>
<body>
<%
response.setContentType("text/html;charset=UTF-8");
request.setCharacterEncoding("utf-8");
String bookid = request.getParameter("bookid");
Class.forName("com.mysql.jdbc.Driver");
String url = "jdbc:mysql://localhost:3306/book";
String un = "root";
String pass = "root";
Connection con = DriverManager.getConnection(url,un,pass);
String sql = "select * from books where id = ?" ;
PreparedStatement pre = con.prepareStatement(sql);
pre.setString(1,bookid);
ResultSet rs = pre.executeQuery();
while(rs.next()){
String id = rs.getString("id");
String urls = rs.getString("url");
String name = rs.getString("bookname");
String writer = rs.getString("writer");
String syn = rs.getString("syn");
float price = rs.getFloat("price");
String stock = rs.getString("stock");
%>
<form action="BOOKXIUGAI_OK.jsp?id=<%=id%>" method="post">
图片:<input type="text" name="urls" value="<%=urls%>">
ID:<input type="text" name="id" disabled="disabled" value="<%=id%>">
商品名:<input type="text" name="name" value="<%=name%>">
品类:<input type="text" name="writer" value="<%=writer%>">
简介:<textarea type="text" name="syn" rows="4" cols="50"><%=syn%></textarea>
价格:<input type="text" name="price" value="<%=price%>">元/件
库存:<input type="text" name="stock" value="<%=stock%>">
<input type="submit" name="submit" value="提交">
删除此书
</form>
<%
}pre.close();rs.close();
%>
</body>
</html>
简单优化一下不要太复杂












