表單知識總結(jié)

plus2047 發(fā)布于2019-08-01 15:06 / 2406人閱讀

摘要：表單是前端交互的重要部分，這里總結(jié)了我在使用表單元素時的一些經(jīng)驗和遇到的問題。但現(xiàn)在我知道了，至少對于表單元素，還是很重要的指定的話只是給出個樣式而已，沒有相同的怎么能標(biāo)識操作一類數(shù)據(jù)的控件呢當(dāng)然也就不能實現(xiàn)其默認交互效果啦。

表單是前端交互的重要部分，這里總結(jié)了我在使用表單元素時的一些經(jīng)驗和遇到的問題。

記得設(shè)置元素的name屬性

一個我最近犯的錯：input元素不設(shè)置name，以為設(shè)置了type就自動單選了，光看外表的結(jié)果自然被打臉。。。

其實如果只是單純的DOM操作，元素的name屬性看來是個可有可無的東西，其功能完全可以被id和class替代。但現(xiàn)在我知道了，至少對于表單元素，name還是很重要的---指定type的話只是給出個樣式而已，沒有相同的name怎么能標(biāo)識操作一類數(shù)據(jù)的控件呢！當(dāng)然也就不能實現(xiàn)其默認交互效果啦。

在表單中使用button元素

如果button元素被用在表單form中，那它就不再是個普通按鈕了，要注意，由于其type屬性被設(shè)置成了submit，所以此時它的行為是和這個元素一致的，你一點擊它就會提交表單、發(fā)送請求。

但如果我們就想讓它老老實實做個按鈕，或者用于實現(xiàn)其他的功能，而不是每次一點擊就會提交表單。這時，和input元素一樣，我們可以通過設(shè)置其type屬性來達到目的，只不過其選項就比較少了，只有無默認行為的button和重置的reset兩個值可供使用。

防止表單屬性和表單元素的沖突

在表單里，每個表單元素的id或name值都可以看成form元素的一個屬性，而屬性的值就是具有該id或name的元素。所以我們要獲得表單元素，除了經(jīng)典的DOM方法外，還可以這么做：

雖然在表單里的這個設(shè)定給我們引用表單元素帶來很大的方便，但如果我們要使用一些form這個DOM對象的默認屬性，那我們后定義的表單元素就會覆蓋原來的屬性，導(dǎo)致調(diào)用不到！！比如下面這個例子：

所以，我們?nèi)绻L問form對象的默認屬性，就必須得保證我們表單元素的id或name的值不與原有的屬性名沖突，否則是訪問不到的。