English 中文(简体)
复杂的超文本
原标题:Complex HTML forms
  • 时间:2011-10-11 17:05:23
  •  标签:
  • html
  • forms

www.un.org/Depts/DGACM/index_spanish.htm 这个问题不像长期一样艰巨,因为我uck忙地解释问题,主持人在缩短这个问题的篇幅或改进标题方面的任何帮助(尽管它保持其含义)都会受到赞赏。

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.

举例来说,我最容易解释这一点,因此,请举一个假设的“Businessman”为例“Clients Database”:

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.

商人可以指派其秘书增加客户数据,这样可以打电话给谁编辑“用户”表格。

这一形式的困难方面是支持多部电话和电子邮件,以及“国家”在无 Java本的情况下选择城市。

有一些解决办法,最简单的办法是首先储存客户,然后向他提供其实际存在的电话号码、电子邮件和国家词汇,但在这种情况下,客户必须选择自己的国家,在储存时至少有一个电话号码。

选择国家和城市可以采用一种形式,即“选择国家”领域和残疾人“选择城市”,没有任何价值,也只能使用“选择国家”或类似内容。

<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 country, 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".

另一种做法是,只显示一个称为“选举国/城市”的纽芬兰语,在点击导致国家选择表时,这反过来又导致城市选择表,在提交申请时,用户返回到他开始的表格中。 但我认为上述解决办法较好。

如果有更好的办法,请更正我。

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>

点击“Add电话号码”将使用户能够进入一个电话号码的不同网页,然后添加到一个投入领域清单:

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

我确信,有更好的办法,我会做一些错误,我需要一些帮助。

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 selecteds and Plus multitable " Values”(如电话和电子邮件, in this case)。

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>

“电话”产生一种与所有相同领域相同的形式,但这种形式将被隐藏起来,并事先与用户价值相联,并成为增加新电话的一个领域。

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.

问题回答

你们的解决办法有什么错误?

如果你能够使用javascript,你肯定必须使用多页处理不同领域之间的依赖性。 多数框架称之为屏幕流。

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.

因此,我的建议是进行筛选,确保反应时间确实快......

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.




相关问题
CSS working only in Firefox

I am trying to create a search text-field like on the Apple website. The HTML looks like this: <div class="frm-search"> <div> <input class="btn" type="image" src="http://www....

image changed but appears the same in browser

I m writing a php script to crop an image. The script overwrites the old image with the new one, but when I reload the page (which is supposed to pickup the new image) I still see the old one. ...

Firefox background image horizontal centering oddity

I am building some basic HTML code for a CMS. One of the page-related options in the CMS is "background image" and "stretch page width / height to background image width / height." so that with large ...

Separator line in ASP.NET

I d like to add a simple separator line in an aspx web form. Does anyone know how? It sounds easy enough, but still I can t manage to find how to do it.. 10x!