育知HTML5培訓(xùn)技術(shù)分享 HTML5新增表單元素及

育知HTML5培訓(xùn)技術(shù)分享 HTML5新增表單元素及新增屬性

們已經(jīng)學(xué)過了很多標(biāo)簽及標(biāo)簽屬性了，這節(jié)課我們還要學(xué)一些HTML5對表單這一塊做了專門的修改，就是增加了一些新的標(biāo)簽和新的屬性。讓表單結(jié)構(gòu)更靈活。我們通過以下這幾方面給大家講解。

√新增表單元素

√新增表單屬性-input屬性

好了廢話不多說，直接看代碼吧！

一、新增表單元素

a)email:用于輸入單一email地址或者email地址列表,提交表單的時候驗證輸入值是否滿足email格式。

b).url: 用于處理URL,在iPhone中非常好用，會出現(xiàn)對應(yīng)的鍵盤布局,提交表單的時候驗證輸入值是否滿足url的格式。

c).number：用于包含數(shù)字值的輸入字段。您可以設(shè)置可接受數(shù)字的限制。根據(jù)你的設(shè)置提供選擇數(shù)字的功能，其中min最小值，max為最大值

d).range:會以一個滑塊的形式表現(xiàn)，包含一定范圍內(nèi)數(shù)字值的輸入域，max為最大值，min為最小值，value為默認值，如果沒有設(shè)置max和min,默認值是1-100

e).search:用于顯示一個輸入搜索關(guān)鍵字的表單，若加上result=”s”屬性，則會在搜索框前面加一個搜索圖標(biāo)。

f).tel:用于輸入電話號碼，驗證輸入的是否是電話號碼的格式。（以PC端無效果，在移動端使用該框時，會切換到數(shù)字鍵盤）

g).color:color類型會提供顏色拾取器，供用戶選擇顏色，并將用戶選擇的顏色填充到此元素中。

h).date:用于日期選擇的表單域，支持日期，月份，周。日期和時間類型

綜合案例：

頁面顯示效果

二、新增表單元素屬性（主講input新增的屬性）

a).autofocus: 在打開頁面時使元素自動獲取焦點常給input,button,select,textarea 等標(biāo)簽使用

<input type="password" name="pwd" autofocus="autofocus"/>

給密碼框使用之前

給密碼框使用之后

b). placeholder: 在用戶輸入時進行提示常應(yīng)用在input,textarea等標(biāo)簽

<input type="text" name="name" placeholder="請輸入公司名稱" />

c). required: 表明該元素是必填項，當(dāng)提交表單的時候會自動驗證該元素的內(nèi)容是否不為空常給

input,textarea等標(biāo)簽使用。

d). max/min/step限制值的輸入范圍，以及值的變化程度。新增number元素有介紹。常給input標(biāo)簽使用。

<input type="number" name="age" step="5" min="10" max="25"/>

e). autocomplete:使form元素或者input元素擁有自動完成功能，既記錄用戶之前輸入的值，

關(guān)閉為off，默認為on。常給form,input使用

<input type="url" name="url" autocomplete="off"/>

值為off時：

值為no時：

f). multiple: 在選擇文件時，默認只能單選，加上這個屬性后，則可以使用鼠標(biāo)選中多個文件進行上傳，或者給select標(biāo)簽使用

<input type="file" name="file" multiple="multiple" />

h). formaction:重寫表單的action屬性, formmethod: 重寫表單的method屬性.

<input type="submit" value="提交" formaction="demo.html"

formmethod="post"/>

i). list特性和datalist 選值列表list屬性的值為datalist元素的id，datalist元素類似于選擇框，在文本框獲

得焦點的時候以提示輸入的方式顯示。

地址：<input type="text" list="item" name="address"/>
<datalist id="item">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">深圳</option>
</datalist>

顯面效果：

j).新增form屬性

在我們之前的html中，表單元素必須放在form元素所包含的里面，在html5中，可以把他們寫在頁面上的任何一個地方，然后給該元素增加一個form屬性，form屬性的值為form表單的id。在form元素里面的表單元素可以不用添加form屬性，如果你想利用form獲取所有表單元素的值，那么在form元素外面的表單元素就必須添加form屬性，input、select、textarea等元素都滿足該功能。

代碼：

