站開發入門指南：表單相關標簽們。

接下來我們來學習一下表單以及相關的元素。

·表單其實英文是叫做fo.rm，在我們平時使用的這種互聯網產品中包括網站也好、app也好，經常會看到這種需要你去填一些資料、填一些文字、填一些數據的這樣一種頁面。像這種頁面其實都是通過表單以及表單的元素去構成、去實現的。

也就是說表單其實是用來收集用戶數據的，它是給用戶去輸入一些數據的。而且輸入完之后，一般它是要跟服務器去發生一些交互的。就是比如說把數據發送到服務器或者在本地處理過后，再給到服務器去進一步的處理或者去保存。所以其實表單這些元素，如果真正要去用起來的話，真正要讓它功能跑起來的話，其實很多時候是要跟js打交道的。所以目前來說只要簡單的去了解一下表單的元素的基本使用就可以了。

·然后后面學了CSS之后，你也知道怎么去給這些表單做它的樣式就OK了。那我們看一下表單以及相關的元素有哪些？表單主要是有一個這樣一個表單本身的標簽，另外這些就是跟它相關的一些標簽元素了。這些元素一般都是放在這個for.m元素里面的嵌套在它里面的。

但是表單的元素，它跟我們之前學過的ul li-olli一定要進行嵌套使用的，這種元素還不太一樣。表單中的元素，像這個和這個是經?？梢詥为毷褂玫?，也就是說不用嵌套在這個form表單里面也是可以用的。所以要明白這些表單內的元素，如果你有需要是完全可以去獨立的去使用它的，并不一定要跟這個for.m.搭.配起來嵌套在它里面的。

·很多時候去使用form這樣的標簽。然后把這些表單的元素嵌套在里面。它其實主要的一個目的，它是為了讓這些就是收集到的數據組成一種結構化的一種模式，結構化的一種狀態。這樣發送到服務器，服務器也可以通過這種更好的結構去讀取數據。

所以目前的學習階段來講是沒有辦法給你去展示表單的作用。但是等你學到JS之后，你在有了這些基礎知識之后，就能通過JS其實非常清晰看到它的整個數據結構。這節課主要是來講一講這個標簽，這個標簽其實會經常單獨的來進行使用。這個標簽之前也簡單的給大家去演示過，它是一個用來做這種文字輸入的標簽。

很多時候，像這種真實的產品頁面，產品里面會發現很多的輸入欄都是用這個標簽去實現。打開開發者工具之后，可以看到這里有一個這樣的小工具，選用它之后就可以去快速的定位到元素。可以看到它這邊有個input，選中之后，元素列表這里也能看到就是input這樣的元素。所以很多的頁面上的輸入框其實都是用input元素來實現的。

input非常重要的屬性叫做type，type屬性之前演示過一個叫text(的值)，一個叫Checkbox，給大家演示過。這兩個設置之后是會產生不同的效果。這種能設置的屬性的值非常多，我這里不給大家去做演示，你有興趣自己可以去嘗試去使用一下。

這里主要是介紹一個是這個之前講過的，給大家簡單也再看一下。一個是checkbox，一個是checkbox，還有一個file，其他的。

還有pasisword也給大家看一下。這里來看一下。首先看到input非常簡單，直接默認的text它這邊，這邊先把它放大一點，放五倍大，大家看起來清楚一點。這樣就可以在這里輸入這樣一個內容了，非常簡單。

然后比如這里改成password，然后這邊輸入的東西自動的就變成這種小圓點了，就相當于是一種幫你保密，就是防止別人偷看到你的密碼。然后就是checkbox(多選框)。之前簡簡單演示過了checkbox會變成這種勾選的框，它有一個屬性，如果你使用的checkbooks這樣的類型，你可以使用這個checked這樣的屬性，就讓元素默認是打勾(選中)的狀態。

像這種東西其他的前面一般都會有一個文字，告訴你這個選項是什么，然后這里把這個改一下，就叫做選擇。想學習的語言其實一定是可以多選的。這里來一個寫一個span，叫做js好html，然后自己再多復制幾個，然后這里變成CSS，變成javascript。像這種前面這種文字用span都是沒有任何問題的。

但是其實在表單元素里面有一個標簽叫做lab.el。label其實一般用來寫這種，就是告訴這個選項是什么樣的一個選項，這樣的一些文字。label有個特殊的作用，比如說把這個換成label，label之后這里有一個屬性叫做for，for可以去跟比如說input，這里設計一個id叫做html。

稍微跟寫的不一樣，這個其實寫一樣也沒有關系，但是這里寫不一樣，大家可能更容易理解一點。

把名字id名跟這個對應上之后for里面是某個元素的id值，就是input這樣的一個元素的id值，label就跟input元素綁定了。注意這里寫錯了label。

·然后看一下可以點擊文字，就相當于點擊了選項框，其他的用spam包裹的文字是沒有綁定的效果。所以label標簽的作用就是有這樣的一個文字跟相應的元素綁定起來。點擊文字相當于就點擊元素這樣的效果。

·然后可以看一下另外一種叫radio這種單選框的元素，也是用input來實現的。然后來看一下input，把它設置成radio的類型就會變成這樣一個圓點。假如還是按照這種模式，比如說這里把ID也設置一下叫做htmltag，其實跟htmltag類型的數據庫也是一樣的。如果設置checked就默認的，就相當于是選中的狀態。

·如果這里還有單選，這里還有一個，如果叫CSS，把這個先取消掉。這里其實是有兩個選項，兩個可選項，整個的結果是希望是呈現單選的狀態，選中其中另外一個，肯定要呈現一種未選中的狀態。

·現在兩個都可以同時選中，這樣肯定是不行的。所以這里可以用屬性，叫做name，就叫section。下面同時也取名字，也是name同樣的值。

這里可以把它理解成用了同一個名字的單選框，他們最終只能選中其中一個?？梢栽囈幌?，比如說點CSS，點html，這個東西是單選框里面非常重要的知識點。

我們百度搜索我們想要的文章時，好不容易找到了我們想要的文章，點開復制，卻發現文章被鎖定，像下面這種情況，復制需要收費，面對這樣的情況，教你一招解決，免費復制自己想要的文章。

首先我們需要找到我們所要復制的文章，按電腦上的F12按鈕，打開如同所示的頁面

然后按F1按鈕

再往下翻，找到Debugger下面的禁用JavaScript,進行打勾

千萬不要將旁邊的框框刪去，這樣就可以免費復制了