求一個HTML5 表單的寫法例子

表單是用來獲取用戶輸入的一些數據，最常見的就是注冊，登錄之類的；

創(chuàng)新互聯(lián)專注于企業(yè)網絡營銷推廣、網站重做改版、麻山網站定制設計、自適應品牌網站建設、H5技術、購物商城網站建設、集團公司官網建設、成都外貿網站建設公司、高端網站制作、響應式網頁設計等建站業(yè)務，價格優(yōu)惠性價比高，為麻山等各大城市提供網站開發(fā)制作服務。

首先，打開IDEA軟件，并新建一個工程，建好后，右鍵創(chuàng)建一個html5文件，完成后便完成了最開始的工作；

接著我們先熟悉一些較常用的表單標簽：表單form， ?輸入域input，文本域textarea，按鈕button，域的標題legend，控制標簽label等。我們創(chuàng)建一個form,如圖，輸入一些你想要創(chuàng)建的東西（我演示的僅為用戶密碼）；

打開網頁看效果圖，便是這樣的效果了，擁有了最簡單的帳號密碼；

同時，我們還可以添加一些選擇的元素，如你喜歡什么游戲；

html5本地存儲怎么做，html5本地存儲實例詳解

html5本地存儲實例詳解之創(chuàng)建

1

首先我們新建一個html5的空白文檔，小編這里演示用的是Dreamweaver CS6，當然其他文本編輯器也可以。

2

保存之后開始構建html，我們這里示例用一個文本框兩個按鈕和一個顯示數據的div，如下圖：

3

之后寫js事件，當點擊“保存”的時候，把文本框的內容保存到sessionStorage中，當點擊“顯示”的時候，把保存的數據從sessionStorage中讀取出來顯示在頁面上。

4

完整代碼如下，我們可以在瀏覽器預覽，然后點擊試試效果，可以發(fā)現能夠存儲和顯示。

5

按F12打開控制臺，找到sessionStorage，會發(fā)現其是用鍵值對的方式存儲數據的。

6

localStorage跟sessionStorage類似，只是localStorage只要不刪除就會永久存儲在電腦上，而sessionStorage只要關閉了頁面就沒有了，這里小編就不再演示了。

END

html5本地存儲實例詳解之刪除

html5本地存儲的刪除其實也很簡單，也是打開控制臺找到相應的存儲信息，在上面右擊刪除即可。

點擊刪除之后需要刷新一次頁面就會看到本地存儲的數據已經刪除了。

3

如果用代碼的話，就是.removeItem(key)這個了。

如何區(qū)別html5離線存儲和本地緩存實例詳解

一.離線存儲

有一個web應用有三個文件index.html,a.js,b.css，現在需要把js和css文件緩存起來

1.在index.html里加上html manifest="test.manifest"

2.manifest清單格式如下

復制代碼

CACHE MANIFEST

#上面一句必須

#v1.0.0

#需要緩存的文件

CACHE:

a.js

b.css

#不需要緩存的文件

NETWORK:

*

#無法訪問頁面

FALLBACK:

404.html

復制代碼

3.manifest文件的mime-type必須是 text/cache-manifest類型

注意點：

1.對于每個index.html?id=1或index.html?id=2都會分別緩存index.html頁面，可以通過chrome瀏覽器Resources/Application Cache觀察

2.如果想更新緩存內容，只要修改下manifest文件即可，如改版本號v1.0.1

4.離線存儲如果資源有更新，可以通過如下代碼來監(jiān)聽，但第一次加載還會是原來的版本

復制代碼

window.applicationCache.addEventListener('updateready',function(e){

if(window.applicationCache.status == window.applicationCache.UPDATEREADY){

window.applicationCache.swapCache();

if(confirm("loding new?")){

window.location.reload()

}

}

},false)

復制代碼

二.本地緩存

復制代碼

localStorage.setItem("key","value")

localStorage.getItem("key","value")

localStorage.removeItem("key")

localStorage.clear()

復制代碼

1.本地存儲永不過期，除非自己去清除

2.可以通過chrome瀏覽器Resources/Local Storage來查看

3.不同域下就算key相同取不到的值也不同，如localhost和127.0.0.1

HTML5+CSS3小實例：全屏導航欄菜單

HTML5+CSS3實現全屏導航欄菜單，懸停在右上角的小圖標，點擊以圓形擴散的方式綻開全屏導航欄，這種方式的導航欄很吸睛，運用也越來越廣，趕緊學起來呀！

效果：

源碼：

如何用html5開發(fā)wap版實例

下面列舉HTML5適合移動應用開發(fā)的幾大特性：

1.離線緩存為HTML5開發(fā)移動應用提供了基礎

HTML5 Web Storage API可以看做是加強版的cookie，不受數據大小限制，有更好的彈性以及架構，可以將數據寫入到本機的ROM中，還可以在關閉瀏覽器后再次打開時恢復數據，以減少網絡流量。

