html表單知識大全

8.1 表單標記

..... .

☟ 表單屬性：

#◆ action：用於指定表單的服務端程式,規定當提交表單時，向何處發送表單資料。 action取值為:第一，一個URL（絕對URL/相對URL），一般指向伺服器端一個程序，程式接受到表單提交過來的資料（即表單元素值）作對應處理。例如：

當使用者提交這個表單時，伺服器將執行名為"reg.ashx"的一般處理程序。第二，使用mailto協定的URL位址，這樣會將表單內容以電子郵件的形式傳送出去。這種情況比較少見的，因為它要求訪客的電腦上安裝和正確設定好了郵件發送程式。第三，空值，如果action為空或不寫，表示提交給目前頁面。

◆ method：此屬性定義瀏覽器將表單中的資料提交給伺服器處理程序的方式。最常用的是get和post，預設時使用 get方法。

get 與 post 有什麼差別呢？

① 資料的查詢：例如瀏覽論壇時，URL一般包含了分類、頁碼數、每頁記錄數等資訊。 get 方式，能一目了然的看到所要查詢的資訊(條件)。 post 因為隱藏掉了這些訊息，不方便進行檢驗查詢條件。

② 敏感資料的提交(安全性)：對一項記錄，進行更改、新增操作時，例如註冊使用者、更改使用者資料等。 get 方式附加在URL上，會洩漏掉敏感的訊息。 post 方式，能隱藏掉敏感的資訊。

demo:

用get方式點選提交後：URL變成：php中文網/ashx/login.ashx?login_username=admin&login_pswd=123456

#用post方式點選提交後：URL變成：php中文網/ashx/login.ashx  ☜可看到只是action指定的URL，參數並沒有附加在URL後面。

③ 大數據文字傳遞：get 雖然方便查詢，但由於是附加在URL上，各瀏覽器對URL也有個長度限制。 IE ：2048字元。 Chrome、FF 好像是 8182字元。 post 好像沒此限制。 

◆ onsubmit：用於指定處理表單的腳本函數

◆ enctype：設定MIME類型，預設值為 application/x-www-form-urlencoded。需要上傳檔案到伺服器時，應將該屬性設為multipart/form-data

#8.2 輸入標記

多數表單元素都可使用input定義,為了標識每一個數據，我們需要為表單元素新增name屬性，所以name為必設屬性，name="域名稱"

##(1)文字方塊text

輸入資訊以明文顯示

用户名: <input type="text" name="user" />

以下是單行文字方塊的主要屬性:

name(名稱，在腳本中可作為識別取得資料) ,maxlength(設定在文字方塊中最多可輸入的字元數)，size(文字方塊長度，大約以位元組為單位)

value：指定文字方塊的預設值，是在瀏覽器第一次顯示表單或使用者點選重設按鈕之後在文字方塊中顯示的值。

readonly：只讀屬性，當設定readonly屬性後，文字方塊可以獲得焦點，但使用者不能改變文字方塊中的value。

disabled：停用，當文字方塊被停用時，不能獲得焦點，當然，使用者也無法改變文字方塊的值。並且在提交表單時，瀏覽器不會將該文字方塊的值傳送給伺服器。

(2)密碼框 password

# 以"*"或"●"符號回顯所輸入的字符，從而起到保密的作用

密码: <input type="password" name="pwd" />

(3)隱藏域hidden

隱藏網域不會被瀏覽者看到，它主要用於在不同頁面傳遞域中所設定的值

<input type="hidden" name="hid" value="域值">

(4)檔案域file

檔案域可以將本機

檔案上傳到伺服器端,檔案上傳沒有預設值,利用此功能時，在form 標籤中要指定method屬性。要把method 指定為post, enctype屬性指定為 multipart/form-data。否則無法上傳檔案內容

<input type="file" name="photo">

(5)單選按鈕radio

在一組選項中進行單一項目選擇，以圓框表示

使用方式：要實現單選功能，name值必須相等。使用name相同的一組單選按鈕，不同radio設定不同的value值，這樣透過取指定name的值就可以知道誰被選中了，不用單獨的判斷。單選按鈕的元素值由value屬性明確設置，表單提交時，選取項目的value和name被打包發送，不明確設定value。

