今天是劉小愛自學(xué)Java的第77天。

感謝你的觀看，謝謝你。

話不多說，開始今天的學(xué)習(xí)：

一、form表單

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

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

表單的作用是將數(shù)據(jù)提交給服務(wù)器，至于具體是如何提交的，暫時(shí)還不清楚，后續(xù)會(huì)學(xué)習(xí)到。

在我們現(xiàn)實(shí)生活中也挺常見的，有時(shí)會(huì)使用到的注冊頁面就可以理解成一個(gè)表單。

表單由三個(gè)部分組成：

「1表單標(biāo)簽」

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

也就是對應(yīng)form表單中的兩個(gè)屬性：action和method。

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

method也就是表單提交的方式

• get：數(shù)據(jù)會(huì)出現(xiàn)在地址欄上面，是可見的，不安全。
• post：提交的參數(shù)不會(huì)顯示在地址欄上，是不可見的，相對而言更加安全。

「2表單域」

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

「3表單按鈕」

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

form其子標(biāo)簽有：input（輸入的內(nèi)容），select（下拉框），textarea（文本域）

現(xiàn)在用代碼演示表單是如何寫出來的。

二、input標(biāo)簽

input 輸入的意思，它是form標(biāo)簽中非常重要的子標(biāo)簽。

「1.type屬性」

「①用戶名：type="text"」

這個(gè)是默認(rèn)的類型，也就是說如果input子標(biāo)簽中什么都不寫的話就是文本框。

「②密碼：type="password"」

密碼框和文本框的區(qū)別在于文本框里的數(shù)據(jù)用戶直接能看到，但是密碼框里的數(shù)據(jù)，用戶直接看不到。

「③性別：type="radio"」

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

「④愛好：type="checkbox"」

checkbox，復(fù)選框，意思就是可以同時(shí)選擇好幾個(gè)。

「⑤生日：type="date"」

也就是日期，日期在表單中是一個(gè)時(shí)間框，用戶選擇對應(yīng)時(shí)間點(diǎn)擊就好了。

「⑥上傳頭像：type="file"」

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

「⑦提交按鈕」

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

• 提交按鈕是最基本的按鈕，提交數(shù)據(jù)。
• 重置就是可以將數(shù)據(jù)一鍵清零。
• 一般按鈕，上述中是用一張圖片代替的，更美觀，其本質(zhì)還是被用來當(dāng)成一個(gè)提交按鈕。

「⑧隱藏域：type="hidden"」

顧名思意，數(shù)據(jù)是隱藏的，頁面上面看不到。

「2.其它屬性」

前面只是初步做出了一個(gè)模型，還有屬性將表單功能進(jìn)一步完善。

「①name屬性和values屬性」

基本上每一個(gè)input標(biāo)簽都可以設(shè)定name和values屬性。

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

其中生日和頭像不需要values，可以設(shè)定name，因?yàn)槠浔旧砭褪且粋€(gè)輸入框，values相當(dāng)于是從外部傳入的。

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

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

如果拿Java中的知識點(diǎn)做一個(gè)比較的話：

• name就相當(dāng)于Map集合中的key。
• value就相當(dāng)于Map集合中的value。

「②單選框功能完善」

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

value表示其對應(yīng)的值，比如用0表示是男，1表示是女。

checked="checked"，這個(gè)可以用來指定單選框的默認(rèn)值。

其中我通過測試發(fā)現(xiàn)：「如果單選框中都有這個(gè)默認(rèn)屬性，那么默認(rèn)值是最后面的那個(gè)單選框。」

「③復(fù)選框」

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

三、input標(biāo)簽（了解）

「1.其它屬性」

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

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

「①size屬性」

用來用來控制文本框的長度，默認(rèn)大小是20

「②maxlength屬性」

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

「③readonly屬性」

只讀的意思，文本框中的數(shù)據(jù)可以選中也可以點(diǎn)擊，數(shù)據(jù)會(huì)提交但是不能修改。

「④disabled屬性」

不可用的意思，只能看，不能選也不能點(diǎn)，并且數(shù)據(jù)也不會(huì)提交。

「2其它type屬性」

button：可以定義一個(gè)可點(diǎn)擊的按鈕。

color：可以設(shè)定顏色（RGB）。

week：用第幾周來表示時(shí)間。

month：用第幾月來表示時(shí)間。

emil：定義一個(gè)郵件文本框（可用來校驗(yàn)輸入格式）

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

四、下拉框和文本域

學(xué)完form表單中的input子標(biāo)簽，還有兩個(gè)子標(biāo)簽select和textarea。

「1下拉框」

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

option屬性：選項(xiàng)，有它才能有多個(gè)選項(xiàng)，這樣才會(huì)出現(xiàn)下拉框。

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

size屬性：多選時(shí)用以表示一次顯示的數(shù)量。

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

「2文本域」

name屬性：提交時(shí)需要，不再贅述。

rows屬性：文本域中的行數(shù)。

cols屬性：文本域中的列數(shù)。

最后

謝謝你的觀看。

如果可以的話，麻煩幫忙點(diǎn)個(gè)贊，謝謝你。