HTML表單: HTML表單用於搜集不同類型的輸入 標簽元素: HTML表單用於收集用戶輸入; form元素定義HTML表單 屬性列表: | 屬性 | 描述 | | | | | accept charset | 規定在被提交表單中使用的字元集(預設:頁面字元集)。 | | action | 規定向何 ...
HTML表單:
- HTML表單用於搜集不同類型的輸入
< form >標簽元素:
HTML表單用於收集用戶輸入;
form元素定義HTML表單
< form >屬性列表:
屬性 | 描述 |
---|---|
accept-charset | 規定在被提交表單中使用的字元集(預設:頁面字元集)。 |
action | 規定向何處提交表單的地址(URL)(提交頁面)。 |
autocomplete | 規定瀏覽器應該自動完成表單(預設:開啟)。 |
enctype | 規定被提交數據的編碼(預設:url-encoded)。 |
method | 規定在提交表單時所用的 HTTP 方法(預設:GET)。 |
name | 規定識別表單的名稱(對於 DOM 使用:document.forms.name)。 |
novalidate | 規定瀏覽器不驗證表單。 |
target | 規定 action 屬性中地址的目標(預設:_self)。 |
表單元素:
表單元素指的是不同類型的 input元素、覆選框、單選按鈕、提交按鈕……等
< input >標簽:
< input >標簽元素最重要的是 表單元素,標簽根據不同的 type 屬性,有多態性。
- 文本輸入:
<input type="text" />
- 定義單選按鈕輸入
<input type="radio" />
- 定義提交按鈕
<input type="submit" />
action屬性:
- 定義在提交表單是執行的動作
向伺服器提交表單的通常做法是提交按鈕(submit)
action屬性可以指定特定的腳本來處理被提交的表單數據
<form action="*.php[/.jsp/.asp]"></form>
method屬性:
- 定義提交表單時候所用的HTTP方法(GET或POST)
<form action="*.php[/.jsp/.asp]" method="GEP[/POST]"></form>
使用技巧:
如果表單提交是被動的(比如搜索查詢),並且沒有重要數據。
使用GET時,表單提交的數據在URL中是可見的
反之——
表單是動態更新或者密碼內容的,POST更加適合,而且提交的數據在URL不可見
name屬性:
如果希望提交的表單數據可以被伺服器獲取到或者看見,就需要給表單元素添加一個name屬性(在腳本中會按照欄位接收數據信息)
< fieldset >標簽:組合表單元素
- < fieldset >組合表單中的相關數據
- < legend >元素為< fieldset >元素定義標題
<!DOCTYPE html>
<html>
<head>
<title>用戶</title>
</head>
<body>
<form method="POST">
<fieldset>
<legend>用戶註冊</legend>
用戶名:<br />
<input type="text" name="name" />
<br />
密 碼:<br />
<input type="text" name="passworld" />
<br />
<input type="submit" value="確定" name="input" />
</fieldset>
</form>
</body>
</html>
< select >標簽:下拉列表
< select > 標簽是開始
< option > 元素定義可選擇的選項
<select>
<option value="中國">中國</option>
<option value="美國">美國</option>
</select>
< textarea>標簽:文本域
定義一個文本域(多行輸入欄位)
rows / cols:文本域大小(px)
< button >標簽:按鈕
- 定義一個可點擊的元素按鈕
HTML輸入:
type屬性(輸入類型):
值 | 描述 |
---|---|
button | 定義可點擊按鈕(多數情況下,用於通過 JavaScript 啟動腳本)。 |
checkbox | 定義覆選框。 |
file | 定義輸入欄位和 "瀏覽"按鈕,供文件上傳。 |
hidden | 定義隱藏的輸入欄位。 |
image | 定義圖像形式的提交按鈕。 |
password | 定義密碼欄位。該欄位中的字元被掩碼。 |
radio | 定義單選按鈕。 |
reset | 定義重置按鈕。重置按鈕會清除表單中的所有數據。 |
submit | 定義提交按鈕。提交按鈕會把表單數據發送到伺服器。 |
text | 定義單行的輸入欄位,用戶可在其中輸入文本。預設寬度為 20 個字元。 |
number | 用於包含數字值的輸入欄位 |
date | 定義日期欄位的輸入 |
color | 定義顏色的輸入 |
range | 定義一個範圍的 滑塊控制項 |
month | 定義日期欄位輸入或選擇 |
輸入限制(屬性):
屬性 | 描述 |
---|---|
disabled | 規定輸入欄位應該被禁用。 |
max | 規定輸入欄位的最大值。 |
maxlength | 規定輸入欄位的最大字元數。 |
min | 規定輸入欄位的最小值。 |
pattern | 規定通過其檢查輸入值的正則表達式。 |
readonly | 規定輸入欄位為只讀(無法修改)。 |
required | 規定輸入欄位是必需的(必需填寫)。 |
size | 規定輸入欄位的寬度(以字元計)。 |
step | 規定輸入欄位的合法數字間隔。 |
value | 規定輸入欄位的預設值。 |
height | 規定高度(image) |
width | 規定寬度(image) |
HTML圖形:*
HTML多媒體:
視頻格式:
AVI,WMV,MPEG,MOV,Flash(.swf/.flv),MP4……
聲音格式:
MIDI,rm,WAV,MP3
Object 元素:*
object的作用是支持HTML助手(插件)
HTML音頻:
使用< embed >元素標簽:
<embed height="100" width="100" src="/*.mp3" />
使用< object >元素標簽:
- < object tag > 標簽可以定義外部內容的容器
<object height="100" width="100" data="/*.mp3" />
使用 < audio >元素標簽:(HTML5)
<audio control="controls">
<source src="/*.mp3" type="audio/mp3" />
</audio>
HTML視頻:
使用 < embed >元素標簽:
<embed src="/*.mp4" height="200" width="200" />
使用< object >元素標簽:
<object data="/*.mp4" height="200" width="200" />
使用< video >元素標簽:(HTML5)
<video width="300" height="250" controls="controls">
<source src="/*.mp4" type="video/mp4" />
</video>