<form action="/register" method="POST"> <input type="text" class="form-control" name="username" id="username" placeholder="请输入常用邮箱"/> </form> 怎么把username个输入框的右边大概3分之一的位置换成一个下拉的列表 可以选择对应的邮箱后缀,并在选择后 可以跟输入的内容一起传到后台
时间: 2023-05-14 15:05:51 浏览: 211
你可以使用HTML的select标签来创建下拉列表,代码如下:
<form action="/register" method="POST">
<div class="input-group">
<input type="text" class="form-control" name="username" id="username" placeholder="请输入常用邮箱"/>
<div class="input-group-append">
<select class="form-control" name="email_suffix">
<option value="@qq.com">@qq.com</option>
<option value="@163.com">@163.com</option>
<option value="@gmail.com">@gmail.com</option>
<option value="@hotmail.com">@hotmail.com</option>
</select>
</div>
</div>
</form>
这里使用了Bootstrap的input-group和input-group-append类来实现输入框和下拉列表的组合。在选择邮箱后缀后,可以通过表单提交将输入框和下拉列表的值一起传到后台。
相关问题
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>登录界面</title> <!-- 引入 Bootstrap --> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <style type="text/css"> .divForm{ position: absolute; width: 300px; height: 280px; top: 30%; left: 40%; margin-top: 1px; margin-left: 5px; } .title{ width:100%; height:50px; font-size:38px; line-height:50px; margin-bottom:20px; font-family: 华文宋体; color: cornflowerblue; } </style> </head> <body> <div class="divForm"> <form method="post" action="${pageContext.request.contextPath}/login/judgeLogin"> <div class="title" > 欢 迎 登 录</div> <div class="form-group has-success has-feedback"> <label class="control-label"> 用户名: <input type="text" class="form-control" name="userName" id="userName" autocomplete="off" placeholder="请输入用户名"> </label> </div> <div class="form-group has-success has-feedback"> <label class="control-label"> 密码: <input type="password" class="form-control" name="userPwd" id="userPwd" autocomplete="off" placeholder="请输入密码"> </label> </div> <div > <a onclick="jumpRegister()"> 注册账号</a> <button type="submit" class="btn btn-primary">登录</button> </div> </form> </div> <script> function jumpRegister() { window.location = "${pageContext.request.contextPath}/register/index"; } </script> </body> </html>
这是一个JSP页面,用于展示登录界面。页面引入了Bootstrap框架,并通过CSS样式设置了登录表单的位置、大小、背景颜色等。表单中包含了用户名和密码输入框,以及登录和注册按钮。登录按钮提交表单数据到服务器进行验证,而注册按钮则跳转到注册界面。这段代码中还涉及了EL表达式和JSTL标签库的使用,用于获取上下文路径和设置表单提交的URL地址。
1、注册页面及功能 a.用户名输入框,有提示信息; b.密码输入框,有提示信息,输入类型设置为密码文本属性; c.注册按钮; e.注册完成跳转到登录页面程序代码
以下是一个简单的注册页面和功能的示例代码,您可以参考一下:
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<title>注册页面</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>注册页面</h2>
<form method="post" action="register.php">
<div class="form-group">
<label for="username">用户名:</label>
<input type="text" class="form-control" id="username" placeholder="请输入用户名" name="username" required>
</div>
<div class="form-group">
<label for="password">密码:</label>
<input type="password" class="form-control" id="password" placeholder="请输入密码" name="password" required>
</div>
<button type="submit" class="btn btn-primary">注册</button>
</form>
</div>
</body>
</html>
```
PHP代码(保存为register.php文件):
```
<?php
// 连接数据库代码
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "myDB";
// 创建连接
$conn = mysqli_connect($servername, $username, $password, $dbname);
// 检测连接
if (!$conn) {
die("连接失败: " . mysqli_connect_error());
}
// 获取表单提交的数据
$username = $_POST['username'];
$password = $_POST['password'];
// 在此处添加表单验证代码,以确保用户名和密码符合要求
// 插入数据到数据库的代码
$sql = "INSERT INTO users (username, password) VALUES ('$username', '$password')";
if (mysqli_query($conn, $sql)) {
// 注册成功,跳转到登录页面
header('Location: login.php');
} else {
echo "Error: " . $sql . "<br>" . mysqli_error($conn);
}
mysqli_close($conn);
?>
```
请注意,上述代码仅提供了一个基本的示例,您需要根据自己的需求进行修改和完善。同时,为了保障安全,建议您在编写代码时,使用预处理语句和密码加密等措施来避免 SQL 注入和密码泄露等安全问题。
阅读全文
相关推荐








