前言

騰訊的面試涼了，接著開始面試網易

網易的面試體驗挺不錯。它的微信公眾號會給你叫號，前臺小姐姐也會提醒你，每一面結束后都可以找前臺小姐姐查詢面試結果。而且食堂超級好吃！還可以邊吃飯邊吸貓！面試地點在一樓大廳。環境舒適，就是座位有點不夠用。

不多說了，下面分享一下我的面試經歷

form表單細節

一、表單

1.表單 標簽用于為用戶輸入創建 HTML 表單

2.表單能夠包含?input 元素，比如文本字段、復選框、單選框、提交按鈕等等。

3.表單還可以包含?menus、textarea、fieldset、legend?和?label 元素。

4.表單用于向服務器傳輸數據。

二、表單form 的屬性

（一）action屬性

action 屬性規定當提交表單時，向何處發送表單數據

**屬性值：**url 鏈接的地址

（二）name屬性

name屬性規定表單的名稱。?name 屬性提供了一種在腳本中引用表單的方法。

（三）method屬性

method 屬性規定在提交表單時所用的HTTP方法（GET 或是 POST）

1、什么時候使用GET？

method屬性的默認值是GET，如果表單的提交是被動的（比如搜索引擎查詢），并且沒有敏感信息；

當使用GET的時候，表單數據是提交到頁面的地址欄中的。

2、什么時候使用post？

地址欄中可以儲存的數據是有限的，如果想要儲存更多數據，更安全的儲存數據就需要使用 post

表單正在更新數據，或是包含敏感信息（例如密碼）最好使用post；

post 安全性更好，因為在頁面地址欄中提交的數據使不可見的（如果上傳的數據比較多或是要上傳圖片，就要使用post）。

（四）legend元素

元素為 元素定義標簽

標簽 可以將表單內的相關元素分組，還可以在相關表單元素周圍繪制邊框。 <form><fieldset><legend>Personalia:</legend> Name: <input type="text"><br> Email: <input type="text"><br></fieldset> </form>

input元素必須要加上 name 屬性，定義一個名字，后臺才會正常接收輸入的數據；

三、表單描述標簽的使用

為input元素定義標注

<label for="wenzi">文字</label> <input type="text" id='wenz'></pre>

label 元素不會向用戶呈現任何特殊效果。不過，它為鼠標用戶改進了可用性。

如果在 label 元素內點擊文本，就會觸發此控件，使該控件獲得焦點。當用戶選擇該標簽時，瀏覽器就會自動將焦點轉到和標簽相關的表單控件上。

標簽的 for 屬性應當與相關元素的 id 屬性相同。

為了實現同樣的效果，會有另一種寫法：不需要 for 和 id 屬性；

<label>文字 <input type="text"> </label></pre>

四、表單約束屬性

（一）required 屬性

required?屬性是一個布爾屬性，規定必須在提交表單之前填寫輸入字段，必填字段。（required是H5的新屬性）

**注意：**required 屬性適用于下面的 input 類型：text、search、url、tel、email、password、date pickers、number、checkbox、radio 和 file。

（二）placeholder屬性

placeholder?屬性規定可描述輸入字段預期值的簡短的提示信息（ 在輸入框里面的提示文字，內容不會被提交），例如一個樣本值或是預期格式的簡短的描述。

placeholder 定義的提示會在用戶輸入值之前顯示在輸入字段中。

**注意：**placeholder 屬性適用于下面的 input 類型：text、search、url、tel、email 和 password。

（三）value屬性

value?屬性為 input 元素設定值。對于不同的輸入類型，value屬性的用法也不同。

type類型為button、reset、submit。定義按鈕上顯示的文本；

type類型為text、password、hidden。定義輸入字段的初始值（默認值）；

type類型為checkbox、radio、image。定義輸入相關聯的值；

注意： 和 中必須設置 value 屬性。

**注意：**value 屬性無法與 一同使用。

（四）maxlength屬性

maxlength?屬性規定輸入字段的最大長度，以字符個數計算。

