一、form表單

form，表格、表單的意思，我一開始把它和from搞混了。

還在想from不是從……開始的意思么，和表單有什么關系，感覺快被自己蠢哭了。

表單的作用就是將數據提交給服務器，至于其具體是如何提交的，暫時還不清楚，后續會學習到。

在我們現實生活中也挺常見的，有時會使用到的注冊頁面就可以理解成一個表單。

表單由三個部分組成：

1表單標簽

包含了處理表單數據所用CGI程序的URL以及數據提交到服務器的方法。

也就是對應form表單中的兩個屬性：action和method。

action就是指數據提交的路徑，其中#表示的是本頁面。

method也就是表單提交的方式

• get：數據會出現在地址欄上面，是可見的，不安全。
• post：提交的參數不會顯示在地址欄上，是不可見的，相對而言更加安全。

2表單域

用戶名，密碼，郵箱這些都是表單域中的一部分。

3表單按鈕

注冊按鈕也就是其中的一種。

form其子標簽有：input（輸入的內容），select（下拉框），textarea（文本域）

現在用代碼演示表單是如何寫出來的。

二、input標簽

input 輸入的意思，它是form標簽中非常重要的子標簽。

1.type屬性

①用戶名：type="text"

這個是默認的類型，也就是說如果input子標簽中什么都不寫的話就是文本框。

②密碼：type="password"

密碼框和文本框的區別在于文本框里的數據用戶直接能看到，但是密碼框里的數據，用戶直接看不到。

③性別：type="radio"

radio，收音機，在這兒是單選框的意思。性別要么男，要么女也好理解。

④愛好：type="checkbox"

checkbox，復選框，意思就是可以同時選擇好幾個。

⑤生日：type="date"

也就是日期，日期在表單中是一個時間框，用戶選擇對應時間點擊就好了。

⑥上傳頭像：type="file"

直接選擇本地文件就可以上傳了。

⑦提交按鈕

一共有三種按鈕：提交按鈕，重置按鈕和一般按鈕。

• 提交按鈕是最基本的按鈕，提交數據。
• 重置就是可以將數據一鍵清零。
• 一般按鈕，上述中是用一張圖片代替的，更美觀，其本質還是被用來當成一個提交按鈕。

⑧隱藏域：type="hidden"

顧名思義，數據是隱藏的，頁面上面看不到。

2.其它屬性

前面只是初步做出了一個模型，還有屬性將表單功能進一步完善。

①name屬性和values屬性

基本上每一個input標簽都可以設定name和values屬性。

如果是文本框密碼框，values表示的也就是初始默認值。

其中生日和頭像不需要values，可以設定name，因為其本身就是一個輸入框，values相當于是從外部傳入的。

其中提交按鈕不需要name，但是可以設定values（也就是按鈕顯示的文字）。

name和value具體有什么用呢？看下圖;

如果拿JAVA中的知識點做一個比較的話：

• name就相當于Map集合中的key。
• value就相當于Map集合中的value。

②單選框功能完善

如果name設定是一樣的，那么就只能選擇一個，不然就算都是單選框，但是name不一樣，還是可以多選。

value表示其對應的值，比如用0表示是男，1表示是女。

checked="checked"，這個可以用來指定單選框的默認值。

其中我通過測試發現：如果單選框中都有這個默認屬性，那么默認值是最后面的那個單選框。

③復選框

和單選框一樣的道理，唯一區別就是可以多選。

三、input標簽（了解）

1.其它屬性

上述中說明的屬性都是form表單中非常常見的。

除此之外還有一些其它屬性，相對而言不是經常見，但最好也對其有一定的了解。

①size屬性

用來控制文本框的長度，默認大小是20

②maxlength屬性

可以設定輸入的最大長度，我設置的是6，那么文本框里輸入的字符只能有6個。

③readonly屬性

只讀的意思，文本框中的數據可以選中也可以點擊，數據會提交但是不能修改。

④disabled屬性

不可用的意思，只能看，不能選也不能點，并且數據也不會提交。

2其它type屬性

button：可以定義一個可點擊的按鈕。

color：可以設定顏色（RGB）。

week：用第幾周來表示時間。

month：用第幾月來表示時間。

emil：定義一個郵件文本框（可用來校驗輸入格式）

type中的屬性實在是太多了，就不一一說明了，詳情見下圖：

四、下拉框和文本域

學完form表單中的input子標簽，還有兩個子標簽select和textarea。

1下拉框

name屬性：也就是瀏覽器中地址欄里的name。

option屬性：選項，有它才能有多個選項，這樣才會出現下拉框。

multiple屬性：多樣的，用其可以多選。

size屬性：多選時用以表示一次顯示的數量。

如果不用multiple屬性，這是單選，也就是圖中右下角。

2文本域

name屬性：提交時需要，不再贅述。

rows屬性：文本域中的行數。

cols屬性：文本域中的列數。

最后

謝謝你的觀看。

如果可以的話，麻煩幫忙點個贊，謝謝你。