複雜的HTML表單

Question

這個問題並不難，因爲它很長，這是很長，因爲我吸在解釋的事情，從主持人的任何幫助減少這個問題的長度或改善它的標題（同時保持它的意思）會不勝感激。

我正在設計一個可以處理複雜表單的通用應用程序，但要做到這一點，我需要決定如何處理表單本身......所以讓我們暫時忘記服務器的後端。 我已經對此進行了一段時間的研究，但似乎找不到任何不過時或不相關的東西。

我解釋這是用一個例子最簡單的方法，所以我們來假設的「商人」與「客戶數據庫」的例子：

一個自僱商人決定繼續爲每一個記錄他的客戶，他可以存儲他們的姓名，電話號碼，電子郵件，國家，城市和出生日期。 爲了做到這一點，他使用了一個Web應用程序，他可以在他的手機上或在他的舊辦公室電腦上打開。但不幸的是，這位商人也是偏執狂，並關閉了他電腦上的所有JavaScript。

的商人可能會指派他的祕書添加的客戶端數據，所以我們叫誰正在編輯的形式是「用戶」。

這種形式的困難方面支持多個電話和電子郵件，並在全國>城市評選沒有JavaScript。

有幾個解決方案，最簡單的方法是首先存儲客戶端，然後給他一個他所有的電話號碼，電子郵件和國家後他實際存在，但在這種情況下，客戶端需要有他/她的國家選擇並至少存儲一個電話號碼。

選擇國家和城市可能因與一「選擇國家」字段和禁用「選擇城市」沒有任何價值和一個按鈕，上面寫着「選擇國家」或類似的一種形式來完成......它會使用很少使用的表單按鈕和像這樣的事情：

<h2>General info</h2> 
...name, surname, gender, age selection... 
<h2>Country and city</h2> 
<p><label>Select country: </label><select name="country"> 
<option value="United Kingdom">United Kingdom</option> 
<option value="United States">United States</option> 
<option value="France">France</option> 
<option value="Germany">Germany</option> 
<option value="Spain">Spain</option> 
<option value="Italy">Italy</option> 
<option value="Canada">Canada</option></select> 
<input type="button" name="select[country]" value="Select Country" /></p> 
<p>Select city: <select disabled="disabled"><option value="">No city selected<option></select> (you must first select a country)</p> 

用戶點擊「選擇國家」按鈕，表格就會顯示他的所有輸入的數據和「城市」選擇字段根據他所選擇的國家 （只要形式驗證它輸出的數據，並採用了獨特的令牌的形式，它應該是安全的） 這也將表明國家選擇字段作爲他的殘疾人通道OSEN國爲選定的值，和一個按鈕來清除他的選擇，我們這樣做是爲了防止用戶選擇國家，例如，「美國」，然後城市「紐約」，後來在國家改變自己的選擇，阻止他提交價值國家=「烏拉圭」和城市=「紐約」的表格。

另一種方法是隻顯示一個名爲「選擇國家/城市」的按鈕，當點擊時導致一個國家選擇表格，這反過來導致城市選擇表格，當提交時將用戶返回到表格他在哪裏開始。但我認爲這個解決方案更好。

如果有更好的方法，請糾正我。

然後，在選擇國家和城市後，表格的用戶必須添加至少一個電話號碼給尚未被存儲的「客戶端」。 （電子郵件將以相同的方式處理） 這部分，我沒有設法做，並希望得到一些幫助。 所有這一切我到目前爲止是這樣的：

...name, surname, gender, age selection... 
...country/city selection... 
<p><input name="add[phone]" type="button" value="Add phone number" /></p> 

點擊「添加電話號碼」將導致不同的頁面，用戶可以輸入一個電話號碼，就那麼被添加到輸入字段列表：

...name, surname, gender, age selection... 
...country/city selection... 
<p><input name="add[phone]" type="button" value="Add phone number" /></p> 
<p> 
List of phones that will be added when the client is saved:<br/> 
<ul> 
<li>987654321<input name="phone[0]" type="hidden" value="987654321" /><button name="remove[phone][0]" value="Remove" /></li> 
<li>987654322<input name="phone[1]" type="hidden" value="987654322" /><button name="remove[phone][1]" value="Remove" /></li> 
</ul> 
</p> 

我很確定有更好的方法，我在上面做錯了什麼，我需要一些幫助。

如果能夠以多種方式理解答案，請提供示例HTML。

P.S.它不必是一個「客戶數據庫」形式，只是它應該支持鏈接選擇，併爲單個條目添加多個變量「值」（如本例中的電話和電子郵件）。

編輯： 現在我想起來了，手機應該是可編輯的，所以它看起來應該是這樣，而不是：

...name, surname, gender, age selection... 
...country/city selection... 
<p><input name="add[phone]" type="button" value="Add phone number" /></p> 
<p> 
List of phones that will be added when the client is saved:<br/> 
<ul> 
<li><input name="phone[0]" type="text" value="987654321" /><button name="remove[phone][0]" value="Remove" /></li> 
<li><input name="phone[1]" type="text" value="987654322" /><button name="remove[phone][1]" value="Remove" /></li> 
</ul> 
</p> 

「添加電話」導致一種形式相同的所有領域但它們將隱藏並預先填充用戶值，並添加一個新的電話字段。

或者我可以完全跳過這一點，只顯示相同的頁面，但添加了一個空的電話號碼......或編輯不同頁面上的所有字段？如果您使用此表單進行添加和編輯，也會出現 問題。

Answer 1

您的解決方案有什麼問題？

如果您無法使用JavaScript，那麼您肯定必須使用多個頁面才能處理字段之間的依賴關係。這就是大多數框架稱爲屏幕流的原因。

如果您知道使用哪些設備/瀏覽器，您可以嘗試用框架集替換多個頁面......國家選擇的目標將是一個最初爲空的框架集，它將在所有城市一獲得國家從第一選擇...（你覺得我在想什麼？:-)

但框架集是醜陋的，並導致很多問題。

所以我的建議是去同一個屏幕流，並確保響應時間真快......

更新：如果問題是如何處理多個用戶的形式工作。 ..：填寫表單元素

• 會話是識別用戶並跟蹤已經國家有用
• 甚至更​​好（更強大的）是保持你所需要的信息（從已填寫元素和其他元數據）在<input type='hidden'>個字段。這樣，您不必保留一個會話 - 表單將始終向服務器提交全部數據。但請確保您在最後一步再次驗證所有字段 - 用戶可能已經修改了請求。