DW_PHP_AJAX_CH3 表單的設計與規劃_(2)實作表單_布置文字欄位

文字欄位依其類型（type屬性）的設定, 可分為單行、多行、密碼等三種。在本範例中將加入「姓名」、「信箱」這兩個單行文字欄位。

1. 將游標移到表單範圍的紅色虛框中, 然後按下工具列上的文字欄位工具按鈕, 此時會出現下圖的屬性對話框，按下屬性對話框中的「確定」按鈕之後, 將會在表單中加入如下圖的表單欄位與欄位說明標籤：

!!!TIP

HTML中的label標籤是以成對的方式出現, 以<label>為起始, </label>為終止, 兩者之間的內容就是要顯示的文字。label標籤的for屬性用於對應Label標籤要綁定的HTML元素, 如果點擊在label標籤內的文字, 就會觸發其for屬性所對應的HTML元素, 以本例來說, 當使用者點選label標籤內的文字（姓名：）時, 瀏覽器就會自動將焦點轉到和標籤的for屬性所對應的文字欄位「aName」上。

 2. 將游標置於表單範圍內的文字欄位「aName」後方, 按下Shift+Enter鍵進行斷行, 依上述步驟加入ID為「Email」、標籤為「信箱」的文字欄位：

針對每個文字欄位, 可在屬性面板中對其進行個別的屬性設定：

• 文字欄位：指定欄位的名稱。
• 字元寬度：欄位的外觀寬度, 即欄位中可顯現的字元數。
• 類型：可單選為單行、多行，以及密碼欄位, 若指定為在密碼, 則欄位中輸入的文字會以星號或項目符號來取代。
• 最多字元數：該欄位所允許的最大字元輸入數, 
• 初始值：指定第一次載入表單時, 要在欄位中顯示的值。例如, 藉由包含一個備註或範例值, 指示使用者在欄位中輸入資訊。
• 類別：讓您對物件套用 CSS 規則。
• 停用：停用欄位。
• 唯讀：使欄位成為唯讀文字區域。