写一个html表单用上javascript进行轮播有姓名性别男女可选爱好4种可选邮箱格式要求标准手机号码要求只能11位数字简介。绿色背景表单边框1px黑色
<!DOCTYPE html>
<html>
<head>
<title>表单轮播</title>
<style>
body {
background-color: green;
}
form {
border: 1px solid black;
padding: 10px;
margin: 50px auto;
max-width: 500px;
background-color: white;
}
label {
display: block;
margin-bottom: 10px;
}
input[type="submit"] {
margin-top: 10px;
padding: 5px 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<form id="myForm">
<label>
姓名：
<input type="text" name="name" required>
</label>
<label>
性别：
<input type="radio" name="gender" value="male" checked>男
<input type="radio" name="gender" value="female">女
</label>
<label>
爱好：
<input type="checkbox" name="hobby" value="reading">阅读
<input type="checkbox" name="hobby" value="music">音乐
<input type="checkbox" name="hobby" value="sports">运动
<input type="checkbox" name="hobby" value="travel">旅行
</label>
<label>
邮箱：
<input type="email" name="email" required>
</label>
<label>
手机号码：
<input type="tel" name="phone" pattern="[0-9]{11}" required>
</label>
<label>
简介：
<textarea name="intro"></textarea>
</label>
<input type="submit" value="提交">
</form>
<pre><code><script>
var form = document.getElementById("myForm");
var currentFieldset = 0;
var fieldsets = form.getElementsByTagName("fieldset");
// 隐藏所有fieldset
for (var i = 1; i < fieldsets.length; i++) {
fieldsets[i].style.display = "none";
}
form.addEventListener("submit", function(e) {
e.preventDefault(); // 阻止表单提交
// 显示下一个fieldset或提交表单
if (currentFieldset < fieldsets.length - 1) {
fieldsets[currentFieldset].style.display = "none";
currentFieldset++;
fieldsets[currentFieldset].style.display = "block";
} else {
alert("表单已提交！");
form.submit();
}
});
</script>
</code></pre>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/7Df 著作权归作者所有。请勿转载和采集!