2010-06-03 121 views
0

我正在編寫一個表單生成器。到目前爲止,這麼好,然後我決定給它一個真正的考驗。HTML:嵌套DIV問題

我做了一些嵌套的表單,每個控件都有一些控件。

我會在最後發佈HTML。如果你將它加載到瀏覽器中,它會呈現,但顯然是錯誤的。

我以前使用W3C驗證器進行了測試,事情都很好,但是這是針對非嵌套的。當我使用嵌套驗證表單時,我收到錯誤:

Error Line 13, Column 117: document type does not allow element "DIV" here 

…style="position: absolute; top:88px; left: 256px; width: 145px; height: 21px;"> 

那麼,我該如何糾正?我如何處理嵌套的FIELDSET?

下面是完整的HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title></title> 
<meta http-equiv="Content-type" content="text/html;charset=UTF-8"> 
</head> 
<body> 
<form action="C:\temp\an_elogger_test.php" method="get"><div class="TGroupBox" id="GroupBox1"> 
<fieldset style="position: absolute; top:24px; left:24px; width: 449px; height: 473px;"> 
<legend>GroupBox1</legend> 
<div class="TPanel" id="Panel1"> 
<fieldset style="position: absolute; top:64px; left:64px; width: 361px; height: 217px;"> 
<legend></legend> 
<div class="TComboBox" id="ComboBox1" style="position: absolute; top:88px; left: 256px; width: 145px; height: 21px;"> 
    <select name="ComboBox1"> 
    <option value="- one -" selected="selected">- one -</option> 
    <option value="- two -">- two -</option> 
    <option value="- three -">- three -</option> 
</select> 
</div> 
<div class="TGroupBox" id="GroupBox2"> 
<fieldset style="position: absolute; top:80px; left:88px; width: 145px; height: 177px;"> 
<legend>GroupBox2</legend> 
<div class="TCheckBox" id="CheckBox1" style="position: absolute; top:112px; left: 104px; width: 97px; height: 17px;">CheckBox1<input type="checkbox" name="CheckBox1" value="CheckBox1Checked"></div> 
<div class="TCheckBox" id="CheckBox2" style="position: absolute; top:152px; left: 112px; width: 97px; height: 17px;">CheckBox2<input type="checkbox" name="CheckBox2" value="CheckBox2Checked"checked="checked"></div> 
</fieldset> 
</div> 
<div class="TRadioGroup" id="RadioGroup2"> 
<fieldset style="position: absolute; top:128px; left: 264px; width: 145px; height: 137px;"><legend>RadioGroup2</legend> 

eins: <input type="radio" name="RadioGroup2" value="eins" checked><br> 

zwei: <input type="radio" name="RadioGroup2" value="zwei"><br> 

drei: <input type="radio" name="RadioGroup2" value="drei"><br> 
</fieldset> 
</div> 
</fieldset> 
</div> 
<div class="TMemo" id="Memo1"><textarea name="Memo1" rows="8" cols="13" style="position: absolute; top:320px; left: 88px; width: 185px; height: 89px;"> 
</textarea> 
</div> 
<div class="TComboBox" id="ComboBox2" style="position: absolute; top:328px; left: 296px; width: 145px; height: 21px;"> 
    <select name="ComboBox2"> 
    <option value="a">a</option> 
    <option value="b">b</option> 
    <option value="c">c</option> 
    <option value="d" selected="selected">d</option> 
    <option value="e">e</option> 
</select> 
</div> 
</fieldset> 
</div> 
<div class="TPanel" id="Panel2"> 
<fieldset style="position: absolute; top:32px; left:520px; width: 425px; height: 449px;"> 
<legend></legend> 
<div class="TPanel" id="Panel3"> 
<fieldset style="position: absolute; top:64px; left:552px; width: 345px; height: 185px;"> 
<legend></legend> 
<div class="TMemo" id="Memo2"><textarea name="Memo2" rows="8" cols="13" style="position: absolute; top:88px; left: 584px; width: 185px; height: 89px;"> 
You may wish to leave this memo emptyOr perpahaps give instructions aboout what should be written here</textarea> 
</div> 
<div class="TEdit" id="Edit1" style="position: absolute; top:200px; left: 600px; width: 121px; height: 21px;"><input type="text" name="Edit1"value="Insert text here"></div> 
</fieldset> 
</div> 
<div class="TGroupBox" id="GroupBox3"> 
<fieldset style="position: absolute; top:272px; left:552px; width: 345px; height: 185px;"> 
<legend>GroupBox3</legend> 
<div class="TPanel" id="Panel4"> 
<fieldset style="position: absolute; top:304px; left:584px; width: 177px; height: 137px;"> 
<legend></legend> 
<div class="TRadioGroup" id="RadioGroup1"> 
<fieldset style="position: absolute; top:312px; left: 600px; width: 97px; height: 105px;"><legend>RadioGroup1</legend> 

one: <input type="radio" name="RadioGroup1" value="one"><br> 

two: <input type="radio" name="RadioGroup1" value="two" checked><br> 

three: <input type="radio" name="RadioGroup1" value="three"><br> 
</fieldset> 
</div> 
</fieldset> 
</div> 
<div class="TEdit" id="Edit2" style="position: absolute; top:320px; left: 776px; width: 105px; height: 21px;"><input type="text" name="Edit2"></div> 
</fieldset> 
</div> 
</fieldset> 
</div> 
</form> 
</body> 
</html> 

回答

2

嘗試把一個<legend>something</legend>元素字段集裏面的DIV之前。

字段集是塊級元素,但您必須在其中有一個圖例以符合規範。

+1

在http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.10中指出''必須始終作爲第一個標籤在' fieldset'。 – sirhc 2010-06-03 13:05:48

+0

解決了驗證問題,但佈局仍然棘手。我將編輯問題並更新新的HTML – Mawg 2010-06-03 13:22:19

+0

我將爲此獎勵一個答案(希望我可以授予兩個答案)並查看佈局問題。如有需要,我將作爲一個新問題。不過,我更新了以上的HTML。 – Mawg 2010-06-03 13:24:31