以后我們再寫頁面的時候可以使用新增的標(biāo)簽及屬性了，有了這些標(biāo)簽及屬性對于我前端的開發(fā)人員來說，真是一大幸事啊！

言

在 HTML 中使用 <form> 表單元素在 JavaScript 中對應(yīng)的是 HTMLFormElement 類型，而HTMLFormElement繼承了HTMLElement接口：

interface HTMLFormElement extends HTMLElement {
    ...
}

因此，HTMLFormElement 除了與 HTMLElement有一樣的屬性和方法外，還有自己獨有的屬性和方法：

acceptCharset：服務(wù)器可以接收的字符集，等價于 HTML 的 accept-charset 屬性。
action：請求的 URL，等價于 HTML 的 action 屬性。
elements：表單中所有控件的 HTMLCollection。
enctype：請求的編碼類型，等價于 HTML 的 enctype 屬性。
length：表單中控件的數(shù)量。
method：HTTP 請求的方法類型，通常是 get 或 post，等價于 HTML 的 method 屬性。
name：表單的名字，等價于 HTML 的 name 屬性。
target：用于發(fā)送請求和接收響應(yīng)的窗口的名字，等價于 HTML 的 target 屬性。
reset()：把表單字段重置為各自的默認值，如果沒有默認值，則為空。
submit()：提交表單。

如果想要獲取 <form> 表單元素的引用，需要使用 DOM 選擇器進行查找，如 getElementById/getElementsByName/getElementsByClassName/getElementsByTagName/querySelector/querySelectorAll 這些方法，下面使用 getElementById() 方法獲取表單，只要給表單設(shè)置一個 id 屬性即可：

let form=document.getElementById("form-id");

Document中的<form>是document.forms的成員，因此可以通過索引或表單的 name 來訪問特定的表單。如下所示：

// 文檔中第一個元素
let firstForm=document.forms[0];
// 取得名字為"form-name"的表單
let formName=document.forms["form-name"];

注意：表單可以同時擁有id和name，且兩者可以不相同。

提交表單

一般情況下，<form>表單元素是通過客戶端用戶點擊的方式發(fā)送表單數(shù)據(jù)。而定義提交按鈕主要有：

定義使用 type=“submit” 屬性值的 <input> 元素，如 <input type="submit" value="提交">。
定義使用 type="submit" 屬性值的 <button> 元素，如 <button type="submit">提交</button>。
定義使用 type="image" 屬性值的 <input> 元素，如 <input type="image" src="submit.gif">。

這種方式提交表單會在請求之前觸發(fā) submit 事件。這就提供了一個驗證表單數(shù)據(jù)的機會，可以根據(jù)驗證結(jié)果來決定表單是否要提交。如下所示：

let form=document.getElementById("form-id");
form.addEventListener("submit", (event)=> {
    // 驗證表單
    if (...) {
        // 驗證失敗后，就要阻止表單提交
        event.preventDefault();
        return;
    } 
    // 這里用于驗證成功后將表單提交
});

調(diào)用 preventDefault() 方法可以阻止表單提交。通常，在表單數(shù)據(jù)無效以及不應(yīng)該發(fā)送到服務(wù)器可以這樣處理。

也可以調(diào)用submit() 方法提交表單，表單中不存在提交按鈕也不影響提交。如下所示：

let form=document.querySelector("#form-id");
// 提交表單
form.submit();

通過 submit() 方法提交的表單，submit 事件不會觸發(fā)。因此在調(diào)用這個方法前要先做數(shù)據(jù)驗證。

表單提交的最大一個問題是可能會提交兩次。如果提交表單后沒有反應(yīng)，那么沒有耐心的用戶可能會多次點擊提交按鈕。因此，解決這種方法主要有兩種：表單提交后禁用按鈕，或者通過 onsubmit 事件取消之后的表單提交。

重置表單

一般用戶填寫完表單信息后，想要重新填寫時，可以使用重置按鈕來重置表單。而定義重置按鈕主要有：

定義使用 type="reset" 屬性值的 <input>元素，如 <input type="reset" value="重置">。
定義使用 type="reset" 屬性值的 <button> 元素，如 <button type="reset">重置</button>

重置成功后，表單字段的值會重置為默認值；如果沒有默認值，則會為空。

重置按鈕可以觸發(fā) reset 事件。這個事件為取消重置提供了機會。如下所示：

