HTML，CSS - 我想創建一個「預覽」按鈕，將顯示用戶輸入他

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很容易。試試這樣：做使用jQuery這個事情

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>