HTML 表單介紹（input & form）

<input>標簽

  • <input>標簽用于搜集用戶信息，根據不同的type屬性值，輸入字段擁有很多種形式。輸入字段可以是文本字段、復選框、掩碼后的文本空間、單選按鈕、按鈕等等
  • HTML與XHTML之間的差異：
    • 在HTML中，<input>標簽沒有結束標簽
    • 在XHTML中，<input>標簽必須被正確的關閉
  • 屬性：
屬性 值 說明
accept audio/*（接受所有的聲音文件）；video/*（接受所有的視頻文件）；image/*（接受所有的圖像文件）； 不帶分號;的MIME_type；以點號.開始的文件后綴名（表示只接受這種后綴名的文件）。若有多個類型的文件，以逗號,分隔 規定通過文件上傳來提交的文件的類型（只針對type="file"）
alt text 定義圖像輸入的替代文本（只針對type="image"）。功能類似于 image 元素的 alt 屬性
autocomplete on/off 規定是否使用輸入字段的自動完成功能。當用戶在字段開始鍵入時，瀏覽器基于之前鍵入過的值，顯示出在字段中填寫的選項。autocomplete屬性適用form元素以及以下類型的input元素：text、search、url、telephone、email、password、date pickers、range、color。注意：IE瀏覽器不支持該屬性，只有元素擁有name屬性，該屬性才有效
autofocus autofocus 規定當頁面加載時，<input>應該自動獲得焦點。autofous屬性適用于button、input、keygen、select和textarea元素
checked checked 規定在頁面加載時應該被預先選定的<input>元素（只針對 type="radio/checkbox"）
disabled disabled 規定應該禁用的<input>元素。被禁用的字段是不能修改的，也不可以使用 tab按鍵切換到該字段，但可以選中或拷貝其文本。注意：disabled 屬性無法與type="hidden"的<input>元素一起使用；對于IE7-瀏覽器必須設置為disabled="disabled"，而不可以直接設置 disabled，否則使用javascript控制時將失效
form form_id 規定<input>元素所屬的一個或多個表單。form屬性適用于所有input標簽的類型，若需要引用一個以上的表單時，用空格分隔。注意：IE瀏覽器不支持該屬性，只有元素擁有 name屬性，該屬性才有效
formaction URL 規定當表單提交時處理輸入控件的文件的URL（只針對type="submit/image"）
formenctype application/x-www-form-urlencoded（默認）；multipart/form-data；text/plain 規定當表單提交到服務器時如何編碼（只適合type="submit/image"）
formmethod get（默認，將表單數據（form-data）以名稱/值對的形式附加到 URL：URL?name=value&name=value）；post（以 HTTP post 事務的形式發送表單數據） 定義發送表單數據到 action URL 的 HTTP 方法（只適合type="submit/image"）
formnovalidate formnovalidate formnovalidate 屬性覆蓋<form> 元素的 novalidate 屬性。formnovalidate屬性適用于以下類型的input元素：text、search、url、telephone、email、password、date pickers、range、color。注意：IE9-瀏覽器不支持
formtarget _blank（在新窗口／選項卡中顯示響應）；_self（默認，在同一框架中顯示響應）；_parent（在父框架中顯示響應）；_top（在整個窗口中顯示響應）；framename（在指定的 iframe 中顯示響應） 規定提交表單后在哪里顯示接收到響應的名稱或關鍵詞（只適合type="submit/image"）
height pixels 規定<input>元素的高度（只針對type="image"，如height="100"）
list datalist_id 屬性引用<datalist>元素，其中包含<input>元素的預定義選項。datalist元素自身不會在頁面顯示，而是為其他元素的 list屬性提供數據。list屬性適用于form元素以及以下類型的input元素：text、search、url、telephone、email、password、date pickers、range、color。注意：IE9-瀏覽器及safari瀏覽器不支持
max number（數字值）；date（日期值） 屬性規定<input>元素中允許的最大值
maxlength number（數字值） 屬性規定<input>元素中允許的最大字符數（只針對type="text/password"）
min number（數字值）；date（日期值） 屬性規定<input>元素中允許的最小值
multiple multiple 屬性規定允許用戶輸入到<input>元素的多個值（適用于type="file/email"）。注意：IE9-瀏覽器不支持
name text 屬性規定<input>元素的名稱，用于對提交到服務器后的表單數據進行標識，或者在客戶端通過javascript引用表單數據。注意：只有設置了 name 屬性的表單元素才能在提交表單時傳遞它們的值
pattern regexp 屬性規定用于驗證<input>元素的值的正則表達式。pattern屬性適用于以下類型的input元素：text、search、url、tel、email、password。注意：IE9-瀏覽器及safari瀏覽器不支持
placeholder text 屬性規定可描述輸入<input>字段預期值的簡短的提示信息，占位符會在輸入域為空時顯示出現，在輸入域獲得焦點時消失。placeholder屬性適用于以下類型的input元素：text、search、url、tel、email、password。注意：IE9-瀏覽器不支持
readonly readonly 屬性規定輸入字段是只讀的。只讀字段是不能修改的，但用戶仍然可以使用tab按鍵切換到該字段，還可以選中或拷貝其文本（readonly屬性可與 type="text/password"的input元素配合使用）。注意：IE7-瀏覽器不支持使用javascript控制readonly屬性
required required 屬性規定必須在提交表單之前填寫輸入字段（不能為空）。required屬性適用于以下類型的input元素：text、search、url、telephone、email、password、date pickers、number、checkbox、radio、file。注意：IE9-瀏覽器及safari瀏覽器不支持
size number（默認值是20） size屬性對于type="text/password"的<input>元素是可見的字符數；而對于其他類型，是以像素為單位的輸入字段寬度。注意：由于 size屬性是一個可視化的設計屬性，推薦使用CSS來代替它
src URL 屬性規定顯示為提交按鈕的圖像的URL（只針對type="image"）
step number 屬性規定<input>元素的合法數字間隔。min、max、step屬性適用于以下類型的input元素：date pickers、number、range
type button ；checkbox ；color ；date ；datetime ；datetime-local ；email ；file ；hidden ；image ；month ；number ；password ；radio ；range ；reset ；search ；submit ；tel ；text ；time ；url ；week 屬性規定要顯示的<input>元素的類型
value text 指定<input>元素value的值。對于不同的輸入類型，value屬性的用法也不同：type="button/reset/submit"用于定義按鈕上的顯示的文本；type="text/password/hidden"用于定義輸入字段的初始值；type="checkbox/radio/image"用于定義與輸入相關聯的值。注意：type="checkbox/radio"必須設置 value屬性；value屬性無法與type="file"的input元素一起使用
width pixels 規定<input>元素的寬度（只針對type="image"，如width="100"）
關于 placeholder 屬性
  • placeholder 屬性一般會在輸入框有一個提示，該提示會在輸入字段為空時顯示，并會在字段獲得焦點時消失
  • 注意：
    • placeholder 屬性適用于以下的 input 類型：text, search, url, telephone, email 以及 password
    • placeholder 為 HTML5 的新屬性
// 之前是沒有 placeholder 這個屬性的，那么比如用戶在文本框輸入的時候，如果還有提示信息（對value設置值），那么用戶往往需要先刪除提示信息才能輸入
// 解決辦法：利用表單事件
<input autocomplete="on" name="u" id="u" type="text" class="input01" tabindex="1" value="QQ號碼或Email帳號" onFocus="if (value =='QQ號碼或Email帳號'){value =''}" onBlur="if (value ==''){value='QQ號碼或Email帳號';}" />

// 我們通過 size 設置的 <input> 元素的可見寬度，會被css樣式設置中的 width 給覆蓋，因為 <input> 是內聯塊狀元素
readonly 和 disabled 屬性的區別
  • 設置了 readonly 的 input[text] 在提交表單的時候還是會提交 input 上聲明的數據
  • 設置了 disabled 的則不會提交 input 上聲明的數據
name 屬性的作用
  • 由于表單提交的數據一般都是以 key:value 的方式提交，所以 input 中的 name 屬性主要用來標識提交的數據的 key 值，好讓服務器處理程序分辨
// 例如
<input name=name value=adam>
<input name=age value=18>

// 則服務器在后臺收到的數據格式可能是這樣的：
{
name:adam,
age:18
}

23種type類型

  • 隨著HTML5的出現，input元素新增了多種類型，用以接受各種類型的用戶輸入。其中，button、checkbox、file、hidden、image、password、radio、reset、submit、text這10個是傳統的輸入控件。新增的有color、date、datetime、datetime-local、email、month、number、range、search、tel、time、url、week共13個
  • HTML5中，瀏覽器在遇到不識別的type值時，會將type的值解釋為text
屬性值 說明
button 定義可點擊的按鈕，但沒有任何行為，常用于在用戶點擊時啟動javascript程序。注意：IE8-瀏覽器的box-sizing: content-box;，而其他瀏覽器的box-sizing: border-box;
checkbox 定義復選框，允許用戶在給定數目的選擇中選擇一個或多個選項。同一組的按鈕，name取值一定要一致。注意：checkbox類型的input元素無法設置padding和 border（除IE10-瀏覽器以外）
color 創建一個調色板用來選擇顏色，顏色值以URL編碼后的十六進制數值提交。如黑色會以%23000000發送，其中 %23 是 # 的URL編碼。注意：safari和IE不支持該類型
date 定義date控件（包括年、月、日，不包括時間）
datetime 定義date和time控件（包括年、月、日、時、分、秒、幾分之一秒，基于UTC時區）
datetime-local 定義date和time控件（包括年、月、日、時、分、秒、幾分之一秒，不帶時區）
email 定義語義上的e-mail地址輸入域，會自動驗證email域的值。外觀上與type="text"的input輸入類型沒有差異。注意：IE9-瀏覽器及safari瀏覽器不支持
file 定義文件選擇字段和“瀏覽…”按鈕，供文件上傳。注意：IE8-瀏覽器設置的type="file"的input元素的寬高為包含 padding和 border的寬高
hidden 定義隱藏輸入類型用于在表單中增加對用戶不可見，但需要提交的額外數據
image 定義圖像形式的提交按鈕。該類型可以設置width、height、src、alt這四個屬性。用圖片作為提交按鈕會一起發送點擊在圖片上的 x和 y坐標，這樣可以與服務器端那邊的圖結合使用，如果圖片有 name屬性，也會隨坐標發送
month 定義month和year控件（不帶時區）
number 定義用于輸入數字的字段。注意：IE不支持該類型；它的取值可以為小數
password 定義密碼字段（密碼字段字符不會明文顯示，而是以星號或圓點替代）。注意：IE6瀏覽器設置的type="text/password"的input元素的寬高為包含padding和 border的寬高
radio 定義單選按鈕，允許用戶從給定數目的選擇中選一個選項。同一組按鈕，name值一定要一致
range 定義用于精確值不重要的輸入數字的控件（比如slider控件）。類似于type="number"的input類型。注意：IE9-不支持該類型
reset 定義重置表單的按鈕（重置所有的表單值為默認值）
search 定義語義上的搜索框，外觀上與type="text"的input輸入類型沒有差異
submit 定義提交表單的按鈕
tel 定義語義上的電話輸入域。外觀上與type="text"的input輸入類型沒有差異
text 默認。定義一個單行的文本字段（在大多數瀏覽器中，默認寬度為20個字符）
time 定義用于輸入時間的控件（小時和分鐘）
url 定義語義上的url地址的輸入域，會自動驗證url域的值，外觀上與type="text"的input輸入類型沒有差異。注意：IE9-瀏覽器及safari瀏覽器不支持
week 定義week和year控件（不帶時區）
  • HTML5擁有多個可供選取日期和時間的新輸入類型：
    • date：用于選取日、月、年
    • month：用于選取月、年
    • week： 用于選取周、年
    • time：用于選取時、分
    • datetime：用于選取時、日、月、年（UTC時間）
    • datetime-local：用于選取時、日、月、年（本地時間）
  • 注意：IE和firefox這6種日期類型都不支持，chrome不支持datetime類型
<body>
    date: <input type="date"><br><br>
    month: <input type="month"><br><br>
    week: <input type="week"><br><br>
    time: <input type="time"><br><br>
    datetime: <input type="datetime"><br><br>
    datetime-local: <input type="datetime-local"><br><br>

    <!-- 注意：chrome不支持該類型的step設置 -->
    <input type="week" value="2015-W36" step="2" min="2015-W25" max="2015-W40"> 
<script type="text/javascript">
// 要預設控件的日期和時間，可以用字符串設置value屬性
/*
value屬性格式：
date                　　 YYYY-MM-DD
time                 　　hh:mm:ss.s
datetime            　　 YYYY-MM-DDThh:mm:ss:sZ
datetime-local           YYYY-MM-DDThh:mm:ss:s
month            　　　　 YYYY-MM
week                　　 YYYY-Wnn

YYYY = 年
MM = 月
DD = 日
hh = 小時
mm = 分鐘
ss = 秒
s = 0.1秒
T = 日期與時間之間的分隔符
Z = Zulu時間的時區
Wnn = W周數，從1月的第一周開始是1，直到52
*/
// 該類型的value屬性格式還可以用在 min 和 max 的屬性里，用來創建時間跨度；step 可以用來設置移動的刻度
</script>
</body>

