HTML、CSS - 我想创建一个按钮 "Preview"，它将向用户显示他的输入

Question

假设我们有一个简单的表单：

<form>
    Enter title here:
    <input type="text" name="title" />
    Gender:
    <select name="gender">
        <option value="male">M</option>
        <option value="female">F</option>
    </select>
    Say something about yourself:
    <textarea name="aboutMe"></textarea>
    Click on button to see how will your form look like for submit.
    <button>PREVIEW</button>
</form>

这只是一个简单的例子。现在，我想不通的是下一件事：当用户单击该按钮 "PREVIEW" 时，我希望它向他展示当他单击提交时它会是什么样子。我想我需要额外的 CSS，可能还需要一些 PHP??

Answer 1

用 JS 很容易。像这样尝试：

function formAlert() {
        alert_string = '';
        alert_string = alert_string + document.getElementById('title').value;
        alert_string = alert_string + ', ';
        alert_string = alert_string + document.getElementById('gender').value;
        alert_string = alert_string + ', ';
        alert_string = alert_string + document.getElementById('about_me').value;
        
        alert(alert_string);
       }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form onsubmit="formAlert(); return false;" method"POST">
    Enter title here:
    <input type="text" name="title" id="title" /><br><br>
    Gender:
    <select name="gender" id="gender">
        <option value="male">M</option>
        <option value="female">F</option>
    </select><br><br>
    Say something about yourself:<br><br>
    <textarea name="aboutMe" id="about_me"></textarea><br><br>
    Click on PREVIEW to see how will your form look like for submit.<br><br>
    <button>PREVIEW</button>
    <input type="submit" value="Submit"/>
</form>

HTML、CSS - 我想创建一个按钮 "Preview"，它将向用户显示他的输入

HTML, CSS - I want to create a button "Preview" which will show user his input

html

css

php

forms

preview

用 JS 很容易。像这样尝试：