【发布时间】：2010-11-25 17:18:13
【问题描述】：
我目前正在创建一个站点，其中包含相当数量的表单，这些表单包含的字段类型各不相同，我想知道其他人如何将表单“构造函数”代码的数量保持在最低限度和可重用性。
这是我当前的一些代码示例：
function editForm () {
function saveButton () {
return $('<tr/>')
.append(
$('<th/>')
)
.append(
$('<td/>')
.append(
$('<input/>')
.addClass("new-button")
.addClass("submit-button")
.attr("type", "button")
.attr("value", "Save")
)
.append(" or ")
.append(
$('<a/>')
.attr("href", "#")
.text("Cancel")
)
);
};
this.section = function () {
return $('<form/>')
.attr("action", "#")
.attr("method", "GET")
.append(
$('<table/>')
.append(
$('<tbody/>')
.append(
$('<tr/>')
.append(
$('<th/>')
.append(
$('<label/>')
.attr("for", "title")
.text("Title")
)
)
.append(
$('<td/>')
.append(
$('<input/>')
.addClass("title")
.addClass("text")
.attr("name", "title")
.attr("value", title)
.attr("type", "text")
.attr("required", "true")
)
)
)
.append(
saveButton()
)
)
);
};
this.menuItem = function () {
return $('<form/>')
.attr("action", "#")
.attr("method", "GET")
.append(
$('<table/>')
.append(
$('<tbody/>')
.append(
$('<tr/>')
.append(
$('<th/>')
.append(
$('<label/>')
.attr("for", "name")
.text("Item Name")
)
)
.append(
$('<td/>')
.append(
$('<input/>')
.addClass("name")
.addClass("text")
.attr("name", "name")
.attr("value", menu_item.name)
.attr("type", "text")
.attr("required", "true")
)
)
)
.append(
$('<tr/>')
.append(
$('<th/>')
.append(
$('<label/>')
.attr("for", "price")
.text("Price")
)
)
.append(
$('<td/>')
.append(
$('<input/>')
.addClass("price")
.addClass("text")
.attr("name", "price")
.attr("value", menu_item.price)
.attr("type", "text")
.attr("required", "true")
)
)
)
.append(
$('<tr/>')
.append(
$('<th/>')
.append(
$('<label/>')
.attr("for", "description")
.text("Description")
)
)
.append(
$('<td/>')
.append(
$('<textarea/>')
.addClass("description")
.addClass("text")
.attr("name", "description")
.attr("required", "false")
.attr("rows", "2")
.attr("cols", "50")
.text(menu_item.description)
)
)
)
.append(
saveButton()
)
)
);
};
return this;
};
这里有一些关于我目前正在做什么以及我正在努力实现的更多信息：
我网站上的表单是我使用表格布局布置的唯一对象，因此我可以使表单标签与输入字段右对齐。据我了解，标签和字段之间的这种间隔是使用户更容易理解表单的最佳方式。我愿意接受有关如何以其他方式实现相同效果的建议，尤其是尽可能不使用表格。
我的 javascript 目前使用 JQuery 选择器逐个元素地构建这些表单，以创建元素 $("<element/>")，然后使用诸如 .append() 之类的 javascript 函数将它们链接在一起。
因为我是用表格布局来构建表单的，这意味着在创建基本行结构时有很多重复的代码：
<tr>
<th>
<label for="fieldname">Field</label>
</th>
<td>
<input name="fieldname" type="text">
</td>
</tr>
由于这种方法，您可以在上面的代码中看到很多重复，直觉上我认为我应该能够消除并可能制作一个可以在站点范围内使用的表单构建器。
在我上面的代码中，我重复了许多元素，例如 , , , , 等。
我希望能够以更简洁的格式创建表单，如下所示：
menu_item = {
name: "",
price: "",
description: ""
}
createForm()
.addField(menu_item.name, "Nome", "text-input", required)
.addField(menu_item.price, "Preço", "text-input", required)
.addField(menu_item.description, "Descrição", "textarea")
.addField("Salvar item", "submit-button");
或者更好，像这样：
createForm()
.addField({
value: menu_item.name,
label_text: "Nome",
input_type: "text-input",
required: true })
.addField({
value: menu_item.price,
label_text: "Preço",
input_type: "text-input",
required: true })
.addField({
value: menu_item.description,
label_text: "Descrição",
input_type: "textarea" })
.addField({
value: "Salvar item",
input_type: "submit-button" });
addField 函数有一种格式，您可以在其中命名字段、定义向用户显示的标签（最初将是葡萄牙语，但我们希望将来支持多种语言）以及输入元素和选项的类型对于那个输入元素，例如 required="true" 或 placeholder="i.e. Cereal, Waffles, Toast, etc."
任何人对他们如何解决这个问题或任何生产就绪的 JQuery 插件（即当前维护的插件，而不仅仅是实验或废弃软件）有任何建议，我应该考虑帮助我解决这种事情吗？
【问题讨论】：
-
这些是一些重要的回报声明！
标签： javascript forms jquery webforms