text/password 文本輸入框、密碼輸入框

  • 當用戶要在表單中鍵入字幕、數字等內容時，就會用到文本輸入框，文本框也可以轉化為密碼輸入框
  • 語法：
<form>
    <input type="text/password" name="名稱" value="文本"/>
</form>
// type：當type="text"時，輸入框為文本輸入框（也可以不寫，默認類型為text）；當type="password"時，輸入框為密碼輸入框
// name：為文本框命名，以備后臺程序ASP、PHP使用
// value：為文本輸入框設置默認值（一般起到提示作用），但是如果要更改需用戶手動刪除再重新輸入，現在更多的采用 placeholder（占位符）
// placeholder：HTML5的新屬性，適用于以下的 <input> 類型：text, search, url, telephone, email 以及 password
// 若設置 readonly 屬性，用戶無法更改輸入框中的內容
// 若設置 hidden 屬性，輸入框隱藏，若輸入框默認有值還是會傳到服務器

// 實例
<form>
  姓名：
  <input type="text" name="myName">
  <br />
  密碼：
  <input type="password" name="pass">
  // 當我們在密碼域中鍵入字符時，瀏覽器將使用項目符號來替代這些字符
</form>
密碼框內密碼的顯示和隱藏
  • 現在很多軟件在密碼框右側都有一個小眼睛，用于設置密碼的顯示和隱藏。通過更改input元素的type屬性得以實現
    <style type="text/css">
    *{
        padding: 0;
        margin: 0;
    }

    #show{
        height: 20px;
        width: 200px;
        padding: 5px;
        margin: 10px;
        border: 1px solid #ccc;
        line-height: 20px;
    }

    #eye{
        position: relative;
        right: 35px;
        top: 3px;
        width: 15px;
        height: 15px;
        cursor: pointer;
    }
    </style>
