TML5 新的表單元素

HTML5 有以下新的表單元素:

• <datalist>

• <keygen>

• <output>

注意:不是所有的瀏覽器都支持HTML5 新的表單元素，但是你可以在使用它們，即使瀏覽器不支持表單屬性，仍然可以顯示為常規的表單元素。

HTML5 <datalist> 元素

<datalist> 元素規定輸入域的選項列表。

<datalist> 屬性規定 form 或 input 域應該擁有自動完成功能。當用戶在自動完成域中開始輸入時，瀏覽器應該在該域中顯示填寫的選項：

使用 <input> 元素的列表屬性與 <datalist> 元素綁定.

實例

<input> 元素使用<datalist>預定義值:

<inputlist="browsers"><datalistid="browsers"><optionvalue="Internet Explorer"><optionvalue="Firefox"><optionvalue="Chrome"><optionvalue="Opera"><optionvalue="Safari"></datalist>

HTML5 <keygen> 元素

<keygen> 元素的作用是提供一種驗證用戶的可靠方法。

<keygen>標簽規定用于表單的密鑰對生成器字段。

當提交表單時，會生成兩個鍵，一個是私鑰，一個公鑰。

私鑰（private key）存儲于客戶端，公鑰（public key）則被發送到服務器。公鑰可用于之后驗證用戶的客戶端證書（client certificate）。

實例

帶有keygen字段的表單:

<formaction="demo_keygen.asp"method="get">用戶名: <inputtype="text"name="usr_name">加密: <keygenname="security"><inputtype="submit"></form>

嘗試一下 ?

HTML5 <output> 元素

<output> 元素用于不同類型的輸出，比如計算或腳本輸出：

實例

將計算結果顯示在 <output> 元素:

<formoninput="x.value=parseInt(a.value)+parseInt(b.value)">0<inputtype="range"id="a"value="50">100 +<inputtype="number"id="b"value="50">=<outputname="x"for="a b"></output></form>

HTML5 新表單元素

