bootstrap form样式及数据提交
时间: 2023-07-16 15:14:59 浏览: 62
Bootstrap是一个流行的前端框架,提供了很多现成的样式和组件,包括表单样式。下面是一个使用Bootstrap表单样式的示例:
```html
<form>
<div class="form-group">
<label for="inputName">Name</label>
<input type="text" class="form-control" id="inputName" placeholder="Enter your name">
</div>
<div class="form-group">
<label for="inputEmail">Email address</label>
<input type="email" class="form-control" id="inputEmail" placeholder="Enter email">
</div>
<div class="form-group">
<label for="inputPassword">Password</label>
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
```
在这个例子中,我们使用了Bootstrap提供的form-group和form-control类来创建表单元素。form-group类用于包装表单元素,而form-control类用于添加输入框的样式。
要提交表单数据,你可以使用JavaScript或者后端编程语言来处理表单。下面是一个使用JavaScript提交表单数据的示例:
```html
<form id="myForm">
<div class="form-group">
<label for="inputName">Name</label>
<input type="text" class="form-control" id="inputName" placeholder="Enter your name">
</div>
<div class="form-group">
<label for="inputEmail">Email address</label>
<input type="email" class="form-control" id="inputEmail" placeholder="Enter email">
</div>
<div class="form-group">
<label for="inputPassword">Password</label>
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<script>
document.getElementById("myForm").addEventListener("submit", function(event) {
event.preventDefault(); // 阻止表单默认提交行为
var name = document.getElementById("inputName").value;
var email = document.getElementById("inputEmail").value;
var password = document.getElementById("inputPassword").value;
// 在这里使用Ajax或者其他方式提交表单数据
});
</script>
```
在这个例子中,我们使用了addEventListener函数来监听表单的submit事件,并且阻止了表单的默认提交行为。然后,我们获取了表单元素的值,并且可以使用Ajax或者其他方式来提交表单数据。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>登录界面</title> <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> <form method="post" action="${pageContext.request.contextPath}/login/judgeLogin"> 欢 迎 登 录 <label class="control-label"> 用户名: <input type="text" class="form-control" name="userName" id="userName" autocomplete="off" placeholder="请输入用户名"> </label> <label class="control-label"> 密码: <input type="password" class="form-control" name="userPwd" id="userPwd" autocomplete="off" placeholder="请输入密码"> </label> 注册账号 <button type="submit" class="btn btn-primary">登录</button> </form> <script> function jumpRegister() { window.location = "${pageContext.request.contextPath}/register/index"; } </script> </body> </html>
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)