</head>
<body>
<input id="show" type="password" maxlength="6">
![](http://upload-images.jianshu.io/upload_images/1871412-eca5856930486c62.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
<script type="text/javascript">
eye.on = true;
eye.addEventListener('click', function (){
    if(this.on){
        this.src = 'http://www.iconpng.com/png/iconshock-iphone/eye_closed.png';
        show.type = 'text';
        this.on = false;
    }else{
        this.src = 'http://www.iconpng.com/png/iconshock-iphone/eye_open.png';
        show.type = 'password';
        this.on = true;
    }
});   
</script>
</body>

file 文件上傳

  • 定義文件選擇字段和 "瀏覽..." 按鈕，供文件上傳
  • 表單提交文件的正確方式：
    • 添加 input[type=file] 的 input 標簽
    • 設置表單的 method 為 post
    • 設置表單的 enctype 為 multipart/form-data
<style type="text/css">
    #testForm label{
        display: inline-block;
        width: 50px;
        height: 50px;
        background: no-repeat url('http://www.iconpng.com/png/100-slim-icons/uploading13.png');
        background-size: 50px 50px;
    }

    #testForm #file{
        width: 0;
        height: 0;
    }
</style>
</head>

<body>
<!-- 將上傳文件按鈕尺寸設置為 0x0，使用 laebl 元素關聯 -->
<form id="testForm" name='testForm' method="post" action="form_action.html" enctype="multipart/form-data">
    <label for="file"></label>
    <input id="file" type="file" name="image">
