html5中的選擇依賴形式

舉例來說，我有一個簡單的形式，由屏幕左側的4個單選按鈕組成。我希望在右側顯示不同的表單，具體取決於選擇哪個單選按鈕（例如地址單選按鈕的地址表單，用於電子郵件單選按鈕的電子郵件輸入區域）如何實現此目的？html5中的選擇依賴形式

我假設這超出了html5的範圍，因此需要一些額外的客戶端編程（例如javascripts）。我不是在每一個解說後的解決方案（雖然它可能是有幫助的！） - 只是關於如何在現代網頁中實現的一些信息，也可能是一個整潔的教程鏈接

2014-01-06 Giovanni

保持在較高的水平， RH側形式（假設你給他們「subform1」到「subformN」的ID），一個比別人高，使他們不可見（給出例如CSS）

.rhForm{ 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    visibility: hidden; 
}

隨後的onclick監聽器添加到您的單選按鈕

<input type='radio' onclick="showform('subform1')"> 
<input type='radio' onclick="showform('subform2')"> 
<input type='radio' onclick="showform('subform3')"> 
<input type='radio' onclick="showform('subform4')">

然後在h腳本標記中聲明函數h ead

<script> 
function showform(id){ 
    var n=4; // put your actual subforms count here 
    for (var co=1; co<=n; co++) 
    document.getElementById('subform' + co).style.visibility='hidden'; 
    document.getElementById(id).style.visibility='visible'; 
} 
</script>

來源

2014-01-06 22:23:02 lviggiani

優秀！全部按預期工作！這是'專業'網站如何編程簡單的形式出現，或者他們會做更復雜的事情？ – Giovanni

並且在附註中，可以接受的做法是在內部使用不同的提交按鈕來嵌套表單嗎？（例如，如果您上面列出的每個單選按鈕都會調用不同於數據的不同提交按鈕），還是它們都有一個通用的提交按鈕，然後會執行額外的計算以確定數據來自哪裏因此如何處理它呢？ – Giovanni

......這取決於你對'專業'的意思。對我來說，一個寫得很好，易於閱讀和維護的腳本足夠專業。關於提交方法，除了（再次）可維護性之外，再沒有任何書面規則。但是，對於更復雜的用戶界面，你可能想看看專用的工具包，例如http://www.gwtproject.org – lviggiani

html5中的選擇依賴形式

回答

相關問題