您現在的位置是:電腦技術吧?>? 故障問題 ??>??數據表和表單的區別,表單與表格有什么區別??>??正文詳情

數據表和表單的區別,表單與表格有什么區別

狂慕晴2019-11-18 02:50:34 人圍觀
簡介表單本文主要介紹readonly和disabled在表單中的區別。非常詳細全面。需要了解相關信息的人應該仔細研究。只讀和禁用是表單中使用的兩個屬性。它們可以使用戶無區別表格

這篇文章主要介紹了表單中Readonly和Disabled的區別詳解,十分的細致,全面,需要了解相關信息的小伙伴們快來仔細研究下吧Readonly和Disabled是用在表單中的兩個屬性,它們都能夠做到使用戶不能夠更改表單域中的內容。

但是它們之間有著微小的差別,總結如下:Readonly只針對input(text / password)和textarea有效,而disabled對于所有的表單元素都有效,包括select, radio, checkbox, button等。

但是表單元素在使用了disabled后,當我們將表單以POST或GET的方式提交的話,這個元素的值不會被傳遞出去,而readonly會將該值傳遞出去(這種情況出現在我們將某個表單中的textarea元素設置為disabled或readonly,但是submit button卻是可以使用的)。

一般比較常用的情況是:在某個表單中為用戶預填了某個唯一識別代碼,不允許用戶改動,但是在提交時需要傳遞該值,此時應該將它的屬性設置為readonly。

經常遇到當用戶正式提交了表單后需要等待管理員的信息驗證,這就不允許用戶再更改表單中的數據,而是只能夠查看,由于disabled的作用元素范圍大,所以此時應該使用disabled,但同時應該注意的是要將submit button也disabled掉,否則只要用戶按了這個按鈕,如果在數據庫操作頁面中沒有做完整性檢測的話,數據庫中的值就會被清除。

如果說在這種情況下用readonly來代替disabled的話,若表單中只有input(text/password)和textarea元素,那還是可以的,如果存在其他發元素,比如select,用戶可以在重新改寫值后按回車鍵進行提交(回車是默認的submit觸發按鍵)。

我們常常在用戶按了提交按鈕后,利用javascript將提交按鈕disabled掉,這樣可以防止網絡條件比較差的環境下,用戶反復點提交按鈕導致數據冗余地存入數據庫。

disabled和readonly這兩個屬性有一些共同之處,比如都設為true,則form屬性將不能被編輯,往往在寫js代碼的時候容易混合使用這兩個屬性,其實他們之間是有一定區別的。

如果一個輸入項的disabled設為true,則該表單輸入項不能獲取焦點,用戶的所有操作(鼠標點擊和鍵盤輸入等)對該輸入項都無效,最重要的一點是當提交表單時,這個表單輸入項將不會被提交。

而readonly只是針對文本輸入框這類可以輸入文本的輸入項,如果設為true,用戶只是不能編輯對應的文本,但是仍然可以聚焦焦點,并且在提交表單的時候,該輸入項會作為form的一項提交。

小技巧:diabled可用readonly代替,background-color:#cccccc;加上灰色背景色就可以。

代碼如下:!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=http://www.w3.org/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=utf-8 / titleUntitled Document/title /head body form id=form1 name=form1 method=get action= input name=q1 type=text id=q1 value=readonly readonly=true / input name=q2 type=text disabled=disabled id=q2 value=disabled / input type=submit name=Submit value=Submit / /form /body /htmlinput的字段當為diabled時時無法獲取數值得,所以最近不要用這個,我們可以用readonly帶替代,即可解決這類問題。

代碼如下:input name=nowamagic id=nowamagic size=12 value=disabled disabled=disabled放在form表單中提交后得不到該值。

將disabled=disabled 改為 readonly = readonly 即可 ,按照W3C的規范:http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.12設置為disabled的input將會有下面的限制:不能接收焦點使用tab鍵時將被跳過可能不是successful的設置為readonly的input將會有下面的限制:可以接收焦點但不能被修改可以使用tab鍵進行導航可能是successful的只有successful的表單元素才是有效數據,也即是可以進行提交。

disabled和readonly的文本輸入框只能通過腳本進行修改value屬性。

這兩個屬性在效果和使用上的區別:readonly是要鎖定這個控件,通過在界面上無法修改他(但是通過javascript可以修改他)。

disabled和readonly有相同的地方也是可以鎖定這個控件用戶不能改變他的值,但是disabled的更徹底一些,他是要使你完全不能使用他,包括改變他的背景顏色(不信,你去修改一個被disabled掉的input文本框,你發現你是徒勞),如果是checkbox則不能選中他。

所有控件都有disabled 屬性,但是不一定有readonly屬性,如select 下拉框。