let form=document.getElementById("form-id");
form.addEventListener("reset", (event)=> {
    event.preventDefault();
});

重置按鈕也可以調(diào)用 reset() 方法完成重置操作：

let form=document.getElementById("form-id");
// 重置表單
form.reset();

但 reset()方法會觸發(fā) reset 事件。

注意：表單設(shè)計中通常不提倡重置表單。

表單字段

表單元素可以像頁面中的其它元素一樣使用原生 DOM 方法來訪問。此外，調(diào)用 elements 屬性為表單的有序列表，包含表單中所有標(biāo)簽元素的引用，包括<input>、<textarea>、<button>、<select>和<fieldset>元素，并按照在 HTML 中出現(xiàn)的次序保存，通過索引和name屬性進行訪問。如下所示：

let form=document.getElementById("form-id");
// 取得表單中的第一個字段
let field1=form.elements[0];
// 取得表單中名為"textbox-name"的字段
let field2=form.elements["textbox-name"];
// 取得字段的數(shù)量
let fieldCount=form.elements.length;

如果多個表單控件使用同一個 name 值，比如 <input>元素設(shè)置type="radio"屬性為單選，就會返回包含所有同名元素的 HTMLCollection。如下所示：

<form method="post" id="form-id">
    <ul>
        <li><input type="radio" name="sex" value="男">男</li>
        <li><input type="radio" name="sex" value="女">女</li>
        <li><input type="radio" name="sex" value="未知">未知</li>
    </ul>
</form>

因此，訪問 elements["sex"] 返回的 NodeList 就包含著 3 個元素；而使用索引訪問時，就會返回當(dāng)前位置的元素。如下所示：

let form=document.getElementById("form-id");
let sexes=form.elements["sex"];
console.log(sexes.length); // 3
let index_one=sexes[1];
let form_one=form.elements[1];
console.log(index_one===form_one); // true

公共屬性

除了 <fieldset> 元素以外，所有表單字段都有一組同樣的屬性。由于 <input> 類型可以表示多種表單字段，因此某些屬性只適用于特定類型的字段。除此之外的屬性可以在任何表單字段上使用。以下列出了這些表單字段的公共屬性和方法。

disabled：布爾值，表示表單字段是否禁用。
form：指針，指向表單字段所屬的表單。這個屬性是只讀的。
name：字符串，這個字段的名字。
readOnly：布爾值，表示這個字段是否只讀。
tabIndex：數(shù)值，表示這個字段在按Tab 鍵時的切換順序。
type：字符串，表示字段類型，如"checkbox"、"radio"等。
value：要提交給服務(wù)器的字段值。對文件輸入字段來說，這個屬性是只讀的，僅包含計算機上某個文件的路徑。

JavaScript 可以動態(tài)修改任何屬性，當(dāng)然，form屬性除外。如下所示：

let form=document.getElementById("form-id");
let field=form.elements[0];
// 修改字段的值
field.value="修改后的值";
// 檢查字段所屬的表單
console.log(field.form===form); // true
// 給字段設(shè)置焦點
field.focus();
// 禁用字段
field.disabled=true;
// 改變字段的類型（不推薦，但對<input>來說是可能的）
field.type="checkbox";

動態(tài)修改表單字段屬性的能力為修改表單提供了方便。如當(dāng)點擊兩次提交按鈕時，會在第一次提交后，通過監(jiān)聽submit事件來實現(xiàn)禁用提交按鈕。如下所示：

// 避免多次提交表單的代碼
let form=document.getElementById("form-id");
form.addEventListener("submit", (event)=> {
let target=event.target;
// 取得提交按鈕
let btn=target.elements["submit-btn"];
// 禁用提交按鈕
btn.disabled=true;
});

以上代碼，通過監(jiān)聽 submit 事件，并在函數(shù)中獲取按鈕并設(shè)置disabled=true，來達到提交按鈕禁用。注意：這個功能不能通過直接給提交按鈕添加 onclick 事件進行實現(xiàn)，原因是不同瀏覽器觸發(fā)事件的時機不一樣。有些瀏覽器會在觸發(fā)表單的 submit 事件前先觸發(fā) onclick 事件，有些瀏覽器會后觸發(fā) onclick 事件。對于先觸發(fā) onclick 事件的瀏覽器，這個按鈕會在表單提交前被禁用，這意味著表單不會被提交。因此，最好使用表單的 submit 事件進行禁用提交按鈕。但這種方式不適用于沒有提交按鈕的表單提交，因為，只有提交按鈕才能觸發(fā) submit 事件。

