HTML5與CSS3基礎教程 第16章 表單

2021-10-23 04:16:30 字數 1955 閱讀 1768

《html5與css3基礎教程(第8版)》 第16章讀書筆記

前端表單驗證,不能完全代替伺服器端驗證,因為舊的瀏覽器或禁用js的瀏覽器不會執行客戶端驗證。

h5新增表單控制項:email, tel, url

fieldsetlegend(p324 - 327)

如果表單上有很多資訊需要填寫,可以使用fieldset元素將相關的元素組合在一起,使表單更容易理解。

還可以使用legend元素為每個fieldset提供乙個標題。legend元素可以提高表單的可訪問性。如對於一組單選按鈕,legend元素可以提供明顯的上下文。如果使用legend元素,那麼必須是fieldset的第乙個元素。

表單元素的name,forid(p327 - 331)

文字框的預設大小(size)是20(個字元)。

密碼框的唯一保護措施是防止他人看到使用者輸入密碼, 要真正保護密碼需要採取其他措施,比如使用https(p332)

使用tel表單控制項,在移動端輸入時可以啟動數字鍵。

搜尋框:(p335)

文字區域:(p338 - 339)

選擇框:(p339 - 341)

selectsize屬性可以設定選擇框的高度(行數),當大於1時,外觀更像列表(但不是多選)。當size大小大於select的選項數量時,可以選擇多餘的空白項使其處於未選中狀態。

檔案上傳:(p341 - 342)

提交按鈕:(p343 - 344)

重置按鈕:type = "reset"。(p345)

表單項的disablereadonly

根據狀態設定樣式:(p347)

選擇器應用瀏覽器支援

:focus

獲取焦點的字段

ie8+

:checked

選中的單選按鈕或核取方塊

ie9+

:disabled

具有disabled屬性的字段

ie9+

:enable

與:disabled相反

ie9+

:required

具有required屬性的字段

ie10+、safari5+

:optional

與:required相反

ie10+、safari5+

:invalid

值與pattern不匹配的字段,或不滿足電子郵件、url,以及任意標記為required但是為空的字段

ie10+、safari5+

:valid

與:invalid相反

ie10+、safari5+

當頁面載入時就會應用:invalid的情況,可以使用:not偽類(如input:invalid:not(:required)選擇器);也可以使用js控制。

HTML5與CSS3基礎教程 第7章 CSS構造塊

html5與css3基礎教程 第8版 第7章讀書筆記 rem單位 10.6章節。hsl rgba hsla格式是在css3引入的 rgb不是 css3還擴充套件了原有的16個基本顏色名稱。使用css優先順序適配老瀏覽器 p137 比如css的alpha透明度是在ie9之後才支援的,可以通過css的優...

HTML5與CSS3基礎教程 筆記

1.構造塊 3.基本html結構 頁面字元編碼很重要,例如如果沒有設定utf 8,可能很多字元都會亂碼 語義化標籤 以下標籤為html5新引入 出於seo和可訪問性的目的,最好將重要的內容放在前面,通過css來改變他們在瀏覽器中的順序 4.文字 5.影象 無損 jpeg不支援透明,png gif均支...

HTML5與CSS3基礎教程 前言筆記

漸進增強 一種最佳實踐。全球資訊網的普適性 全球資訊網上的資訊應該能被所有人訪問。漸進增強 progresive enhancement 的理念能幫助你構建具有普適性的 這不是一門語言,而是一種建站方法,它由steve champeon於2003年提出 乙個基本的html頁面,未對其應用任何自定義的...