整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
動手封裝。前兩天學習了一個新的事件animationEnd，一下子解決了我很多痛點。最近會陸續封裝一下移動端和pc端用到的小demo，歡迎一起討論。
效果如下：在輸入框輸入文字按“確定”按鈕就彈出輸入的消息提示
實現代碼：
html:
css:
js:
、表單標簽Form
1. 什么是表單
表單在網頁中負責數據采集功能的。表單是有3部分組成：
（1）表單標簽 <form></form>
（2）表單域
（3）表單按鈕
2. Form標簽、
語法格式：
<form action=”url” method=”get|post”>
</form>
lt;form></form>標記新增屬性
required 規定必需在提交之前填寫輸入字段。
<form name="frm">
姓名：<input type="text" name="username" required="required"></br>
<input type="submit" name="submit" value="提交">
</form>placeholder 默認顯示內容
實例：帶有 placeholder 文本的搜索字段：
<form action="demo_form.asp" method="get">
<input type="search" name="user_search" placeholder="請輸入默認值" />
<input type="submit" />
</form>autocomplete 用來設置input組件是否使用自動完成功能,HTML5新增的屬性值有on(使用)或off(不使用)兩種。
input的屬性autocomplete默認為on,其含義代表是否讓瀏覽器自動記錄之前輸入的值,很多時候，
需要對客戶的資料進行保密,防止瀏覽器軟件或者惡意插件獲取到,可以在input中加入autocomplete="off" 來關閉記錄
系統需要保密的情況下可以使用此參數，該屬性也可作用于表單元素
實例：
<form action="demo_form.asp" method="get" autocomplete="on">
First name:<input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
E-mail: <input type="email" name="email" autocomplete="off" /><br />
<input type="submit" />
</form>novalidate 用來設置是否在發送表單時驗證表單，如需要驗證則填入novalidate即可。
novalidate也是HTML5新增的屬性,IE并不支持novalidate屬性
HTML5新的input類型(目前IE都不支持,Opera和Chrome對新的輸入類型的支持最好,即使不被支持,仍然可以顯示為常規的文本域。)
input類型 - email
email類型用于應該包含 e-mail 地址的輸入域。
在提交表單時，會自動驗證 email 域的值。
E-mail: <input type="email" name="user_email" />input類型 - url
url類型用于應該包含 URL 地址的輸入域。
在提交表單時，會自動驗證 url 域的值。
Homepage: <input type="url" name="user_url" />input類型 - number
number類型用于應該包含數值的輸入域。
您還能夠設定對所接受的數字的限定：
max number 規定允許的最大值
min number 規定允許的最小值
step number 規定合法的數字間隔(如果 step="3"，則合法的數是 -3,0,3,6 等)
value number 規定默認值
Points: <input type="number" name="points" min="1" max="10" />
input類型 - range
range類型用于應該包含一定范圍內數字值的輸入域。
range類型顯示為滑動條。
您還能夠設定對所接受的數字的限定：
max number 規定允許的最大值
min number 規定允許的最小值
step number 規定合法的數字間隔(如果 step="3"，則合法的數是 -3,0,3,6 等)
value number 規定默認值
<input type="range" name="points" min="1" max="10" />input類型 - Date Pickers(日期選擇器)
HTML5擁有多個可供選取日期和時間的新輸入類型：
date - 選取日、月、年
month - 選取月、年
week - 選取周和年
time - 選取時間(小時和分鐘)
datetime - 選取時間、日、月、年(UTC 時間)
datetime-local - 選取時間、日、月、年(本地時間)
Date: <input type="date" name="user_date" />input類型 - search
search類型用于搜索域，比如站點搜索或 Google 搜索。
search域顯示為常規的文本域。
Search: <input type="search" name="user_color" />input類型 - color
color輸入類型用于規定顏色。
該輸入類型允許您從拾色器中選取顏色：
Color: <input type="color" name="user_color" />HTML5的新的表單元素：(目前IE都不支持)
datalist元素
datalist元素規定輸入域的選項列表,功能類似于自造詞列表。
列表是通過datalist內的option元素創建的。
如需把datalist綁定到輸入域，請用輸入域的 list 屬性引用 datalist 的 id：
實例1：
<input list="browsers"/>
<datalist id="browsers">
<option value="Internet Explorer"></option>
<option value="Firefox"></option>
<option value="Chrome"></option>
<option value="Opera"></option>
<option value="Safari"></option>
</datalist>實例2：
Webpage: <input type="url" list="url_list" name="link" /> <!--對輸入框進行限制-->
<datalist id="url_list">
<option label="W3School" value="http://www.W3School.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>提示：option元素永遠都要設置 value 屬性。
keygen元素
keygen元素的作用是提供一種驗證用戶的可靠方法。
keygen元素是密鑰對生成器(key-pair generator)。當提交表單時，會生成兩個鍵，一個是私鑰，一個公鑰。
私鑰(private key)存儲于客戶端，公鑰(public key)則被發送到服務器。公鑰可用于之后驗證用戶的客戶端證書(client certificate)。
目前，瀏覽器對此元素的糟糕的支持度不足以使其成為一種有用的安全標準。
實例
<form action="demo_form.asp" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>output元素
output元素用于不同類型的輸出，比如計算或腳本輸出：
實例
<output id="result" onforminput="resCalc()"></output>表單元素新增的屬性值
文本框text
autofocus屬性 自動獲得焦點,也就是指加載網頁之后,自動將光標(插入點)移到此文本框內。
多行文本框textarea
warp屬性在HTML5屬性值有：
soft 當在表單中提交時,textarea 中的文本不換行。默認值。
hard 當在表單中提交時,textarea 中的文本換行(包含換行符)。當使用 "hard" 時，必須規定 cols 屬性。
wrap屬性在HTML4屬性值有：
off(也可寫成wrap)：不換行，當輸入的內容超出文本區域右邊界時，文本將向左滾動，并顯示滾動條。
如果希望換行，必須手動輸入回車鍵才能將插入點移到下一行；
virtual：文本能夠自動換行，當數據提交到服務器被處理時，換行符不會隨輸入文本一同提交到服務器；(默認值)
physical：文本能夠自動換行，當數據提交到服務器被處理時，換行符將會隨輸入的文本一同被提交到服務器進行處理；
表單分組fieldset
fieldset元素可將表單內的相關元素分組。
HTML5新增的屬性
disabled disabled 規定應該禁用fieldset。
form form_id 規定fieldset所屬的一個或多個表單。
name value 規定fieldset的名稱。
實例
組合表單中的相關元素：
<form>
<fieldset disabled="disabled" form="formid" name="person">
<legend>health information</legend>
height: <input type="text" />
weight: <input type="text" />
</fieldset>
</form>legend元素為fieldset元素定義標題(caption)。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
