html - HTML/CSS 中的表单页面

标签 html css

在 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>

enter image description here

最佳答案

在您的示例中,页面是静态的,但您需要使该页面动态化。因此,您必须使用编程语言(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/

相关文章:

javascript - onClick 下拉项无法正确显示叠加层

php - 如何找到一个元素要做?

html - 为什么当我在搜索栏中按 Enter 键时看不到查询参数?

jquery - JSFiddle 上的代码在浏览器中不起作用

jquery - 使用 JQuery 添加图像标题

javascript - 悬停不能像预期的那样在 jQuery 类中工作

javascript - 屏幕上的图像叠加切换按钮

java - html5 替代 Jakarta ECS(或类似工具)?

javascript - 浮起来的行

javascript - scrollHeight 不适用于位置 :absolute