整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
鈕在我們的生活中隨處可見，比如：QQ登錄界面中的登錄按鈕，12306購票系統中的注冊按鈕，以及購物完成之后的"開始抽獎"按鈕等等，這些頁面都是通過按鈕來獲得用戶點擊確認信息的。
表單控件中的按鈕總共分為5類。分別是：提交按鈕、重置按鈕、普通按鈕、圖像按鈕以及雙標簽button 按鈕。
先來介紹第一類：提交按鈕 。他具有 點擊確認提交信息，同時發送表單數據給后臺的功能。
提交按鈕也是通過 input 控件實現，定義 type 的值為 submit sei 即可。submit 就是提交的意思。
打開編輯器，新建一個 input_button.html 頁面，完成基礎代碼，在 body 添加 form 標簽，在form 標簽內部添加文本 "姓名：" ，再添加一個 input 輸入框標簽，type 屬性值為 text，在輸入框后面添加 br 標簽換行。
在 form 里再次添加文本 "郵箱："，再添加一個 input 輸入框標簽，type 屬性值同為 text，再添加一個 br 換行標簽。
最后在 form 里添加 input，type 屬性賦值為 submit。se 保存。
在瀏覽器中打開頁面，輸入姓名和郵箱地址，點擊 "提交" 按鈕。
表單提交后，頁面發生了什么變化？其實，當我們點擊按鈕時，發生了三件事：第一件事：頁面刷新了；第二件事：輸入框的內容消失了；第三件事：瀏覽器地址欄里多了一個問號。我們刷新一下頁面，再次操作一遍，大家仔細觀察。
刷新，填入姓名和郵箱，點擊 "提交"，我們發現頁面閃了一下，這里多了個問號，輸入框的內容也消失了。下面，我們來揭露三件事背后隱藏的真相。
頁面為什么刷新了？事情的真相是：當用戶填寫完表單，點擊提交按鈕，數據提交給了網站的后臺服務器，后臺服務器再將數據保存到數據庫中。這里的服務器會給網頁的表單提供一個訪問地址。
回到編輯器，我們已經覺察到，form 表單里并沒有定義服務器地址。那如何定義呢？
我們需要在 form 標簽上定義一個 action 屬性，action 是行動的意思，就是用戶點擊提交按鈕后，做什么動作。事實上它的值就是服務器的地址。這個地址咱們得找后端的小伙伴去要，當然，你可以寫一個任意的網站地址測試一下。
回到編輯器，我們給 form 定義 action 屬性，賦值為：http://www.baidu.com (全部讀出來)，保存頁面。
回到瀏覽器，刷新。填寫姓名和郵箱，點擊 "提交" ，驚奇的一幕發生了，頁面跳轉到了百度首頁，頁面的地址里也多了一個問號。其實也不奇怪，因為我們就打算將數據提交給百度。
那你可能會問，數據真的存到百度的數據庫里了嗎？難道我把百度服務器給黑了？沒那么容易，現在只是一廂情愿，百度同意接受我們的請求才可以。
回到編輯器，我們把 form 的 action 屬性去掉。注意，如果不定義 action，瀏覽器默認會把當前的頁面地址當成是 action 的值。我們保存一下頁面。
回到瀏覽器，刷新。填寫姓名和郵箱，再次 "提交" 。由于表單提交給了頁面自己，收到自身提交的信號后，作為響應，自己又打開了一下頁面，所以頁面刷新了。由于頁面刷新了，原來在表單里填寫的內容也不見了，其實也可以保留這些內容。
方法就是給 form 標簽定義一個 target 屬性，屬性值和鏈接的target屬性值一樣，可以是 _blank，也可以是 _self。
回到編輯器，給 form 定義 action 屬性，值仍舊為百度首頁地址。再定義 target 屬性，值為 _blank。保存。
回到瀏覽器，刷新。填寫姓名和郵箱，再 "提交"一下，我們發現百度首頁在新的窗口里打開了，我們自己的頁面沒有刷新，內容也會保留。
繼續學習第二類按鈕：重置按鈕。如果用戶想擦除已填寫的表單內容，或者想獲得一個空表單，重新填寫內容，點擊這個重置按鈕就可以實現了。
重置按鈕定義的語法是，將 input 控件的 type 屬性值定義為 reset。reset 意為重置，復位。
回到編輯器，在提交按鈕后面再定義一個input標簽，type 屬性值為 reset。保存。
回到瀏覽器，刷新，頁面表單多了一個重置按鈕。輸入姓名和郵箱的測試數據，點擊 "重置" 按鈕，我們輸入的數據就被清空了。
接下來學習第三類按鈕：普通按鈕。顧名思義，一個普通按鈕，沒有任何的功能。
普通按鈕定義的語法是，將 input 控件的 type 屬性值定義為 button。button 就是按鈕的意思
回到編輯器，再定義一個input標簽，type 屬性值為 button。保存。
回到瀏覽器，刷新，頁面中多了一個沒有名字的按鈕，我們可以給按鈕起個名字。
返回編輯器，給普通按鈕的 input 控件再定義一個 value 屬性，賦值為"普通按鈕"。保存。
回到瀏覽器，刷新，按鈕有了名字，我們輸入一些測試數據，點擊普通按鈕，沒有任何功能。
受此啟發，我們能不能給提交和重置按鈕起個別名呢？
返回編輯器，給提交按鈕再定義一個value屬性，值為 "注冊"；給重置按鈕也定義一個value屬性，值為 "危險，別點我"。
回到瀏覽器，刷新，按鈕的名字被修改了。填寫一些測試數據，點擊 "重置"，功能依然在。
這節課，提交、重置和普通三類按鈕就講完了，大家趕緊自己練習一下吧。
文章配套視頻鏈接「鏈接」
PowerModeInput 可以讓你的文本輸入框更引人注目。
地址:https://github.com/lindelof/power-mode-input
簡單的樣式和效果，可增強文本輸入交互。
地址:https://github.com/codrops/TextInputEffects
一個簡單而強大的原生javascript插件，具有很酷的打字機效果。
地址:https://github.com/tameemsafi/typewriterjs
輕量級 $.Hypertext.Typewriter
地址: https://github.com/mntn-dev/t.js
ShuffleText 是一款純js文字洗牌式切換特效插件。該插件在鼠標滑過指定的文本時，文字會不停的逐個進行翻轉，類似洗牌效果，非常炫酷。
地址: https://github.com/ics-ikeda/shuffle-text
適用于 react 的打字機的效果
地址：https://github.com/ianbjorndilling/react-typewriter
T-Writer.js 用于實現原生打字機效果，沒有任何依賴。
地址: https://github.com/ChrisCavs/t-writer.js
模擬在DOM元素上的打字機效果。
地址：https://github.com/yuanqing/malarkey
TinyTyper 一個微小的庫用于在一段指定的文本元素上創建打字效果。
地址：https://github.com/lourenc/tinytyper
https://klxxcdn.oss-cn-hangzhou.aliyuncs.com/histudy/hrm/media/66/8MTkbe9Crg.gif
typer.js插件是一個非常有意思的jQuery插件，實現一個一個字輸出，類似打字的效果。typer.js是一個比較小的插件，依賴于jQuery。typer.js使用起來也比較方便，允許設置打字時間間隔，循環輸出，清除打字效果時間等。
Phaser.io Javascript庫的打字機效果包裝器。
地址: https://github.com/netgfx/Phaser-typewriter
ElasticProgress 可以創建一個有彈力效果的進度條。
地址: https://github.com/codrops/ElasticProgress
https://klxxcdn.oss-cn-hangzhou.aliyuncs.com/histudy/hrm/media/66/1sfasfsafasf564safsaf6saf1as.gif
爆發粒子特效按鈕組件。
地址: https://github.com/dreambo8563/vue-particle-effect-buttons
NativeScript插件，可為按鈕添加發光效果。
地址:https://github.com/hamdiwanis/nativescript-shine-button
讓按鈕有一個水平視差效果。
地址: https://github.com/venits/react-parallax-button
具有Material Theme波紋效果的按鈕。
地址: https://github.com/mig82/RippleButton
css-ripple-effect 是一款使用純CSS3制作的炫酷扁平風格按鈕點擊波特效。該效果是仿照Android系統的Material design風格點擊波來制作的。
地址:https://github.com/mladenplavsic/css-ripple-effect
人才們的 【三連】 就是小智不斷分享的最大動力，如果本篇博客有任何錯誤和建議，歡迎人才們留言，最后，謝謝大家的觀看。
作者：lindelof 譯者：前端小智 來源:github
原文：https://github.com/lindelof/awesome-web-effect
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