</form>
</body>

<!-- 本地圖片預覽的實現，大概思路 -->
<body>
<form name='testForm' action="form_action.html">
    選擇圖片文件: <input type="file" name="img" accept="image/*" multiple>
    <input type="submit">
</form>
<form id="testForm1"></form>
<script type="text/javascript">
file.addEventListener('change', function (event) {
    var files = Array.property.slice.call(event.target.files, 0);
    files.forEach(function(item){
        file2dataurl(item, function(url){
            var image = new Image();
            parent.appendChild(image);
            image.src = url;
        });
    });
});
</script>
</body>

radio/checkbox 單選框、復選框

  • HTML中有兩種選擇框，即單選框和復選框，兩者的區別是單選框中的選項用戶只能選擇一樣，而復選框中用戶可以任意選擇多項，甚至全選
  • 擁有一樣 name 屬性的 radio/checkbox 為一組
// 語法
<input type="radio/checkbox" value="值" name="名稱" checked="checked" />
// 當type="radio"時，控件為單選框；當type="checkbox"時，控件為復選框
// value：提交數據到服務器的值（后臺程序PHP使用）
// name：為控件命名，以備后臺程序ASP、PHP使用
// checked：當設置checked="checked"時，該選項被默認選中，也可以寫成 checked=true，為false時取消選中（推薦）
// 若設置了 disabled 屬性，則該選擇框不能被選中

