1.表單的作用
表單用於顯示、收集信息，並將信息提交給服務器
2.表單的元素
1、語法
<form>
允許出現表單控件
</form>
2、屬性
1、action
定義表單被提交時發生的動作
提交給服務器處理程序的地址
注意：通過 與服務器端人員交流 得到 action 的地址
默認，提交給本頁
2、method
作用：定義表單提交數據時的方式
取值：
1、get (默認值)
意義為：得到，獲取
場合：向服務器要數據時使用
特點：
1、明文提交,所提交的數據時可以顯示在地址欄上的-安全性較低
2、提交數據有大小限制-最大為2KB
2、post
意義：郵寄，郵遞
場合：將數據提交給服務器處理時使用(有保密類型數據時)
特點：
1、隱式提交-所提交的內容是不會顯示在地址欄上的，安全性較高
2、無大小限制
3、put
4、delete
5、...
3、enctype
作用：編碼類型，即表單數據進行編碼的方式
允許表單將什么樣的數據提交給服務器
取值：
1、application/x-www-form-urlencoded
默認值
允許將 普通字符，特殊字符，都提交給服務器，不允許提交 文件
2、multipart/form-data
允許 將文件提交給服務器
3、text/plain
只允許提交普通字符。特殊字符，文件等都無法提交
4、name
定義 表單的名稱
注意：如果有文件需要提交給服務器，method必須為POST，enctype必須為multipart/form-data
<form action=".." method="post" enctype="multipart/form-data" name="biaodan">
<input/>
</form>
3.表單控件
1、分類
1、input 組元素
2、textarea 元素
3、select 和 option 選項框
4、其他元素
2、input 元素
1、語法
<input> 或 <input/>
2、屬性
1、type
根據不同的type屬性值，可以創建各種類型的輸入控件，比如：文本框，密碼框，復選框，按鈕 等... ...
2、value
控件的值即要提交給服務器的數據
3、name
控件的名稱，服務器要用
命名規范：匈牙利命名法
控件的縮寫+功能名稱
4、disabled
該屬性只要出現在標簽中，表示的是 禁用該控件
3、input的具體控件
1、文本框與密碼框
文本框：明文顯示用戶輸入的數據
<input type="text">
密碼框：密文顯示用戶輸入的數據
<input type="password">
屬性
1、name
縮寫：txt
ex:
1、創建一個文本框，表示 接受 用戶名稱(Username)
<input type="text" name="txtUsername">
2、創建一個密碼框，表示 接受 用戶密碼(Userpwd)
<input type="password" name="txtUserpwd">
2、value
1、表示控件的值
2、表示控件的默認值
3、maxlength
限制輸入的字符數
4、readonly
只讀-只能看，不能改
該屬性只要出現在標記中，就是只讀的意思，不需要給值
readonly 與 disabled 的區別
1、readonly 只能看，不能改，但是可以被提交給服務器
2、disabled 只能看，不能改，但是不能提交給服務器
注意：對於input來講，如果不寫 type 或者 type值寫錯的時候，默認都是文本框
2、單選按鈕和復選框
單選按鈕：type="radio"
復選框：type="checkbox"
屬性：
1、name
定義名稱
radio縮寫：rdo
checkbox縮寫：chk
還可以對控件進行分組,一組單選按鈕和復選框，名稱必須相同
對於單選按鈕：一組中的單選按鈕，最多只能有一個被選中
2、checked
設置默認被選中
3、按鈕
1、提交按鈕
功能固定化，負責將表中中的表單控件提交給服務器
<input type="submit">
2、重置按鈕
功能固定化，負責將所有表單控件的值恢復為初始值
<input type="reset">
3、普通按鈕
無功能，執行客戶端的腳本(JS)
<input type="button">
屬性：
1、name
縮寫：btn
2、value
按鈕上的顯示文本
4、隱藏域 和 文件選擇框
1、隱藏域
不希望被用戶看見，但是要提交給服務器的信息
<input type="hidden">
name ：txt+功能名稱
value ：值
2、文件選擇框
上傳文件所用
<input type="file">
name : txt+功能名稱
3、textarea - 多行文本域
作用：允許用戶錄入多行數據到表單控件中
語法：<textarea></textarea>
屬性：
1、name
縮寫：txt+功能名稱
2、readonly
只讀
3、cols
指定文本區域的列數, 變相設置當前元素寬度
4、rows
指定文本區域的行數，變相設置當前元素高度
4、選項框
1、分類
1、下拉選項框
2、滾動列表
2、語法
1 、<select></select> 創建選項框
屬性：
1、name
縮寫：sel+功能名稱
2、size
取值 大於1的話，則為滾動列表
否則就是下拉選項框
3、multiple
設置多選,該屬性出現在 <select>中，那么就允許多選(針對滾動列表)
2、<option>顯示文本</option> 選項
屬性：
1、value
選項的值
2、selected
預選中
注意：如果不設置selected屬性的話，那么選項框中的第一項會默認被選中。
5、其他元素
1、為控件分組
<fieldset></fieldset> : 為控件分組
<legend></legend> : 為分組指定一個標題
2、<label> 元素
功能：關聯 文本 與表達元素的，點擊文本時，如同點擊表單元素一樣
語法：
<label>文本</label>
屬性：
for ：表示與該label相關聯的表單控件元素的ID值
<input id="man" name="sex" value="男"><label for="man">男</label></input>
4、其他常用標記
1、浮動框架
1、作用
可以在一個瀏覽器窗口中同時顯示多個頁面文檔
2、語法
<iframe>內容</iframe>
內容：當瀏覽器不支持<iframe>元素時，將顯示該文本作為描述信息
屬性：
1、src
要引入頁面的URL
2、width
3、height
4、frameborder
浮動框架的邊框，如果不想要，可以設置為 0
3、注意
該標簽，主要針對的是 靜態頁面的引入
動態頁面中 有專門 引入頁面的方式
2、摘要與細節
1、作用
允許用戶對某些信息進行展開和收縮
2、語法
<details></details> 用於定義細節
<summary></summary> 用於定義細節中的標題
3、度量元素
1、作用
定義一個度量衡
2、語法
<meter>文本</meter>
屬性：
1、min ：定義度量范圍的最小值，默認為0
2、max ：定義度量范圍的最大值，默認為1，一般情況下，將max值設置為 100
3、value ：度量值，顯示在度量元素上的數值，默認為0
4、時間元素
1、作用
用於關聯時間的不同表現形式
2、語法
<time>文本</time>
屬性：
datetime ：文本所對應的 日期時間，如果日期和時間同時設置的話，日期和時間之間用“T”分割
5、高亮文本顯示
1、作用
以突出背景顏色的方式顯示文本
2、語法
<mark>文本</mark>
4.表單實例代碼：
<!DOCTYPE html>
<html>
<head>
<title>Day905</title>
<meta charset="utf-8">
</head>
<body>
<form>
<!-- input -->
<!--文本框-->
<p>
用戶名稱：<input type="text" name="txtUsename" value="請輸入用戶名稱" readonly>
</p>
<p>
用戶密碼：<input type="password" name="txtUsepwd" >
</p>
<p>
確認密碼：<input type="password" name="txtcfmpwd" disabled>
</p>
<!--單選框-->
<p>
用戶性別：<input type="radio" name="sexrdo" value="男">男
<input type="radio" name="sexrdo" value="女" checked>女
</p>
<!--復選框-->
<p>
用戶愛好：吃<input type="checkbox" name="chkhobby" value="吃" checked> 喝<input type="checkbox" name="chkhobby" value="喝"> 玩<input type="checkbox" name="chkhobox" value="玩"> 樂<input type="checkbox" name="chkhobox" value="樂" checked>
</p>
<!-- 按鈕 -->
<p>
<input type="submit" name="btnsbt" value="提交">
<input type="reset" name="btnrst" value="重置">
<input type="button" name="btnbtn" value="普通按鈕">
</p>
<!-- 隱藏域 -->
<p>
<input type="hidden" name="txtID" value="407862858@qq.com">
</p>
<!--文件選擇框-->
<p>
請上傳文件：<input type="file" name="txtfile">
</p>
<!--textarea-->
<p>
自我介紹：<textarea name="txt" cols="20" rows="5"></textarea>
</p>
<!--選擇框-->
<!--滾動列表-->
<p>籍貫：
<select name="sel" size="3" multiple>
<option value="深圳">深圳</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="廣州" selected>廣州</option>
</select>
</p>
<!--下拉列表-->
<p>意向工作城市：
<select name="sel" >
<option value="深圳">深圳</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="廣州" selected>廣州</option>
</select>
</p>
<!--為控件文組 -->
<fieldset name="filed">
<legend>請輸入個人信息</legend>
用戶名稱：<input type="text" name="txtUsename" value="請輸入用戶名稱" >
<br/>
用戶密碼：<input type="password" name="txtUsepwd" >
</fieldset>
<!-- label-->
<p>
用戶性別：<input type="radio" name="sexrdo" value="男" id="man"><label for="man">男</label>
<input type="radio" name="sexrdo" value="女" checked id="girl"><label for="girl">女</label>
</p>
<!-- 摘要與細節-->
<details>
<summary>用戶基本信息</summary>
<p>姓名：張三豐<p>
<p>性別：男</p>
</details>
<!-- 度量衡(進度條)-->
<div>
<meter min="0" max="100" value="50" tile="50%">該瀏覽器戶不支持meter標簽</meter>
</div>
<!--時間元素-->
<div>
明年<time datetime="2017-02-14T0:0:0">情人節</time>約嗎？
</div>
<!--高亮文本顯示-->
<div>
這是一段<mark>高亮</mark>顯示的文本
</div>
</form>
</body>
---------------------
作者：馮小東
來源：CSDN
原文：https://blog.csdn.net/baidu_25343343/article/details/52741651
版權聲明：本文為博主原創文章，轉載請附上博文鏈接！