0
我要設計使用HTML進行造型和JS以下網頁，使用CSS驗證： 
頁面輸出不會持續
在提供輸入，輸出應該如下：
的CSS和JS的要求是：
我寫了下面的代碼：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body{
background-color:#99FFFF;
}
h1{
font-style:italic;
font-weight:bold;
text-align:center;
color:Maroon;
}
table{
border-collapse: collapse;
border:5px solid black;
width:30%;
margin-left:35%;
}
tr{
text-align:left;
}
td{
padding:10px;
border:2px solid black;
}
#submitbutton{
margin-left:45%;
}
#discount{
text-align:center;
font-weight:bold;
font-size:25px;
}
#result{
text-align:center;
font-weight:bold;
font-style:italic;
font-size:40px;
color:#FF0000;
}
</style>
<script type="text/javascript">
function validateForm()
{
var x=document.myForm.name.value;
var y=document.myForm.price.value;
var namechar= /^[\sa-zA-Z]+$/;
if(x=="") {alert("Product Name should not be empty");return false;}
else if(y=="") {alert("Product Price should not be empty");return false;}
else if(!/^[a-zA-Z\s]+$/.test(x)) {alert("Product Name should contain only alphabets and space");return false;}
else if(y<1) {alert("Product Price should be a number with value greater than 0");return false;}
else
{
var x=document.myForm.season.value;
var disc;
if(x.match("summer")) disc=10;
else if (x.match("newyear")) disc=5;
else if (x.match("clearance")) disc=15;
document.getElementById("discount").innerHTML="The discount is "+disc+"%";
var p=document.myForm.price.value;
p=p-(p*disc)/100;
document.getElementById("result").innerHTML="The discounted price : Rs "+p;
return true;
}
}
</script>
</head>
<body>
<h1>DISCOUNT PRICE</h1>
<form method="get" name="myForm" onsubmit="return validateForm()">
<table>
<tr>
<td>Product Name</td>
<td>
<input type="text" name="name">
</td>
</tr>
<tr>
<td>Product Price</td>
<td><input type="number" name="price">
</td>
</tr>
<tr>
<td>Season</td>
<td><select name="season">
<option value="summer">SUMMER SALE</option>
<option value="newyear">NEW YEAR SALE</option>
<option value="clearance">CLEARANCE SALE</option>
</select>
</td>
</tr>
</table><br/>
<input type="submit" id="submitbutton" value="GET DISCOUNT PRICE">
</form>
<br/>
<div id="discount"></div>
<br/>
<div id="result"></div>
</body>
</html>根據需要（與一些CSS樣式錯誤），得到的輸出，但輸出不會持續。兩個div標籤中顯示的值都立即消失。 如何確保輸出持續？
如果可能，請幫助CSS樣式。 如何左對齊表格35％並提交按鈕45％？
獲得輸出網頁： 
你是什麼形式的目的是什麼？你會在某個時候在服務器上保存細節嗎？ – karthick
這是一個作業問題。目標是使用JS對輸入進行客戶端驗證並顯示折扣價格。 –
請參閱[w3schools]（https://www.w3schools.com/tags/tag_form.asp）和[MDN]（https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data ）瞭解更多關於表格的信息。它們旨在在提交時向服務器發送請求。 – styfle