标签: forms

我知道xhtml不支持嵌套的表单标签,我已经
在stackoverflow中读到了关于这个主题的其他答案,但我仍然没有想出一个优雅的问题解决方案.

有人说你不需要它,他们想不到这种情况是需要的.好吧,我个人无法想到一个我不需要它的场景.

让我们看一个非常简单的例子:

您正在创建一个博客应用程序,并且您有一个表单,其中包含一些字段,用于创建新帖子和工具栏,其中包含"保存","删除","取消"等"操作".

<form
 action="/post/dispatch/too_bad_the_action_url_is_in_the_form_tag_even_though_conceptually_every_submit_button_inside_it_may_need_to_post_to_a_diffent_distinct_url"
method="post">

    <input type="text" name="foo" /> <!-- several of those here -->
    <div id="toolbar">
        <input type="submit" name="save" value="Save" />
        <input type="submit" name="delete" value="Delete" />
        <a href="/home/index">Cancel</a>
    </div>
</form>

我们的目标是以不需要javascript的方式编写表单,只需要简单的旧HTML表单和提交按钮.

由于动作URL是在Form标签中定义的,而不是在每个单独的提交按钮中定义,我们唯一的选择是发布到通用URL,然后启动"if ... then ... else"来确定按钮的名称提交.不是很优雅,但我们唯一的选择,因为我们不想依赖javascript.

唯一的问题是,按"删除",将提交服务器上的所有表单字段,即使此操作所需的唯一内容是带有post-id的隐藏输入.在这个小例子中并没有什么大不了的,但我的表格中有数百个(可以这么说)我的LOB应用程序中的字段和标签(由于要求)必须一次性提交所有内容,无论如何这看起来效率很低而浪费.如果支持表单嵌套,我至少可以在其自己的表单中包含"删除"提交按钮,只包含post-id字段.

您可以说"只需实施"删除"作为链接而不是提交".这在许多层面都是错误的,但最重要的是因为像这里的"删除"这样的副作用动作永远不应该是GET请求.

所以我的问题(特别是那些说他们不需要形成嵌套的人)是你做什么的？是否有任何优雅的解决方案,我缺少或底线真的"要么需要javascript或提交一切"？

在没有任何自制课程的情况下,在twitter bootstrap中设计一个看起来像这样的表单(请参阅下面的链接)的最佳方法是什么？

是否可以在表单水平内部设置内部表单内联,如下例所示:

对于特定用例,我必须以"旧方式"提交单个表单.意思是,我使用带有action =""的表单.响应是流式传输的,所以我没有重新加载页面.我完全知道一个典型的AngularJS应用程序不会以这种方式提交表单,但到目前为止我别无选择.

也就是说,我试图从Angular填充一些隐藏的字段:

<input type="hidden" name="someData" ng-model="data" /> {{data}}

请注意,显示数据中的正确值.

表单看起来像标准形式:

<form id="aaa" name="aaa" action="/reports/aaa.html" method="post">
...
<input type="submit" value="Export" />
</form>

如果我点击提交,则不会向服务器发送任何值.如果我将输入字段更改为键入"text",它将按预期工作.我的假设是隐藏字段没有真正填充,而文本字段实际上是由于双向绑定显示的.

有关如何提交由AngularJS填充的隐藏字段的任何想法？

我觉得奇怪的input type="date"是,在所有这段时间后仍然不支持Firefox.实际上,我不认为他们在输入元素上添加了很多(如果有的话)HTML 5新类型.IE10不支持它并不奇怪.所以,我的问题是......

如何type="date"使用一个input元素工作而不添加另一个.js文件(即jQueryUIDatePicker Widget)只是为了获取IE和Firefox浏览器的日历/日期？有什么东西可以应用到某个地方(可能是CDN？),这将使这个功能在Firefox和/或IE浏览器中默认工作？尝试针对IE 8+浏览器和Firefox,没关系,最新版本(28.0)会没问题.

更新:Firefox 57+支持输入类型=日期

停止表单提交的一种方法是从JavaScript函数返回false.

单击提交按钮时,将调用验证功能.我有一个表格验证案例.如果满足该条件,我调用一个名为returnToPreviousPage()的函数;

function returnToPreviousPage() {
    window.history.back();
}

我正在使用JavaScript和Dojo Toolkit.

而是回到上一页,它提交表单.如何中止此提交并返回上一页？

我使用Postman Chrome扩展程序来测试Web服务.有三种可用于数据输入的选项.我想原始是发送JSON.另外两个,form-data和x-www-form-urlencoded有什么区别？

有没有机会检测用户为input类型file元素的HTML所做的每个文件选择？

之前曾多次询问此问题,但onchange如果用户再次选择同一文件,则通常建议的事件不会触发.

对于所有默认输入,您填写的文本从左侧开始.你如何让它从右边开始？

我有一个期待两种形式的模板页面.如果我只使用一个表单,那么就像这个典型的例子一样好:

if request.method == 'POST':
    form = AuthorForm(request.POST,)
    if form.is_valid():
        form.save()
        # do something.
else:
    form = AuthorForm()

但是,如果我想使用多个表单,我如何让视图知道我只提交其中一个表单而不是另一个表单(即它仍然是request.POST但我只想处理提交的表单事情)吗？

这是该解决方案基于这样的答案expectedphrase和bannedphrase是不同形式和不同的提交按钮的名称expectedphraseform和bannedphraseform是形式.

if request.method == 'POST':
    if 'bannedphrase' in request.POST:
        bannedphraseform = BannedPhraseForm(request.POST, prefix='banned')
        if bannedphraseform.is_valid():
            bannedphraseform.save()
        expectedphraseform = ExpectedPhraseForm(prefix='expected')
    elif 'expectedphrase' in request.POST:
        expectedphraseform = ExpectedPhraseForm(request.POST, prefix='expected')
        if expectedphraseform.is_valid():
            expectedphraseform.save() 
        bannedphraseform = BannedPhraseForm(prefix='banned')
else:
    bannedphraseform = BannedPhraseForm(prefix='banned')
    expectedphraseform = ExpectedPhraseForm(prefix='expected')

我们是否可以在另一种形式内有表格？这有什么问题吗？