前端之form表單與css（1）
- 2019 年 12 月 16 日
- 筆記
一、form表單
form表單用於用戶介面向伺服器傳輸數據，實現用戶和web伺服器的交互。表單包含input系列標籤如文本欄位、複選框、單選框、提交按鈕等。
1.1表單的屬性
|
屬性 |
描述 |
|---|---|
|
accept-charset |
規定在被提交表單中所使用的字符集（默認：頁面字符集） |
|
action |
規定向何處提交表單的地址（URL）（提交頁面） |
|
autocomplete |
規定瀏覽器自動完成表單（默認：開啟） |
|
enctype |
規定被提交數據的編碼（默認：url-encoded） |
|
method |
規定在提交表單時所使用的HTTP方法（默認：get） |
|
name |
規定識別表單的名稱（對於DOM使用：document.form.name） |
|
novalidate |
規定瀏覽器不驗證表單 |
|
|
規定action屬性中地址的目標（默認：_self） |
1.2input
input元素會根據不同的type屬性實現不同的介面功能。
|
type |
表現形式 |
對應程式碼 |
|---|---|---|
|
text |
單行輸入文本 |
<input type="text" id="dl" value="ahao" name="username"> |
|
password |
密碼輸入框 |
<p>密碼：<input type="password"></p> |
|
date |
日期輸入框 |
<p>生日：<input type="date"></p> |
|
CheckBox |
複選框 |
<input type="checkbox" name="hobby" value="basketball"> |
|
radio |
單選框 |
<input type="radio" name="gender" value="male"> |
|
submit |
提交按鈕 |
<input type="submit" value="提交"> |
|
reset |
重置按鈕 |
<input type="reset" value="重置"> |
|
button |
普通按鈕 |
<input type="button" value="按鈕"> |
|
hidden |
隱藏輸入框 |
<input type="hidden"></p> |
|
file |
文本選擇框 |
<input type="file" name="my_file"></p> |
name和value是頁面往後端發送的數據的key和value(所有獲取用戶輸入的標籤 都應該有name屬性)，當點擊提交按鈕時會向後端提交數據，當點擊reset按鈕時會重置所有選擇框的數據。用戶名等輸入框的value是框內的默認值，也就是如果有輸入就按輸入來，如果沒有就使用默認值。另外，input可以加disabled屬性禁用該input框(適用於所有的input)，選擇標籤（radio、checkbox）設置默認選中的方法是在後面添加checked=『checked』（也可以只寫checked，當屬性名和屬性值相同時可以只寫屬性值）
value：表單提交時對應項的值
- type="button", "reset", "submit"時，為按鈕上顯示的文本年內容
- type="text","password","hidden"時，為輸入框的初始值
- type="checkbox", "radio", "file"，為輸入相關聯的值
readonly：text和password設置只讀
form表單如果需要提交文件數據，需要在form的屬性里修改enctype，即修改為enctype="multipart/form-data"，如下面的程式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>form表單</title> </head> <body> <h1>註冊頁面</h1> <form action="https://www.123.com.cn" method="post" enctype="multipart/form-data"> <p> <label for="dl"> 用戶名：<input type="text" id="dl" value="ahao" name="username"> </label> </p> <p>密碼：<input type="password"></p> <p>生日：<input type="date"></p> <p>性別： 男<input type="radio" name="gender" value="male"> 女<input type="radio" name="gender" value="female"> </p> <p>愛好： 籃球 <input type="checkbox" name="hobby" value="basketball"> 足球 <input type="checkbox" name="hobby" value="football"></p> <p> 省份： <select name="provience" id=""> <option value="shenzhen">深圳</option> <option value="zhejiang">浙江</option> <option value="henan">河南</option> </select> </p> <p> 研究方向： <select name="" id="1" multiple> <option value="">無人機</option> <option value="">機器人</option> <option value="">人工智慧</option></select> </p> <p>自我介紹： <textarea name="info" id="" cols="100" rows="10"></textarea></p> <p>個人簡歷： <input type="file" name="my_file"></p> <p>隱藏標籤： <input type="hidden"></p> <p> <input type="button" value="按鈕"> <input type="reset" value="重置"> <input type="submit" value="提交"> <button>提交按鈕</button><!--此處也是提交按鈕--> </p> </form> </body> </html>
1.2.1form表單提交數據的兩種方式
<input type="submit" value="提交"> <button>提交按鈕</button><!--此處也是提交按鈕-->
1.3select標籤
|
屬性 |
說明 |
|---|---|
|
multiple |
布爾屬性，設置後為多選，否則默認為單選 |
|
disabled |
禁用 |
|
selected |
默認選中該選項 |
|
value |
定義提交時的選項值 |
<p> 研究方向： <select name="" id="1" multiple> <option value="">無人機</option> <option value="">機器人</option> <option value="">人工智慧</option></select> </p>
1.4label標籤
定義： 標籤為 input 元素定義標註（當點擊input框旁邊的文字的時候游標也會跳轉到input框內，如下例中的用戶名）。 說明：
- label 元素不會向用戶呈現任何特殊效果。
- 標籤的 for 屬性值應當與相關元素的 id 屬性值相同。
<label for="dl"> 用戶名：<input type="text" id="dl" value="ahao" name="username"> </label>
1.5textarea多行文本標籤
|
屬性 |
描述 |
|---|---|
|
name |
名稱 |
|
row |
行數 |
|
cols |
列數 |
|
disabled |
禁用 |
<p>自我介紹： <textarea name="info" id="" cols="100" rows="10"></textarea></p>
二、CSS
2.1css介紹
css（cascading style sheet，層疊樣式表）定義如何顯示HTML元素。當瀏覽器讀到一個樣式表，它就會按照這個樣式表進行格式化（格式化就是渲染）。
2.2css語法
2.2.1css實例
每個css樣式由選擇器和聲明組成，聲明包括屬性和屬性值，每個聲明用分號隔開。
2.2.2css注釋
css的注釋方式和C語言的多行注釋方式相同，但需要說明的是，css單行與多行注釋方式相同。
/*注釋*/
2.3css的幾種引入方式
所謂引入方式就是將css程式碼在HTML頁面程式碼中執行的方式。
2.3.1行內樣式
行內樣式指在標記的style屬性中設置css樣式，不推薦使用。
<p style="color: aqua">歡迎來到我的部落格</p>
2.3.2內部樣式
將css樣式集中寫在head標籤對的style標籤對中，格式如下：
<head> <meta charset="UTF-8"> <title>Title</title> <style>p{ background-color: aqua; } </style> </head> <body> <p>我是p標籤</p> </body>
2.3.3外部樣式
該樣式指在另一個文件中寫css，然後引入到頁面中實現對頁面的控制。
如：link可以放在head標籤對和body標籤對裡面
<link rel="stylesheet" href="01.css">
2.4css選擇器
css選擇器就是使用css對HTML頁面中的元素實現一對一，一對多或者多對一的控制，選擇器」指明了{}中的「樣式」的作用對象，也就是「樣式」作用於網頁中的哪些元素
2.4.1基本選擇器
2.4.1.1元素選擇器
p{ background-color: aqua; }
2.4.1.2ID選擇器
#l1 { background-color: blueviolet; } 這裡需要說明的是不能用純數字作為id，否則渲染不成功
2.4.1.3類選擇器
.a1{ color: cadetblue; } 注意這裡是.類名{類里的內容}
2.4.1.4通用選擇器
*{ color: cadetblue; } *指的是所有，這裡的意思是讓所有的元素都變成指定的顏色
2.4.2組合選擇器
2.4.2.1後代選擇器
一個標籤內部的的標籤，都可以稱為這個標籤的後代。
<div id="l2" class="a1">我是div <p id="l1">我是p標籤 </p> <div>我是第二代div <div>我是第三代div</div> </div> </div> 第一個div裡面的p和div都是第一個div的後代。
div div{ color: aquamarine; } 第一個div裡面的div都被設置成color的顏色，注意後代選擇器的特點，標籤名+空格+後代的標籤名。 這裡第二個div裡面的所有的標籤都會被設置成color的顏色。
2.4.2.2兒子選擇器
div>div{ color: aquamarine; } </style> 兒子選擇器就是父親名>兒子名，如果後代的名稱都相同，則都被設置成color的顏色，如果兒子的後代的標籤和兒子不是同一個標籤名，則只設置兒子標籤。
2.4.2.3弟弟選擇器
div~p{ color: aquamarine; } 將div下面所有的p都設置成color的顏色，只要在div下面不管隔幾個會都被設置成color的顏色
2.4.2.4毗鄰選擇器
div+p{ color: aquamarine; } 只設置div下面緊挨著的那個p的顏色,如果div下面沒有p，就不設置。
2.4.3屬性選擇器
用於選取帶有指定屬性（如id，屬性名=屬性值，屬性名等）的元素。
<head> <meta charset="UTF-8"> <title>Title</title> <style>[name='p1']{ color: blue; }</style> </head> <body> <p name="p1">p1</p> <p name="p2">p2</p> <p name="p3">p3</p> 在[]里填寫要選取的元素的屬性。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style>[pname]{ color: blue; }</style> </head> <body> <p name="p1">p1</p> <p pname="p2">p2</p> <p name="p3">p3</p> </body> </html>
2.4.4分組和嵌套
分組：當多個元素的樣式相同的時候，我們沒必要重複的為每個元素都設置樣式，可以在多個選擇器之間使用逗號分隔的分組選擇器來統一設置元素樣式。
如：
<head> <meta charset="UTF-8"> <title>Title</title> <style>[name='p1'],[pname]{ color: blue; }</style> </head> <body> <p name="p1">p1</p> <p pname="p2">p2</p> <p name="p3">p3</p> </body>
嵌套：多種選擇器混合起來使用
2.4.5偽類選擇器
主要對link的鏈接顏色動作進行設置(這裡需要注意的是hover必須要在visited後面)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*未訪問時鏈接的顏色*/ a:link{ color: ghostwhite; } /*已訪問的鏈接的顏色*/ a:visited{ color: darkslateblue; } /*滑鼠移到鏈接上時顯示的顏色*/ a:hover { color:red; } /*當滑鼠點擊且沒有放開時鏈接的顏色*/ a:active{ color: blue; } /*輸入框獲取焦點時的顏色*/ input:focus{ background-color: ivory; } span:hover{ background-color: blue; } </style> </head> <body> <a href="https://www.mi.com/">點我</a> <input type="text"> <span></span> </body> </html>
2.4.6偽元素選擇器
first-letter
控制標籤裡面的第一個字的大小，場景如報紙或者小說的第一個字都寫的比較大。
p:first-letter{ font-size: 60px; color: aqua; }
before在內容最前面插入指定的字元，這個字元在顯示的時候不能被選中，使用這個之後，不能再用上面的first-letter。
p:before{ content: "*"; color: chartreuse; }
after在content最後面插入指定的字元，也不可選中。
p:after{ content: "#"; color: fuchsia; }
after和before多用於清除浮動。
2.4.7選擇器的優先順序
- 選擇器相同的情況下引入剛方式不同，遵循就近原則，誰距離標籤近用誰的。
- 選擇器不同的情況下
行內選擇器>id選擇器（使用較多）>類選擇器（使用較多）>元素選擇器
