整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
TML 表單用于收集不同類型的用戶輸入，它是一個(gè)包含表單元素的區(qū)域。
表單元素是允許用戶在表單中輸入內(nèi)容,比如：文本域(textarea)、下拉列表、單選框(radio-buttons)、復(fù)選框(checkboxes)等等。今天我們主要來說說文本域和密碼域這兩個(gè)部分，希望對大家學(xué)習(xí)有所幫助喲！
本文福利后臺回復(fù)【學(xué)習(xí)】即可獲得Python、HTML等編程學(xué)習(xí)資料
HTML 表單
表單使用表單標(biāo)簽 <form> 來設(shè)置:
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
HTML 表單 - 輸入元素
多數(shù)情況下被用到的表單標(biāo)簽是輸入標(biāo)簽（<input>）。輸入類型是由類型屬性（type）定義的。
如何在 HTML 頁面創(chuàng)建文本域？
用戶可以在文本域中寫入文本，參考代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<form action="">
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
<p><b>注意：</b> 表單本身是不可見的。并且注意一個(gè)文本字段的默認(rèn)寬度是20個(gè)字符。</p>
</body>
</html>
運(yùn)行結(jié)果為
如何創(chuàng)建 HTML 的密碼域？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<form action="">
Username: <input type="text" name="user"><br>
Password: <input type="password" name="password">
</form>
<p><b>注意：</b> 密碼字段中的字符是隱藏的(顯示為星號或圓圈)。</p>
</body>
</html>
運(yùn)行結(jié)果如下
戳了解更多免費(fèi)領(lǐng)取HTML試聽課~
者 | Mateusz Iwaniuk
譯者 | 明明如月，責(zé)編 | 夕顏
出品 | CSDN（ID：CSDNnews）
文章配套代碼: https://github.com/iwaniukooo11/email-sender
現(xiàn)在，即使是創(chuàng)建最基本的網(wǎng)站，程序員也必須使用現(xiàn)代的功能和技術(shù)。甚至像為你的朋友創(chuàng)建簡單的投資組合這樣的基本項(xiàng)目也可能涉及到一些問題，比如從聯(lián)系人表單接收數(shù)據(jù)。有很多方法可以讀取這些數(shù)據(jù)。你可以將表單與數(shù)據(jù)庫連接起來，然后從數(shù)據(jù)庫中讀取傳入的消息來實(shí)現(xiàn)功能，但這樣做會給不懂技術(shù)的客戶造成困難。
你為什么不通過發(fā)送電子郵件傳輸信息？
不使用數(shù)據(jù)庫就能接收到傳入的消息，絕對是最佳選擇，也是最方便用戶的選擇。但問題來了—如何實(shí)現(xiàn)呢？你可能認(rèn)為需要使用某種后端語言。
實(shí)際上，你不必使用任何如 php 或 python 這種后端語言，你甚至不需要用到 node.js！你需要的就是一個(gè)簡單的EmailJS 庫。
本文將介紹下面兩個(gè)重要功能:
配置 emailjs 帳戶
使用 JS 發(fā)送電子郵件
請注意，在我的項(xiàng)目中，我使用了 gulp 和 webpack，我在 src 文件夾存放源碼，dist 存放最終發(fā)布版本的代碼。
我將分 5 個(gè)步驟向你展示如何從頭開始構(gòu)建電子郵件發(fā)送器。
步驟1-用 HTML 創(chuàng)建表單
首先需要?jiǎng)?chuàng)建一個(gè) HTML 表單。你不必放置像 required 或 max 這種驗(yàn)證屬性，因?yàn)樯院螅琾reventDefault 函數(shù)將在你的提交事件上運(yùn)行，它會讓這些屬性的處理失效。
表單中最重要的是為每個(gè)輸入放置 name 屬性，后面會用到。
我的非常簡單的表單是這樣的:
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-注冊成為 email 用戶
要配置你的電子郵件，你必須注冊電子郵件服務(wù)。別擔(dān)心—使用這個(gè)網(wǎng)站非常方便和省時(shí)。
登入后，系統(tǒng)會詢問你的電子郵件服務(wù)，它位于個(gè)人電子郵件服務(wù)區(qū)（personal email service）。在我的例子中，我選擇了 gmail。
然后，你需要連接你的 gmail 帳戶。這將用來發(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)建模板不會有任何問題。
你可以選擇模板的名稱和 ID。我稱之為“我的神奇模板（my_amazing_template）”。
接下來，你必須指定郵件的內(nèi)容。
模板的變量值來自 input 中的 `name` 屬性。你已將變量插入`{{{}}}`符號中。
不要忘記在“收件人”部分 (右側(cè)) 添加電子郵件地址。你的電子郵件將被發(fā)送到該電子郵件地址上。截圖中的收件人郵箱是我自己的公司郵箱。
這是我的簡單模板，它使用來自 HTML 表單里的 3 個(gè)變量。我還指定了接收電子郵件的主題。
步驟4-保存 API 密鑰
這部分沒什么特別的。Emailjs 共享授權(quán) API 密鑰，將在發(fā)送電子郵件時(shí)使用。當(dāng)然，放這些鑰匙最好的地方是`.env` 配置。但是因?yàn)槲沂褂玫氖呛唵蔚撵o態(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)入庫和 apikeys。
src/js/main.js
import emailjs from 'emailjs-com'import apiKeys from './apikeys'
現(xiàn)在是編寫發(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 來自 apikey 文件,
事件對象來自你的表單提交
USER_ID 來自 apikey 文件,
最后，查找表單并添加提交事件監(jiān)聽器：
src/js/main.js
const form = document.querySelector('.form')form.addEventListener('submit',sendEmail)
正如我前面提到的，由于 `preventDefault` 函數(shù)，屬性驗(yàn)證將無法工作。你必須使用 JS 自己進(jìn)行驗(yàn)證和清除輸入。
以上就是全部內(nèi)容，接下來讓我們測試一下。
填寫頁面上的表單并發(fā)送。
我收到電子郵件，內(nèi)容正是根據(jù)我們的模板和表單數(shù)據(jù)渲染出來的。
通過上圖可以看出，所有的變量的值都填充到了正確的位置上。
通過本文的介紹你會發(fā)現(xiàn)用 JS 發(fā)送郵件并非難事。
使用 emailjs，你可以簡單的方式發(fā)送電子郵件。
我相信你未來的用戶會很高興收到來自他們網(wǎng)頁上表單填寫數(shù)據(jù)的t郵件，相信本文對你有幫助。
這篇文章的配套代碼在這里: https://github.com/iwaniukooo11/email-sender
原文鏈接：
https://dev.to/iwaniukooo11/send-e-mails-directly-from-front-end-with-js-5d7d
本文為CSDN翻譯文章，轉(zhuǎn)載請注明出處。
?我們想研發(fā)一個(gè)機(jī)器學(xué)習(xí)框架，6 個(gè)月后失敗了
?生產(chǎn)型機(jī)器學(xué)習(xí)已經(jīng)沒那么困難了？
?視頻 | 你不知道的"開源"60年秘史
?GitHub標(biāo)星10,000+，Apache項(xiàng)目ShardingSphere的開源之路
?阿里技術(shù)專家告訴你，如何畫出優(yōu)秀的架構(gòu)圖？
?加拿大API平臺如何做到30%為中國明星項(xiàng)目？創(chuàng)業(yè)老兵這樣說……
前面已經(jīng)學(xué)習(xí)相關(guān)html大部分知識，基本上可以制作出簡單的頁面，但是這些頁面都是靜態(tài)的，一個(gè)網(wǎng)站如果要實(shí)現(xiàn)用戶的互動交流，這時(shí)表單就起到關(guān)鍵的作用，表單的用途很多，它主要用來收集用戶的相關(guān)信息，是網(wǎng)頁具有交互的功能。例如，用戶注冊登錄，留言等。
下面會詳細(xì)介紹表單的使用方法，有以下內(nèi)容：
使用<form></form>標(biāo)簽來創(chuàng)建一個(gè)表單，在其之間就是各種表單控件，如，輸入框，文本框，單選按鈕，多選按鈕，提交按鈕等。
語法代碼如下：
<form name="表單名稱" action="表單處理程序的服務(wù)地址" method="提交表單時(shí)所用的HTTP方法">
...... 表單控件......
</form>1、action —— 處理程序
這里的 action 屬性值表單提交的地址，就是表單收集好數(shù)據(jù)后要傳遞給遠(yuǎn)程服務(wù)的地址，其地址可以是絕對路徑也可以是相對路徑，或者其它形式，如發(fā)送電子郵件。
使用表單發(fā)送電子郵件：
<form action="mailto:xxx@126.com">
...... 表單控件......
</form>提交到后臺程序地址：
<form action="action_page.php">
...... 表單控件......
</form>2、name —— 表單名稱
表單名稱，這一屬性不是必需的，但是為了防止表單信息提交到后臺處理程序時(shí)發(fā)生混亂，一般要設(shè)置一個(gè)名稱，且在同一頁面中最好是唯一的，不要和其它表單重復(fù)命名。
<form name="loginForm">
...... 表單控件......
</form>3、method —— 傳送數(shù)據(jù)方法
method 屬性用來定義處理程序使用那種方法來獲取數(shù)據(jù)信息，常用的有 get 和 post （http 協(xié)議定義的方法）。
<form name="loginForm" action="get 或 post">
...... 表單控件......
</form>何時(shí)使用 GET？
GET 最適合少量數(shù)據(jù)或不是很重要數(shù)據(jù)的提交，瀏覽器會設(shè)定容量限制，默認(rèn)如何沒有設(shè)置method 屬性，表單則會使用get 方法。
當(dāng)您使用 GET 時(shí)，表單數(shù)據(jù)在頁面地址欄中是可見的，會在表單提交的地址后面跟一個(gè)問號“?” ，問號后面是數(shù)據(jù)，以 名稱1=值1&名稱2=值2 形式發(fā)送到后臺程序。
地址欄會看到如下：
action_page.php?firstname=Mickey&lastname=Mouse關(guān)于 GET 的注意事項(xiàng)：
以名稱/值對的形式將表單數(shù)據(jù)追加到 URL
永遠(yuǎn)不要使用 GET 發(fā)送敏感數(shù)據(jù)！（提交的表單數(shù)據(jù)在 URL 中可見！）
URL 的長度受到限制（2048 個(gè)字符）
對于用戶希望將結(jié)果添加為書簽的表單提交很有用
GET 適用于非安全數(shù)據(jù)，例如 Google 中的查詢字符串
何時(shí)使用 POST？
使用post 表單數(shù)據(jù)和url（表單提交地址）是分開發(fā)送的，在頁面地址欄中被提交的數(shù)據(jù)是不可見的，這樣安全性更好，用戶端會通知服務(wù)端獲取數(shù)據(jù)，所以這種情況沒有數(shù)據(jù)長度的限制，缺點(diǎn)是速度會慢些。
關(guān)于 POST 的注意事項(xiàng)：
將表單數(shù)據(jù)附加在 HTTP 請求的正文中（不在 URL 中顯示提交的表單數(shù)據(jù)）
POST 沒有大小限制，可用于發(fā)送大量數(shù)據(jù)。
帶有 POST 的表單提交后無法添加書簽
4、enctype —— 編碼方式
enctype 屬性規(guī)定在發(fā)送到服務(wù)器之前應(yīng)該如何對表單數(shù)據(jù)進(jìn)行編碼。
<form enctype="value">有以下幾種值：
值 | 含義 |
application/x-www-form-urlencoded | 在發(fā)送前編碼所有字符（默認(rèn)編碼方式） |
multipart/form-data | 不對字符編碼。 在使用包含文件上傳控件的表單時(shí)，必須使用該值。 |
text/plain | 以純文本的方式，空格轉(zhuǎn)換為 "+" 加號，但不對特殊字符編碼。 |
5、target —— 目標(biāo)顯示方式
target 屬性規(guī)定在何處打開 action URL。表單的目標(biāo)窗口通常用來顯示表單返回的信息，例如是否成功提交了表單，是否出錯(cuò)等。
<form target="value">屬性值有以下：
值 | 描述 |
_blank | 在新窗口中打開。 |
_self | 默認(rèn)。在表單當(dāng)前的窗口中打開。 |
_parent | 在父窗口中打開。 |
_top | 在頂級窗口中打開。 |
framename | 在指定的框架窗口中打開。 |
看到這里是不是想的了之前學(xué)習(xí)超鏈接時(shí)候，a標(biāo)簽也有同樣的屬性，這里差不多一個(gè)意思，只是用途不一樣。
這里的窗口有可能是框架 frame 或 浮動窗口 iframe ，后面會講到框架和浮動窗口，就是在一個(gè)頁面中可以嵌套一個(gè)子窗口。
什么是表單控件，就是收集數(shù)據(jù)的各種形式控件，比如輸入框，密碼框，單選、多選按鈕，下拉菜單，文本域，文件域，提交按鈕等等。
如下代碼：
<form name="form1">
<div>用戶名：<input name="username" type="text" ></div>
<div>密碼：<input name="password" type="password" ></div>
<div>性別：
<input type="radio" name="sex" value="male" checked> 男
<br>
<input type="radio" name="sex" value="female"> 女
</div>
<div> 車輛：
<select name="cars">
<option value="volvo">baom</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</div>
<div>留言：
<textarea name="message" rows="10" cols="30">
請輸入文本
</textarea>
</div>
</select>
</form>效果如下：
這里顯示了一個(gè)基本表單，包含了輸入框，密碼框，單選，下拉菜單，文本域等組件，下面會按其使用類型介紹表單控件。
所有表單控件都一個(gè)name屬性和vaule屬性，用于和其它控件區(qū)別，后臺程序?qū)源嗣Q獲取其表單控件對應(yīng)的vaule值。
下篇會介紹各種表單控件的使用，感謝關(guān)注。
上篇：前端入門——html 表格的使用
下篇：前端入門——html 表單控件使用
*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。
