DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML5詳解 >> HTML5學習筆記——form
HTML5學習筆記——form
編輯:HTML5詳解     

1、form屬性

在HTML4中,表單內的從屬元素必須書寫在表單內部,但是在Html5中,可以把他們書寫在頁面上任何地方,然後給元素制定一個form屬性,屬性值為該表單單位的id,這樣就可以聲明該元素從屬於指定表單了。

 
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>form屬性</title>
</head>
<body>
<form action="" id="testform">
<input type="text" name="" />
</form>
<textarea form="testform" name="" cols="30" rows="10"></textarea>
</body>
</Html>

input元素從屬於表單,它呗書寫在表單內部,用不著再對它制定form屬性。textarea元素呗書寫在表單之外,但它從屬於表單,所以表單的id制定給textareea元素的form屬性。

這樣做的好處是當需要給頁面中的元素添加樣式時可以更方便地添加,因為它們不是被分散在各表單之內的了。

2、forMaction屬性

在HTML4中,一個表單內的所有元素都只有通過表單的action屬性統一提交到另一個頁面,而在Html5中可以給所有的提交按鈕,諸如<input type=”submit” value=”" />、<input type=”image” src=”" alt=”" />、<button type=”submit”></button>都增加不同的forMaction屬性,使得點擊不同的按鈕,可以將表單提交到不同的頁面。

 
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>formaction屬性</title>
</head>
<body>
<form action="serve.php" id="testrorm">
<input type="submit" value="v1" name="s1" formaction="s1.php" />提交到S1
<input type="submit" value="v2" name="s1" formaction="s2.php" />提交到S2
<input type="submit" value="v3" name="s1" forMaction="s3.PHP" />提交到S3
</form>
</body>
</Html>

3、formmethod屬性

在HTML4中,一個表單內只有一個action屬性來對表單內所有元素統一指定提交頁面,所以每個表單也只有一個method屬性來指統一指定提交方法。在Html5中,可以使用forMaction屬性來對每個表單元素分別指定不同的提交頁面,同時也可以使用formmethod屬性來對每個表單元素分別指定不同的提交方法。

 
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>formmethod屬性</title>
</head>
<body>
<form action="serve.php" id="testrorm">
<input type="submit" value="v1" name="s1" formaction="s1.php" formtmehod="get" />提交到S1
<input type="submit" value="v2" name="s1" forMaction="s2.PHP" formtmehod="post" />提交到S2
<input type="submit" />
</form>
</body>
</Html>

4、placeholder屬性

placeholder是指當文本框(input type=”text” 或 textarea)處於未輸入狀態並且未獲取焦點時,模糊顯示輸入提示文字。
實現方法非常簡單,只要加上placeholder屬性,然後制定提示文字就可以了。

 
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>placeholder屬性</title>
</head>
<body>
<input type="text" placeholder="默認文字" />
</body>
</Html>

5、autofocus屬性

給文本框,選擇框或按鈕控件加上該屬性。當頁面加載時,該控件自動獲取光標焦點。目前為止要做到這一點需要使用JavaScript,譬如“control.focus()”。

 
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>autofocus屬性</title>
</head>
<body>
<form action="serve.PHP" id="testrorm">
<input type="text" autofocus />
</form>
</body>
</Html>

6、list屬性

在Html5中,給單行文本框(input type=”text”)增加了一個list屬性,該屬性的值為某個detalist元素的id。detalist元素的Html5中新增的元素,該元素類似於選擇框(select),但是當用戶想要設定的值不在選擇列表之內時,允許其自行輸入。該元素本身並不顯示,而是當文本框獲得焦點時以提示輸入的方式顯示。為了避免在沒有支持該元素的浏覽器上出現顯示錯誤,可以用CSS等將它設置為不顯示。
從實用角度來說,請不要隨便濫用該屬性。強烈建議只有當一個頁面是以使用某個控件為主要目的時,才對該控件使用autofocus屬性,譬如搜索頁面中搜索文本框。

 
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>list屬性</title>
</head>
<body>
text:<input type="text" name="btcss" list="btcss" />
<!-- 使用style="display:none;"將datalist元素設為不顯示 -->
<datalist id="btcss" style="display: none;">
<option value="btcss1">btcss1</option>
<option value="btcss2">btcss2</option>
<option value="btcss3">btCSS3</option>
</datalist>
</body>
</Html>

為什麼沒有把input元素與datalist元素結合為一個元素,像其他語言中的可輸入下拉框那樣?這是基於兼容性的考慮——在不支持Html5的浏覽器中,可以忽略datalist元素,以便正常輸入以及用腳本編程的方式對input元素執行其他操作。

7、autocomplete屬性

輔助輸入所用的自動完成功能,是一個節省輸入時間,同時也十分方便的功能。在Html5之前,因為誰都可以看見輸入的值,所以存在圈圈隱患,但只要使用autocomplete屬性,安全性就可以得到很好的控制。

對於autocomplete屬性,可以制定“on”、“off”與“”(不指定)這三種值。不指定時,使用浏覽器的默認值(取決於各浏覽器的決定)。把該屬性設為on時,可以顯示指定候補輸入的數據列表。使用datalist元素與list屬性提供候補輸入的數據列表,自動完成時,可以將該datalist元素中的數據作為候補輸入的數據在文本框中自動顯示。

 
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>autocomplete屬性</title>
</head>
<body>
text1:<input type="text" name="btcss" list="btcss" />
text2:<input type="text" name="btcss" autocomplete="on" list="btcss" />
<!-- 使用style="display:none;"將datalist元素設為不顯示 -->
<datalist id="btcss" style="display: none;">
<option value="btcss1">btcss1</option>
<option value="btcss2">btcss2</option>
<option value="btcss3">btCSS3</option>
</datalist>
</body>
</Html>
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved