HTML，CSS - 我想创建一个按钮＆＃34; Preview＆＃34;这将向用户显示他的输入

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>

这只是一个简单的形式。现在，我无法弄清楚的是下一件事：当用户点击该按钮＆＃34;预览＆＃34;时，我希望它向他展示当他点击提交时的样子。我想我需要额外的CSS，可能还需要一些PHP？

Answer 1

使用JS很容易。试试这样：

＆＃13;

＆＃13;

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);
       }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;