是否有生成格式良好的表单的标准？

Posted 2023-02-24

【中文标题】是否有生成格式良好的表单的标准？

【英文标题】：Is there a standard for generating well formatted forms?

【发布时间】：2011-03-21 15:14:51

【问题描述】：

我想知道是否有表格标准。我的意思是，当你用 html 编写表单时，通常会根据需要编写它，而不考虑它的 HTML 结构。

我问这个是因为我正在使用 php 开发表单生成器。我想让一些易于使用的东西和生成的 HTML 代码易于 CSS 自定义。

Zend、Symphony 有一些表单生成器，但我发现它们有点难用。 Zend（每种输入的一个类）和 Symfony 中的概念太多，您必须嵌入整个框架。

所以，如果我们能为每一种表单找到一个相当好的表单结构标准，这对我的工作和每个人来说都是一个很好的进步:)

【问题讨论】：

wufoo 是商业解决方案。我正在寻找一种易于集成到现有 PHP 项目中的开源解决方案。使用 wuffo，您将拥有独立的数据库：您的网站和 wufoo。对吗？

不确定您所说的“通常根据需要编写它，而不考虑其 HTML 结构”是什么意思。我用我写任何其他页面的方式写一个带有表单的页面，注意布局是否良好、一致等。表单基本上不需要结构。如果您以编程方式制作它们，我可以理解您将要创建一个标准结构，但问题肯定是您希望能够对它们做什么 - 即您希望如何灵活地制作它们的样式等。

没错。我想要一些足够灵活的东西，让每个人都可以自定义生成的表单。例如，我可以使用 生成表单。这并非不可能，但在我看来，我觉得它很丑。我还找到了一篇文章，展示了如何设计纯 CSS 表单：woork.blogspot.com/2008/06/clean-and-pure-css-form-design.html

【参考方案1】：

你看过CakePHP 和CodeIgniter 表单助手吗？他们可能会为您的表单生成器提供一些好主意。

【讨论】：

@NullUserException：他们的网站有 CodeIgniter，就在那个链接上？

【参考方案2】：

这里描述了标准：http://www.w3.org/TR/html401/interact/forms.html

不太清楚你到底在问什么

【参考方案3】：

易于设置样式的表单的标准 HTML 结构是：

<form>
    <div>
        <label for="input-text">Input text:</label>
        <input type="text" id="input-text" name="input-text"/>
    </div> 
    <div>
        <label for="select-text">Select text:</label>
        <select id="select-text" name="select-text">
            <option value="1">Yes</option>
            <option value="0">No</option>
        </select>
    </div> 
    <div class="buttons">
        <input type="submit" value="Submit"/>
        <input type="reset" value="Reset"/>
    </div>
</form>

上面允许您使用<div> 来设置字段行的样式，而<label> 和<input> 结构可以很容易地创建字段的行或列。

最后一个<div class="buttons"> 允许将特殊样式应用于表单的按钮。

您可能还需要考虑的一件事是查看 <fieldset> 标记以对相关字段进行分组。

【参考方案4】：

没有标准设置。表单以表单元素开始并包含输入控件。如何构建这些取决于表单应该提交的内容以及 (X)HTML 风格的规范允许的内容。

有些开发人员可能需要字段集，有些则不需要。有些人可能需要在 UL 中结构化的输入，有些人更喜欢 DL。如果不将开发人员限制在特定的结构中，您就无法在此处进行标准化。 ZF 解决了这个问题，但付出了额外的复杂性。

见

http://www.w3.org/TR/html401/interact/forms.html（用于 HTML4） http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_forms (XHTML) http://www.w3.org/TR/html5/forms.html (HTML5)

【参考方案5】：

关键是确保 HTML 在技术上是正确的。 This site 会帮你查的。

确保网站为accessible 也是一种很好的做法——不仅仅是为了避免将残疾人排除在外——其中大部分是关于良好的人体工程学并确保对所有网络平台的广泛支持。

FWIW，我开始编写一个表单生成器 - PfP Studio - 它仍然有很多粗糙的边缘，我最近没有时间来处理它。您可能还想看看 Prado、Radria、phpeanuts 和 phpformgen。

HTH

C.

【参考方案6】：

请在此处查找包含所有可访问性功能的有效表格：

<div class="user" id="user-001">
    <form method="post" action="index.html" id="userform" name="userform">
    <fieldset>
        <legend>User Data</legend>
        <div id="field-username" class="field mandatory">
            <div class="label"><label for="username">User</label></div>
            <input type="text" id="username" name="username" tabindex="1" accesskey="U" value="" default="Utilisateur" title="Please choose a unique and funny Username" size="30" maxlengtth="30" />
        </div>
        <div  id="field-firstname" class="field">
            <div class="label"><label for="firstname">Firstname</label></div>
            <input type="text" id="firstname" name="firstname" tabindex="1" accesskey="N" value="" default="nom" title="Fill your Firstname" size="30" maxlengtth="30" />
        </div>
        <div  id="field-lastname" class="field">
            <div class="label"><label for="lastname">Lastname</label></div>
            <input type="text" id="lastname" name="lastname" tabindex="1" accesskey="m" value="" default="nom" title="Fill your own Lastname" size="30" maxlengtth="30" />
        </div>
        <div id="field-password1" class="field mandatory">
            <div class="label"><label for="password1">password</label></div>
            <input type="password" id="password1" name="password1" tabindex="1" accesskey="d" value="" default="******" title="Set a personal password" size="30" maxlengtth="30" />
        </div>
        <div  id="field-password2" class="field mandatory">
            <div class="label"><label for="password2">Password again</label></div>
            <input type="password" id="password2" name="password2" tabindex="1" accesskey="d" value="" default="******" title="Set again your password for validation purpose" size="30" maxlengtth="30" />
        </div>
        <div  id="field-email" class="field" >
            <div class="label"><label for="email">Mail</label></div>
            <input type="text" id="email" name="email"  tabindex="2" accesskey="S" value="" default="[e-mail]" title="Please fill-in a valide email" size="30" maxlengtth="100" />
            <div class="sample">ex: [e-mail]</div>
        </div>
        <div  id="field-datestart" class="field mandatory typedate" >
            <div class="label"><label for="datestart">Active from </label></div>
            <input type="date" id="datestart" name="datestart"  tabindex="3" accesskey="C" value="" title="Input the date of user account activation." />
            <div class="sample">ex: 17/05/2010</div>
        </div>
    </fieldset>
    <div class="command">
    <button type="submit" name="send" id="send" accesskey="E" title="click here to save your modifications"><strong>S</strong>ave</button>
    </div>
    </form>
</div>

在表单装饰中享受 hHTML 和 CSS 的乐趣。

【讨论】：

我无法想象更复杂的表格，但我不知道是否有必要生成每个属性。我们可以只使用模板并生成用户/开发者想要的属性。如果我们生成所有可以想象的属性，页面将花费太多时间来加载。