1月
24
2008
分類:
最近更新:
2008-01-24
A Note of HTML Form and XForm
如何分割 "資料"(Data)與 "表單外觀"(呈現層,Presentation)。
HTML Form 之中，資料與表單元件的陣述混雜在一起，增加文件編寫與閱讀複雜度。此複雜度不僅是針對人工輸入與閱讀，對應用軟體亦然，例如網頁編輯工具、Famework 工具等等。混雜的陣述方式，增加了前述工具的開發者之工作 - 編程難，除錯難 。
傳統的 HTML Form
Without Data
<form id="form1" name="form1" method="post">
<label for"fname">FirstName</label>
<input id="fname" name="fname" value=""/>
<br/>
<label for"lname">LastName</label>
<input id="lname" name="lname" value=""/>
<button type="submit">Submit</button>
</form>With Data
<form id="form1" name="form1" method="post">
<label for"fname">FirstName</label>
<input id="fname" name="fname" value="Peter"/>
<br/>
<label for"lname">LastName</label>
<input id="lname" name="lname" value="Parker"/>
<button type="submit">Submit</button>
</form>要一眼看出資料在哪，還真是傷眼力。
透過 JavaScript 分割 HTML Form 的資料與表單元件
資料的文件格式是 JSON。
<form id="form1" name="form1" method="post">
<label for"fname">FirstName</label>
<input id="fname" name="fname" value=""/>
<br/>
<label for"lname">LastName</label>
<input id="lname" name="lname" value=""/>
<button type="submit">Submit</button>
</form>
<script type="text/javascript">
/* Data */
var form1 = {
fname: 'Peter',
lname: 'Parker'
};
for (var controlId in form1) {
var control = document.getElementById(controlId);
control.value = form1[controlId];
/*
This is an example.
It cannot set the value of Select, Checkbox, Radio, etc.
To set up the value of any type of controls, we need more codes.
*/
}
</script>XForm way
資料的文件格式是 XML。
<xforms>
<model>
<instance>
<!-- Data (XML document)-->
<person>
<fname>Peter</fname>
<lname/>Parker</lname>
</person>
</instance>
<submission id="form1" method="post"/>
</model>
<!-- Presentation -->
<input ref="fname">
<label>First Name</label>
</input>
<input ref="lname">
<label>Last Name</label>
</input>
<submit submission="form1">
<label>Submit</label>
</submit>
</xforms>Reference about XForm
- Ajax and XML: Ajax for forms - Use Ajax techniques to create input forms
- XForms Tutorial
- XForms 1.0 (Third Edition) - W3C Recommendation 29 October 2007
相關文章
樂多舊網址: http://blog.roodo.com/rocksaying/archives/5107059.html
樂多舊回應