首页web用表格写一个登录页面

web用表格写一个登录页面

时间: 2023-08-14 18:04:31 浏览: 38

以下是一个简单的登录页面的HTML代码，使用了表格布局： ```html <!DOCTYPE html> <html> <head> <title>Login Page</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> form { display: table; margin: auto; border-collapse: collapse; } label, input { display: table-row; padding: 10px; border-bottom: 1px solid #ddd; } input[type="submit"] { margin-top: 10px; background-color: #4CAF50; color: white; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; } input[type="submit"]:hover { background-color: #3e8e41; } </style> </head> <body> <form action="" method="POST"> <label for="username">Username:</label> <input type="text" id="username" name="username"> <label for="password">Password:</label> <input type="password" id="password" name="password"> <input type="submit" value="Submit"> </form> </body> </html> ``` 这个表格布局中，`form` 元素作为表格容器，包含两个 `label` 元素和两个 `input` 元素作为表格行。其中，`for` 属性和 `id` 属性相同的 `label` 元素与相应的 `input` 元素关联，实现了点击 `label` 元素也能聚焦到相应的 `input` 元素的效果。最后一个 `input` 元素是类型为 `submit` 的按钮，点击后提交表单。