怎么添加友言 html
在互联网时代，社交媒体已经成为人们交流的重要平台，而在这些社交媒体中，好友关系是非常重要的一环，为了更好地维护好友关系，许多网站都提供了添加好友的功能，本文将介绍如何使用HTML代码来实现添加好友的功能。
创建一个表单
我们需要创建一个表单，用于收集用户的输入信息，表单通常包括用户名、密码等字段，以下是一个简单的表单示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>添加好友</title>
</head>
<body>
<h1>添加好友</h1>
<form action="/add_friend" method="post">
<label for="username">用户名：</label>
<input type="text" id="username" name="username" required><br><br>
<label for="password">密码：</label>
<input type="password" id="password" name="password" required><br><br>
<input type="submit" value="提交">
</form>
</body>
</html>
在这个示例中，我们创建了一个包含两个字段(用户名和密码)的表单，表单的提交方式为POST,提交地址为/add_friend，当用户填写完表单并点击提交按钮后，表单数据将被发送到服务器进行处理。
验证用户输入
在将用户输入的数据发送到服务器之前，我们需要对其进行验证，验证的目的是确保用户输入的数据是有效的，例如用户名和密码是否符合要求，以下是一个简单的验证示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>添加好友</title>
</head>
<body>
<h1>添加好友</h1>
<form action="/add_friend" method="post">
<label for="username">用户名：</label>
<input type="text" id="username" name="username" required><br><br>
<label for="password">密码：</label>
<input type="password" id="password" name="password" required><br><br>
<input type="submit" value="提交">
</form>
</body>
</html>
在这个示例中，我们使用了required属性来确保用户名和密码字段不能为空，当然，这只是一个简单的验证示例，实际应用中可能需要更复杂的验证逻辑。
将数据发送到服务器
当用户填写完表单并点击提交按钮后，我们需要将表单数据发送到服务器进行处理，这里我们使用JavaScript的fetch函数来发送请求：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>添加好友</title>
</head>
<body>
<h1>添加好友</h1>
<form id="myForm">
<label for="username">用户名：</label>
<input type="text" id="username" name="username" required><br><br>
<label for="password">密码：</label>
<input type="password" id="password" name="password" required><br><br>
<input type="submit" value="提交">
</form>
<script>
document.getElementById('myForm').addEventListener('submit', function(event){
event.preventDefault(); //阻止表单默认提交行为
const username = document.getElementById('username').value; //获取用户名输入框的值
const password = document.getElementById('password').value; //获取密码输入框的值
fetch('/add_friend', { //向服务器发送POST请求，携带用户名和密码作为表单数据的一部分
method: 'POST',
headers: {'Content-Type': 'application/x-www-form-urlencoded'}, //设置请求头，告诉服务器我们发送的是表单数据而不是JSON数据
body: username=${username}&password=${password} //将用户名和密码拼接成字符串，作为请求体的一部分发送给服务器
});
});
</script>
</body>
</html>
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/163771.html
微信扫一扫 