<!-- 示例 -->
<form method="post" action="save.php">
    你的性別<br>
    <input type="radio" name="sex" value="male">男<br>
    <input type="radio" name="sex" value="female">女<br>
    你擁有哪些交通工具？<br>
    <input type="checkbox" name="vehicle" value="Bike">我有一輛自行車<br>
    <input type="checkbox" name="vehicle" value="Car">我有一輛小汽車
</form>

使用input創建按鈕 button

  • 用于在HTML表單中創建按鈕
  • 語法：
<form>
<input type="button" value="你好 世界!" onclick="fun1(), fun2()">   // 若需要執行多個函數，函數之間用逗號 , 隔開
</form>

submit 提交按鈕

  • 在表單中有兩種按鈕可以使用，分別為：提交按鈕、重置按鈕。當用戶需要提交表單信息到服務器時，需要用到提交按鈕
  • 當用戶點擊提交按鈕后，表單的內容會被傳送到另一個文件。表單的動作屬性action定義了目的文件的文件名。由動作屬性定義的這個文件通常會對接收到的輸入數據進行相關的處理
// 語法
<input type="submit" value="提交">
// type：只有當type值設置為submit時，按鈕才有提交作用
// value：按鈕上顯示的文字

// 實例
<form name="isFrom" method="post" action="save.php">
    <label for="myName">姓名：</label>
    <input type="text" value="" name="myName" />   // 這里沒有設置默認值
    <input type="submit" value="提交" name="submitBtn" />
</form>

reset 重置按鈕

  • 重置表單信息到初始時的狀態
// 語法
<input type="reset" value="重置">
// type：只有當type值設置為reset時，按鈕才有提交作用
// value：按鈕上顯示的文字

// 實例
<form name="isForm" method="post" action="save.php">
    <label>愛好：</label>
    <select>
        <option value="看書">看書</option>
        <option value="旅游" selected="selected">旅游</option>
        <option value="運動">運動</option>
    </select>
    <input type="submit" value="確定" />
    <input type="reset" value="重置" />
</form>

type=hidden 隱藏域有什么作用？

  • 作用：隱藏域在頁面中對于用戶是不可見的，在表單中插入隱藏域的目的在于收集或發送信息，以利于被處理表單的程序所使用。用戶單擊發送按鈕提交表單的時候，隱藏域的信息也被一起發送到服務器
  • 舉例：
    • 有些時候我們要給用戶一信息，讓他在提交表單時提交上來以確定用戶身份，如 sessionkey，等等。當然這些東西也能用 cookie 實現，但使用隱藏域就簡單的多了．而且不會有瀏覽器不支持，用戶禁用 cookie 的煩惱
    • 有些時候一個 form 里有多個提交按鈕，怎么使程序能夠分清楚到底用戶是按哪一個按鈕提交上來的呢？就可以寫一個隱藏域name="hidden"，然后在每一個提交按鈕處加上onclick="document.forms.formName.hidden.value='xx'"，然后服務器接收到數據后先檢查 hidden 的值就會知道用戶是點擊的哪個提交按鈕進行提交的
    • 有時候一個網頁中有多個form，我們知道多個form是不能同時提交的，但有時這些 form 確實相互作用，我們就可以在 form 中添加隱藏域來使它們聯系起來
    • 還有個例子，比如按一個按鈕彈出四個小窗口，當點擊其中的一個小窗口時其他三個自動關閉．可是 IE 不支持小窗口相互調用，所以只有在父窗口寫個隱藏域，當小窗口看到那個隱藏域的值是 close 時就自己關掉
  • 更多說明詳見：

