通过new FormData提交简单数据

通过new FormData提交简单数据

效果示例图


代码

复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				padding: 0px;
				margin: 0px;
				box-sizing: border-box;
			}

			input,
			input:focus {
				border-radius: 4px;
				outline: none;
				padding: 0px 12px;
			}

			input::placeholder,
			input::-moz-placeholder,
			input::-webkit-input-placeholder {
				color: #999;
			}

			.form-wrap {
				width: 600px;
				margin: 12px auto;
			}

			.form-item {
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-bottom: 12px;
			}

			.form-item-label {
				width: 100px;
			}

			.form-item-content {
				--width: 100px;
				width: calc(100% - var(--width));
				display: flex;
				flex-direction: row;
				align-items: center;
			}

			.form-item-content input[type='text'] {
				border: 1px solid #dcdcdc;
				width: 100%;
				height: 40px;
			}

			.form-item-content input[type='radio'] {
				border: 1px solid #dcdcdc;
				width: 20px;
				height: 20px;
				margin-left: 12px;
				cursor: pointer;
			}

			.form-item-content label {
				margin-left: 12px;
			}

			.form-footer {
				width: 100%;
				display: flex;
				flex-direction: row;
				padding-left: 100px;
			}

			.form-btn {
				border: 1px solid #00a2ef;
				border-radius: 8px;
				width: 100px;
				height: 40px;
				margin-right: 12px;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<form class="form-wrap" id="myForm" name="myForm">
			<div class="form-item">
				<label class="form-item-label">姓名:</label>
				<div class="form-item-content">
					<input type="text" name="username" value="" />
				</div>
			</div>
			<div class="form-item">
				<label class="form-item-label">年龄:</label>
				<div class="form-item-content">
					<input type="text" name="userAge" value="" />
				</div>
			</div>
			<div class="form-item">
				<label class="form-item-label">性别:</label>
				<div class="form-item-content">
					<label for="woman">女</label>
					<input id="woman" type="radio" name="userSex" value="0" />
					<label for="man">男</label>
					<input id="man" type="radio" name="userSex" value="1" />
				</div>
			</div>
			<div class="form-item">
				<label class="form-item-label">孩子one:</label>
				<div class="form-item-content">
					<input type="text" name="children[0][name]" value="" />
				</div>
			</div>
			<div class="form-item">
				<label class="form-item-label">年龄one:</label>
				<div class="form-item-content">
					<input type="text" name="children[0][age]" value="" />
				</div>
			</div>
			<div class="form-item">
				<label class="form-item-label">孩子two:</label>
				<div class="form-item-content">
					<input type="text" name="children[1][name]" value="" />
				</div>
			</div>
			<div class="form-item">
				<label class="form-item-label">年龄two:</label>
				<div class="form-item-content">
					<input type="text" name="children[1][age]" value="" />
				</div>
			</div>

			<div class="form-footer">
				<button class="form-btn" type="reset">重置</button>
				<button class="form-btn" id="submitBtn">提交</button>
			</div>
		</form>

	</body>
	<script type="text/javascript">
		document.querySelector("#submitBtn").addEventListener("click", (e) => {
			//阻止事件向上冒泡
			e.preventDefault();
			const myForm = document.querySelector("#myForm");
			const formData = new FormData(myForm);
			const formJson = Object.fromEntries(formData.entries());
			console.log("[]", formJson)
		})
	</script>
</html>
相关推荐
dy17172 小时前
element-plus表格默认展开有子的数据
前端·javascript·vue.js
2501_915918416 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
程序员的世界你不懂7 小时前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇
java·前端·数据库
索迪迈科技7 小时前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
gnip7 小时前
JavaScript二叉树相关概念
前端
rannn_1117 小时前
【Javaweb学习|实训总结|Week1】html基础,CSS(选择器、常用样式、盒子模型、弹性盒布局、CSS定位、动画),js(基本类型、运算符典例)
css·笔记·学习·html
一朵梨花压海棠go8 小时前
html+js实现表格本地筛选
开发语言·javascript·html·ecmascript
attitude.x8 小时前
PyTorch 动态图的灵活性与实用技巧
前端·人工智能·深度学习
β添砖java8 小时前
CSS3核心技术
前端·css·css3
空山新雨(大队长)8 小时前
HTML第八课:HTML4和HTML5的区别
前端·html·html5