type 屬性可以用于除<fieldset>之外的任何表單字段。對于<input>元素，這個值等于 HTML 的 type 屬性值。對于其他元素，這個 type 屬性的值按照下表設(shè)置。

描述	示例HTML	類型的值
單選列表	<select>...</select>	"select-one"
多項列表	<select multiple>...</select>	"select-multiple"
自定義按鈕	<button>...</button>	"submit"
自定義非提交按鈕	<button type="button">...</button>	"button"
自定義重置按鈕	<button type="reset">...</button>	"reset"
自定義提交按鈕	<button type="submit">...</button>	"submit"

對于<input>和<button>元素，可以動態(tài)修改其 type 屬性。但<select>元素的 type 屬性是只讀的。

公共方法

每個表單字段都有兩個公共方法：

focus()：把瀏覽器焦點設(shè)置到表單字段，該字段會變成活動字段并可以響應(yīng)鍵盤事件。
blur()：從元素上移出焦點，焦點不會轉(zhuǎn)移到任何特定元素，僅僅是從調(diào)用這個方法的元素上移除。

給一個 focus() 方法的例子：

window.addEventListener("load", (event)=> {
    document.forms[0].elements[0].focus();
});

上述情況就是在頁面加載后，把焦點定位到表單中的第一個字段。注意：如果表單中第一個字段是type="hidden"屬性的<input>元素，或者該字段被 CSS 屬性 display 或 visibility 隱藏，以上代碼就會出錯。

在 HTML5 中，表單字段增加了 autofocus 屬性，支持的瀏覽器會自動為帶有該屬性的元素設(shè)置焦點，無須使用 JavaScript。如下所示：

<input type="text" autofocus>

為了讓之前的代碼在使用autofocus時也能正常工作，必須先檢測元素上是否設(shè)置了該屬性。如果設(shè)置了 autofocus，就不再調(diào)用 focus()：

window.addEventListener("load", (event)=> {
    let element=document.forms[0].elements[0];
    if (element.autofocus !==true) {
        element.focus();
    }
});

注意：默認情況下只能給表單元素設(shè)置焦點。不過，通過將 tabIndex 屬性設(shè)置為–1 再調(diào)用focus()，也可以給任意元素設(shè)置焦點。

再給一個 blur() 的例子：

document.forms[0].elements[0].blur();

在瀏覽器支持 readOnly 屬性之前，Web 開發(fā)者通常會使用這個方法創(chuàng)建只讀字段。現(xiàn)在很少有需要調(diào)用blur()的了。

公共事件

除了鼠標(biāo)、鍵盤、變化和HTML 事件外，所有字段還支持以下 3 個事件：

blur：字段失去焦點時，會觸發(fā)該事件。
change：<input>和<textarea>元素的 value 發(fā)生變化且失去焦點時觸發(fā)，或者在<select>元素中選中項發(fā)生變化時觸發(fā)。
focus：在字段獲得焦點時觸發(fā)。

blur 和 focus 事件是用戶手動改變焦點或調(diào)用blur/focus方法時觸發(fā)。change事件是因控件不同而改變觸發(fā)時機。

<input> 和 <textarea>：change事件會在字段失去焦點，同時 value 自控件獲得焦點后發(fā)生改變時觸發(fā)。
<select>：change 事件會在用戶改變選中項時觸發(fā)，不需要控件失去焦點。

focus 和 blur 事件通常用于改變用戶界面，提供可見的提示或額外功能；change事件通常用于驗證用戶在字段中輸入的內(nèi)容。比如，有的文本框可能只限于接收數(shù)值，focus 事件用來改變控件的背景顏色以便更清楚地表明當(dāng)前字段獲得了焦點，blur 事件用于去掉這個背景顏色，change 事件用于在用戶輸入了非數(shù)值時把背景顏色改為紅色。如下所示：