<form>表單標簽

  • 表單是網頁與用戶的交互工具，由一個<form>元素作為容器構成，封裝其他任何數量的表單控件，還有其它任何<body>元素里可用的標簽。HTML表單可以把瀏覽者輸入的數據傳送到服務器端，這樣服務器端程序就可以處理表單傳過來的數據
  • 表單能夠包含<input>、<menus>、<textarea>、<fieldset>、<legend>、<label>等表單控件元素
  • 語法：<form method="傳送方式" antion="服務器文件">
  • HTML表單控件：
標簽 說明
<form> 定義供用戶輸入的表單
<input> 定義輸入域
<textarea> 定義文本域（一個多行的輸入控件）
<label> 定義了<input>元素的標簽，一般為輸入標題
<fieldset> 定義了一組相關的表單元素，并使用外框包含起來
<legend> 定義了<fieldset>元素的標題
<select> 定義了下拉選項列表
<optgroup> 定義選項組
<option> 定義下拉列表中的選項
<button> 定義一個點擊按鈕
<datalist> 指定一個預先定義的輸入控件選項列表
<keygen> 定義了表單的密鑰對生成器字段
<output> 定義一個計算結果
  • 屬性：
屬性 值 說明
accept MIME_type HTML5不支持。規定服務器接收到的文件的類型（文件是通過文件上傳提交的）
accept-charset character_set（表單提交時使用的字符編碼列表，多個字符編碼使用空格分隔，常用值：UTF-8、ISO-8859-1） 規定服務器用哪種字符集處理表單數據，通常不指定，那么頁面的字符編碼會被使用
action URL 規定提交表單時，向何處發送表單數據；如果忽略這個屬性，表單會重定向到表單所在的URL
autocomplete on（默認。規定啟用自動完成功能。瀏覽器會基于用戶之前鍵入的值自動完成值）；off（規定禁用自動完成功能。用戶必須每次使用時輸入值到每個字段中，瀏覽器不會自動完成輸入）。有時我們禁用了自動完成，但是卻沒有作用，失效是因為瀏覽器內部也會默認開啟一個輸入字段后自動補全的功能 規定是否啟用表單的自動完成功能。只有元素擁有 name 屬性，該屬性才有效
enctype application/x-www-form-urlencoded（默認值。在發送前對所有字符進行編碼（將空格轉換為 "+" 符號，特殊字符轉換為 ASCII HEX 值））；multipart/form-data（不對字符編碼。在使用包含文件上傳控件的表單時，必須使用該值）；text/plain（ 空格轉換為 "+" 加號，但不對特殊字符編碼） 規定在向服務器發送表單數據之前如何對其進行編碼。（適用于 method="post" 的情況）
method get（默認）；post 規定用于發送表單數據的HTTP方法（表單數據會被發送到 action 屬性中規定的頁面中）
name text 規定表單的名稱
novalidate novalidate 規定當提交表單時不對其進行驗證。注意：IE9-不支持
target _blank（在新窗口／選項卡中打開）；_self（默認值。在同一框架中打開）；_parent（在父框架中打開）；_top（在整個窗口中打開）；frame name（在指定的 iframe 中打開） 規定在何處打開action URL
  • 注意：
    • 表單里嵌套表單是不允許的
    • 所有表單控件（文本框、文本域、按鈕、單選框、復選框）都必須放在<form></form>標簽之間，否則用戶輸入的信息提交不到服務器上
    • form元素是塊級元素，其前后會產生折行

表單名稱 name

  • name屬性規定表單名稱，如果name="test"，則Javascript可以使用document.forms.test來獲取該表單
<body>
<!-- name 屬性，主要用于 document.forms 這個API來使用的，我們可以很方便的拿到 form 這個元素對象。表單中的表單控件也可以通過這種方式拿到 -->
<form name="testForm" action="save.php" method="post">
    <p><label>帳號：<input type="text" name="account"></label></p>
