DerexScript/sendFormDataToServerWithFetch.html

## sendFormDataToServerWithFetch.html
<!DOCTYPE html>
<html lang="pt-BR">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Test Front and Back</title>
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
		integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
</head>

<body class="d-flex flex-column min-vh-100">
	<nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-5">
		<div class="container-fluid">
			<a class="navbar-brand" href="./">SITE</a>
			<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
				data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
				aria-label="Toggle navigation">
				<span class="navbar-toggler-icon"></span>
			</button>
			<div class="collapse navbar-collapse" id="navbarSupportedContent">
				<ul class="navbar-nav me-auto mb-2 mb-lg-0">
					<li class="nav-item">
						<a class="nav-link active" aria-current="page" href="./">Home</a>
					</li>
				</ul>
				<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
					<li><a class="nav-link" href="./">Login</a></li>
				</ul>
			</div>
		</div>
	</nav>

	<div class="container-fluid">
		<div class="row d-flex justify-content-center">
			<div class="col-md-6 col-ms-6">
				<form action="http://localhost" id="form1" method="POST">
					<div class="mb-3">
						<label for="InputEmail" class="form-label">Email address</label>
						<input type="email" class="form-control" id="InputEmail" name="email"
							aria-describedby="emailHelp">
						<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
					</div>
					<div class="mb-3">
						<label for="InputPassword" class="form-label">Password</label>
						<input type="password" class="form-control" id="InputPassword" name="password">
					</div>
					<div class="mb-3 form-check">
						<input type="checkbox" class="form-check-input" id="Check1">
						<label class="form-check-label" for="Check1">Check me out</label>
					</div>
					<button type="submit" class="btn btn-primary">Submit</button>
				</form>
			</div>

		</div>

	</div>

	<div class="container-fluid mt-5">
		<div class="row d-flex justify-content-center">
			<div class="col-md-6 col-ms-6">
				<div id="content" class="alert alert-primary" role="alert"></div>
			</div>
		</div>
	</div>

	<footer class="mt-auto bg-dark footer mt-5">
		<div class="container mt-3">
			<hr class="bg-white">
			<div class="row mb-1">
				<div class="col-12 d-flex justify-content-center">
					<span class="text-white">© 2021 - 2022 SITE, Inc</span>
				</div>
			</div>
		</div>
	</footer>

	<script type="text/javascript">
		const form = document.querySelector("#form1");
		const user = document.querySelector("#InputEmail");
		const password = document.querySelector("#InputPassword");
		const content = document.querySelector("#content");
		form.addEventListener("submit", async evt => {
			evt.preventDefault();
			var myHeaders = new Headers();
			myHeaders.append('Content-Type', 'application/x-www-form-urlencoded; charset=utf-8');
			myHeaders.append('Accept-Encoding', 'gzip, deflate, br');
			myHeaders.append('Accept', `text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9`);
			const formData = `user=${user.value}&password=${password.value}`;
			const reqConfig = { method: 'POST', headers: myHeaders, body: formData, mode: 'no-cors' };
			let respServer = await fetch('http://localhost/index.php', reqConfig);
			respServer = await respServer.text();
			content.innerHTML = respServer;
		});
	</script>

	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"
		integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2"
		crossorigin="anonymous"></script>
</body>

</html>
	<!DOCTYPE html>
	<html lang="pt-BR">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Test Front and Back</title>
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
	integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
	</head>

	<body class="d-flex flex-column min-vh-100">
	<nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-5">
	<div class="container-fluid">
	<a class="navbar-brand" href="./">SITE</a>
	<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
	data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
	aria-label="Toggle navigation">
	<span class="navbar-toggler-icon"></span>
	</button>
	<div class="collapse navbar-collapse" id="navbarSupportedContent">
	<ul class="navbar-nav me-auto mb-2 mb-lg-0">
	<li class="nav-item">
	<a class="nav-link active" aria-current="page" href="./">Home</a>
	</li>
	</ul>
	<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
	<li><a class="nav-link" href="./">Login</a></li>
	</ul>
	</div>
	</div>
	</nav>

	<div class="container-fluid">
	<div class="row d-flex justify-content-center">
	<div class="col-md-6 col-ms-6">
	<form action="http://localhost" id="form1" method="POST">
	<div class="mb-3">
	<label for="InputEmail" class="form-label">Email address</label>
	<input type="email" class="form-control" id="InputEmail" name="email"
	aria-describedby="emailHelp">
	<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
	</div>
	<div class="mb-3">
	<label for="InputPassword" class="form-label">Password</label>
	<input type="password" class="form-control" id="InputPassword" name="password">
	</div>
	<div class="mb-3 form-check">
	<input type="checkbox" class="form-check-input" id="Check1">
	<label class="form-check-label" for="Check1">Check me out</label>
	</div>
	<button type="submit" class="btn btn-primary">Submit</button>
	</form>
	</div>

	</div>

	</div>

	<div class="container-fluid mt-5">
	<div class="row d-flex justify-content-center">
	<div class="col-md-6 col-ms-6">
	<div id="content" class="alert alert-primary" role="alert"></div>
	</div>
	</div>
	</div>

	<footer class="mt-auto bg-dark footer mt-5">
	<div class="container mt-3">
	<hr class="bg-white">
	<div class="row mb-1">
	<div class="col-12 d-flex justify-content-center">
	<span class="text-white">© 2021 - 2022 SITE, Inc</span>
	</div>
	</div>
	</div>
	</footer>

	<script type="text/javascript">
	const form = document.querySelector("#form1");
	const user = document.querySelector("#InputEmail");
	const password = document.querySelector("#InputPassword");
	const content = document.querySelector("#content");
	form.addEventListener("submit", async evt => {
	evt.preventDefault();
	var myHeaders = new Headers();
	myHeaders.append('Content-Type', 'application/x-www-form-urlencoded; charset=utf-8');
	myHeaders.append('Accept-Encoding', 'gzip, deflate, br');
	myHeaders.append('Accept', `text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,/;q=0.8,application/signed-exchange;v=b3;q=0.9`);
	const formData = `user=${user.value}&password=${password.value}`;
	const reqConfig = { method: 'POST', headers: myHeaders, body: formData, mode: 'no-cors' };
	let respServer = await fetch('http://localhost/index.php', reqConfig);
	respServer = await respServer.text();
	content.innerHTML = respServer;
	});
	</script>

	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"
	integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2"
	crossorigin="anonymous"></script>
	</body>

	</html>