let textbox=document.forms[0].elements[0];
textbox.addEventListener("focus", (event)=> {
    let target=event.target;
    if (target.style.backgroundColor !="red") {
        target.style.backgroundColor="yellow";
    }
});
textbox.addEventListener("blur", (event)=> {
    let target=event.target;
    target.style.backgroundColor=/[^\d]/.test(target.value) ? "red" : "";
});
textbox.addEventListener("change", (event)=> {
    let target=event.target;
    target.style.backgroundColor=/[^\d]/.test(target.value) ? "red" : "";
});

上述代碼中，onfocus 事件會把文本框的背景改為黃色，表明是當(dāng)前活動字段。onblur 和 onchange 事件會在發(fā)現(xiàn)非數(shù)值字符時把背景改為紅色。為測試非數(shù)值字符，這里使用了簡單的正則表達式來檢測文本框的value。這個功能必須同時在 onblur 和 onchange 事件上實現(xiàn)，確保無論文本框是否改變都能執(zhí)行驗證。

注意：blur 和 change 事件的關(guān)系并沒有明確定義。在某些瀏覽器中，blur事件會先于 change 事件觸發(fā)；在其它瀏覽器中，觸發(fā)順序會相反。因此不能依賴這兩個事件觸發(fā)的順序，必須區(qū)分時要多加注意。

總結(jié)

HTML 和 ECMAScript 都更新了好幾個版本，但是表單幾乎從來沒有改變。但是，通過 JavaScript 可以增加現(xiàn)有表單字段以提供新功能或增強易用性。也因此，表單字段也暴露了屬性、方法和事件供 JavaScript 調(diào)用使用。

在開篇

什么是表單呢？當(dāng)前端想要提交數(shù)據(jù)給后端，怎么搞？那么在前端開發(fā)中，表單是常用的手段，比如常見的場景有：登錄框、賬號注冊頁、主機信息錄入CMDB等等場景都是需要表單。那么在本篇中，筆者除了講一些基本的知識點，還會再結(jié)合后端的方式來演示如何接收表單提交的數(shù)據(jù)。希望這些小小的演示可以起到拋磚引玉的效果。

盤點HTML表單基礎(chǔ)

1. from元素

構(gòu)建表單，主要是通過from元素，我們先來一個最簡單的小栗子，看下面代碼：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹運維技術(shù)棧社區(qū)主頁</title>
    </head>
    <body>
        <h2>彩虹運維技術(shù)棧社區(qū)，公眾號ID：TtrOpsStack</h2>
        <h3>主機信息錄入CMDB</h3>
        <form>
            <label for="hostname">主機名：</label><br>
            <input type="text" id="hostname" name="hostname"><br>
            <label for="ipaddr">IP地址：</label><br>
            <input type="text" id="ipaddr" name="ipaddr"><br>
            <input type="submit" value="提交">
        </form>
    </body>
</html>

效果如下圖：

通上面的小栗子可以知道，form表單的主要通途是用于收集用戶的輸入。在from表單里面，還包含著各種不同類型的input元素，比如我們上面小栗子中用到的文本（text）、提交按鈕（submit）。

input元素是表單里最重要的元素，它有很多type屬性，下面我們來總結(jié)下：

類型描述text文本輸入radio單選按鈕checkbox提交按鈕submit提交按鈕button可單擊按鈕

在上面小栗子中，除了input元素之外，不知道大家注意label元素沒有。label元素的主要用途是為input元素定義標(biāo)簽，且用for屬性和input元素的id屬性進行綁定呢。

2. 單選按鈕

什么是單選按鈕？就是在多個選項中，你只能選其中1個，不能多選。下面我們看個小栗子，看下面代碼：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹運維技術(shù)棧社區(qū)主頁</title>
    </head>
    <body>
        <h2>彩虹運維技術(shù)棧社區(qū)，公眾號ID：TtrOpsStack</h2>
        <h3>問答題1（單選）：某站長，工作經(jīng)驗不足1年，僅從互聯(lián)網(wǎng)收集學(xué)習(xí)資料制定學(xué)習(xí)路線售賣盈利，從道德層面角度分析是否有問題？</h3>
        <form>
            <input type="radio" id="i1" name="problem" value="yes">
            <label for="i1">有</label>
            <input type="radio" id="i2" name="problem" value="no">
            <label for="i2">沒有</label>
            <input type="radio" id="i3" name="problem" value="not_clear">
            <label for="i3">不清楚</label>
        </form>
        <h3>問答題2（單選）：實際工作經(jīng)驗不足1年的人員折騰的學(xué)習(xí)資料您覺得是否對你有幫助？</h3>
        <form>
            <input type="radio" id="w1" name="problem" value="yes">
            <label for="w1">有</label>
            <input type="radio" id="w2" name="problem" value="no">
            <label for="w2">沒有</label>
            <input type="radio" id="w3" name="problem" value="not_clear">
            <label for="w3">不清楚</label>
        </form>
    </body>
