頁編程之圖片、隱藏。

同學(xué)們好，這里是免費少兒編程知識分享，每天一行代碼誰都能學(xué)會。今天分享的知識是為網(wǎng)頁添加圖片控件和隱藏控件，用到的是input標簽的type屬性值，image和hidden。這兩個控件太過于簡單，所以我就放在一起講了，同時介紹了image控件button的image內(nèi)容，以及IMG控件之間的區(qū)別。演示了hidden控件在實際編程中的作用。

先來看看今天實例的運行效果。網(wǎng)頁上分為兩段。

·第一段中有三張圖片，第一張就是type屬性等于image的效果，第二張是button中包含IMG標簽的效果，第三張是純IMG標簽的效果。這三張圖片的共同點是圖片完全一致。不同點是type=image，直接將整張圖片做成了提交按鈕，點擊之后即可提交整張表單，但外觀表現(xiàn)時仍然和普通的圖片是沒有任何差別的。

·第二張是button按鈕中使用了IMG標簽，雖然它也有提交和圖片，但是它最外面仍然保留了按鈕的外邊框，看上去是以按鈕為主。

·第三章中直接使用IMG標簽，它沒有提交功能就是一普通的圖片，但是我們?nèi)匀豢梢酝ㄟ^JS的submit函數(shù)來使其提交表單。

·第二段是一個密碼框一個提交按鈕。這一句話只是為了方便你們找到隱藏空間的位置，我還做了兩個hidden的隱藏控件，但是你們看不到，我隨便在這里輸入密碼，然后點擊按鈕時，JS就會取出(密碼)控件的值和隱藏控件中的值并且彈出對話框提示。

這里有兩點需要注意，可以看到密碼控件中的值在這里仍然是明文顯示的，證明它只是視覺上是*或者圓點，實際在數(shù)據(jù)傳輸中仍然是明文并沒有加密。

·第二點是隱藏控件中的值被成功讀取，看不到并不代表不存在，效果各位同學(xué)都已經(jīng)看到了。

在我們來看看實現(xiàn)的代碼，先講image值，它的關(guān)鍵屬性就是src和ID，也就是引用地址和命名，沒有什么好講的。我其實是不建議你們使用這個控件的，因為一般表單提交前，都會加上一層一層的驗證，比如說是必填、b7手勢、數(shù)字、格式是否正確。這個時候除了最基礎(chǔ)的控件類型驗證外還會用到 gs驗證。而如果使用 gs驗證就需要用到自定義函數(shù)，在提交到服務(wù)器前就驗證好。

如果用戶數(shù)據(jù)是正確的就提交，如果不正確就終止提交操作提示用戶修改流程，這樣看上去沒有問題，但因image控件討厭也就討厭在這里。

·若用這種方式提交可能會發(fā)生表單提交兩次的現(xiàn)象，經(jīng)常會造成表單元素被重復(fù)提交，數(shù)據(jù)庫被寫入異常，所以盡量不用或者少用。

·至于hidden控件常用來保存一些不需要或者不希望展示給用戶的數(shù)據(jù)，他的常用屬性就是無這個Value和這個id。

我舉個例子幫助你們理解，現(xiàn)在客戶要求建立一個注冊新用戶的界面，但是要求將注冊步驟分為兩步。第一步，需要用戶填寫手機和昵稱，然后跳轉(zhuǎn)至第二頁，輸入密碼和其他的信息，第二頁肯定就不需要顯示出來用戶在第一頁的時候輸入的數(shù)據(jù)了。但這些數(shù)據(jù)又必須在第二頁的時候一起提交至服務(wù)器。

這時候就可以使用到隱藏控件--接收第一頁提交過來的數(shù)據(jù)并且不顯示，用戶也感受不到。直接填好信息提交時第一頁的數(shù)據(jù)也以隱藏空間的方式一起提交了。這僅僅是hidde空間的一個使用場景，還可以收集用戶信息、確定用戶身份、判斷提交源，在多個form表單中建立關(guān)節(jié)聯(lián)、做全局變量等，總的來說應(yīng)用方式還是很廣的。

在目前這個階段就只需要知道這兩控件能干什么和基礎(chǔ)寫法，計算完成后面到具體的使用場景時會再詳細講解。

好了，今天的分享就到這里，希望各位同學(xué)下去能夠照著寫三遍，做到不看視頻也能夠?qū)懗鰜恚械陌咐跋嚓P(guān)文檔均可以向我獲取。下期見。網(wǎng)頁編程·服務(wù)端編程·數(shù)據(jù)庫·算法，點贊點關(guān)注吧！