成長是一輩子的事兒！大家好！我是時問新。分享前端、Python等技術，以及個人成長路上的那些事兒。

密碼框

使用標簽，把標簽上的type屬性的值，設置為"password"，就可以創建密碼框。

密碼框和單行文本框非常像，只不過，在單行文本框里面輸入的內容，會顯示出來，而在密碼框里面輸入的內容，都會變成小黑點隱藏起來。

我還是接著在之前的"表單控件.html"這個頁面上繼續寫代碼(從密碼框那里看就行了)：

Document

請輸入你的名字：

畢業學校：

郵寄地址：

所學專業：

性別： 男 女

血型： A B AB O

我愛好的體育項目： MMA 羽毛球 長跑 游泳

請輸入密碼：

在瀏覽器中顯示效果如下：

我在瀏覽器頁面上的密碼框中隨便輸入密碼，會隱藏起來變為小黑點。

下拉菜單

創建下拉菜單需要使用標簽，標簽對兒里面羅列的標簽是它內部的選項。也就是說，標簽是下拉菜單的選項。

跟無序列表和有序列表一樣：標簽的子標簽只能是標簽，而且標簽也不能單獨使用，只能把它放在標簽中使用。

在標簽上，要有value屬性，value屬性的值是提交到服務器上的，而標簽對兒之間的內容才是顯示給用戶看的。

每一個標簽上value屬性的值不一定一樣，value的值根據實際需要去設定。

我繼續在"表單控件.html"這個頁面上寫下拉菜單的演示代碼：

Document

請輸入你的名字：

畢業學校：

郵寄地址：

所學專業：

性別： 男 女

血型： A B AB O

我愛好的體育項目： MMA 羽毛球 長跑 游泳

請輸入密碼：

請選擇你最喜歡的新能源汽車： 特斯拉小鵬蔚來威馬理想雷丁比亞迪

在瀏覽器上顯示效果如下：

點擊下拉菜單，用戶可以在下拉菜單中進行選擇。

多行文本框

使用標簽來創建多行文本框。

text是文本，area是區域，所以textarea就是文本區域，也就是多行文本框。

的rows和cols屬性

rows和cols這兩個屬性的值是數字，沒有單位。

rows和cols這兩個屬性分別用來定義多行文本框的行數和列數，實際上就是定義多行文本框有多寬和多高。

我接著寫多行文本框的演示代碼：

Document

請輸入你的名字：

畢業學校：

郵寄地址：

所學專業：

性別： 男 女

血型： A B AB O

我愛好的體育項目： MMA 羽毛球 長跑 游泳

請輸入密碼：

請選擇你最喜歡的新能源汽車： 特斯拉小鵬蔚來威馬理想雷丁比亞迪

留言：

當你在vscode中寫textarea然后按tab鍵時，會生成完整的標簽代碼，生成的代碼中默認會把cols的值給定為30，把rows的值給定為10。

在瀏覽器中顯示如下：

當然，你可以自己調整cols和rows的值，多行文本框的寬高就會隨著你的調整而變化。

在多行文本框中，用戶可以輸入內容。

三種按鈕

表單中常見的有三種按鈕，它們也都是用標簽創建的，只不過type屬性值不同，就表示不同的按鈕。

當標簽的type屬性值為"button"時，就創建了一個普通按鈕。也可以直接用標簽對兒來創建普通按鈕。button這個單詞就是按鈕的意思。

當標簽的type屬性值為"submit"時，就創建了一個提交按鈕。點擊這個按鈕時，表單將會提交到form標簽的action屬性值所指向的那個后臺網站。submit這個單詞就是提交的意思。

當標簽的type屬性值為"reset"時，就創建了一個重置按鈕。點擊這個按鈕時，表單中的所有控件都將被立即重置。reset這個單詞就是重置的意思。

按鈕上的value屬性的值，就是顯示在按鈕上的文字。

我接著寫這三種按鈕的演示代碼：

Document

請輸入你的名字：

畢業學校：

郵寄地址：

所學專業：

性別： 男 女

血型： A B AB O

我愛好的體育項目： MMA 羽毛球 長跑 游泳

請輸入密碼：

請選擇你最喜歡的新能源汽車： 特斯拉小鵬蔚來威馬理想雷丁比亞迪

留言：

我是一個普通按鈕

注：我這里在表單控件外面包裹一個p標簽，是為了在瀏覽器中顯示出來好看點。因為這些標簽都是行內元素，所謂行內元素，就是在同一行內顯示的元素。不加p標簽，它們都會擠在一起，非常難看，給它們外面分別都加了p標簽，就會換行顯示。

以上代碼在瀏覽器中顯示效果如下：

當點擊普通按鈕時，也默認會有一個提交的操作，如何取消提交，需要JavaScript相關編程。先不用管它。

當點擊提交按鈕時，頁面的網址會自動變為form標簽上action屬性的值所表示的網址。到底表單是怎么提交的，這需要http以及后臺的一些知識，等后面了解了ajax相關知識，自然就明白了。現在也不用管它。

當點擊重置按鈕時，只要是在同一個form標簽對兒里面的表單控件，都會自動重置掉。比如你在這個頁面輸入名字、畢業學校、郵寄地址、選擇性別、血型、體育愛好、單行文本框和多行文本框都輸入好內容，然后當你點擊重置按鈕時，這些表單控件都會重置。你可以自己試一試。

input標簽的類型總結

input標簽的type屬性，不同的屬性值就表示不同的表單控件。

以上的表單控件都是用input標簽創建的，另外多行文本框和下拉菜單不是用input標簽創建的。這樣就好記一些。

以上這些表單控件的兼容性都很好，包括最老舊的ie6瀏覽器也是支持的。

感謝閱讀！知識總結不易，請點個贊或轉發鼓勵一下唄！想系統性學習前端的小伙伴可以關注我！

總結

以上是生活随笔為你收集整理的ajax如何提交多表单的值_25 HTML5表单基本控件(二)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。