</html>

效果如下圖：

上面的小栗子中，出了兩道問答題，均為單選題。那么，類似的需求都是可以使用輸入類型為radio來實現(xiàn)需要使用單選按鈕的場景。

3. 復(fù)選框

什么是復(fù)選框？復(fù)選框就是可以選擇多個選項，當(dāng)需要多選的時候，使用復(fù)選框輸入類型就對了。看下面代碼：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹運維技術(shù)棧社區(qū)主頁</title>
    </head>
    <body>
        <h2>彩虹運維技術(shù)棧社區(qū)，公眾號ID：TtrOpsStack</h2>
        <h3>問答題1（單選）：某站長，工作經(jīng)驗不足1年，僅從互聯(lián)網(wǎng)收集學(xué)習(xí)資料制定學(xué)習(xí)路線售賣盈利，從道德層面角度分析是否有問題？</h3>
        <form>
            <input type="checkbox" id="i1" name="problem" value="yes">
            <label for="i1">有</label>
            <input type="checkbox" id="i2" name="problem" value="no">
            <label for="i2">沒有</label>
            <input type="checkbox" id="i3" name="problem" value="not_clear">
            <label for="i3">不清楚</label><br>
            <input type="submit" value="提交">
        </form>
        <h3>問答題2（單選）：實際工作經(jīng)驗不足1年的人員折騰的學(xué)習(xí)資料您覺得是否對你有幫助？</h3>
        <form>
            <input type="checkbox" id="w1" name="problem" value="yes">
            <label for="w1">有</label>
            <input type="checkbox" id="w2" name="problem" value="no">
            <label for="w2">沒有</label>
            <input type="checkbox" id="w3" name="problem" value="not_clear">
            <label for="w3">不清楚</label><br>
            <input type="submit" value="提交">
        </form>
    </body>
</html>

效果如下圖：

上面的小栗子中，實現(xiàn)復(fù)選框的輸入類型是checkbox，這個是重點哦！

4. 提交按鈕

當(dāng)有數(shù)據(jù)要提交給后端的時候怎么搞？如果后端是API服務(wù)，可以給它提交json。如果是前端頁面，就需要通過構(gòu)建表單來獲取用戶的輸入。基于表單提交數(shù)據(jù)給后端，怎么提交？需要一個可以點擊的提交按鈕，那這個按鈕怎么來？先看下面代碼：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹運維技術(shù)棧社區(qū)主頁</title>
    </head>
    <body>
        <h2>彩虹運維技術(shù)棧社區(qū)，公眾號ID：TtrOpsStack</h2>
        <h3>主機信息</h3>
        <form>
            <label for="ipaddr">IP地址</label>
            <input type="text" id="ipaddr" name="ip"><br>
            <input type="submit" value="提交">
        </form>
    </body>
</html>

效果如下圖：

輸入類型為submit，說明它就是提交按鈕，注意上面代碼type="submit"了嗎？

HTML表單重要屬性

1. Action屬性

在之前的例子中，前端表單需要將數(shù)據(jù)提交給后端，除了需要一個提交按鈕外，還需要action屬性。當(dāng)點擊提交按鈕后，表單的數(shù)據(jù)該發(fā)到后端的哪個url進行處理，就是定義在action屬性中。接下來，我們結(jié)合前端和后端直接來個小實戰(zhàn)，后端代碼用Python的Flask框架。

前端代碼：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹運維技術(shù)棧社區(qū)主頁</title>
    </head>
    <body>
        <h2>彩虹運維技術(shù)棧社區(qū)，公眾號ID：TtrOpsStack</h2>
        <h3>主機信息</h3>
        <form action="http://192.168.11.10:8088/ttropsstack" target="_blank">
            <label for="ipaddr">IP地址</label>
            <input type="text" id="ipaddr" name="ip"><br>
            <input type="submit" value="提交">
        </form>
    </body>
