Complex HTML forms

This question is not as hard as it is long, it is long because I suck at explaining things, any help from moderators in reducing the length of this question or improving it's title (while keeping it's meaning) will be appreciated.

I'm designing a general application that could handle complex forms, but to do that, I need to decide how to handle the forms themselves... so let's forget about the server back-end for a while. I've done research about this for a while now, but can't seem to find anything that isn't outdated or irrelevant.

The easiest way for me to explain this is with an example, so lets take a hypothetical "Businessman" with a "Clients Database" example:

A self employed businessman decided to keep a record for each one of his clients, where he could store all their name, phone numbers, emails, country, city and date of birth. To do this, he uses a web-application that he can open on his mobile phone or at home on his old office computer. But sadly, this businessman is also paranoid, and switched off all JavaScript on his computer.

The businessman might assign his secretary to add the client data, so let's call whoever is editing the form "user".

The difficult aspects of this form are supporting multiple phones and emails, and the country > city selection without JavaScript.

There are a couple of solutions, the simplest would be to first store the client and then give him a all his phone numbers, emails and country AFTER he actually exists, but in this case the client is required to have his/her country selected and at least one phone number upon storage.

Select country and city could be done by having one form with a "select country" field and a disabled "select city" without any values and a button that says "select country" or something similar... it would use the rarely used form buttons and resemble something like this:

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

The user clicks the "Select Country" button, and the form will display all his entered data and a "cities" select field based on his chosen country (as long as the form validates the data it outputs, and uses a unique token for the form, it should be secure) It would also show the countries select field as disabled with his chosen country as the selected value, and a button to clear his selection, we do this to prevent the user from selecting the coun开发者_如何学Pythontry, for example "United States" and then the city "New York", and later changing his choice in country and to prevent him from submitting a form with the values country="Uruguay" and city="New York".

Another approach would be to display only a single button called "Select country/city" that when clicked leads to a country selection form, that in turn leads to a city selection form, that when submitted returns the user to the form where he started. But I think the solution above this one is better.

Please correct me if there is a better way.

Then after selecting the country and city, the user of the form has to add at least one phone number to the yet to be stored "client". (emails would be handled the same way) This part, I haven't managed to do and would like some help with. All that I have so far is this:

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

clicking "Add phone number" would lead to a different page where the user can enter a phone number, it would then get added to a list of input fields:

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

I'm pretty sure there is a better way, that I'm doing something wrong above, and I need some help.

Give sample HTML if the answer could be understood in multiple ways.

P.S. It doesn't have to be a "clients database" form, only that it should support chained selects and adding multiple variable "values" (like phones and emails in this case) for a single entry.

Edit: Now that I think of it, the phones should be editable, so it should look like this instead:

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

"Add Phone" leads to a form with all the same fields but they will be hidden and pre-populated with the user values, and a field to add a new Phone.

or maybe I could skip that entirely and just show the same page but with an empty phone number added... or edit all the fields on a different page? issues also arise if you add and edit with this form.

what's so wrong with your solutions?

If you can't use javascript, you sure have to use multiple pages in order to handle dependencies between fields. That's what most frameworks call a screen-flow.

If you know which devices / browsers are used, you could try to replace the multiple pages with framesets... the target of the country select would be a initially empty frameset which will display all cities as soon as it gets the country from the first select... (do you feel what I am thinking of? :-)

but framesets are ugly and cause a lot of problems.

So my advice would be to go with a screen-flow and make sure that response times are really fast...

Update: if the problem is how to handle multiple users working on the forms...:

• a session is useful to identify the user and keep track of the state of already filled out form elements
• even better (more robust) is to keep the information you need (from already filled out elements and other meta data) in <input type='hidden'> fields. This way, you don't have to keep a session - the form will always submit all data to the server. But make sure that you validate all fields again in the last step - the user might have modified the request.