maxlength 屬性與? 或 ?配合使用（有輸入長度）

（五）size屬性

size?屬性規定以字符數計的 元素的可見寬度。

size? 限制表單的長度（不建議用，用CSS去設置更好）

五、表單訪問限制（表單禁用）

（一）readonly 屬性

readonly?屬性規定輸入字段為只讀，無法輸入，可以使用value來設置默認值，可以提交到后臺，但是用戶無法修改。

只讀字段無法修改，不過用戶仍然可以使用tab鍵切換到該字段，還可以選中或拷貝其文本。

readonly 屬性可以防止用戶對值進行修改，直到滿足某些條件為止（比如選中了一個復選框）。然后，需要使用 JavaScript 消除 readonly 值，將輸入字段切換到可編輯狀態。

readonly 屬性可與**? 或 **?配合使用。

（二）disabled屬性

disabled?屬性定義應該禁用input元素（只能看，不能提交到后臺）

被禁用的 input元素既不可用，也不可點擊。可以設置 disabled 屬性，直到滿足某些其他的條件為止（比如選擇了一個復選框等等）。然后，就需要通過 JavaScript 來刪除 disabled 值，將 input 元素的值切換為可用。

注意：disabled 屬性無法與??一起使用。

六、常用的字段擴展類型

值描述

button	定義可點擊按鈕（多數情況下，用于通過 JavaScript 啟動腳本）。
checkbox	定義復選框。
file	定義輸入字段和 "瀏覽"按鈕，供文件上傳。
hidden	定義隱藏的輸入字段，雖然隱藏了卻依然存在。
image	定義圖像作為提交按鈕。
password	定義密碼字段。該字段中的字符被掩碼。
radio	定義單選按鈕。
reset	定義重置按鈕。重置按鈕會清除表單中的所有數據。
submit	定義提交按鈕。提交按鈕會把表單數據發送到服務器。
text	定義單行的輸入字段，用戶可在其中輸入文本。默認寬度為 20 個字符。

H5新標簽

值描述

color	定義拾色器
date	定義 date 控件（包括年、月、日，不包括時間）
datetime	定義 date 和 time 控件（包括年、月、日、時、分、秒、幾分之一秒，基于 UTC 時區）
datetime-local	定義 date 和 time 控件（包括年、月、日、時、分、秒、幾分之一秒，不帶時區）
email	定義用于 e-mail 地址的字段
month	定義 month 和 year 控件（不帶時區）
number	定義用于輸入數字的字段
range	定義用于精確值不重要的輸入數字的控件（比如 slider 控件）
search	定義用于輸入搜索字符串的文本字段
tel	定義用于輸入電話號碼的字段
time	定義用于輸入時間的控件（不帶時區）
url	定義用于輸入 URL 的字段
week	定義 week 和 year 控件（不帶時區）

七、大量文本和列表

（一）文本域

textarea?標簽定義一個多行的文本輸入控件

文本域中可容納無限數量的文本，其中的文本的默認字體是等寬字體（Courier）

文本域中的默認值，要放在一對textarea?標簽中

可以通過 cols 和 rows 屬性來規定 textarea 的尺寸大小，不過更好地·辦法是使用CSS的height 和 width屬性

最后

由于篇幅限制，pdf文檔的詳解資料太全面，細節內容實在太多啦，所以只把部分知識點截圖出來粗略的介紹，每個小節點里面都有更細化的內容！有需要的程序猿（媛）可以幫忙點贊+點擊【學習資料】即可免費領取！

實在太多啦，所以只把部分知識點截圖出來粗略的介紹，每個小節點里面都有更細化的內容！有需要的程序猿（媛）可以幫忙點贊+點擊【學習資料】即可免費領取！

[外鏈圖片轉存中…(img-OkGVC9fD-1623051913928)]

[外鏈圖片轉存中…(img-FuCDVadB-1623051913930)]

總結

以上是生活随笔為你收集整理的CSS常用五类选择器，经典好文的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。