HTML5 + CSS3 3 表單
阿新 • • 發佈：2018-12-14
一.表單
表單： 是蒐集使用者資料資訊的各種表單元素的集合區域
作用：實現網頁上的資料互動 蒐集客戶端輸入的資料資訊，提交到網站伺服器端進行處理
常見應用：
- 註冊/登入
- 搜尋
- 留言/評論
- 檔案上傳/文章編輯
結構：表單區域 + 表單控制元件（表單元素）
表單標籤：<form></form>
- 塊狀元素
- 用來定義網頁中的互動輸入的區域（表單區）
- 所有的表單控制元件必需包含在<form></form>元素中
<form>基本屬性：
| 屬性 | 值 | 說明 |
| action | url路徑 | 必需。規定當提交表單時向何處傳送表單資料 |
| method | get/post | 必需。規定用於傳送form-data的HTTP方法。（get 小資料 不加密） |
| name | 自定義名稱 | 規定表單名稱（針對伺服器端或指令碼處理） |
name屬性和id屬性的區別：
- id在頁面中具有唯一性，name可以重複
- name主要對應伺服器端，用於對提交到伺服器後的表單資料進行標識。要實現資料互動功能，表單和表單控制元件都需要使用name屬性
- name的另一個功能是對應JavaScript，來處理表單中的各種資料值。id主要對應css樣式應用
二.表單控制元件
表單控制元件型別：
1.輸入型
- 文字框（單行文字） <input>標籤建立文字框，type屬性指定其具體型別（text password hidden：使用者看不到，用於傳遞不需要顯示在客戶端的資料）
- 行間元素。
- type屬性定義表單控制元件的型別 。
- html5新增輸入型控制元件。type值：url email number range date color search tel
- value屬性定義表單控制元件預設的值
- 文字域（多行文字） 無value屬性 。 <textarea>這裡是預設值</textarea>
2.選擇型
- *單選（組）/複選（組）。 <input>標籤建立選擇框，type屬性指定其具體型別
- 單選按鈕 <input type="radio">
- 單選按鈕具有互斥性，必須成組出現
- name屬性：實現按鈕的編組。
- checked屬性：設定按鈕的已選中狀態
2.複選按鈕 <input type="checkbox">
- 可以單個使用，也可以成組使用
- 成組使用時，提供給使用者一組可選項中做多項選擇
- value屬性：值傳送到資料庫
- 下拉列表 <select></select>標籤建立下拉列表區，<option></option>建立列表中的子級選項
- 應用技巧：
- 給<option></option>新增selected屬性，設定預設選中狀態
- 給<select></select>新增multiple屬性，可選擇多個選項
- <select></select>的size屬性可以規定下拉列表中可見選項的數目
- 使用<optgroup></optgroup>給列表中的選項進行分組，形成類似樹形的分級選擇控制元件。label屬性用於定義選項組的文字描述
- html5新增選擇型控制元件
- 輸入提示控制元件：datalist（預先定義一個輸入框的潛在選項，為輸入框提供一個可選擇的提示列表。使用者輸入時，可直接選擇提示列表）
- datalist和input關係 ：
- datalist作為輸入提示，需要和input搭配使用
- 使用input（輸入框）的list屬性來引用datalist的id值
<input list="browser">
<datalist id="browser">
<option></option>
<option></option>
<option></option>
</datalist>- datalist缺陷：無法使用css進行UI設計或樣式設定
3.事件型
<input type="button" value="普通按鈕">
/* 普通按鈕 點選觸發事件，通過指令碼語言完成 */
<input type="submit"> /* 提交按鈕 點選按鈕會把表單資料傳送到伺服器 */
<input type="reset"> /* 重置按鈕 點選按鈕會重置表單中所有資料 */
<input type="image" src="" alt="替代文字"> /* 影象按鈕 用自定義影象來呈現提交按鈕 */
<input type="file" multiple>
/* 上傳按鈕 點選按鈕選擇本地檔案，上傳檔案 */
<button type=""></button> /*按鈕控制元件。文字可用value設定*/三.表單/表單控制元件常用的屬性總結
value屬性：
- 定義各種表單控制元件的值
- 不同控制元件型別，value用法也不同
| 應用物件 | 說明 | |
| value | 輸入型 | 定義初始值 |
| 選擇型 | 定義相關聯的值 | |
| 事件型 | 定義按鈕呈現的值 |
readonly只讀屬性 ：<input readonly>
- 可以提交
disabled禁用屬性 ：<input disabled>
- 不可提交
placeholder佔位符屬性 ：<input placeholder="text"> （h5新增屬性）
- 規定可描述輸入欄位預期值的提示資訊，來提示使用者輸入
- 文字內容在使用者輸入時自動消失
- 針對輸入型表單控制元件。如input textarea
- 不會被表單提交
required必填屬性 ：<input required> （h5新增屬性）
autofocus自動獲得焦點屬性 ：<input autofocus> （h5新增屬性）
- 頁面載入時<input>元素自動獲得焦點
autocomplete自動完成屬性 ：<input autocomplete="on">
- 值：
- on適用於表單（預設，開啟） 當用戶在欄位開始鍵入時，瀏覽器根據之前鍵入的值，應顯示出在欄位中填寫的選項。
- off使用與特定的輸入欄位（關閉）
四.表單應用技巧
1.使用<label></label>提高使用者操作互動體驗
- 行間元素
- 為表單控制元件提供輔助標記。點選<label></label>中的標記內容，瀏覽器會自動將焦點轉到和label相關的表單控制元件上
- 應用：
- 用 label 將標記內容和表單控制元件括在一起，增加控制元件的可操作性 <label> 標記內容 + 表單控制元件 </label>
- 使用 for 屬性將其和相關控制元件連在一起，for屬性的值為控制元件的id名
<label>
hello
<input type="checkbox" id="hello">
</label>
<p>world</p>
<p>world</p>
<p>world</p>
<label for="hello">選擇是否同意</label>2.使用<fieldset></fieldset>協助表單控制元件或資料歸類分組 分組標籤
- 塊狀元素，建立一個分組區域
- 分組標題標籤：<legend></legend> 。塊狀元素。用來為fieldset分組定義一個標題，作為表單內容的說明或描述
<fieldset>
<legend>表單描述</legend>
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
</fieldset>五.css樣式及登入介面例項
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/bootstrap.css">
<style>
*{
margin: 0;
padding: 0;
}
body{
background: rgba(87, 167, 211, 0.51);
color:#111;
}
#userlogin{
width: 300px;
background: #fff;
margin: 30px auto;
padding: 25px;
}
#userlogin h3{
font-size: 16px;
line-height: 32px;
margin-bottom: 20px;
font-weight: bold;
}
#userlogin p{
margin-bottom: 25px;
}
.input-text{
border: 1px solid #ccc;
height: 38px;
width: 248px;
font-size: 14px;
float: left;
margin-top: -38px;
padding-left: 50px;
}
.glyphicon-user,.glyphicon-lock{
display: inline-block;
width: 38px;
height: 38px;
color: grey;
background-color: rgba(193, 193, 193, 0.7);
text-align: center;
line-height: 41px;
font-size: 18px;
}
.input-btn{
width: 248px;
height: 40px;
border: 0;
background-color: #9A0002;
color: #fff;
font-size: 16px;
font-weight: bold;
letter-spacing: 5px;
border-radius: 3px;
}
.input-btn:hover{
background-color: #D10003;
cursor: pointer;/*規定顯示的游標的型別*/
}
h6{
text-align: right;
}
h6 a{
color: #666;
text-decoration: none;
font-weight: normal;
margin-right: 12px;
}
h6 a:hover{
color: #C81D1F;
}
</style>
</head>
<body>
<form action="#" method="post" name="userlogin" id="userlogin">
<h3>使用者登入</h3>
<div>
<p><div class="glyphicon glyphicon-user"></div><input class="input-text" type="text" placeholder="手機號/會員名/郵箱" autofocus required></p>
<p><div class="glyphicon glyphicon-lock"></div><input class="input-text input-pwd" type="password" required placeholder="密碼"></p>
</div>
<p><input class="input-btn" type="submit" value="登入"></p>
<h6>
<a href="#">忘記密碼</a>
<a href="#">免費註冊</a>
</h6>
</form>
</body>
</html>cursor屬性值：
- url 自定義游標
- default 預設游標（箭頭）
- auto 預設（瀏覽器設定的游標）
- crosshair 十字線
- pointer 手形
- move 指示目標可移動
- e-resize 指示矩形框邊緣可被向東移動 east
- ne-resize northeast
- nw-resize northwest
- n-resize north
- se-resize southeast
- sw-resize southwest
- s-resize south
- w-resize west
- text 指示文字
- wait 指示程式正忙
- help 指示幫助