</html>

后端代碼：

from flask import Flask, request

webapp=Flask(__name__)

@webapp.route('/ttropsstack', methods=["GET", "POST"])
def ttropsstack():
    args=request.args
    print 'ip addr is: %s' % args.get('ip')
    return 'ok'

if __name__=='__main__':

    webapp.run(host="0.0.0.0", port=8088, debug=True)

前端和后端的代碼寫完后，我們接下來看看效果

輸入IP地址后，點擊提交

這個ok是后端返回的

后端接收到數(shù)據(jù)后，啥也沒做，只是做了簡單打印

這個小栗子很簡單，通過這個小栗子，是不是對action屬性的用法有了進一步的理解呢？

2. Method屬性

method屬性的用途是指定提交數(shù)據(jù)的http方法，通常有2個，get和post。接下來我們在上個小栗子的基礎(chǔ)上做個小改造，看下面代碼

前端代碼：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹運維技術(shù)棧社區(qū)主頁</title>
    </head>
    <body>
        <h2>彩虹運維技術(shù)棧社區(qū)，公眾號ID：TtrOpsStack</h2>
        <h3>主機信息</h3>
        <form action="http://192.168.11.10:8088/ttropsstack" target="_blank" method="get">
            <label for="ipaddr">IP地址</label>
            <input type="text" id="ipaddr" name="ip"><br>
            <input type="submit" value="提交">
        </form>
    </body>
</html>

后端代碼：

from flask import Flask, request

webapp=Flask(__name__)

@webapp.route('/ttropsstack', methods=["POST"])
def ttropsstack():
    args=request.args
    print 'ip addr is: %s' % args.get('ip')
    return 'ok'

if __name__=='__main__':

    webapp.run(host="0.0.0.0", port=8088, debug=True)

當(dāng)前端輸入數(shù)據(jù)后，提交表單時，直接告訴你這是不允許的方法

在這個例子中，是因為前端的表單了指定了method為get請求，而后端接收數(shù)據(jù)的method規(guī)定了需要post請求，故所以出現(xiàn)這個問題。

下面我們改造一下后端代碼：

# coding: utf8
from flask import Flask, request

webapp=Flask(__name__)

@webapp.route('/ttropsstack', methods=['GET','POST'])
def ttropsstack():
    if request.method=='POST':
        print request.get_data(as_text=True)
        return 'ok'
    else:
        return '提交數(shù)據(jù)需要post請求'

if __name__=='__main__':

    webapp.run(host="0.0.0.0", port=8088, debug=True)

前端表單中的method還是保持get請求，再次提交，后端的返回如下：

看到了嗎？后端判斷前端過來的請求是get還是post，很顯然，前端過來的請求是get，并且返回了非常友好的提示。

接下來我們繼續(xù)改造一下前端的代碼，將請求修改為post，代碼如下：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹運維技術(shù)棧社區(qū)主頁</title>
    </head>
    <body>
        <h2>彩虹運維技術(shù)棧社區(qū)，公眾號ID：TtrOpsStack</h2>
        <h3>主機信息</h3>
        <form action="http://192.168.11.10:8088/ttropsstack" target="_blank" method="post">
            <label for="ipaddr">IP地址</label>
            <input type="text" id="ipaddr" name="ip"><br>
            <input type="submit" value="提交">
        </form>
    </body>
</html>

后端代碼也稍微改造一下，改變接收前端數(shù)據(jù)的方法

# coding: utf8
from flask import Flask, request

webapp=Flask(__name__)

@webapp.route('/ttropsstack', methods=['GET','POST'])
def ttropsstack():
    if request.method=='POST':
        a=request.form
        print a.get('ip')
        print type(a)
        return 'ok'
    else:
        return '提交數(shù)據(jù)需要post請求'

if __name__=='__main__':

    webapp.run(host="0.0.0.0", port=8088, debug=True)

輸入IP地址，并點擊提交

提交后，后端給前端返回了ok

接下來看下后端，后端啥也沒做，就獲取到表單的數(shù)據(jù)，然后打印了數(shù)據(jù)，并且打印了下數(shù)據(jù)類型

好了，關(guān)于前端的action屬性和Method屬性就講到這里了。為了講解action和method，還結(jié)合了后端的一丟丟知識，前端和后端的知識點以后都會慢慢講到哈！

