bootstrap 表单提交方式

本文介绍了两种Bootstrap表单提交的方式:一是通过onclick事件调用JS函数,获取表单元素的value并发起请求;二是利用form的method和action属性直接提交表单。
摘要由CSDN通过智能技术生成
<div class="row">
		<div class="col-md-12">
			<div style="margin: 0 auto; max-width: 400px;">
				<ol class="breadcrumb">
					<li><a href="/user/list">通讯录</a></li>
					<li class="active">编辑用户</li>
				</ol>

				<div class="panel panel-default">
					<div class="panel-heading">
						<h3 class="panel-title">Profile of {
  {user.name}}</h3>
					</div>
					<div class="panel-body">
						<div class="form-group">
							<label for="name">中文名(可以附带上部门、工位号之类的做详细区分):</label> <input
							type="text" name="cnname" id="cnname" class="form-control"
							value="{
  {user.cnname}}" />
						</div>
						<div class="form-group">
							<label for="email">邮箱:</label> <input type="email" name="email"
							id="email" class="form-control" value="{
  {user.email}}" />
						</div>
						<div class="form-group">
							<label for="phone">手机:</label> <input type="text" name="phone"
							id="phone" class="form-control" value="{
  {user.phone}}" />
						</div>
						<div class="form-group">
							<label for="name">IM(内部通讯工具账号,比如微信、百度hi、米聊):</label> <input
							type="text" name="im" id="im" class="form-control"
							value="{
  {user.im}}" />
						</div>
						<div class="form-group">
使用Bootstrap表单提交,可以使用HTML中的form元素和相关属性进行操作。在Bootstrap中,可以使用以下代码来创建一个表单: ```html <form class="form-inline" role="form" method="post" action="/submit-url"> <div class="form-group"> <label for="inputName">Name:</label> <input type="text" class="form-control" id="inputName" name="name" placeholder="Enter your name"> </div> <div class="form-group"> <label for="inputEmail">Email:</label> <input type="email" class="form-control" id="inputEmail" name="email" placeholder="Enter your email"> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> ``` 这个示例中,我们使用了form元素,设置了method="post"来指定提交方法为POST,action="/submit-url"来指定表单提交后的目标URL。表单中有两个输入框,分别是name和email,并且有一个提交按钮。 当用户填写完表单后,点击提交按钮,表单数据将被发送到指定的URL进行处理。在服务器端,您可以通过相应的编程语言来接收和处理这些表单数据。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [Bootstrap使用模态框modal实现表单提交弹出框](https://blog.csdn.net/weixin_34293059/article/details/89224578)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [bootstrap 表单提交方式](https://blog.csdn.net/JackLiu16/article/details/82941617)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值