同時，這個功能算得上是另一個方向的后臺“操作記錄”，而不占用任何后臺資源，減輕設備硬件壓力，增加運行流暢性。

在線app支持邊使用邊下載離線緩存，或者不下載離線緩存；而離線app必須是下載完離線緩存才能使用。

形象點說，cookie就是存了電話和菜單，想吃什么要叫外賣，等多長時間才能吃到就得看交通情況了；離線緩存就是直接在冰箱里存了食物，想吃就能馬上吃到（當然，想吃最新的食物同樣可以打電話預定）。

設計師要知道，什么時候讓用戶下載離線緩存（注意在線和離線app的區(qū)別）。

2.音頻視頻自由嵌入，多媒體形式更為靈活

原生開發(fā)方式對于文字和音視頻混排的多媒體內容處理相對麻煩，需要拆分開文字、圖片、音頻、視頻，解析對應的URL并分別用不同的方式處理。

HTML5在這個方面完全不受限制，可以完全放在一起進行處理。

設計師要知道，如果新聞類、微博類、社交類應用的信息呈現中實現文字與多媒體混排，而不用專門嵌入webview，將是一件多美好的事情，至少現在原生方式實現起來還有困難。

3.地理定位，隨時隨地分享位置

充分發(fā)揮移動設備對定位上的優(yōu)勢，推動LBS應用發(fā)展。

可以綜合使用GPS、wifi、手機等方式讓定位更為精準、靈活。

地理位置定位，讓定位和導航不再專屬導航軟件，地圖也不用下載非常大的地圖包，可以通過緩存來解決，到哪兒下哪兒，更靈活。

設計師要知道，現在嵌入LBS功能的應用越來越多，這也是移動設備與臺式PC相比最大的優(yōu)勢之一，HTML5能把這個優(yōu)勢再度擴大化，好好想想怎么在你設計的應用里用上吧！

4.Canvas繪圖，提升移動平臺的繪圖能力

使用Canvas API可以簡單繪制熱點圖收集用戶體驗資料

支持圖片的移動、旋轉、縮放等常規(guī)編輯

Canvas – 2D的繪圖功能支持

Canvas 3D – 3D的繪圖功能支持

SVG – 向量圖支援

設計師要知道，圖片的移動、旋轉、縮放？那都太基礎了，自己畫都是小case，至于怎么用，好好想想吧！

5.專為移動平臺定制的表單元素

瀏覽器中出現的html5表單元素與對應的鍵盤：

類型 用途 鍵盤

Text 正常輸入內容 標準鍵盤

Tel 電話號碼 數字鍵盤

Email 電子郵件地址文本框 帶有@和.的鍵盤

url 網頁的URL 帶有.com和.的鍵盤

Search 用于搜索引擎，比如在站點頂部顯示的搜索框 標準鍵盤

range 特定值范圍內的數值選擇器，典型的顯示方式是滑動條 滑動條或轉盤

只需要簡單的聲明 input type=”email” 即可完成對不同樣式鍵盤的調用，簡捷方便。

設計師要知道，用的時候記得告訴研發(fā)同事一聲！

HTML5 Canvas中繪制矩形實例

讓我們來看一下Canvas內置的簡單幾何圖形

—

矩形的繪制。在Canvas中，繪制矩形有三種方法：填充(fillRect)、描邊(StrokeRect)以及清除(clearRect)。當然，我們也可以使用“路徑”來描繪包括矩形在內的所有圖形。

以下是上述三種方法的API:

1.fillRect(x,y,width,height)。繪制一個從(x,y)開始，寬度為width，高度為height的實心矩形。

2.strokeRect(x,y,width,height)。繪制一個從(x,y)開始，寬度為width，高度為height的矩形框。該矩形框會根據當前設置的strokeStyle、lineWidth、lineJoin和miterLimit屬性的不同而渲染成不同的樣式。

3.clearRect(x,y,width,height)。清除從(x,y)開始，寬度為width，高度為height的矩形區(qū)域，使之完全透明。

在調用上述方法繪制Canvas之前，我們需要設定填充和描邊的樣式。設定這些樣式最基本的方法是使用24位色(用16進制字符串表示)。以下是一個簡單的例子：

代碼如下:

context.fillStyle

=

"#000000";

context.strokeStyle

=

"#ff00ff";

在下面的例子中，填充色設定為黑色，而描邊色則設定為紫色：

代碼如下:

function

drawScreen()

{

context.fillStyle

=

"#000000";

context.strokeStyle

=

"#ff00ff";

context.lineWidth

=

2;

context.fillRect(10,

10,

40,

40);

context.strokeRect(0,

0,

60,

60);

context.clearRect(20,

20,

20,

20);

}

代碼執(zhí)行結果如下圖所示：

網頁名稱：包含html5的實例的詞條
文章來源：http://m.rwnh.cn/article2/dscoooc.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供品牌網站設計、網站營銷、虛擬主機、網站維護、網站設計、網站收錄

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)