<form action="/register" method="POST"> <input type="text" class="form-control" name="username" id="username" placeholder="请输入常用邮箱"/> </form> 怎么把username个输入框的右边大概3分之一的位置换成一个下拉的列表 可以选择对应的邮箱后缀,并在选择后 可以跟输入的内容一起传到后台
时间: 2023-05-14 20:05:51 浏览: 84
你可以使用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类来实现输入框和下拉列表的组合。在选择邮箱后缀后,可以通过表单提交将输入框和下拉列表的值一起传到后台。
相关问题
<form action="register.action" method="post"> <div class="register-top-grid"> <h3>注册新用户</h3> <div class="input"> <span>用户名 <label style="color:#15ec72;">不能为空</label></span> <input type="text" name="uname" placeholder="请输入用户名" required="required"> </div> <div class="input"> <span>真实姓名 <label style="color:#15ec72;">不能为空</label></span> <input type="text" name="urealname" placeholder="请输入真实姓名" required="required"> </div> <div class="input"> <span>密码 <label style="color:#15ec72;">不能为空</label></span> <input type="password" name="upwd" placeholder="请输入密码" required="required"> </div> <div class="input"> <span>收货电话<label></label></span> <input type="text" name="uphone" placeholder="请输入收货电话"> </div> <div class="input"> <span>收货地址<label></label></span> <input type="text" name="uaddress" placeholder="请输入收货地址"> </div> <div class="clearfix"> </div> </div> <div class="register-but text-center"> <input type="submit" value="提交"> <div class="clearfix"> </div> </div> </form>
好的,请看下面美化过的代码:
```html
<form action="register.action" method="post">
<div class="register-top-grid">
<h3>注册新用户</h3>
<div class="input">
<span>用户名 <label style="color:#15ec72;">不能为空</label></span>
<input type="text" name="uname" placeholder="请输入用户名" required="required">
</div>
<div class="input">
<span>真实姓名 <label style="color:#15ec72;">不能为空</label></span>
<input type="text" name="urealname" placeholder="请输入真实姓名" required="required">
</div>
<div class="input">
<span>密码 <label style="color:#15ec72;">不能为空</label></span>
<input type="password" name="upwd" placeholder="请输入密码" required="required">
</div>
<div class="input">
<span>收货电话<label></label></span>
<input type="text" name="uphone" placeholder="请输入收货电话">
</div>
<div class="input">
<span>收货地址<label></label></span>
<input type="text" name="uaddress" placeholder="请输入收货地址">
</div>
<div class="clearfix"></div>
</div>
<div class="register-but text-center">
<input type="submit" value="提交">
<div class="clearfix"></div>
</div>
</form>
```
代码美化后更加清晰易读,缩进、空格等都被处理得很好。
<div class="col-md-6 wow fadeInRight"> <from action="#" method="post"> <div class="col-md-6"> <input type="text" class="form-control" placeholder="您的姓名"> </div> <div class="col-md-6"> <input type="email" class="form-control" placeholder="您的邮箱"> </div> <div class="col-md-12"> <input type="text" class="form-control" placeholder="标题"> </div> <div class="col-md-12"> <textarea class="form-control" rows="4" placeholder="请输入内容"></textarea> </div> <div class="col-md-8"> <input type="submit" class="form-control" value="提交"> </div> </from> </div>根据代码,用jQuery写一个简单的提交成功的网页提示
可以使用 jQuery 的 `submit()` 方法监听表单提交事件,并在成功提交后使用 `append()` 方法动态添加提示信息。
HTML 代码:
```html<div class="col-md-6 wow fadeInRight">
<form action="#" method="post" id="contact-form">
<div class="col-md-6">
<input type="text" class="form-control" placeholder="您的姓名">
</div>
<div class="col-md-6">
<input type="email" class="form-control" placeholder="您的邮箱">
</div>
<div class="col-md-12">
<input type="text" class="form-control" placeholder="标题">
</div>
<div class="col-md-12">
<textarea class="form-control" rows="4" placeholder="请输入内容"></textarea>
</div>
<div class="col-md-8">
<input type="submit" class="form-control" value="提交">
</div>
</form>
</div>
<div id="success-message"></div>
```
jQuery 代码:
```javascript
$(document).ready(function() {
$('#contact-form').submit(function(e) { // 监听表单提交事件
e.preventDefault(); // 阻止默认提交行为
$.ajax({
url: 'submit.php', // 提交表单的 PHP 文件
type: 'post',
data: $('#contact-form').serialize(), // 序列化表单数据
success: function(response) {
$('#contact-form').hide(); // 隐藏表单
$('#success-message').append('<p>提交成功!</p>'); // 添加提示信息
},
error: function() {
alert('提交失败,请稍后再试!'); // 提交失败的处理
}
});
});
});
```
其中,需要将 `submit.php` 替换为实际的提交表单的 PHP 文件路径。