创建响应式浮动表单提交代码

在这个示例中，我们将创建一个响应式的浮动表单，并添加提交按钮。我们将使用HTML、CSS和JavaScript来实现这一目标。

HTML结构

“`html

“`

CSS样式（styles.css）

“`css
/ 全局样式 /
body {
font-family: Arial, sans-serif;
}

/ 表单容器样式 /
.form-container {
width: 100%;
max-width: 400px;
margin: 0 auto;
}

/ 表单样式 /
form {
display: flex;
flex-direction: column;
gap: 10px;
}

input, textarea {
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
resize: none;
}

button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}

button:hover {
background-color: #45a049;
}

/ 响应式设计 /
@media (max-width: 400px) {
.form-container {
max-width: 100%;
}
}
“`

JavaScript逻辑（scripts.js）

“`javascript
document.getElementById(‘contact-form’).addEventListener(‘submit’, function(event) {
event.preventDefault(); // 阻止默认提交行为

// 这里可以添加表单验证逻辑
const name = document.getElementById(‘name’).value;
const email = document.getElementById(’email’).value;
const message = document.getElementById(‘message’).value;

if (name === ” || email === ” || message === ”) {
alert(‘请填写所有必填项’);
} else {
// 提交数据到服务器或其他操作
alert(‘表单已提交！’);

// 清空表单输入
document.getElementById(‘name’).value = ”;
document.getElementById(’email’).value = ”;
document.getElementById(‘message’).value = ”;
}
});
“`

这个示例展示了如何创建一个简单的响应式浮动表单，并添加了基本的提交按钮和表单验证逻辑。你可以根据需要修改样式和验证规则以适应你的项目需求。