</form> 
<script type="text/javascript">
// 通過 name 拿到 testForm
var testForm = document.forms.testForm;
console.log(testForm);  // 輸出 <form name="testForm" action="save.php" method="post">...</form>

// 通過 name 拿到 accountInput
var accountInput = testForm.account;
console.log(accountInput);  // 輸出 <input type="text" name="account">
</script>
</body>

數據發送 method

  • 表單可以用兩種方式發送數據：GET和POST，默認為GET方法
POST方法
  • 如果采用POST方法，瀏覽器將會按照下面兩步來發送數據。首先，瀏覽器將與action屬性中指定的表單處理服務器建立聯系，一旦建立連接之后，瀏覽器就會按分段傳輸的方法將數據發送給服務器
  • 在服務器端，一旦POST樣式的應用程序開始執行時，就應該從一個標志位置讀取參數，而一旦讀到參數，在應用程序能夠使用這些表單值以前，必須對這些參數進行解碼。用戶特定的服務器會明確指定應用程序應該如何接受這些參數
  • 應用場景：
    • 大數據處理，因為POST方法相比GET方法而言，處理更多字段
    • 安全數據，因為GET方法將表單參數直接放在應用程序的URL中，這樣網絡窺探者可以很輕松地捕獲它們，還可以從服務器的日志文件中進行摘錄；而POST方法則沒有這方面的漏洞
GET方法
  • 如果采用GET方法，瀏覽器會與表單處理服務器建立連接，然后直接在一個傳輸步驟中發送所有的表單數據：瀏覽器會將數據直接附在表單的action URL之后。這兩者之間用問號進行分隔
  • 應用場景：
    • 獲得最佳表單傳輸性能，因為GET發送只有少數簡單字段
    • 簡單處理，因為GET方法無需處理編碼解碼方法
    • 傳參處理，因為GET方法允許把表單的參數包括進來作為 URL 的一部分
post 和 get 方式的區別
  • GET后退按鈕/刷新無害，POST數據會被重新提交（瀏覽器應該告知用戶數據會被重新提交）。
  • GET書簽可收藏，POST為書簽不可收藏。
  • GET能被緩存，POST不能緩存 。
  • GET編碼類型 application/x-www-form-url，POST編碼類型 application/x-www-form-urlencoded 或 multipart/form-data。為二進制數據使用多重編碼。
  • GET歷史參數保留在瀏覽器歷史中。POST參數不會保存在瀏覽器歷史中。
  • GET對數據長度有限制，當發送數據時，GET 方法向 URL 添加數據；URL 的長度是受限制的（URL 的最大長度是 2048 個字符）。POST無限制。
  • GET只允許 ASCII 字符。POST沒有限制。也允許二進制數據。
  • 與 POST 相比，GET 的安全性較差，因為所發送的數據是 URL 的一部分。在發送密碼或其他敏感信息時絕不要使用 GET ！POST 比 GET 更安全，因為參數不會被保存在瀏覽器歷史或 web 服務器日志中。GET的數據在 URL 中對所有人都是可見的。POST的數據不會顯示在 URL 中。
  • 更多說明詳見：

自動完成 autocomplete

  • autocomplete屬性規定表單是否應該啟用自動完成功能。當用戶在字段開始鍵入時，瀏覽器基于之前鍵入過的值，應該顯示出在字段中填寫的選項
  • 注意：IE瀏覽器不支持該屬性，只有元素擁有name屬性，該屬性才有效
<body>
<button id="btn1">打開自動完成</button>
<button id="btn2">關閉自動完成</button>
<form method="get" action="#" name="test">
    <p><label>x:<input name="x"></label></p>
    <p><label>y:<input name="y"></label></p>
    <p><button type="submit">Submit</button></p>    
</form>  