點擊被readonly掉的按鈕照樣可以觸發事件,但是被disabled掉的按鈕就無法使用了不管上面有沒有事件。

將div設置disabled屬性之后,整個div都灰掉了,但是文本框里面還是可以輸入內容的。

注意:select下拉選擇框是沒有readonly屬性的大家仔細想一下會有一個問題出現,就是有時候我們寫程序的時候,比如一個購買商品的頁面,我們可以在上面輸入商品的數量,但是價格我們設置成只讀的,最后下面有一個總價格就是 數量 * 只讀的價格,那么我們很可能就是這樣做的,在后臺的時候讀取 商品數量的 textbox值,然后讀取 價格的textbox的值,然后兩者的積 作為總金額 uodate到數據庫中去了,如果客戶端的用戶和我們一樣是一個會點程序的小程序員,那么麻煩就有可能來拉,他可以查看源文件,查看到被readonly的價格的文本框的id或者是name什么的,然后在瀏覽器中輸入腳本去改變價格的值,然后點提交,那么這個小程序員就可以隨便怎么給自己打折都不過份啊。

我們將表單的提交方法設置成get提交,我們就可以在url里面看到提交的內容,發現被設置成disabled的控件沒有提交到服務器,readonly的提交數據到服務器了。

關于用js控制disabled和readonly的問題,下面是一段參考代碼:代碼如下:!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdhtml xmlns=http://www.w3.org/1999/xhtmlheadmeta http-equiv=Content-Type content=text/html; charset=utf-8 /title無標題文檔/title/headbody form enctype=multipart/form-data action=sign.php method=post name=moblie_act_form id=moblie_act_form input type=text class=input id=mobile name=mobile value={$mobile} readonly=true disabled=disabled input type=button value=修改 onClick=modify_phone() /form /html script language=javascript function modify_phone(){ if(confirm(您確定要修改您的手機號碼嗎?

)){ document.moblie_act_form.mobile.readOnly = false; document.moblie_act_form.mobile.disabled = false; } return true; } /script /body/html以上就是本文的全部內容了,希望大家能夠喜歡。

版權聲明:本文由 狂慕晴 整理編輯。

原標題:表單與報表的區別,表單和記錄的區別

轉載注明出處:http://www.dn9ww09s.icu/fault/13366.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • pscs5用序列號怎么安裝,photoshop序列號 破解

    pscs5用序列號怎么安裝,photoshop序列號 破解 相關圖片aics5序列號永久序列號Photoshop CS5是專業圖像處理軟件PS的一個流行版本。一些合作伙伴詢問他們是否有Photoshop CS5的永久序列號,并希望激活Photoshop cs5激活碼...

  • cs3怎么用,cs3

    cs3怎么用,cs3 相關圖片gcs3在GAP閃存中關閉形狀跟隨功能,當你添加運動時,將會有更多的標準化和靈活的設計。另一方面,你的角色在解剖學上會更正確。至少有時候你能找到制作動畫的方法,在需要真cs3是...

  • exe是什么,msdt.exe

    exe是什么,msdt.exe 相關圖片svchost.exe是什么在使用迅雷的過程中,用戶發現在檢查的過程中有一個xlueops.exe文件,占用了大量內存,這也是電腦卡住的原因。什么是xlueops.exe?我可以關閉或刪除電腦exe文件不能運行...

  • 電腦的配置基本知識,如何查看電腦配置參數

    電腦的配置基本知識,如何查看電腦配置參數 相關圖片電腦虛擬配置對于那些喜歡玩游戲的人來說,擁有一臺好電腦是非常重要的。那么如何查看計算機配置信息呢?下面,超人軟件編輯就給大家帶來一個玩游戲的電腦配置推薦,希望大家...

  • 用戶思維,用戶思維概念

    用戶思維,用戶思維概念 相關圖片用戶思維經營用戶在開始討論之前,我將首先提出兩個應用研究領域的人們經常問的問題,即我為什么要做應用研究?我能為我的生意做什么應用研究?為了回答這兩個問題,我把自己...

  • 完美解碼播放器怎么樣,完美解碼同時播放多個視頻

    完美解碼播放器怎么樣,完美解碼同時播放多個視頻 相關圖片完美解碼擴展模式播放當我們觀看視頻時,不可避免地會遇到我們不想看的情節。如果我們直接跳過,有時會妨礙情節的連續性。此外,音像不符的情況也時有發生。此時可以使用控制...

  • 用dreamweaver做網頁,dreamweaver個人網頁

    用dreamweaver做網頁,dreamweaver個人網頁 相關圖片dreamweaver使用結果表明,用表格美化網頁的方法有很多種。在這個例子中創建的層次表如圖8-1所示,它不需要很多技巧就可以使用表單來美化頁面。例如,在本例中,只需嵌套一個簡單的...

  • word是否使用安全模式,怎樣用安全模式打開word

    word是否使用安全模式,怎樣用安全模式打開word 相關圖片word提示用安全模式打開最近,很多朋友反映,當他們打開word時,發現它總是以安全模式打開的。那么單詞安全模式有什么用呢?如何刪除word安全模式?現在,超人軟件將為你解答,希...

  • s。,s?s

    s。,s?s 相關圖片什么是HTML病毒名稱(中文):病毒別名:威脅級別:★★☆病毒類型:網頁病毒長度:影響系統:win9xwinnt病毒行為:網頁病毒利用ie漏洞將sysp.exe文件下載到C:HTML5...

  • ps字體安裝詳細教程,ps不顯示新安裝的字體

    ps字體安裝詳細教程,ps不顯示新安裝的字體 相關圖片ps教程文字效果我相信當你使用PS時,你都希望有更多的字體格式。那么如何安裝PS字體呢?接下來,超人軟件編輯想給大家帶來PS字體安裝教程,希望大家喜歡它怎么安裝PS字體?方法...

