整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
現(xiàn)效果：
文同步本人掘金平臺原創(chuàng)翻譯的文章：https://juejin.cn/post/6844903834246971400
你是否遇到過"callbacks"一詞，但是不知道這意味著什么？別著急。你不是一個(gè)人。許多JavaScript的新手發(fā)現(xiàn)回調(diào)也很難理解。
盡管callbacks可能令人疑惑，但是你仍然需要徹底了解它們，因?yàn)樗鼈兪荍avaScript中的一個(gè)重要的概念。如果你不知道callbacks，你不可能走得很遠(yuǎn)。
這就是今天的文章（要講的）！你將了解callbacks是什么，為什么它們很重要，以及如何使用它們。
備注：你會(huì)在這篇文章中看到ES6箭頭函數(shù)。如果你不是很熟悉它們，我建議你在往下讀之前復(fù)習(xí)一下ES6這篇文章（只了解箭頭函數(shù)部分就可以了）。
callback是作為稍后要執(zhí)行的參數(shù)傳遞給另一個(gè)函數(shù)的函數(shù)。（開發(fā)人員說你在執(zhí)行函數(shù)時(shí)“調(diào)用”一個(gè)函數(shù)，這就是被命名為回調(diào)函數(shù)的原因）。
它們在JavaScript中很常見，你可能自己潛意識的使用了它們而不知道它們被稱為回調(diào)函數(shù)。
接受函數(shù)回調(diào)的一個(gè)示例是addEventLisnter:
const button=document.querySelector('button')
button.addEventListener('click', function(e) {
// Adds clicked class to button
this.classList.add('clicked')
})
復(fù)制代碼看不出是回調(diào)函數(shù)嗎？那么，這種寫法怎樣？
const button=document.querySelector('button')
// Function that adds 'clicked' class to the element
function clicked (e) {
this.classList.add('clicked')
}
// Adds click function as a callback to the event listener
button.addEventListener('click', clicked)
復(fù)制代碼在這里，我們告訴JavaScript監(jiān)聽按鈕上的click事件。如果檢測到點(diǎn)擊，則JavaScript應(yīng)觸發(fā)clicked函數(shù)。因此，在這種情況下，clicked是回調(diào)函數(shù)，而addEventListener是一個(gè)接受回調(diào)的函數(shù)。
現(xiàn)在，你明白什么是回調(diào)函數(shù)了嘛？:)
我們來看另外一個(gè)例子。這一次，假設(shè)你希望通過過濾一組數(shù)據(jù)來獲取小于5的列表。在這里，你將回調(diào)函數(shù)傳遞給filter函數(shù)：
const numbers=[3, 4, 10, 20]
const lesserThanFive=numbers.filter(num=> num < 5)
復(fù)制代碼現(xiàn)在，如果你想通過命名函數(shù)執(zhí)行上面的代碼，則過濾函數(shù)將如下所示：
const numbers=[3, 4, 10, 20]
const getLessThanFive=num=> num < 5
// Passing getLessThanFive function into filter
const lesserThanFive=numbers.filter(getLessThanFive)
復(fù)制代碼在這種情況下，getLessThanFive是回調(diào)函數(shù)。Array.filter是一個(gè)接受回調(diào)的函數(shù)。
現(xiàn)在明白為什么了吧？一旦你知道回調(diào)函數(shù)是什么，它們就無處不在！
下面的示例向你展示如何編寫回調(diào)函數(shù)和接受回調(diào)的函數(shù)：
// Create a function that accepts another function as an argument
const callbackAcceptingFunction=(fn)=> {
// Calls the function with any required arguments
return fn(1, 2, 3)
}
// Callback gets arguments from the above call
const callback=(arg1, arg2, arg3)=> {
return arg1 + arg2 + arg3
}
// Passing a callback into a callback accepting function
const result=callbackAcceptingFunction(callback)
console.log(result) // 6
復(fù)制代碼請注意，當(dāng)你將回調(diào)函數(shù)傳遞給另一個(gè)函數(shù)時(shí)，你只傳遞該函數(shù)的引用（并沒有執(zhí)行它，因此沒有括號()）
const result=callbackAcceptingFunction(callback)
復(fù)制代碼你只能在callbackAcceptingFunction中喚醒（調(diào)用）回調(diào)函數(shù)。執(zhí)行此操作時(shí)，你可以傳遞回調(diào)函數(shù)可能需要的任意數(shù)量的參數(shù)：
const callbackAcceptingFunction=(fn)=> {
// Calls the callback with three args
fn(1, 2, 3)
}
復(fù)制代碼這些由callbackAcceptingFunction傳遞給回調(diào)函數(shù)的參數(shù)，然后再通過回調(diào)函數(shù)（執(zhí)行）：
// Callback gets arguments from callbackAcceptingFunction
const callback=(arg1, arg2, arg3)=> {
return arg1 + arg2 + arg3
}
復(fù)制代碼這是回調(diào)的解剖。現(xiàn)在，你應(yīng)該知道addEventListener包含一個(gè)event參數(shù):)
// Now you know where this event object comes from! :)
button.addEventListener('click', (event)=> {
event.preventDefault()
})
復(fù)制代碼唷！這是callbacks的基本思路！只需要記住其關(guān)鍵：將一個(gè)函數(shù)傳遞給另一個(gè)函數(shù)，然后，你會(huì)想起我上面提到的機(jī)制。
旁注：這種傳遞函數(shù)的能力是一件很重要的事情。它是如此重要，以至于說JavaScript中的函數(shù)是高階函數(shù)。高階函數(shù)在編程范例中稱為函數(shù)編程，是一件很重大的事情。
但這是另一天的話題。現(xiàn)在，我確信你已經(jīng)開始明白callbacks是什么，以及它們是如何被使用的。但是為什么？你為什么需要callbacks呢？
回調(diào)函數(shù)以兩種不同的方式使用 -- 在同步函數(shù)和異步函數(shù)中。
如果你的代碼從上到下，從左到右的方式順序執(zhí)行，等待上一個(gè)代碼執(zhí)行之后，再執(zhí)行下一行代碼，則你的代碼是同步的。
讓我們看一個(gè)示例，以便更容易理解：
const addOne=(n)=> n + 1
addOne(1) // 2
addOne(2) // 3
addOne(3) // 4
addOne(4) // 5
復(fù)制代碼在上面的例子中，addOne(1)首先執(zhí)行。一旦它執(zhí)行完，addOne(2)開始執(zhí)行。一旦addOne(2)執(zhí)行完，addOne(3)執(zhí)行。這個(gè)過程一直持續(xù)到最后一行代碼執(zhí)行完畢。
當(dāng)你希望將部分代碼與其它代碼輕松交換時(shí)，回調(diào)將用于同步函數(shù)。
所以，回到上面的Array.filter示例中，盡管我們將數(shù)組過濾為包含小于5的數(shù)組，但你可以輕松地重用Array.filter來獲取大于10的數(shù)字?jǐn)?shù)組：
const numbers=[3, 4, 10, 20]
const getLessThanFive=num=> num < 5
const getMoreThanTen=num=> num > 10
// Passing getLessThanFive function into filter
const lesserThanFive=numbers.filter(getLessThanFive)
// Passing getMoreThanTen function into filter
const moreThanTen=numbers.filter(getMoreThanTen)
復(fù)制代碼這就是為什么你在同步函數(shù)中使用回調(diào)函數(shù)的原因。現(xiàn)在，讓我們繼續(xù)看看為什么我們在異步函數(shù)中使用回調(diào)。
這里的異步意味著，如果JavaScript需要等待某些事情完成，它將在等待時(shí)執(zhí)行給予它的其余任務(wù)。
異步函數(shù)的一個(gè)示例是setTimeout。它接受一個(gè)回調(diào)函數(shù)以便稍后執(zhí)行：
// Calls the callback after 1 second
setTimeout(callback, 1000)
復(fù)制代碼如果你給JavaScript另外一個(gè)任務(wù)需要完成，讓我們看看setTimeout是如何工作的：
const tenSecondsLater=_=> console.log('10 seconds passed!')
setTimeout(tenSecondsLater, 10000)
console.log('Start!')
復(fù)制代碼在上面的代碼中，JavaScript會(huì)執(zhí)行setTimeout。然后，它會(huì)等待10秒，之后打印出"10 seconds passed!"的消息。
同時(shí)，在等待setTimeout10秒內(nèi)完成時(shí)，JavaScript執(zhí)行console.log("Start!")。
所以，如果你（在控制臺上）打印上面的代碼，這就是你會(huì)看到的：
// What happens:
// > Start! (almost immediately)
// > 10 seconds passed! (after ten seconds)
復(fù)制代碼啊～異步操作聽起來很復(fù)雜，不是嗎？但為什么我們在JavaScript中頻繁使用它呢？
要了解為什么異步操作很重要呢？想象一下JavaScript是你家中的機(jī)器人助手。這個(gè)助手非常愚蠢。它一次只能做一件事。（此行為被稱為單線程）。
假設(shè)你告訴你的機(jī)器人助手為你訂購一些披薩。但機(jī)器人是如此的愚蠢，在打電話給披薩店之后，機(jī)器人坐在你家門前，等待披薩送達(dá)。在此期間它無法做任何其它事情。
你不能叫它去熨衣服，拖地或在等待（披薩到來）的時(shí)候做任何事情。（可能）你需要等20分鐘，直到披薩到來，它才愿意做其他事情...
此行為稱為阻塞。當(dāng)你等待某些內(nèi)容完成時(shí)，其他操作將被阻止。
const orderPizza=flavour=> {
callPizzaShop(`I want a ${flavour} pizza`)
waits20minsForPizzaToCome() // Nothing else can happen here
bringPizzaToYou()
}
orderPizza('Hawaiian')
// These two only starts after orderPizza is completed
mopFloor()
ironClothes()
復(fù)制代碼而阻止操作是一個(gè)無賴。
為什么？
讓我們把愚蠢的機(jī)器人助手放到瀏覽器的上下文中。想象一下，當(dāng)單擊按鈕時(shí)，你告訴它更改按鈕的顏色。
這個(gè)愚蠢的機(jī)器人會(huì)做什么？
它專注于按鈕，忽略所有命令，直到按鈕被點(diǎn)擊。同時(shí)，用戶無法選擇任何其他內(nèi)容。看看它都在干嘛了？這就是異步編程在JavaScript中如此重要的原因。
但是，要真正了解異步操作期間發(fā)生的事情，我們需要引入另外一個(gè)東西 -- 事件循環(huán)。
為了設(shè)想事件循環(huán)，想象一下JavaScript是一個(gè)攜帶todo-list的管家。此列表包含你告訴它要做的所有事情。然后，JavaScript將按照你提供的順序逐個(gè)遍歷列表。
假設(shè)你給JavaScript下面五個(gè)命令：
const addOne=(n)=> n + 1
addOne(1) // 2
addOne(2) // 3
addOne(3) // 4
addOne(4) // 5
addOne(5) // 6
復(fù)制代碼這是JavaScript的待辦事項(xiàng)列表中出現(xiàn)的內(nèi)容。
相關(guān)命令在JavaScript待辦事項(xiàng)列表中同步出現(xiàn)。
除了todo-list之外，JavaScript還保留一個(gè)waiting-list來跟蹤它需要等待的事情。如果你告訴JavaScript訂購披薩，它會(huì)打電話給披薩店并在等候列表名單中添加“等待披薩到達(dá)”（的指令）。與此同時(shí)，它還會(huì)做了其他已經(jīng)在todo-list上的事情。
所以，想象下你有下面代碼：
const orderPizza (flavor, callback) {
callPizzaShop(`I want a ${flavor} pizza`)
// Note: these three lines is pseudo code, not actual JavaScript
whenPizzaComesBack {
callback()
}
}
const layTheTable=_=> console.log('laying the table')
orderPizza('Hawaiian', layTheTable)
mopFloor()
ironClothes()
復(fù)制代碼JavaScript的初始化todo-list如下：
訂披薩，拖地和熨衣服！
然后，在執(zhí)行orderPizza時(shí)，JavaScript知道它需要等待披薩送達(dá)。因此，它會(huì)在執(zhí)行其余任務(wù)時(shí)，將“等待披薩送達(dá)”（的指令）添加到waiting list上。
JavaScript等待披薩到達(dá)
當(dāng)披薩到達(dá)時(shí)，門鈴會(huì)通知JavaScript，當(dāng)它完成其余雜務(wù)時(shí)。它會(huì)做個(gè)**心理記錄（mental note）**去執(zhí)行l(wèi)ayTheTable。
JavaScript知道它需要通過在其 mental note 中添加命令來執(zhí)行l(wèi)ayTheTable
然后，一旦完成其他雜務(wù)，JavaScript就會(huì)執(zhí)行回調(diào)函數(shù)layTheTable。
其他所有內(nèi)容完成后，JavaScript就會(huì)去布置桌面（layTheTable）
我的朋友，這個(gè)就被稱為事件循環(huán)。你可以使用事件循環(huán)中的實(shí)際關(guān)鍵字替換我們的管家，類比來理解所有的內(nèi)容：
JavaScript的事件循環(huán)
如果你有20分鐘的空余時(shí)間，我強(qiáng)烈建議你觀看Philip Roberts 在JSconf中談?wù)摰氖录h(huán)。它將幫助你理解事件循環(huán)的細(xì)節(jié)。
哦～我們在事件循環(huán)繞了一大圈。我們回正題吧。
之前，我們提到如果JavaScript專注于按鈕并忽略所有其他命令，那將是不好的。是吧？
通過異步回調(diào)，我們可以提前提供JavaScript指令而無需停止整個(gè)操作。
現(xiàn)在，當(dāng)你要求JavaScript查看點(diǎn)擊按鈕時(shí)，它會(huì)將“監(jiān)聽按鈕”（指令）放入waiting list中并繼續(xù)進(jìn)行雜務(wù)。當(dāng)按鈕最終獲得點(diǎn)擊時(shí)，JavaScript會(huì)激活回調(diào)，然后繼續(xù)執(zhí)行。
以下是回調(diào)中的一些常見用法，用于告訴JavaScript要做什么...
// Callbacks in event listeners
document.addEventListener(button, highlightTheButton)
document.removeEventListener(button, highlightTheButton)
// Callbacks in jQuery's ajax method
$.ajax('some-url', {
success (data) { /* success callback */ },
error (err) { /* error callback */}
});
// Callbacks in Node
fs.readFile('pathToDirectory', (err, data)=> {
if (err) throw err
console.log(data)
})
// Callbacks in ExpressJS
app.get('/', (req, res)=> res.sendFile(index.html))
復(fù)制代碼這就是它（異步）的回調(diào)！
希望你清楚callbacks是什么以及現(xiàn)在如何使用它們。在開始的時(shí)候，你不會(huì)創(chuàng)建很多回調(diào)，所以要專注于學(xué)習(xí)如何使用可用的回調(diào)函數(shù)。
現(xiàn)在，在我們結(jié)束（本文）之前，讓我們看一下開發(fā)人員（使用）回調(diào)的第一個(gè)問題 -- 回調(diào)地獄。
回調(diào)地獄是一種多次回調(diào)相互嵌套的現(xiàn)象。當(dāng)你執(zhí)行依賴于先前異步活動(dòng)的異步活動(dòng)時(shí)，可能會(huì)發(fā)生這種情況。這些嵌套的回調(diào)使代碼更難閱讀。
根據(jù)我的經(jīng)驗(yàn)，你只會(huì)在Node中看到回調(diào)地獄。在使用前端JavaScript時(shí)，你幾乎從不會(huì)遇到回調(diào)地獄。
下面是一個(gè)回調(diào)地獄的例子：
// Look at three layers of callback in this code!
app.get('/', function (req, res) {
Users.findOne({ _id:req.body.id }, function (err, user) {
if (user) {
user.update({/* params to update */}, function (err, document) {
res.json({user: document})
})
} else {
user.create(req.body, function(err, document) {
res.json({user: document})
})
}
})
})
復(fù)制代碼而現(xiàn)在，你有個(gè)挑戰(zhàn) -- 嘗試一目了然地破譯上面的代碼。很難，不是嗎？難怪開發(fā)者在看到嵌套回調(diào)時(shí)會(huì)不寒而栗。
克服回調(diào)地獄的一個(gè)解決方案是將回調(diào)函數(shù)分解為更小的部分以減少嵌套代碼的數(shù)量：
const updateUser=(req, res)=> {
user.update({/* params to update */}, function () {
if (err) throw err;
return res.json(user)
})
}
const createUser=(req, res, err, user)=> {
user.create(req.body, function(err, user) {
res.json(user)
})
}
app.get('/', function (req, res) {
Users.findOne({ _id:req.body.id }, (err, user)=> {
if (err) throw err
if (user) {
updateUser(req, res)
} else {
createUser(req, res)
}
})
})
復(fù)制代碼更容易閱讀了，是吧？
還有其他解決方案來對抗新版JavaScript中的回調(diào)地獄 -- 比如promises和async / await。但是，解釋它們是我們另一天的話題。
今天，你了解到了回調(diào)是什么，為什么它們在JavaScript中如此重要以及如何使用它們。你還學(xué)會(huì)了回調(diào)地獄和對抗它的方法。現(xiàn)在，希望callbakcs不再嚇到你了。
你對回調(diào)還有任何疑問嗎？如果你有，請隨時(shí)在下面發(fā)表評論，我會(huì)盡快回復(fù)你的。【PS：本文譯文，若需作者解答疑問，請移步原作者文章下評論】
感謝閱讀。這篇文章是否幫助到你？如果有，我希望你考慮分享它。你可能會(huì)幫助到其他人。非常感謝！
TML 表單用于搜集不同類型的用戶輸入。HTML5 Input，擁有多個(gè)新的表單輸入類型，提供了更好的輸入控制和驗(yàn)證，今天將為大家?guī)鞨TML中的表單及其input輸入類型。
一、HTML表單
1、HTML表單用于收集不同類型的用戶輸入，是一個(gè)包含表單元素的區(qū)域并且允許用戶在表單中輸入內(nèi)容，比如文本域（textarea）、下拉列表、單選框（radio=buttons）、復(fù)選框（checkboxes）等。
2、表單使用標(biāo)簽<form>來設(shè)置，示例：
運(yùn)行結(jié)果：
二、HTML表單屬性：
1、HTML表單包含表單元素，表單元素是指不同類型的input元素、復(fù)選框、單選按鈕、提交按鈕等。
2、action屬性
在上面的示例中出現(xiàn)了action屬性，action屬性定義在提交表單執(zhí)行的動(dòng)作，向服務(wù)器提交表單的通常做法是使用提交按鈕。
通常，表單會(huì)被提交到web服務(wù)器上的網(wǎng)頁，上面的例子中，則指定了某個(gè)服務(wù)器腳本來處理被提交表單。
如果省略 action 屬性，則 action 會(huì)被設(shè)置為當(dāng)前頁面。
3、method 屬性
method屬性規(guī)定在提交表單時(shí)所用的 HTTP 方法（GET 或 POST）：
如果表單提交是被動(dòng)的（比如搜索引擎查詢），并且沒有敏感信息，使用get。
如果表單正在更新數(shù)據(jù)，或者包含敏感信息（例如密碼），使用post。
4、如果要正確地被提交，每個(gè)輸入字段必須設(shè)置一個(gè) name 屬性，示例：
<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
First name:<br>
<input type="text" name="Firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
<p>如果您點(diǎn)擊提交，表單數(shù)據(jù)會(huì)被發(fā)送到名為 demo_form.asp 的頁面。</p>
<p>first name 不會(huì)被提交，因?yàn)榇?input 元素沒有 name 屬性。</p>
</body>
</html>
運(yùn)行結(jié)果：
5、target 屬性
target 屬性規(guī)定提交表單后在何處顯示響應(yīng)，target 屬性可設(shè)置以下值之一：
默認(rèn)值為 _self，這意味著響應(yīng)將在當(dāng)前窗口中打開。
6、Autocomplete 屬性
autocomplete 屬性規(guī)定表單是否應(yīng)打開自動(dòng)完成功能。
啟用自動(dòng)完成功能后，瀏覽器會(huì)根據(jù)用戶之前輸入的值自動(dòng)填寫值，示例：
運(yùn)行結(jié)果：
7、所有<form>屬性的列表：
三、HTML表單元素：
1、<input>元素是最重要的表單元素，有很多的形態(tài)，根據(jù)不同的type屬性，例如：
① 文本輸入（text），示例：
<!DOCTYPE html>
<html>
<body>
<form>
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
<p>請注意表單本身是不可見的。</p>
<p>同時(shí)請注意文本字段的默認(rèn)寬度是 20 個(gè)字符。</p>
</body>
</html>
運(yùn)行結(jié)果：
② 單選按鈕輸入（radio），示例：
<!DOCTYPE html>
<html>
<body>
<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form>
</body>
</html>
運(yùn)行結(jié)果：
③ 提交按鈕（submit），示例：
<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
<p>如果您點(diǎn)擊提交，表單數(shù)據(jù)會(huì)被發(fā)送到名為 demo_form.asp 的頁面。</p>
</body>
</html>
運(yùn)行結(jié)果：
2、<select>元素
<select>元素定義下拉列表，示例：
<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br><br>
<input type="submit">
</form>
</body>
</html>
運(yùn)行結(jié)果：
3、<fieldset>元素
<fieldset>元素組合表單中的相關(guān)數(shù)據(jù)
<legend>元素為<fieldset>元素定義標(biāo)題，示例：
<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
</body>
</html>
運(yùn)行結(jié)果：
4、<textarea> 元素
<textarea> 元素定義多行輸入字段（文本域）、示例：
<!DOCTYPE html>
<html>
<body>
<form>
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
</form>
</body>
</html>
運(yùn)行結(jié)果：
5、HTML5<datalist>元素
<datalist> 元素為 <input> 元素規(guī)定預(yù)定義選項(xiàng)列表。
用戶會(huì)在他們輸入數(shù)據(jù)時(shí)看到預(yù)定義選項(xiàng)的下拉列表。
<input> 元素的 list 屬性必須引用 <datalist> 元素的 id 屬性，示例：
<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>
</body>
</html>
運(yùn)行結(jié)果：
四、HTML表單輸入類型
輸入類型 | 定義 |
text | 定義供文本輸入的單行輸入字段 |
password | 定義密碼字段 |
submit | 定義提交表單數(shù)據(jù)至表單處理程序的按鈕 |
radio | 定義單選按鈕 |
checkbox | 定義復(fù)選框 |
<input>中的type：
類型 | 定義 |
radio | 定義單選按鈕 |
checkbox | 定義復(fù)選框 |
button | 定義按鈕 |
number | 用于應(yīng)該包含數(shù)字值的輸入字段 |
date | 用于應(yīng)該包含日期的輸入字段 |
color | 用于應(yīng)該包含顏色的輸入字段 |
range | 用于應(yīng)該包含一定范圍內(nèi)的值的輸入字段 |
month | 允許用戶選擇月份和年份 |
week | 允許用戶選擇周和年 |
time | 允許用戶選擇時(shí)間（無時(shí)區(qū)） |
datetime | 允許用戶選擇日期和時(shí)間（有時(shí)區(qū)） |
datetime-local | 允許用戶選擇日期和時(shí)間（無時(shí)區(qū)） |
用于應(yīng)該包含電子郵件地址的輸入字段 | |
search | 用于搜索字段（搜索字段的表現(xiàn)類似常規(guī)文本字段） |
tel | 用于應(yīng)該包含電話號碼的輸入字段 |
url | 用于應(yīng)該包含 URL 地址的輸入字段 |
輸入限制：
這就是有關(guān)HTML表單的大概內(nèi)容了，希望這篇HTML的表單及其input輸入類型的知識點(diǎn)能對大家有所幫助。
*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