性别: 男:<input type="radio" name="gender" value="female" checked="checked"> <!-- checked表示此项被默认选中,单复选都适用 -->
女:<input type="radio" name="gender" value="male"/>  <!-- 像这些用户不能填写的表单元素，我们需要设置一些值给用户进行选择。 -->

(6)複選按鈕 checkbox

在一组选项中进行多项选择，以一个方框表示

爱好: <input type="checkbox" name="hobby[m1]" value="music"/>音乐
<input type="checkbox" name="hobby[m2]" value="trip"/>旅游
<input type="checkbox" name="hobby[m3]" value="reading"/>阅读

(7)提交按钮 submit

用于将表单内容提交到指定服务器处理程序或指定客户端脚本进行处理

<input type="submit" name="按钮名称" value="按钮显示文本">

普通按钮 button

用于激发提交表单动作，配合JavaScript脚本对表单执行处理操作

<input type="button" value="按钮显示文本" onclick="javascript函数名" name="按钮名称">

重置按钮 reset

用于清楚表单中所输入的内容，将表单内容恢复成默认的状态

<input type="reset" name="按钮名称" value="按钮显示文本">

图像按钮 image

按钮外形以图像表示，功能与提交按钮一样，具有提交表单内容的作用

<input type="image" name="按钮名称" src="图像路径" width="宽" height="高">

(8)选择列表标记

8.1 选择列表：一次可以选择多个列表选项，且一次可以显示1个以上列表选项的选择列表

select 标记用于声明选择列表，option标记用于设置各个选项

<select name="列表名称" size="显示的选项数目(默认为1)" multiple="multiple"><!-- multiple设置列表中的项目可多选 -->
<option value="banana" selected="selected">香蕉</option><!-- selected设置默认选项，可设置多个 -->
<option value="apple">苹果</option>
<option value="watermelon" selected="selected">西瓜</option>
<option value="grape" selected="selected">葡萄</option>
</select>

8.2 下拉列表：一次只能选择一个列表选项，且一次只能显示一个列表选项的选择列表，即size默认1不能设置 size和 multiple属性

<select name="area">
<optgroup label="国外"> <!-- <optgroup> 标签用于组合选项，即给选项分组类别,属性为label,指定选项组合名称 -->
<option value="1">华盛顿</option>
<option value="2">旧金山</option>
</optgroup>
<optgroup label="国内">
<option value="3">广州</option>
<option value="4">湛江</option>
</optgroup>
</select>

(9)文本域标记

一般用于给用户填写备注信息或留言信息的多行多列文本区域

<textarea name="文本区域名称" rows="行数" cols="字符数">
...(此处输入的为默认文本，比如)请在此处输入备注信息
</textarea>

(10) 标签:为 input 元素定义标注（标记）

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

注意："for" 属性可把 label 绑定到另外一个元素。请把 "for" 属性的值设置为相关元素的 id 属性的值。即为下面说的隐式的联系。

隐式和显式的联系：

标记通常以下面两种方式中的一种来和表单控件相联系：将表单控件作为标记标签的内容，这样的就是隐式形式，或者为 标签下的 for 属性命名一个目标表单 id，这样就是显式形式。

显式的联系：

<label for="SSN">Social Security Number:</label>
<input type="text" name="SocSecNum" id="SSN" />

隐式的联系：

<label>Date of Birth: <input type="text" name="DofB" /></label>

(11)fieldset 标签：把表单中元素组合起来，通俗的讲就是把表单围起来，顺便给个标题注释，看起来更规整。

基本语法：

...

...

demo：

<fieldset>
<legend>我最喜爱的:</legend>
<label for="computer">计算机</label> <input type="checkbox" value="1" id="fav" name="fav" />
<label for="trval">旅游</label> <input type="checkbox" value="2" id="fav" name="fav" />
<label for="buy">购物</label> <input type="checkbox" value="3" id="fav" name="fav" />
</fieldset>

以上是html表單知識大全的詳細內容。更多資訊請關注PHP中文網其他相關文章！