HTML表單常用元素

1. 下拉列表

先來個前端代碼：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹運維技術(shù)棧社區(qū)主頁</title>
    </head>
    <body>
        <h2>彩虹運維技術(shù)棧社區(qū)，公眾號ID：TtrOpsStack</h2>
        <form action="http://192.168.11.10:8088/ttropsstack" target="_blank" method="post">
            <label for="opslist">運維開發(fā)應(yīng)掌握的技能：</label>
            <select id="opslist" name="opslist">
                <option value="python">Python語言</option>
                <option value="go">Go語言</option>
                <option value="shell">Shell語言</option>
                <option value="database">數(shù)據(jù)庫</option>
                <option value="frontend">前端</option>
                <option value="linux">Linux</option>
                <option value="network">網(wǎng)絡(luò)</option>
                <option value="storage">存儲</option>
            </select>
            <input type="submit">
        </form>
    </body>
</html>

后端代碼：

# coding: utf8
from flask import Flask, request

webapp=Flask(__name__)

@webapp.route('/ttropsstack', methods=['GET','POST'])
def ttropsstack():
    if request.method=='POST':
        a=request.form
        print a.get('opslist')
        return 'ok'
    else:
        return '提交數(shù)據(jù)需要post請求'

if __name__=='__main__':

    webapp.run(host="0.0.0.0", port=8088, debug=True)

在下拉框中選擇“Go語言”，并提交

后端啥也沒干，就只做了打印

2. 允許多選

前端代碼：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹運維技術(shù)棧社區(qū)主頁</title>
    </head>
    <body>
        <h2>彩虹運維技術(shù)棧社區(qū)，公眾號ID：TtrOpsStack</h2>
        <form action="http://192.168.11.10:8088/ttropsstack" target="_blank" method="post">
            <label for="opslist">運維開發(fā)應(yīng)掌握的技能：</label>
            <select id="opslist" name="opslist" size="6" multiple>
                <option value="python">Python語言</option>
                <option value="go">Go語言</option>
                <option value="shell">Shell語言</option>
                <option value="database">數(shù)據(jù)庫</option>
                <option value="frontend">前端</option>
                <option value="linux">Linux</option>
                <option value="network">網(wǎng)絡(luò)</option>
                <option value="storage">存儲</option>
            </select>
            <input type="submit">
        </form>
    </body>
</html>

上述前端代碼中，是使用multiple屬性來實現(xiàn)選擇多個值。

后端代碼的打印方式稍微做了些許調(diào)整：

# coding: utf8
from flask import Flask, request

webapp=Flask(__name__)

@webapp.route('/ttropsstack', methods=['GET','POST'])
def ttropsstack():
    if request.method=='POST':
        data=request.get_data()
        print data
        return 'ok'
    else:
        return '提交數(shù)據(jù)需要post請求'

if __name__=='__main__':

    webapp.run(host="0.0.0.0", port=8088, debug=True)

按住ctrl或者shift鍵可進行多選

后端打印的效果圖下圖：

寫在最后

關(guān)于表單基礎(chǔ)知識點的講解就這么愉快的結(jié)束了，關(guān)于更多表單的元素、輸入屬性、輸入類型可自行查閱和實戰(zhàn)，筆者因時間有限就不一一演示。感謝您的閱讀，望多多關(guān)注我們、點贊、轉(zhuǎn)發(fā)！

本文轉(zhuǎn)載于（喜歡的盆友關(guān)注我們）：https://mp.weixin.qq.com/s/L-Msv39JrF7AzRx4K1OLjA

在線咨詢

上一篇：HTML+CSS：三種css的引入方式，內(nèi)鏈?zhǔn)健⑶度?/a>
下一篇：HTML高亮關(guān)鍵字的完美解決方案

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

育知HTML5培訓(xùn)技術(shù)分享 HTML5新增表單元素及

言

提交表單

重置表單

表單字段

公共屬性

公共方法

公共事件

總結(jié)

在開篇

盤點HTML表單基礎(chǔ)

1. from元素

2. 單選按鈕

3. 復(fù)選框

4. 提交按鈕

HTML表單重要屬性

1. Action屬性

2. Method屬性

HTML表單常用元素

1. 下拉列表

2. 允許多選

寫在最后

您的項目需求