2011-06-10 82 views
67

哲學問題:爲什麼在通過ajax提交時使用表單標籤?

說我已經得到了需要 JavaScript和現代瀏覽器,因此漸進增強是不是一個問題,一個Web應用程序。如果我的表單是通過JavaScript構建的,並且我的數據更新都是通過ajax POSTs & PUT完成的,那麼是否真的有理由將我的控件包裝在表單標記中?如果我仍然要使用標籤,比如出於語義或結構原因,是否有任何理由要採取行動和方法,我會忽略這些參數?這種感覺就像是從一個早期的時代一直延續到我身上。

+0

我想不是...他們沒有理由,他們是有用的,但必須讓他們控制是非常愚蠢的... 你總是可以把這樣一個空白的有效表格:

Omer 2011-06-10 16:20:58

+1

您可以將操作轉到一個頁面,該頁面顯示」此網站需要JavaScript,並且您的瀏覽器未執行JavaScript。「 – bdares 2011-06-10 16:21:13

+3

不能識別哪些屬於特定形式的元素可能會對可訪問性/屏幕閱讀器軟件產生一些影響 – 2011-06-10 16:24:10

回答

62

有通過包裝形式標記內投入專門設置的至少一個重要的用戶體驗的功能:

按Enter鍵將提交表單。實際上,在Mobile Safari中,這是如何獲得「Go」按鈕to appear on the keyboard

沒有包裝輸入的表單,沒有提交。

您當然可以通過按鍵事件提供輸入鍵行爲,但我不知道這是否適用於移動設備。我不瞭解你,但我寧願使用瀏覽器提供的語義,也不願意用事件來模仿它們。

對於您的情況,您只需提供表單的onsubmit事件處理程序,它將執行您的AJAX提交,然後return false取消實際的提交。

您可以簡單地提供action=""(意思是「自我」),並且method不是必需的—它默認爲GET

+1

+ 1 - 這完全是*當我看到問題時我的想法。 – Reid 2011-06-10 16:50:13

+1

@布賴恩 - 海報說「數據更新正在通過ajax POSTS&PUTS完成」。這很明顯意味着*提交給我,而不是頁面刷新類型。僅僅因爲你不想刷新頁面並不意味着你不需要相同的用戶體驗。 – Nicole 2011-06-11 00:21:43

+0

但是,如果您認爲垃圾郵件機器人可能會訪問您的表單,那麼您可能不會添加操作或方法屬性。其中70%不使用JavaScript。 – 2017-11-10 20:23:05

0

我不明白你爲什麼需要在這裏使用表單標籤。使用表單標籤的唯一原因(除了讓你的標記驗證)是,如果你要讓用戶使用sumbit輸入或按鈕標籤「提交」數據。如果你不需要這樣做,那麼就不需要表格。但是,不確定它是否會被視爲「有效」標記。如果你使用它,你可以做<form action="">,因爲action是表單標籤唯一必需的屬性。但是,您確實提出了一個很好的觀點,Web應用程序的未來可能不再需要形式和傳統的提交方法。非常有趣,讓我開心。呵呵:)

2

不是我能看到的。我目前正在構建一個使用<form>的Web應用程序,但我正在使用它們,所以如果用戶禁用了JavaScript,則有一個回退方法(e.preventDefault停止表單正常發佈)。對於您的情況,如果您說用戶必須使用JavaScript,則<form>標記不是必需的,但在瀏覽器需要對其進行任何操作或將其作爲一種類型訪問的情況下,可能需要使用<form>標記的類。

簡而言之,不,如果您正在使用純AJAX,則不需要使用<form>,但如果您突然決定在將來創建備用代碼,則可能會留下它。

+0

林相當肯定,你可以只是禁用提交按鈕disabled =「disabled」 – 2011-06-10 16:26:56

1

我認爲:如果你使用它的語義原因,然後用它作爲預期。 action屬性是必需的(也可以保留爲空)以便格式良好,也可以通過設置action屬性並在ajax調用之前讀取它來分離URI -s和js邏輯。

+0

+ 1爲JS閱讀'action'屬性 – Josh 2011-06-10 17:54:25

11

AJAX是偉大的,但作爲JamWaffles(+1對他)說,使用form標籤提供了備用方法。

我個人使用表單標籤,甚至對我的事情與AJAX提交,因爲它在語法上是清晰,可以很容易地抓住特定形式中的所有投入。是的,你可以用div或其他什麼來做到這一點,但正如我所說的,使用表單在語法上很好。

順便說一下,屏幕閱讀器治療form裏面的內容不同所以有無論怎樣你選擇去要考慮可訪問性問題。請注意,有趣的證據表明,谷歌認爲其排名的可訪問性,所以如果搜索引擎優化是你的關注,使用一種形式,並做對了。

+0

這是目前爲止最好的答案,而不是當前位於列表最上方的那個人 – 2011-06-11 00:19:06

15

如果您不需要逐步增強,理論上你不需要它們。

另一方面,form s有一些很酷的分組和語義的影響。使用它們,您可以將您的表單元素邏輯地編組爲,並使您的腳本更容易收集某些元素的值。

例如,如果您想要ajax提交一些用戶輸入,總是比較容易地說:「讓我們拿這個表單中的所有元素並提交它們」而不是說「讓我們接受這個輸入,這兩個選擇和這三個選擇textareas並提交它們「。根據我的經驗,如果form標籤存在,它實際上可以幫助開發者。

+0

對,但是在某些在你提交給客戶端之前,你不需要額外的序列化表單的好處,然後就可以在服務器上反序列化了。有時候,你只需要提交一些沒有對應模型的值在這些情況下,我選擇不使用表格 – 2014-05-04 19:29:47

+0

您可能有重疊的值在你的形式。表單可能有幾個標題爲「options」的字段,其中每個選項的值都是一個自動遞增的ID。如果沒有將'

'設置爲包裝,您可能會嘗試從表單的輸入選項中獲取特定值,因爲可能容易出現'1','2','3'等值。 – pspahn 2014-12-01 18:59:26

5

摘要: 適用於MVC,簡單的Web應用程序,不適合面向組件的,豐富的Web應用程序。

原因: 表單不能嵌套其他表單:面向組件的體系結構的重大限制。

詳細信息: 對於典型的MVC應用程序,表單很棒。在豐富,複雜的Web應用程序中,使用大量的JavaScript和AJAX以及大量的組件,我不喜歡錶單。原因:表單不能嵌套其他表單。然後,如果每個組件都呈現一個表單,則組件不能相互嵌套。太糟糕了。通過更改所有窗體div,我可以將它們嵌套,並且每當我想抓取所有參數以將它們傳遞給ajax時,我只是(使用jQuery):

$(「#id_of_my_div」)。find 「[名稱]」)序列化();

(或一些其它濾波)

代替:

$( 「#id_of_my_form」)序列化();

雖然,由於感性和語義的原因,我一直以div作爲形式來命名div。