<script type="text/javascript">
var oForm = document.forms.test;
btn1.onclick = function(){
    oForm.autocomplete = 'on';
};
btn2.onclick = function(){
    oForm.autocomplete = 'off';
};
</script>
</body>
如何處理由于瀏覽器設置導致的autocomplete="off"失效的問題?
<form name="testForm" action="save.php" method="post" >
    <!-- 
    失效是因為瀏覽器內部也會默認開啟一個輸入字段后自動補全的功能
    方法一：打開瀏覽器設置將自動完成關閉

    方法二：只是針對賬號和密碼框自動完成的處理
    表單中出現了password類型的input標簽，chrome和firefox是以這個為判斷條件來構建記住密碼這個功能的
    因為瀏覽器以password類型的input標簽為識別標準，那么在輸出頁面的時候完全可以把這個密碼框的type設置為text，然后在用戶點擊密碼框輸密碼時，再把這個密碼框的type再變回password
    -->
    <input type="text" name="password" onfocus="this.type='password';" autocomplete="off">

    <!-- 方法三：修改readonly屬性 -->
    <input type="password" readonly onfocus="this.removeAttribute('readonly');" autocomplete="off">

    <!-- 方法四：autocomplete="nope" 設置一個無效的值，除on 或 off之外的一個任意的值，使瀏覽器放棄對該屬性的執行 -->
    <input type="password" name="password" autocomplete="nope">
</form>

表單驗證 novalidate

  • novalidate屬性規定當提交表單時不對其進行驗證
  • 注意：IE9-不支持
<body>
<button id="btn1">打開驗證</button>
<button id="btn2">關閉驗證</button>
<form method="get" action="#" name="test">
    E-mail: <input type="email" name="user_email" />
    <input type="submit" />
</form>    

<script type="text/javascript">
var oForm = document.forms.test;
btn1.onclick = function(){
    oForm.removeAttribute('novalidate');
};
btn2.onclick = function(){
    oForm.setAttribute('novalidate', '');
};
</script>
</body>

如何無刷新提交表單

  • 在頁面設置一個 iframe，設置好它的 name 屬性值，用css控制它是“消失”的
  • 設置 form 的 target 屬性為 iframe 的 name 屬性即可

應用（創建一個披薩預定表單）

    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            font: 15px "Microsoft Yahei";
        }

        div{
            margin: 50px;
            width: 300px;
            padding: 10px;
            border: 2px solid green;
        }

        div form h3{
            font-size: 20px;
            font-weight: bolder;
            text-align: center;
        }

        div form p{
            margin-top: 10px;
        }

        div form fieldset{
            margin-top: 10px;
            padding: 5px;
            border: 1px solid #ccc;
        }

        div form fieldset label{
            margin: 0 10px 0 5px ;
        }

        .submit{
            width: 70px;
            height: 25px;
            background: orange;
            border: none;
            color: white;
            line-height: 25px;
            font-size: 12px;
            margin-left: 220px;
        }
    </style>
</head>
<body>
<div>
    <form name="pizza" method="post" action="https//:pizza.example.com/order" enctype="application/x-www-form-urlencoded" autocomplete="on">
        <h3>披薩預定表單</h3>
        <p><label>姓名：<input type="text" name="custname" required></label></p>    <!-- label 為內聯元素，我們可以將一行信息看成段落，包裹在 p 塊狀元素內 -->
        <p><label>電話：<input type="tel" name="custtel" required></label></p> <!-- 將 input 元素寫在 label 元素內，相當于將它們兩個綁定了起來 -->
        <p><label>郵箱：<input type="email" name="custemail" required></label></p>     <!-- 塊狀元素可以包含行內元素和塊狀元素，但行內元素不能包含塊狀元素，input 屬于內聯塊狀元素 -->
        <fieldset>
            <legend> 披薩大小 </legend>
            <label><input type="radio" name="size" value="small" required> 小 </label>
            <label><input type="radio" name="size" value="medium" required> 中 </label>
            <label><input type="radio" name="size" value="large" required> 大 </label>
        </fieldset>
        <fieldset>
            <legend> 披薩配料 </legend>
            <label><input type="checkbox" name="topping" value="bacon"> 熏肉 </label>
            <label><input type="checkbox" name="topping" value="cheese"> 奶酪 </label>
            <label><input type="checkbox" name="topping" value="onion"> 洋蔥 </label>
            <label><input type="checkbox" name="topping" value="mushroom"> 蘑菇 </label>
        </fieldset>
        <p><label>配送時間：<input type="time" name="delivery" min="11:00" max="21:00" step="900" required></label></p>   <!-- step 單位為秒，900相當于 15分鐘 -->
        <p><input class="submit" type="submit" value="提交訂單"></p>
    </form>
</div>
</body>
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容