html 实现登录页面 字段为:登录名称,密码,姓名
时间: 2023-05-15 14:07:33 浏览: 65
可以使用以下代码实现一个简单的登录页面:
```html
<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
</head>
<body>
<h1>Login</h1>
<form action="login.php" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username"><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br><br>
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>
<input type="submit" value="Login">
</form>
</body>
</html>
```
其中,`action` 属性指定了表单提交的地址,`method` 属性指定了提交方式为 POST。表单中包含了三个字段:`username`、`password` 和 `name`,分别对应登录名称、密码和姓名。当用户点击登录按钮时,表单数据将被提交到 `login.php` 页面进行处理。
相关问题
html 实现登录页面,字段有:登录名称,密码,姓名,性别,联系方式
好的,以下是一个简单的 HTML 登录页面的代码:
```
<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
</head>
<body>
<h2>Login</h2>
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username"><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br><br>
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>
<label for="gender">Gender:</label>
<select id="gender" name="gender">
<option value="male">Male</option>
<option value="female">Female</option>
</select><br><br>
<label for="contact">Contact:</label>
<input type="text" id="contact" name="contact"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
```
这个页面包含了登录名称、密码、姓名、性别和联系方式这些字段,用户可以在表单中输入这些信息并提交。
html 实现登录页面,字段有:登录名称,密码,姓名,性别,联系方式, 用户在选择页面的文本框时,文本框的背景颜色发生变化,如果选择其他文本框时,原来选择的文本框的颜色恢复为原始状态
可以使用 HTML 和 CSS 实现这个登录页面。以下是一个示例代码:
```
<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
<style>
body {
background-color: #f2f2f2;
}
form {
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
width: 400px;
margin: 0 auto;
}
input[type="text"], input[type="password"], input[type="tel"] {
display: block;
margin-bottom: 10px;
padding: 10px;
border: none;
border-radius: 5px;
background-color: #f2f2f2;
width: 100%;
box-sizing: border-box;
transition: background-color 0.3s ease;
}
input[type="text"]:focus, input[type="password"]:focus, input[type="tel"]:focus {
background-color: #e6e6e6;
}
input[type="submit"] {
background-color: #4CAF50;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
input[type="submit"]:hover {
background-color: #3e8e41;
}
</style>
</head>
<body>
<form>
<label for="username">登录名称:</label>
<input type="text" id="username" name="username" required>
<label for="password">密码:</label>
<input type="password" id="password" name="password" required>
<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="male">男</option>
<option value="female">女</option>
</select>
<label for="tel">联系方式:</label>
<input type="tel" id="tel" name="tel" required>
<input type="submit" value="登录">
</form>
</body>
</html>
```
在这个示例代码中,我们使用了 HTML 的表单元素来创建登录页面。每个字段都有一个 label 元素来描述它的作用,以及一个对应的 input 元素来接收用户输入。我们使用 CSS 来设置输入框的样式,包括背景颜色、边框、圆角等。当用户选择一个文本框时,我们使用 CSS 的 :focus 伪类来改变它的背景颜色。最后,我们使用 CSS 来设置提交按钮的样式,并使用 JavaScript 或服务器端代码来处理表单提交的数据。