在 HTML 中创建表单页面。到目前为止它看起来不错,但我正在尝试获取它,以便当用户输入所有信息并单击提交时,它将显示他/她在其下方的字段中输入的信息。我已附上图片以供澄清.我也会粘贴我到目前为止所做的。
HTML代码
<!DOCTYPE html>
<html>
<head>
<title>Form Page</title>
<style type="text/css">
.button1 {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 10px;
}
body{
max-width:500px;
margin: 0 auto;
}
</style>
</head>
<body>
<h1> Welcome to my Website</h1>
<p> Sign Up</p>
<form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</br>
Date of Birth:<br>
<input type="text" name="Birth">
</br>
Phone Number:<br>
<input type="text" name="Number">
</br>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>
<p> Interests</p>
<input type="checkbox" name="school" value="Data Base" checked> DataBase<br>
<input type="checkbox" name="school" value="Web Programming"> Web<br>
<input type="checkbox" name="school" value="Software Engineering"> Software Engineering</br>
<input type="checkbox" name="school" value="Machine Learning" checked> Machine Learning<br>
<button class = "button1" type = "button"> Sign Up</button>
</body>
</html>
最佳答案
在您的示例中,页面是静态的,但您需要使该页面动态化。因此,您必须使用编程语言(JS,或服务器端语言)来开发这部分内容。
第一个选项,您可以使用此对象检索在 URL 中传递的表单数据 https://developer.mozilla.org/en-US/docs/Web/API/Location并在页面加载后使用 DOM API 编写您想要的页面部分。
第二个选项,根据您生成此页面的方式或不生成此页面的方式,您可以生成带有 URL 中传递的表单数据的页面部分。
关于html - HTML/CSS 中的表单页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49655673/