如您還有不明白的可以在下面與我留言或是與我探討QQ群{{308855039，我們一起飛！

TML5 Forms

HTML5 brings many features and improvements to web form creation. There are new attributes and input types that were introduced to help create better experiences for web users.

Form creation is done in HTML5 the same way as it was in HTML4:

HTML5為Web表單創建帶來了許多功能和改進。 引入了新的屬性和輸入類型，以幫助為網絡用戶創造更好的體驗。

HTML中的表單創建方式與HTML4中一樣：

1 新屬性 New Attributes

HTML5 has introduced a new attribute called placeholder. On <input> and <textarea> elements, this attribute provides a hint to the user of what information can be entered into the field.

HTML5引入了一個名為placeholder的新屬性。 在<input>和<textarea>元素上，此屬性向用戶提供可以在該字段中輸入哪些信息的提示。

The autofocus attribute makes the desired input focus when the form loads:

2 Forms with Required Fields

The "required" attribute is used to make the input elements required.

The form will not be submitted without filling in the required fields.

The autocomplete attribute specifies whether a form or input field should have autocomplete turned on or off.When autocomplete is on, the browser automatically complete values based on values that the user has entered before.

autocomplete屬性指定表單或輸入字段是否應該啟用或禁用自動完成。

當自動填充開啟時，瀏覽器會根據用戶之前輸入的值自動完成值。

HTML5添加了幾種新的輸入類型：- color- date- datetime- datetime-local- email- month- number- range- search- tel- time- url- weekNew input attributes in HTML5:- autofocus- form- formaction- formenctype- formmethod- formnovalidate- formtarget- height and width- list- min and max- multiple- pattern (regexp)- placeholder- required- step

3 搜索框 Creating a Search Box

Search Options

The <datalist> tag can be used to define a list of pre-defined options for the search field:

<datalist>標簽可用于定義搜索字段的預定義選項列表：

<option> defines the options in a drop-down list for the user to select. The ID of the datalist element must match with the list attribute of the input box.

<option>在用戶選擇的下拉列表中定義選項。

datalist元素的ID必須與輸入框的list屬性相匹配。

Creating More Fields

Some other new input types include email, url, and tel:

These are especially useful when opening a page on a modern mobile device, which recognizes the input types and opens a corresponding keyboard matching the field's type:

當在現代移動設備上打開頁面時，這些功能特別有用，它識別輸入類型并打開與字段類型匹配的相應鍵盤：

These new types make it easier to structure and validate HTML forms.

這些新類型使得HTML表單更易于構造和驗證。

html區塊

●區塊元素

大多數html元素被定義為塊級元素或內聯元素.

塊級元素在瀏覽器顯示時,通常以新行來開始(和結束)

例如:<h1>,<p>,<ul>,<table>,<div>等

●內聯元素

內聯元素在顯示時通常不會以新行開始

例如:<b>,<td>,<a>,<img>等

●div元素

html<div>元素是塊級元素,它可用于組合其他html元素的容器.

<div>元素沒有特定的含義.除此之外,由于它屬于塊級元素,瀏覽器會在其前后顯示折行.

如果與css一同使用,<div>元素可用于對大的內容塊設置樣式屬性.

●<span>元素

html<span>元素是內聯元素,可用作文本的容器.

<span>元素也沒有特定的含義.

當與css一同使用時,<span>元素可用于為部分文本設置樣式屬性.

二 html表單

html表單用于搜集不同類型的用戶輸入.

<form>標簽用于創建供用戶輸入的html表單.

<form>

...

</form>

使用action屬性規定:當提交表單時,向何處發送表單數據.

<form action="url">

</form>

method屬性

method屬性指定在提交表單時使用的http方法:get或post

下面是兩個示例:

<form action="url" method="get">

<form action="url" method="post">

提示:

當你使用get時,表單數據將在頁面地址中使用.

如果表單正在更新數據或使用敏感信息(密碼),請使用post.post提供更好的安全性,因為提交的數據不會再頁面地址中顯示.

name屬性

name屬性指定表單的名稱

要接手用戶的輸入,你需要相應的表單元素,如文本字段.而輸入類型是由類型屬性(type)定義的,大多數經常被用到的輸入類型有:text,password,radio,checkbox,submit等

下面是一個請求用戶名和密碼的表單例子:

<form>

<input type="text" name="username" /><br/>

<input type="password" name="password" />

</form>

單選框

<input type="radio">標簽定義了表單單選框選項

下面是一個單選框的例子:

<form>

<input type="radio" name="sex" value="male">Male<br>

<input type="radio" name="sex" value="female">Female

</form>

運行效果如下:

注意:沒有結束標簽,也能正常顯示,但是有時候會出現意想不到的情況.所以建議還是要加上結束標簽.

復選框

<input type="checkbox">定義了復選框,用戶需要從若干給定的選擇中選取一個或若干選項.

下面是一個復選框的例子:

<form>

<input type="checkbox" name="vehicle" value="Bike">I have a bike<br/>

<input type="checkbox" name="vehicle" value="Car">I have a Car

</form>

運行效果如下:

提交按鈕將表單提交到其action屬性:

<input type="submit" value="Submit">

運行效果如下:

表單提交后,應該使用服務器端語言(如php)進行數據處理.當完成html和css課程后,你可以試著學習php課程.

三 html顏色

html顏色由一個十六進制符號來定義,這個符號由紅色,綠色和藍色的值組成(rgb)

rgb顏色的最小值是0(十六進制:#000).最大值是255(十六進制:#FFF)

四 html框架

通過使用框架,你可以在同一個瀏覽器窗口中顯示不止一個頁面

<iframe>標簽規定一個內聯框架

一個內聯框架被用來在當前html文檔中嵌入另一個文檔

標記一個內聯框架:

<iframe src="url"></iframe>

提示:你可以把需要的文本放置在<iframe>和</iframe>之間,這樣就可以應對不支持<iframe>的瀏覽器.html5中不支持<frame>標簽.

定義iframe標簽的高度與寬度

height和width屬性用來定義iframe標簽的高度與寬度.

屬性默認以像素為單位,但是你可以指定其按比例顯示(如:80%)

下面是一個例子:

<iframe src="url" width="200" height="200"></iframe>

定義iframe表示是否顯示邊框

frameborder屬性用來定義iframe表示是否顯示邊框

設置屬性值為"0"移除iframe的邊框:

<iframe src="url" frameborder="0"></iframe>