熱評文章

  • 桌面圖標全部不顯示怎么辦,電腦桌面空白怎么恢復

    桌面圖標全部不顯示怎么辦,電腦桌面空白怎么恢復 相關圖片所有桌面最近,在使用電腦的過程中,網民反映最普遍的問題是,如果桌面圖標丟失了怎么辦?如果桌面圖標變大怎么辦?現在,超人軟件將為您帶來有關桌面圖標的相關內容,希望您...

  • 手動ghost只做c盤順序,一鍵ghost只還原c盤

    手動ghost只做c盤順序,一鍵ghost只還原c盤 相關圖片win7硬盤消失了只剩下c盤現在用戶在重新安裝系統的過程中,首選的方式是ghost,但ghost雖然簡單,但仍有用戶遇到了ghost后只剩下C盤的情況。計算機中只剩下一個分區,不僅使用不便只...

  • 用html5的canvas畫畫,html5canvas畫弧

    用html5的canvas畫畫,html5canvas畫弧 相關圖片canvas 畫圖代碼太簡單了。代碼如下:VAR canvas=document。Getelementbyid(canvas);//設置繪圖環境var CXT=canvas。Gehtml5畫點...

  • 應用程序錯誤是怎么回事,手機應用程序錯誤是怎么回事

    應用程序錯誤是怎么回事,手機應用程序錯誤是怎么回事 相關圖片應用程序錯誤是什么意思360的產品有很多用戶。其中一些在使用過程中出現360個應用錯誤,程序無法正常工作。怎么了?如何解決360個應用程序錯誤?360個應用程序錯誤的最高頻率是多...

  • 水波gif,水波的動態圖

    水波gif,水波的動態圖 相關圖片點動水波動態壁紙煙花動態水波標識教程動態水波效果js...

  • word段落間距太大,word2003行間距怎么調

    word段落間距太大,word2003行間距怎么調 相關圖片微型word行間距怎么調在word中,只有適當的行距才能使頁面看起來更舒適。所以你知道如何調整單詞的行距嗎?如果你不能調整單詞的行距,你能做什么?現在,超人軟件將為您介紹單詞...

  • 無效,無效鏈接怎么解決

    無效,無效鏈接怎么解決 相關圖片句柄無效怎么處理很多朋友在使用deamweaver8時會遇到這樣的情況:他們將CSS文件鏈接到當前編輯的文檔,并將定義的CSS樣式應用到頁面元素,但在DW8中看不到任何效果。如mmi碼無效怎么解...

  • 手機12306怎么兌換車票,12306積分兌換比例

    手機12306怎么兌換車票,12306積分兌換比例 相關圖片12306怎么總積分兌換車票12306應用是鐵道部推出的官方軟件。因此,用戶可以通過購買門票并將其兌換為門票來獲得積分。如何兌換12306點的車票?現在,超人軟件將帶給你123分12306上積分...

  • Down,唧唧Down

    Down,唧唧Down 相關圖片Sit down病毒名稱(中文):病毒別名:威脅級別:★★☆病毒類型:網頁病毒長度:影響系統:win9xwinnt病毒行為:網頁木馬會利用名為rundll64.exe的木馬文件Put down...

  • word跨頁表格怎么銜接,word表格斷開怎樣連上

    word跨頁表格怎么銜接,word表格斷開怎樣連上 相關圖片word表格斷頁了怎么辦我相信大家在使用word的過程中都遇到過跨頁斷字的情況。現在,如何連接單詞表跨頁斷開連接?現在,超人軟件將介紹如何連接單詞表跨頁斷開連接word怎么把打斷...

關注微信

变脸官网查询