整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
什么是表單呢？當(dāng)前端想要提交數(shù)據(jù)給后端，怎么搞？那么在前端開(kāi)發(fā)中，表單是常用的手段，比如常見(jiàn)的場(chǎng)景有：登錄框、賬號(hào)注冊(cè)頁(yè)、主機(jī)信息錄入CMDB等等場(chǎng)景都是需要表單。那么在本篇中，筆者除了講一些基本的知識(shí)點(diǎn)，還會(huì)再結(jié)合后端的方式來(lái)演示如何接收表單提交的數(shù)據(jù)。希望這些小小的演示可以起到拋磚引玉的效果。
構(gòu)建表單，主要是通過(guò)from元素，我們先來(lái)一個(gè)最簡(jiǎn)單的小栗子，看下面代碼：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>彩虹運(yùn)維技術(shù)棧社區(qū)主頁(yè)</title>
</head>
<body>
<h2>彩虹運(yùn)維技術(shù)棧社區(qū)，公眾號(hào)ID：TtrOpsStack</h2>
<h3>主機(jī)信息錄入CMDB</h3>
<form>
<label for="hostname">主機(jī)名：</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屬性，下面我們來(lái)總結(jié)下：
類型描述text文本輸入radio單選按鈕checkbox提交按鈕submit提交按鈕button可單擊按鈕
在上面小栗子中，除了input元素之外，不知道大家注意label元素沒(méi)有。label元素的主要用途是為input元素定義標(biāo)簽，且用for屬性和input元素的id屬性進(jìn)行綁定呢。
什么是單選按鈕？就是在多個(gè)選項(xiàng)中，你只能選其中1個(gè)，不能多選。下面我們看個(gè)小栗子，看下面代碼：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>彩虹運(yùn)維技術(shù)棧社區(qū)主頁(yè)</title>
</head>
<body>
<h2>彩虹運(yùn)維技術(shù)棧社區(qū)，公眾號(hào)ID：TtrOpsStack</h2>
<h3>問(wèn)答題1（單選）：某站長(zhǎng)，工作經(jīng)驗(yàn)不足1年，僅從互聯(lián)網(wǎng)收集學(xué)習(xí)資料制定學(xué)習(xí)路線售賣(mài)盈利，從道德層面角度分析是否有問(wèn)題？</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">沒(méi)有</label>
<input type="radio" id="i3" name="problem" value="not_clear">
<label for="i3">不清楚</label>
</form>
<h3>問(wèn)答題2（單選）：實(shí)際工作經(jīng)驗(yàn)不足1年的人員折騰的學(xué)習(xí)資料您覺(jué)得是否對(duì)你有幫助？</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">沒(méi)有</label>
<input type="radio" id="w3" name="problem" value="not_clear">
<label for="w3">不清楚</label>
</form>
</body>
</html>
效果如下圖：
上面的小栗子中，出了兩道問(wèn)答題，均為單選題。那么，類似的需求都是可以使用輸入類型為radio來(lái)實(shí)現(xiàn)需要使用單選按鈕的場(chǎng)景。
什么是復(fù)選框？復(fù)選框就是可以選擇多個(gè)選項(xiàng)，當(dāng)需要多選的時(shí)候，使用復(fù)選框輸入類型就對(duì)了。看下面代碼：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>彩虹運(yùn)維技術(shù)棧社區(qū)主頁(yè)</title>
</head>
<body>
<h2>彩虹運(yùn)維技術(shù)棧社區(qū)，公眾號(hào)ID：TtrOpsStack</h2>
<h3>問(wèn)答題1（單選）：某站長(zhǎng)，工作經(jīng)驗(yàn)不足1年，僅從互聯(lián)網(wǎng)收集學(xué)習(xí)資料制定學(xué)習(xí)路線售賣(mài)盈利，從道德層面角度分析是否有問(wèn)題？</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">沒(méi)有</label>
<input type="checkbox" id="i3" name="problem" value="not_clear">
<label for="i3">不清楚</label><br>
<input type="submit" value="提交">
</form>
<h3>問(wèn)答題2（單選）：實(shí)際工作經(jīng)驗(yàn)不足1年的人員折騰的學(xué)習(xí)資料您覺(jué)得是否對(duì)你有幫助？</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">沒(méi)有</label>
<input type="checkbox" id="w3" name="problem" value="not_clear">
<label for="w3">不清楚</label><br>
<input type="submit" value="提交">
</form>
</body>
</html>
效果如下圖：
上面的小栗子中，實(shí)現(xiàn)復(fù)選框的輸入類型是checkbox，這個(gè)是重點(diǎn)哦！
當(dāng)有數(shù)據(jù)要提交給后端的時(shí)候怎么搞？如果后端是API服務(wù)，可以給它提交json。如果是前端頁(yè)面，就需要通過(guò)構(gòu)建表單來(lái)獲取用戶的輸入。基于表單提交數(shù)據(jù)給后端，怎么提交？需要一個(gè)可以點(diǎn)擊的提交按鈕，那這個(gè)按鈕怎么來(lái)？先看下面代碼：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>彩虹運(yùn)維技術(shù)棧社區(qū)主頁(yè)</title>
</head>
<body>
<h2>彩虹運(yùn)維技術(shù)棧社區(qū)，公眾號(hào)ID：TtrOpsStack</h2>
<h3>主機(jī)信息</h3>
<form>
<label for="ipaddr">IP地址</label>
<input type="text" id="ipaddr" name="ip"><br>
<input type="submit" value="提交">
</form>
</body>
</html>
效果如下圖：
輸入類型為submit，說(shuō)明它就是提交按鈕，注意上面代碼type="submit"了嗎？
在之前的例子中，前端表單需要將數(shù)據(jù)提交給后端，除了需要一個(gè)提交按鈕外，還需要action屬性。當(dāng)點(diǎn)擊提交按鈕后，表單的數(shù)據(jù)該發(fā)到后端的哪個(gè)url進(jìn)行處理，就是定義在action屬性中。接下來(lái)，我們結(jié)合前端和后端直接來(lái)個(gè)小實(shí)戰(zhàn)，后端代碼用Python的Flask框架。
前端代碼：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>彩虹運(yùn)維技術(shù)棧社區(qū)主頁(yè)</title>
</head>
<body>
<h2>彩虹運(yùn)維技術(shù)棧社區(qū)，公眾號(hào)ID：TtrOpsStack</h2>
<h3>主機(jī)信息</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)
前端和后端的代碼寫(xiě)完后，我們接下來(lái)看看效果
輸入IP地址后，點(diǎn)擊提交
這個(gè)ok是后端返回的
后端接收到數(shù)據(jù)后，啥也沒(méi)做，只是做了簡(jiǎn)單打印
這個(gè)小栗子很簡(jiǎn)單，通過(guò)這個(gè)小栗子，是不是對(duì)action屬性的用法有了進(jìn)一步的理解呢？
method屬性的用途是指定提交數(shù)據(jù)的http方法，通常有2個(gè)，get和post。接下來(lái)我們?cè)谏蟼€(gè)小栗子的基礎(chǔ)上做個(gè)小改造，看下面代碼
前端代碼：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>彩虹運(yùn)維技術(shù)棧社區(qū)主頁(yè)</title>
</head>
<body>
<h2>彩虹運(yùn)維技術(shù)棧社區(qū)，公眾號(hào)ID：TtrOpsStack</h2>
<h3>主機(jī)信息</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ù)后，提交表單時(shí)，直接告訴你這是不允許的方法
在這個(gè)例子中，是因?yàn)榍岸说谋韱瘟酥付薽ethod為get請(qǐng)求，而后端接收數(shù)據(jù)的method規(guī)定了需要post請(qǐng)求，故所以出現(xiàn)這個(gè)問(wè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請(qǐng)求'
if __name__ == '__main__':
webapp.run(host="0.0.0.0", port=8088, debug=True)
前端表單中的method還是保持get請(qǐng)求，再次提交，后端的返回如下：
看到了嗎？后端判斷前端過(guò)來(lái)的請(qǐng)求是get還是post，很顯然，前端過(guò)來(lái)的請(qǐng)求是get，并且返回了非常友好的提示。
接下來(lái)我們繼續(xù)改造一下前端的代碼，將請(qǐng)求修改為post，代碼如下：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>彩虹運(yùn)維技術(shù)棧社區(qū)主頁(yè)</title>
</head>
<body>
<h2>彩虹運(yùn)維技術(shù)棧社區(qū)，公眾號(hào)ID：TtrOpsStack</h2>
<h3>主機(jī)信息</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請(qǐng)求'
if __name__ == '__main__':
webapp.run(host="0.0.0.0", port=8088, debug=True)
輸入IP地址，并點(diǎn)擊提交
提交后，后端給前端返回了ok
接下來(lái)看下后端，后端啥也沒(méi)做，就獲取到表單的數(shù)據(jù)，然后打印了數(shù)據(jù)，并且打印了下數(shù)據(jù)類型
好了，關(guān)于前端的action屬性和Method屬性就講到這里了。為了講解action和method，還結(jié)合了后端的一丟丟知識(shí)，前端和后端的知識(shí)點(diǎn)以后都會(huì)慢慢講到哈！
先來(lái)個(gè)前端代碼：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>彩虹運(yùn)維技術(shù)棧社區(qū)主頁(yè)</title>
</head>
<body>
<h2>彩虹運(yùn)維技術(shù)棧社區(qū)，公眾號(hào)ID：TtrOpsStack</h2>
<form action="http://192.168.11.10:8088/ttropsstack" target="_blank" method="post">
<label for="opslist">運(yùn)維開(kāi)發(fā)應(yīng)掌握的技能：</label>
<select id="opslist" name="opslist">
<option value="python">Python語(yǔ)言</option>
<option value="go">Go語(yǔ)言</option>
<option value="shell">Shell語(yǔ)言</option>
<option value="database">數(shù)據(jù)庫(kù)</option>
<option value="frontend">前端</option>
<option value="linux">Linux</option>
<option value="network">網(wǎng)絡(luò)</option>
<option value="storage">存儲(chǔ)</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請(qǐng)求'
if __name__ == '__main__':
webapp.run(host="0.0.0.0", port=8088, debug=True)
在下拉框中選擇“Go語(yǔ)言”，并提交
后端啥也沒(méi)干，就只做了打印
前端代碼：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>彩虹運(yùn)維技術(shù)棧社區(qū)主頁(yè)</title>
</head>
<body>
<h2>彩虹運(yùn)維技術(shù)棧社區(qū)，公眾號(hào)ID：TtrOpsStack</h2>
<form action="http://192.168.11.10:8088/ttropsstack" target="_blank" method="post">
<label for="opslist">運(yùn)維開(kāi)發(fā)應(yīng)掌握的技能：</label>
<select id="opslist" name="opslist" size="6" multiple>
<option value="python">Python語(yǔ)言</option>
<option value="go">Go語(yǔ)言</option>
<option value="shell">Shell語(yǔ)言</option>
<option value="database">數(shù)據(jù)庫(kù)</option>
<option value="frontend">前端</option>
<option value="linux">Linux</option>
<option value="network">網(wǎng)絡(luò)</option>
<option value="storage">存儲(chǔ)</option>
</select>
<input type="submit">
</form>
</body>
</html>
上述前端代碼中，是使用multiple屬性來(lái)實(shí)現(xiàn)選擇多個(gè)值。
后端代碼的打印方式稍微做了些許調(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請(qǐng)求'
if __name__ == '__main__':
webapp.run(host="0.0.0.0", port=8088, debug=True)
按住ctrl或者shift鍵可進(jìn)行多選
后端打印的效果圖下圖：
關(guān)于表單基礎(chǔ)知識(shí)點(diǎn)的講解就這么愉快的結(jié)束了，關(guān)于更多表單的元素、輸入屬性、輸入類型可自行查閱和實(shí)戰(zhàn)，筆者因時(shí)間有限就不一一演示。感謝您的閱讀，望多多關(guān)注我們、點(diǎn)贊、轉(zhuǎn)發(fā)！
本文轉(zhuǎn)載于（喜歡的盆友關(guān)注我們）：https://mp.weixin.qq.com/s/L-Msv39JrF7AzRx4K1OLjA
者 | Mateusz Iwaniuk
譯者 | 明明如月，責(zé)編 | 夕顏
出品 | CSDN（ID：CSDNnews）
文章配套代碼: https://github.com/iwaniukooo11/email-sender
現(xiàn)在，即使是創(chuàng)建最基本的網(wǎng)站，程序員也必須使用現(xiàn)代的功能和技術(shù)。甚至像為你的朋友創(chuàng)建簡(jiǎn)單的投資組合這樣的基本項(xiàng)目也可能涉及到一些問(wèn)題，比如從聯(lián)系人表單接收數(shù)據(jù)。有很多方法可以讀取這些數(shù)據(jù)。你可以將表單與數(shù)據(jù)庫(kù)連接起來(lái)，然后從數(shù)據(jù)庫(kù)中讀取傳入的消息來(lái)實(shí)現(xiàn)功能，但這樣做會(huì)給不懂技術(shù)的客戶造成困難。
你為什么不通過(guò)發(fā)送電子郵件傳輸信息？
不使用數(shù)據(jù)庫(kù)就能接收到傳入的消息，絕對(duì)是最佳選擇，也是最方便用戶的選擇。但問(wèn)題來(lái)了—如何實(shí)現(xiàn)呢？你可能認(rèn)為需要使用某種后端語(yǔ)言。
實(shí)際上，你不必使用任何如 php 或 python 這種后端語(yǔ)言，你甚至不需要用到 node.js！你需要的就是一個(gè)簡(jiǎn)單的EmailJS 庫(kù)。
本文將介紹下面兩個(gè)重要功能:
配置 emailjs 帳戶
使用 JS 發(fā)送電子郵件
請(qǐng)注意，在我的項(xiàng)目中，我使用了 gulp 和 webpack，我在 src 文件夾存放源碼，dist 存放最終發(fā)布版本的代碼。
我將分 5 個(gè)步驟向你展示如何從頭開(kāi)始構(gòu)建電子郵件發(fā)送器。
步驟1-用 HTML 創(chuàng)建表單
首先需要?jiǎng)?chuàng)建一個(gè) HTML 表單。你不必放置像 required 或 max 這種驗(yàn)證屬性，因?yàn)樯院螅琾reventDefault 函數(shù)將在你的提交事件上運(yùn)行，它會(huì)讓這些屬性的處理失效。
表單中最重要的是為每個(gè)輸入放置 name 屬性，后面會(huì)用到。
我的非常簡(jiǎn)單的表單是這樣的:
src/html/index.html
<form class="form"><input name='name' type="text" placeholder="Your name..." class="form__input" /><input name='topic' type="text" placeholder="Topic..." class="form__input" /><textarea name='message' type="text" placeholder="Your Message..." class="form__input" ></textarea><input type="submit" value="send" class="form__input form__input--button"></form>
步驟2-注冊(cè)成為 email 用戶
要配置你的電子郵件，你必須注冊(cè)電子郵件服務(wù)。別擔(dān)心—使用這個(gè)網(wǎng)站非常方便和省時(shí)。
登入后，系統(tǒng)會(huì)詢問(wèn)你的電子郵件服務(wù)，它位于個(gè)人電子郵件服務(wù)區(qū)（personal email service）。在我的例子中，我選擇了 gmail。
然后，你需要連接你的 gmail 帳戶。這將用來(lái)發(fā)送電子郵件給你客戶。例如，如果你關(guān)聯(lián)了 xyz@gmail.com 賬戶，你后續(xù)發(fā)送的郵件都將從這個(gè)郵箱發(fā)出。所以不要擔(dān)心“ Send email on your behalf” 這個(gè)授權(quán)信息—這正是你需要的！
連接完 gmail 賬戶后，點(diǎn)擊添加服務(wù)（add service）按鈕。
步驟3-創(chuàng)建郵件模板
如果你已經(jīng)成功連接了你的 gmail 賬戶，你現(xiàn)在應(yīng)該在信息中心中。現(xiàn)在需要?jiǎng)?chuàng)建電子郵件模板了。
切換到電子郵件模板卡，并單擊創(chuàng)建一個(gè)新的模板（create a new template）。界面非常友好，所以創(chuàng)建模板不會(huì)有任何問(wèn)題。
你可以選擇模板的名稱和 ID。我稱之為“我的神奇模板（my_amazing_template）”。
接下來(lái)，你必須指定郵件的內(nèi)容。
模板的變量值來(lái)自 input 中的 `name` 屬性。你已將變量插入`{{{}}}`符號(hào)中。
不要忘記在“收件人”部分 (右側(cè)) 添加電子郵件地址。你的電子郵件將被發(fā)送到該電子郵件地址上。截圖中的收件人郵箱是我自己的公司郵箱。
這是我的簡(jiǎn)單模板，它使用來(lái)自 HTML 表單里的 3 個(gè)變量。我還指定了接收電子郵件的主題。
步驟4-保存 API 密鑰
這部分沒(méi)什么特別的。Emailjs 共享授權(quán) API 密鑰，將在發(fā)送電子郵件時(shí)使用。當(dāng)然，放這些鑰匙最好的地方是`.env` 配置。但是因?yàn)槲沂褂玫氖呛?jiǎn)單的靜態(tài)文件，我不想使用服務(wù)器配置，所以我將它們保存在 apikeys 文件中，然后再將它們導(dǎo)入。
你的 USER_ID 位于 Account > API Keys 菜單下。
TEMPLATE_ID 位于模板的標(biāo)題下面。
這是我基于不存在的 keyssrc / js / apikeys. js 的示例配置.
src/js/apikeys.js
export default {USER_ID :'user_DPUd-rest-of-my-id',TEMPLATE_ID:'my_amazing_template'}
如果需要將源碼發(fā)布到 GITHUB，不要忘記將 APIKEYS 文件添加到 .GITIGNORE文件中
現(xiàn)在是該項(xiàng)目最后也是最重要的部分的了。現(xiàn)在我們必須使用 javascript 發(fā)送電子郵件。
首先，你必須下載 emailjs 包。
npm i emails-com然后，轉(zhuǎn)到 js 文件，導(dǎo)入庫(kù)和 apikeys。
src/js/main.js
import emailjs from 'emailjs-com'import apiKeys from './apikeys'
現(xiàn)在是編寫(xiě)發(fā)送電子郵件功能的時(shí)候了
src/js/main.js
const sendEmail = e => {e.preventDefaultemailjs.sendForm('gmail', apiKeys.TEMPLATE_ID, e.target, apiKeys.USER_ID).then(result => {console.log(result.text)},error => {console.log(error.text)})}
sendForm 函數(shù)有4個(gè)參數(shù):
你的電子郵件的 ID，在這里:
TEMPLATE_ID 來(lái)自 apikey 文件,
事件對(duì)象來(lái)自你的表單提交
USER_ID 來(lái)自 apikey 文件,
最后，查找表單并添加提交事件監(jiān)聽(tīng)器：
src/js/main.js
const form = document.querySelector('.form')form.addEventListener('submit',sendEmail)
正如我前面提到的，由于 `preventDefault` 函數(shù)，屬性驗(yàn)證將無(wú)法工作。你必須使用 JS 自己進(jìn)行驗(yàn)證和清除輸入。
以上就是全部?jī)?nèi)容，接下來(lái)讓我們測(cè)試一下。
填寫(xiě)頁(yè)面上的表單并發(fā)送。
我收到電子郵件，內(nèi)容正是根據(jù)我們的模板和表單數(shù)據(jù)渲染出來(lái)的。
通過(guò)上圖可以看出，所有的變量的值都填充到了正確的位置上。
通過(guò)本文的介紹你會(huì)發(fā)現(xiàn)用 JS 發(fā)送郵件并非難事。
使用 emailjs，你可以簡(jiǎn)單的方式發(fā)送電子郵件。
我相信你未來(lái)的用戶會(huì)很高興收到來(lái)自他們網(wǎng)頁(yè)上表單填寫(xiě)數(shù)據(jù)的t郵件，相信本文對(duì)你有幫助。
這篇文章的配套代碼在這里: https://github.com/iwaniukooo11/email-sender
原文鏈接：
https://dev.to/iwaniukooo11/send-e-mails-directly-from-front-end-with-js-5d7d
本文為CSDN翻譯文章，轉(zhuǎn)載請(qǐng)注明出處。
?我們想研發(fā)一個(gè)機(jī)器學(xué)習(xí)框架，6 個(gè)月后失敗了
?生產(chǎn)型機(jī)器學(xué)習(xí)已經(jīng)沒(méi)那么困難了？
?視頻 | 你不知道的"開(kāi)源"60年秘史
?GitHub標(biāo)星10,000+，Apache項(xiàng)目ShardingSphere的開(kāi)源之路
?阿里技術(shù)專家告訴你，如何畫(huà)出優(yōu)秀的架構(gòu)圖？
?加拿大API平臺(tái)如何做到30%為中國(guó)明星項(xiàng)目？創(chuàng)業(yè)老兵這樣說(shuō)……
頁(yè)編程之表單詳解。
同學(xué)們好，今天我要跟大家分享的是html中前后臺(tái)數(shù)據(jù)交互的重要內(nèi)容——form標(biāo)簽。通過(guò)form標(biāo)簽，用戶可以在前臺(tái)填寫(xiě)資料，然后通過(guò)form的method屬性中設(shè)置的提交方式，提交至action屬性規(guī)定的后端處理程序中進(jìn)行處理。
我們經(jīng)常在網(wǎng)頁(yè)上看到的填寫(xiě)、注冊(cè)、登錄、修改資料等操作都需要使用form標(biāo)簽。讓我們來(lái)看看今天的實(shí)例效果吧。
form標(biāo)簽對(duì)于用戶來(lái)說(shuō)是不可見(jiàn)的，如果沒(méi)有這一句話，你們只能看到一個(gè)完全空白的網(wǎng)頁(yè)。
可以將form標(biāo)簽想象成一個(gè)盒子，其中放置了輸入框、單選框、復(fù)選框等控件。當(dāng)用戶填寫(xiě)完所有控件的內(nèi)容并點(diǎn)擊提交按鈕時(shí)，這個(gè)盒子就會(huì)被蓋上，并被直接發(fā)送到服務(wù)器進(jìn)行處理。
接下來(lái)，我們來(lái)看看實(shí)現(xiàn)代碼。form標(biāo)簽是一個(gè)圍堵標(biāo)簽，它具有許多屬性，但并非所有屬性都是必需的。因此，根據(jù)需要設(shè)置相應(yīng)的屬性即可。
首先，我要重點(diǎn)介紹幾個(gè)常用的屬性：action、name、method。
action屬性設(shè)置了服務(wù)端處理程序的URL地址。以郵寄盒子的理解來(lái)說(shuō)，action就是收件人地址。
name屬性設(shè)置了表單的名稱，這個(gè)名稱可以被前臺(tái)的JS調(diào)用。同時(shí)，在一個(gè)網(wǎng)頁(yè)中存在多個(gè)表單標(biāo)簽時(shí)，它也可以用來(lái)給服務(wù)器進(jìn)行區(qū)分。
method屬性設(shè)置了表單的提交方式，它有兩個(gè)值post和get。post是密文，而get是明文，post沒(méi)有數(shù)據(jù)長(zhǎng)度限制，而get只能傳遞大約3000個(gè)字符。
以郵寄舉例，get是直接將寫(xiě)著內(nèi)容的信紙寄出，而post則是將信紙裝進(jìn)信封里寄出。enctype不是常用屬性，但在使用時(shí)非常重要。它規(guī)定了從表單數(shù)據(jù)發(fā)送到服務(wù)器之前如何對(duì)其進(jìn)行編碼，共有三個(gè)值，分別對(duì)應(yīng)文字?jǐn)?shù)據(jù)、多媒體數(shù)據(jù)和文件數(shù)據(jù)。詳情請(qǐng)參考匯總文檔。值得一提的是，只有在method等于post時(shí)，enctype的值才會(huì)生效。
除了這三個(gè)屬性外，還有accept-charset、autocomplete和history。accept-charset聲明了服務(wù)端可以處理的字符集，autocomplete是否開(kāi)啟前臺(tái)自動(dòng)填充歷史數(shù)據(jù)及用戶填寫(xiě)一次之后，再填寫(xiě)會(huì)在瀏覽器中詢問(wèn)是否根據(jù)過(guò)往填寫(xiě)的內(nèi)容進(jìn)行自動(dòng)填充。
·將logo的"novalidate"設(shè)置為"true"，可以直接提交未經(jīng)驗(yàn)證的表單數(shù)據(jù)。通常，我們需要在前臺(tái)使用JS或控件驗(yàn)證用戶填寫(xiě)的數(shù)據(jù)是否符合格式要求。然而，這個(gè)屬性可以直接繞過(guò)驗(yàn)證。
·將"target"設(shè)置為"_blank"，可以打開(kāi)新的窗口進(jìn)行提交。這與a標(biāo)簽的"target"屬性相同。現(xiàn)在，我的理解是這樣的。在后面的C#章節(jié)中，我們將結(jié)合具體的使用場(chǎng)景進(jìn)行詳細(xì)的講解。
今天的分享就到這里。希望各位同學(xué)能按照我的要求，認(rèn)真練習(xí)寫(xiě)三次。這樣，即使不看視頻，你們也能寫(xiě)出正確的代碼。所有的案例和相關(guān)文檔都可以向我索取。我們下期再見(jiàn)。網(wǎng)頁(yè)編程、服務(wù)端編程、數(shù)據(jù)庫(kù)和算法。如果你想學(xué)習(xí)編程，記得關(guān)注我哦！
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
