表單知識(shí)總結(jié)

jk_v1 發(fā)布于2019-08-19 17:49 / 3184人閱讀

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

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

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

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

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

在表單中使用button元素

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

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

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

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

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

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