整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
TML 表單用于收集不同類型的用戶輸入，它是一個(gè)包含表單元素的區(qū)域。
表單元素是允許用戶在表單中輸入內(nèi)容,比如：文本域(textarea)、下拉列表、單選框(radio-buttons)、復(fù)選框(checkboxes)等等。今天我們主要來(lái)說(shuō)說(shuō)文本域和密碼域這兩個(gè)部分，希望對(duì)大家學(xué)習(xí)有所幫助喲！
本文福利后臺(tái)回復(fù)【學(xué)習(xí)】即可獲得Python、HTML等編程學(xué)習(xí)資料
HTML 表單
表單使用表單標(biāo)簽 <form> 來(lái)設(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 頁(yè)面創(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> 密碼字段中的字符是隱藏的(顯示為星號(hào)或圓圈)。</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)建簡(jiǎn)單的投資組合這樣的基本項(xiàng)目也可能涉及到一些問題，比如從聯(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ì)是最佳選擇，也是最方便用戶的選擇。但問題來(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è)步驟向你展示如何從頭開始構(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ù)，它位于個(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ì)有任何問題。
你可以選擇模板的名稱和 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 密鑰
這部分沒什么特別的。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)在是編寫發(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)聽器：
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è)試一下。
填寫頁(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è)上表單填寫數(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)沒那么困難了？
?視頻 | 你不知道的"開源"60年秘史
?GitHub標(biāo)星10,000+，Apache項(xiàng)目ShardingSphere的開源之路
?阿里技術(shù)專家告訴你，如何畫出優(yōu)秀的架構(gòu)圖？
?加拿大API平臺(tái)如何做到30%為中國(guó)明星項(xiàng)目？創(chuàng)業(yè)老兵這樣說(shuō)……
現(xiàn)代web開發(fā)中，表單是用戶與網(wǎng)站互動(dòng)的重要方式之一。HTML5為表單提交提供了強(qiáng)大的功能和豐富的輸入類型，讓收集和驗(yàn)證用戶輸入數(shù)據(jù)變得更加容易和安全。本文將詳細(xì)介紹HTML5表單的各個(gè)方面，包括基本結(jié)構(gòu)、輸入類型、驗(yàn)證方法和提交過(guò)程。
HTML表單由<form>標(biāo)簽定義，它可以包含輸入字段、標(biāo)簽、按鈕等元素。一個(gè)基本的表單結(jié)構(gòu)如下所示：
<form action="/submit_form" method="post">
<label for="name">姓名：</label>
<input type="text" id="name" name="name" required>
<label for="email">電子郵箱：</label>
<input type="email" id="email" name="email" required>
<input type="submit" value="提交">
</form>
在這個(gè)例子中，表單有兩個(gè)輸入字段：姓名和電子郵箱。每個(gè)輸入字段都有一個(gè)<label>標(biāo)簽，這不僅有助于用戶理解輸入的內(nèi)容，也有助于屏幕閱讀器等輔助技術(shù)。<form>標(biāo)簽的action屬性定義了數(shù)據(jù)提交到服務(wù)器的URL，method屬性定義了提交數(shù)據(jù)的HTTP方法（通常是post或get）。
HTML5提供了多種輸入類型，以支持不同的數(shù)據(jù)格式和設(shè)備。
<!-- 單行文本 -->
<input type="text" name="username" placeholder="請(qǐng)輸入用戶名" required>
<!-- 密碼 -->
<input type="password" name="password" required minlength="8">
<!-- 郵箱 -->
<input type="email" name="email" required placeholder="example@domain.com">
<!-- 搜索框 -->
<input type="search" name="search" placeholder="搜索...">
<!-- 數(shù)值 -->
<input type="number" name="age" min="18" max="100" step="1" required>
<!-- 滑動(dòng)條 -->
<input type="range" name="volume" min="0" max="100" step="1">
<!-- 電話號(hào)碼 -->
<input type="tel" name="phone" pattern="^\+?\d{0,13}" placeholder="+8613800000000">
<!-- 日期 -->
<input type="date" name="birthdate" required>
<!-- 時(shí)間 -->
<input type="time" name="appointmenttime">
<!-- 日期和時(shí)間 -->
<input type="datetime-local" name="appointmentdatetime">
<!-- 復(fù)選框 -->
<label><input type="checkbox" name="interest" value="coding"> 編程</label>
<label><input type="checkbox" name="interest" value="music"> 音樂</label>
<!-- 單選按鈕 -->
<label><input type="radio" name="gender" value="male" required> 男性</label>
<label><input type="radio" name="gender" value="female"> 女性</label>
<!-- 下拉選擇 -->
<select name="country" required>
<option value="china">中國(guó)</option>
<option value="usa">美國(guó)</option>
</select>
<!-- 顏色選擇器 -->
<input type="color" name="favcolor" value="#ff0000">
<!-- 文件上傳 -->
<input type="file" name="resume" accept=".pdf,.docx" multiple>
HTML5表單提供了內(nèi)置的驗(yàn)證功能，可以在數(shù)據(jù)提交到服務(wù)器之前進(jìn)行檢查。
<input type="text" name="username" required>
<input type="text" name="zipcode" pattern="\d{5}(-\d{4})?" title="請(qǐng)輸入5位數(shù)的郵政編碼">
<input type="number" name="age" min="18" max="99">
<input type="text" name="username" minlength="4" maxlength="8">
當(dāng)用戶填寫完表單并點(diǎn)擊提交按鈕時(shí)，瀏覽器會(huì)自動(dòng)檢查所有輸入字段的有效性。如果所有字段都滿足要求，表單數(shù)據(jù)將被發(fā)送到服務(wù)器。否則，瀏覽器會(huì)顯示錯(cuò)誤信息，并阻止表單提交。
<input type="submit" value="提交">
可以使用JavaScript來(lái)自定義驗(yàn)證或處理提交事件：
document.querySelector('form').addEventListener('submit', function(event) {
// 檢查表單數(shù)據(jù)
if (!this.checkValidity()) {
event.preventDefault(); // 阻止表單提交
// 自定義錯(cuò)誤處理
}
// 可以在這里添加額外的邏輯，比如發(fā)送數(shù)據(jù)到服務(wù)器的Ajax請(qǐng)求
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表單提交并顯示JSON</title>
</head>
<body>
<!-- 表單定義 -->
<form id="myForm">
<label for="name">姓名：</label>
<input type="text" id="name" name="name">
<br>
<label for="email">電子郵件：</label>
<input type="email" id="email" name="email">
<br>
<input type="button" value="提交" onclick="submitForm()">
</form>
<script>
// JavaScript函數(shù)，處理表單提交
function submitForm() {
// 獲取表單元素
var form = document.getElementById('myForm');
// 創(chuàng)建一個(gè)FormData對(duì)象
var formData = new FormData(form);
// 創(chuàng)建一個(gè)空對(duì)象來(lái)存儲(chǔ)表單數(shù)據(jù)
var formObject = {};
// 將FormData轉(zhuǎn)換為普通對(duì)象
formData.forEach(function(value, key){
formObject[key] = value;
});
// 將對(duì)象轉(zhuǎn)換為JSON字符串
var jsonString = JSON.stringify(formObject);
// 彈出包含JSON字符串的對(duì)話框
alert(jsonString);
// 阻止表單的默認(rèn)提交行為
return false;
}
</script>
</body>
</html>
在這個(gè)例子中：
注意，這個(gè)例子中我們使用了type="button"而不是type="submit"，因?yàn)槲覀儾幌Ｍ韱斡心J(rèn)的提交行為。我們的JavaScript函數(shù)submitForm會(huì)處理所有的邏輯，并且通過(guò)返回false來(lái)阻止默認(rèn)的表單提交。如果你想要使用type="submit"，你需要在<form>標(biāo)簽上添加一個(gè)onsubmit="return submitForm()"屬性來(lái)代替按鈕上的onclick事件。
HTML5的表單功能為開發(fā)者提供了強(qiáng)大的工具，以便創(chuàng)建功能豐富、用戶友好且安全的網(wǎng)站。通過(guò)使用HTML5的輸入類型和驗(yàn)證方法，可以確保用戶輸入的數(shù)據(jù)是有效的，同時(shí)提高用戶體驗(yàn)。隨著技術(shù)的不斷進(jìn)步，HTML5表單和相關(guān)API將繼續(xù)發(fā)展，為前端工程師提供更多的可能性。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
