1、CSS設置表單樣式CSS設置表單樣式設置表單樣式主講：毛麗娟CSS設置表單樣式表單輸入類型表單輸入類型-文本輸入框文本輸入框 語法： 姓名： 主要屬性： name：名稱，程序中常會用到。 size：設定此欄位顯示的寬度。 value：預設內容。 align：對齊方式。 maxlength：設定可輸入的最大長度。CSS設置表單樣式表單輸入類型表單輸入類型-單選按鈕單選按鈕 語法案例： 男 女 主要屬性： checked name：需要將一組供選擇的單選框設置為相同的名稱，以保證這一組中只有一個單選按鈕被選中。CSS設置表單樣式表單輸入類型表單輸入類型-復選按鈕復選按鈕 語法： 興趣： 文學 音樂

2、 美術 主要屬性： checked： name：CSS設置表單樣式表單輸入類型表單輸入類型-密碼輸入框密碼輸入框 語法： 密碼： 主要屬性： type：值為“password”時，輸入框內顯示為密碼形式。CSS設置表單樣式表單輸入類型表單輸入類型-按鈕按鈕 語法： 主要屬性： type：設置為“image”時，成為圖像按鈕。 value：設置按鈕上的文字。CSS設置表單樣式表單輸入類型表單輸入類型-多行文本框多行文本框 語法： 主要屬性： cols：定義多行文本框的寬度（字符列數）。 rows：定義多行文本框的高度（行數）。 wrap：定義換行方式，有3種選擇。 off：輸入文字不換行。 vi

3、rtual：輸入文字在屏幕上會自動換行，但是如果訪問者沒有按回車鍵換行，則提交到服務器也視為沒有換行。 physical：輸入文字時會自動換行，提交到服務器時，會將屏幕上的自動換行視為換行效果提交。CSS設置表單樣式表單輸入類型表單輸入類型-列表框列表框1 語法1： Flash Dreamweaver Fireworks Photoshop CSS設置表單樣式表單輸入類型表單輸入類型-列表框列表框2 語法2：列表形式 Flash Dreamweaver Fireworks Photoshop CSS設置表單樣式案例案例-css設置表單樣式設置表單樣式 設計網頁結構如右圖所示CSS設置表單樣式案

4、例案例-HTML代碼參考代碼參考請輸入您的姓名:請選擇你最喜歡的顏色:紅綠藍黃青紫請問你的性別:男女你喜歡做些什么:看書上網睡覺我要留言:CSS設置表單樣式案例案例-css設置表單樣式設置表單樣式 利用css樣式實現右圖風格。CSS設置表單樣式案例案例-css代碼參考代碼參考form border: 1px dotted #AAAAAA;padding: 3px 6px 3px 6px;margin:0px;font:14px Arial;input color: #00008B;background-color: #ADD8E6;border: 1px solid #00008B;selec

5、t width: 80px;color: #00008B;background-color: #ADD8E6;border: 1px solid #00008B;textarea width: 200px;height: 40px;color: #00008B;background-color: #ADD8E6;border: 1px solid #00008B;ps：此樣式代碼在：此樣式代碼在IE和和FF中瀏覽有較大的中瀏覽有較大的效果差異。效果差異。CSS設置表單樣式案例案例-修改瀏覽器差異的修改瀏覽器差異的css formborder: 1px dotted #AAAAAA;paddin

6、g: 1px 6px 1px 6px;margin:0px;font:14px Arial; input/* 所有input標記 */color: #00008B; input.txt/* 文本框單獨設置 */border: 1px inset #00008B;background-color: #ADD8E6; CSS設置表單樣式案例案例-修改瀏覽器差異的修改瀏覽器差異的cssinput.btn/* 按鈕單獨設置 */color: #00008B;background-color: #ADD8E6;border: 1px outset #00008B;padding: 1px 2px 1px

7、 2px;selectwidth: 80px;color: #00008B;background-color: #ADD8E6;border: 1px solid #00008B;textareawidth: 200px;height: 40px;color: #00008B;background-color: #ADD8E6;border: 1px inset #00008B;CSS設置表單樣式案例案例-多彩的下拉菜單多彩的下拉菜單 css不僅可以控制下拉菜單的整體字體和邊框格式，還可以進一步的對下拉菜單的每一個選項設置各自的背景色和文字顏色。CSS設置表單樣式案例案例-HTML結構代碼結構代碼請選擇一種顏色 選擇 藍色紅色綠色黃色青色紫色CSS設置表單樣式案例案例-”數獨數獨”游戲網頁游戲網頁 “數獨”是一種益智類的數字游戲，相傳起源于拉丁方陣。 游戲規則是：在99的大九宮格中有9個33的小九宮格,根據格子里已有的數字,運用邏輯和推理的方法,在其他的空格上填入1到9的數字,要保證每個數字在每個小九宮格內不能重復,同