のHighlight 3：表單設計＊CSS設計
by董松喬@2009.03.24
＃表單設計
〈form action=aaa.asp〉
送出至aaa.asp處理
〈input type=text, radio, checkbox, button, reset〉產生
文字方塊(預設)
點選(單選)
核取(多選)
按鈕
重設
示例：
類別
語法
效果
文字方塊
姓名：〈input type=text name=name1〉
姓名：
密碼表單(會以●隱藏)
密碼：〈input type=password〉
密碼：
選項(多選一)
性別：〈input type=radio name=相同 value=m,f checked(指定預設)〉
性別：
男
女
保密
選項(多選)
性別：〈input type=radio name=不同 value=m,f checked(指定預設)〉
性別：
男
女
檢取方塊(多選)
興趣：〈input type=checkbox name=interest checked(指定預設)〉
興趣：
音樂
電影
美食
自訂按鈕
〈input type=button value=自訂〉
按鈕
重置按鈕
〈input type=reset〉
按鈕
〈input type=submit value=GO〉自訂「送出查詢」字樣：GO
按鈕
〈select size=選項數目 multiple(如果允許Ctrl+多選)〉
下拉選單(以選擇「月分」為例)
unknow
Jan
Feb
Mar
Apr
May
Jun
Jul
Aug
Set
Oct
Nov
Dec
〈option〉Jan
〈option〉Feb
〈option〉......
〈/select〉
〈textarea cols=寬度 rows=高度〉
文字輸入區域
Entry
〈/textarea〉
〈/form〉
單一網頁裡最好只有一個form的語法，否則會造成判別困難
＃CSS設計
基本概念
須設定於〈head〉〈/head〉裡
一般是用Dreamweaver來製作
以:取代=
以;區隔不同屬性
自訂樣式必須以.開頭命名
語法
〈head〉
〈style type=text/css〉
p(段落){屬性:屬性值; 屬性2:屬性值2}
h1(標題){屬性:屬性值; 屬性2:屬性值2}
.css1(自訂名稱){屬性:屬性值; 屬性2:屬性值2}
.css2(自訂名稱){font-size:16pt;color:white;background-color:black}
.css3(自訂名稱){font-size:16pt;color:purple;background-color:yellow;border-top-style:inset;border-bottom-style:double;border-left-style:dassed;border-right-style:dotted}
〈/style〉
〈/head〉
使用CSS的語法
使用預設標籤〈p〉、〈h1〉等
在預設標籤中套用自訂CSS〈p class=CSS格式名〉
のHighlight 3：表單設計＊CSS設計のHighlight 3：表單設計＊CSS設計