HTML5+CSS3+JavaScript網(wǎng)頁開發(fā)實戰(zhàn) 課件 模塊4“加入我們”頁面設計

模塊4“’加入我們’頁面設計”眾所周知，在Web編程中，表單主要用于收集用戶輸入的數(shù)據(jù)。HTML5在保留原有HTML表單控件、屬性的基礎上，大大增強了表單和表單控件的功能。本模塊將使用表單元素配合CSS3選擇器進行“加入我們”頁面的布局與樣式美化?！凹尤胛覀儭表撁娴牟季峙c樣式美化任務11.1表單<form>表單表示文檔中的一個區(qū)域，此區(qū)域包含交互控件，用于向Web服務器提交信息。<form>表單可以包含input元素，如文本框、復選框、單選框、提交按鈕等。<form>表單本身不可見，其常見屬性如表4-1所示。表4-1

<form>表單的常見屬性屬性值描述actionURL處理表單提交的URLautocompleteonoff規(guī)定是否啟用表單的自動完成功能methodgetpost瀏覽器使用何種

HTTP

方式來提交表單target_blank_self_parent_top規(guī)定在何處打開actionURLenctypeapplication/x-www-form-urlencodedmultipart/form-datatext/plainapplication/x-www-form-urlencoded：未指定屬性時的默認值multipart/form-data：當表單包含type=file的input元素時使用此值text/plain：出現(xiàn)在HTML5中，用于調(diào)試1.1表單使用方法如下：<formaction="login.php"method="get"target="_self"><inputtype="text"name="username"><inputtype="password"name="password"><inputtype="submit"></form>1.1表單對于method屬性中get和post的區(qū)別，在HTML的學習中，大家僅需先了解如下幾點即可。在使用get方式時，<form>表單中的數(shù)據(jù)集被附加到action屬性所指定的URL后面進行提交，其生成的URL為“l(fā)ogin.php?username=zhangsan&password=123”。在使用post方式時，<form>表單中的數(shù)據(jù)集被包裝在請求的body中發(fā)送，其生成的URL為“l(fā)ogin.php”。如果使用get方式提交<form>表單中的用戶名和密碼，則顯然是不安全的，因為用戶名和密碼將出現(xiàn)在URL地址上。在對安全性有要求的情況下，應該使用post方式進行提交。瀏覽器對URL地址的長度是有限制的，所以如果需要提交長文本內(nèi)容，則應該使用post方式。1.2表單元素input元素用于為基于Web的表單創(chuàng)建交互式控件，以便接收來自用戶的數(shù)據(jù)。input元素根據(jù)不同的type屬性值，可以呈現(xiàn)為文本域、復選框、單選按鈕、按鈕等。1．text類型<inputtype="text">用于創(chuàng)建基礎的單行文本域。text類型常用屬性如表4-2所示。屬性描述name文本域的名稱value該屬性是一個包含了文本域當前文字信息的字符串placeholder文本域為空時顯示的一個示例值maxlength文本域能接收的最大字符數(shù)minlength文本域能輸入的最小字符數(shù)size一個數(shù)字，指示文本域有多少個字符寬度readonly一個布爾屬性，指示文本域中的內(nèi)容是否應該為只讀。當設置該屬性后，文本域內(nèi)的value值不能被修改autocomplete該屬性表示這個控件的值是否可被瀏覽器自動填充required該屬性表示此值為必填項autofocus該屬性指定加載時控件具有輸入焦點表4-2

text類型常用屬性1.2.1

text類型示例：<inputtype="text"size="20"maxlength="10"placeholder="請輸入您的姓名"requiredautofocus>運行以上代碼后，瀏覽器的顯示效果如圖4-1所示。圖4-1

text類型表單效果1.2.1

text類型大家需要注意以下幾個屬性。（1）value和placeholder。value是文本域中的輸入值，它在表單獲得焦點時仍然存在，并且可被表單提交。我們通常通過讀取value屬性值來獲得用戶輸入的內(nèi)容并提交給服務端處理。placeholder是文本域為空時顯示的一個示例值，它在表單獲得焦點時消失，并且不能作為文本域的value屬性值，也不能被表單提交。placeholder屬性通常用于設置用戶輸入的提示內(nèi)容。1.2.1

text類型（2）size和maxlength。size屬性用于規(guī)定文本域有多少個字符的寬度，而maxlength屬性用于規(guī)定文本域能接收的最大字符數(shù)，如圖4-2所示。<inputtype="text"size="20"maxlength="10">圖4-2

size和maxlength屬性效果1.2.1

text類型（3）autocomplete。autocomplete屬性表示這個控件的值是否可被瀏覽器自動填充，例如：<formaction="user.php"method="get">

城市：<inputtype="text"name="city"autocomplete="off">

姓名：<inputtype="text"name="name"autocomplete="on"><inputtype="submit"></form>1.2.1

text類型如圖4-3所示，當單擊“提交”按鈕后，所有在“姓名”文本框中填寫過的值將被保存，并在下一次填寫時起到啟動提示的作用，如圖4-3所示。圖4-3

autocomplete屬性自動填充效果1.2.1

text類型注意，autocomplete屬性的啟動保存功能必須具備以下3個條件。元素具有name屬性或id屬性。元素處于<form>表單中。表單必須具有提交按鈕。與text類型較為類似的還有password、email、url、tel、number、search等類型。1.2表單元素2．textarea元素textarea元素表示一個多行純文本編輯控件，即多行文本域。當你希望用戶輸入一段相當長的、不限格式的文本時，例如評論或反饋表單中的一段意見時，可以使用該元素。該元素為閉合標簽，不具備value屬性，其常用屬性如表4-2所示。表4-2

textarea元素常用屬性屬性描述name設置多行文本域的名稱placeholder文本域為空時顯示的一個示例值rows設置多行文本域的可見行數(shù)cols設置多行文本域的可見寬度required該屬性表示此值為必填項autofocus該屬性指定加載時控件具有輸入焦點1.2.2

textarea元素例如：圖4-4多行文本域效果<textareacols="35"rows="4"placeholder="請輸入個人介紹"></textarea>運行以上代碼后，瀏覽器的顯示效果如圖4-4所示。拖動多行文本域的右下角，可以任意改變其大小，如果需要禁用拖動縮放功能，則可以對該元素設置“resize:none”樣式。1.2表單元素3．file類型<inputtype="file">可以使用戶選擇一個或多個文件上傳到服務器中。file類型常用屬性如表4-3所示。表4-3

file類型常用屬性屬性描述accept描述允許的文件類型capture捕獲圖像或視頻數(shù)據(jù)的源multiple表示用戶可以選擇多個文件files列出了已選擇的文件autofocus該屬性指定加載時控件具有輸入焦點1.2.3

file類型（1）accept屬性。accept屬性用于描述允許的文件類型。例如，當指定了允許的類型為gif和jpeg時，在選擇文件時只能選擇對應類型的圖片文件，如果沒有指定accept屬性，則可以選擇任意類型的文件，如圖4-5所示。<inputtype="file"accept="image/gif,image/jpeg">圖4-5

accept屬性效果（2）capture屬性。capture屬性指定了捕獲圖像或視頻數(shù)據(jù)的源。在WebApp上指定capture屬性，可以調(diào)用系統(tǒng)默認照相機、攝像機和錄音機功能。capture屬性可以捕獲系統(tǒng)默認設備的媒體信息。捕獲系統(tǒng)照相機：1.2.3

file類型<inputtype="file"accept="image/*"capture="camera">捕獲系統(tǒng)攝像機：<inputtype="file"accept="video/*"capture="camcorder">1.2.3

file類型捕獲系統(tǒng)錄音機：<inputtype="file"accept="audio/*"capture="microphone">圖4-6

multiple屬性效果（3）multiple屬性。multiple屬性表示用戶可以選擇多個文件，在彈出的列表框中進行框選，我們可以上傳多個圖片文件，如圖4-6所示。例如：<inputtype="file"multiple>1.2.3

file類型（4）files屬性。files屬性包括每個已選擇的文件，如果沒有指定multiple屬性，則files屬性中只有一個成員。例如：<inputtype="file"multiple>1.2.3

file類型當在文件域中選擇了多個文件時，可以通過瀏覽器的調(diào)試工具進行分析，在“Elements”窗口中選中表單元素，通過表單元素的“Properties”屬性窗口可以看到，files屬性中包括可供選擇的圖片文件列表。一般而言，該屬性被提供給JavaScript腳本語言調(diào)用，以獲取上傳的文件列表成員信息，如圖4-7所示。圖4-5

accept屬性效果1.2表單元素4．radio類型<inputtype="radio">用于創(chuàng)建單選按鈕。radio類型常用屬性如表4-4所示。表4-4

radio類型常用屬性屬性描述checked設置或返回單選按鈕的狀態(tài)disabled設置或返回是否禁用單選按鈕name設置或返回單選按鈕的名稱value設置或返回單選按鈕的value屬性值autofocus該屬性指定加載時控件具有輸入焦點1.2.4

radio類型如果需要創(chuàng)建一組單選按鈕，則必須為每個表單成員添加一個相同的name屬性值。例如：<inputtype="radio"name="gender">男

<inputtype="radio"name="gender">女圖4-8

radio類型表單效果運行以上代碼后，瀏覽器的顯示效果如圖4-8所示。1.2.4

radio類型如果我們希望在以上案例中通過單擊描述文字也能達到單選按鈕的選擇效果，則可以使用label元素關聯(lián)單選按鈕。將一個label元素和一個input元素匹配在一起，此時需要給input元素一個id屬性。而label元素需要一個for屬性，其值和input元素的id屬性一樣。例如：<inputtype="radio"id="man"name="gender"><labelfor="man">男</label><inputtype="radio"id="woman"name="gender"><labelfor="woman">女</label>1.2表單元素

5．checkbox類型<inputtype="checkbox">用于創(chuàng)建復選框。它具有與radio類型相同的屬性及屬性值。如果需要創(chuàng)建一組復選框，則必須為每個表單成員添加一個相同的name屬性值。例如：<h4>請選擇您喜愛的水果：</h4><inputtype="checkbox"id="banana"name="fruit"><labelfor="banana">香蕉</label><inputtype="checkbox"id="apple"name="fruit"><labelfor="apple">蘋果</label><inputtype="checkbox"id="pear"name="fruit"><labelfor="pear">梨子</label><inputtype="checkbox"id="peach"name="fruit"><labelfor="banana">桃子</label>1.2.5

checkbox類型運行以上代碼后，瀏覽器的顯示效果如圖4-9所示。圖4-9

checkbox類型表單效果1.2表單元素6．button類型<inputtype="button">用于創(chuàng)建一個沒有默認值的可單擊按鈕。如果需要按鈕出現(xiàn)文字標簽，則可以指定value屬性值。例如：<inputtype="button"value="按鈕">運行以上代碼后，瀏覽器的顯示效果如圖4-10所示。圖4-10

button類型表單效果1.2.6

button類型在HTML5中，建議使用<button>標簽創(chuàng)建按鈕，以上代碼可被更改為：<button>按鈕</button>與button類型較為類似的還有submit、reset等類型。1.2表單元素

7．select元素select元素表示一個提供選項的下拉列表控件，例如：<formaction="login.php"method="get"target="_self"><labelfor="chooseFruit">選擇您最喜歡的水果：</label><br><selectname="fruit"id="chooseFruit"><optionvalue="apple">蘋果</option><optionvalue="banana">香蕉</option><optionvalue="pear">梨子</option><optionvalue="peach">桃子</option></select><inputtype="submit"></form>1.2.7

select元素運行以上代碼后，瀏覽器的顯示效果如圖4-11所示。以上代碼展示了select元素的使用方法。select元素可以通過id屬性與label元素關聯(lián)在一起。name屬性表示提交到服務器的相關數(shù)據(jù)點的名字。每個選項由select元素中的一個option元素定義。每個option元素都應該有一個value屬性，其中包含被選中時需要提交到服務器的數(shù)據(jù)值。如果不包含value屬性，則value屬性值默認為元素中的文本。用戶可以在option元素中設置一個selected屬性，以將其設置為頁面加載完成時默認選中的元素。在上述例子中，我們選中了“梨子”選項，單擊“提交”按鈕，表單通過URL地址將數(shù)據(jù)值“pear”提交給了服務器。圖4-11下拉列表控件效果1.2.7

select元素select元素有一些用于控制元素的特有屬性，例如，multiple屬性規(guī)定了能否同時選中多個選項，size屬性規(guī)定了一次性顯示多少個選項。如果下拉列表中的選項較多，那么我們可以通過optgroup元素進行分組。示例：<select><optgrouplabel="福建"><optionvalue="xm">廈門</option><optionvalue="fz">福州</option><optionvalue="ly">龍巖</option></optgroup><optgrouplabel="浙江"><optionvalue="hz">杭州</option><optionvalue="nb">寧波</option><optionvalue="wz">溫州</option></optgroup></select>1.2.7

select元素運行以上代碼后，瀏覽器的顯示效果如圖4-12所示。圖4-12

optgroup元素分組效果1.2表單元素

8．datalist元素datalist元素包含了一組option元素，這組元素表示其他表單控件的可選值。例如：<h1>datalist元素學習</h1><inputtype="text"id="mybooks"list="books"><datalistid="books"><optionvalue="假如給我三天光明"></option><optionvalue="經(jīng)濟學講義"></option></datalist>1.2.8

datalist元素運行以上代碼后，瀏覽器的顯示效果如圖4-13所示。圖4-13

datalist元素效果1.2表單元素9．details元素details元素可以創(chuàng)建一個掛件，僅在被切換成展開狀態(tài)時，才會顯示內(nèi)含的信息。summary元素可為該部件提供概要或者標簽。例如：<h1>details元素學習</h1><details><summary>點擊查看details元素的概念</summary>details：用于描述文檔或文檔某個部分的細節(jié)。</details>1.2.9

details元素運行以上代碼后，瀏覽器的顯示效果如圖4-14所示。圖4-14

details元素效果1.3

CSS3選擇器CSS3中新增了許多選擇器，便于對頁面元素進行篩選，下面我們一起來學習并認識它們。1．層級選擇器（1）相鄰兄弟選擇器。相鄰兄弟選擇器可以選擇緊接在一個元素后面的另一個元素，且要求二者有相同的父元素，使用符號“+”表示。例如：<style>.li1+.li2{font-weight:bolder;font-size:32px;}</style><ul><liclass="li1">列表項一</li><liclass="li2">列表項二</li><liclass="li3">列表項三</li><liclass="li4">列表項四</li></ul>1.3.1層級選擇器運行以上代碼后，瀏覽器的顯示效果如圖4-15所示。圖4-15相鄰兄弟選擇器效果1.3.1層級選擇器

注意，相鄰兄弟選擇器只能選擇緊鄰的“弟元素”，例如，以下兩種寫法都是無法完成標簽選擇的：<style>/*非緊鄰元素*/.li1+.li3{font-weight:bolder;}/*非"弟元素"*/.li2+.li1{font-weight:bolder;}</style><ul><liclass="li1">列表項一</li><liclass="li2">列表項二</li><liclass="li3">列表項三</li><liclass="li4">列表項四</li></ul>1.3.1層級選擇器（2）通用兄弟選擇器。通用兄弟選擇器的使用方式和相鄰兄弟選擇器的使用方式相似，不同的是，通用兄弟選擇器所選擇的元素位置無須緊鄰，只須層級相同即可，使用符號“~”表示。1.3

CSS3選擇器2．結構性偽類選擇器結構性偽類選擇器的公共特征是允許開發(fā)者根據(jù)文檔結構來指定元素的樣式。其具體的使用方法和描述如表4-5所示。表4-5結構性偽類選擇器的使用方法和描述選擇器描述first-child表示在一組兄弟元素中的第一個元素last-child表示其父元素的最后一個子元素nth-child(N)用于選取屬于其父元素的第N個子元素，不論元素的類型nth-last-child(N)用于選取屬于其父元素的倒數(shù)第N個子元素，不論元素的類型nth-of-type(N)匹配同類型中的第N個同級兄弟元素nth-last-of-type(N)匹配同類型中的倒數(shù)第N個同級兄弟元素first-of-type匹配其父元素特定類型的第一個子元素last-of-type匹配其父元素特定類型的最后一個子元素only-child匹配沒有任何兄弟元素的元素only-of-type代表任意一個元素，這個元素沒有其他相同類型的兄弟元素empty匹配沒有子元素（包括文本元素）的元素1.3.2結構性偽類選擇器以上選擇器中的參數(shù)N還可以使用表達式“a*n+b”來替換，n=0，1，2，3……例如：“2*n+1”用于匹配位置為1、3、5、7……的元素。也可以使用關鍵字odd來替換此表達式?！?*n+0”用于匹配位置為2、4、6、8……的元素。也可以使用關鍵字even來替換此表達式。a和b都必須為整數(shù)，并且元素的第一個子元素索引為1，而不是像數(shù)組一樣從0開始。在上述表達式中，a*n必須寫在b的前面，不能寫成b+a*n的形式。例如：<style>

li:nth-child(2*n+1){background:skyblue;}</style><ul><li>第一項目</li><li>第二項目</li><li>第三項目</li><li>第四項目</li><li>第五項目</li><li>第六項目</li></ul>1.3.2結構性偽類選擇器運行以上代碼后，瀏覽器的顯示效果如圖4-16所示。圖4-16結構性偽類選擇器效果1.3

CSS3選擇器3．狀態(tài)偽類選擇器（1）enabled。enabled表示任何被啟用的元素。如果一個元素能夠被激活（如選擇、單擊等），或者能夠獲取焦點，則該元素是被啟用的。元素也有一個禁用的狀態(tài)，在被禁用時，元素不能被激活或獲取焦點。例如：<style>

input:enabled{font-weight:bolder;font-style:italic;}</style><inputtype="text">1.3.3狀態(tài)偽類選擇器運行以上代碼后，瀏覽器的顯示效果如圖4-17所示。圖4-17

enabled狀態(tài)偽類選擇器效果1.3.3狀態(tài)偽類選擇器（2）disabled。disabled與上述的enabled含義相反，該狀態(tài)偽類選擇器表示任何被禁用的元素。（3）checked。checked狀態(tài)偽類選擇器用于指定當表單中的radio單選按鈕或checkbox復選框處于選中狀態(tài)時的樣式，如圖4-18所示。例如：<style>#apple:checked~p{font-weight:bolder;font-style:italic;}</style><inputtype="radio"name="c"id="apple">蘋果<pid="fruit">你選中了水果</p>圖4-18

checked狀態(tài)偽類選擇器效果1.3

CSS3選擇器4．偽元素選擇器偽元素是一個被附加至選擇器末的關鍵詞，允許用戶修改被選擇元素特定部分的樣式。在HTML5中，偽類選擇器用一個冒號來表示，而偽元素選擇器則用兩個冒號來表示。1.3.4偽元素選擇器（1）before。before偽元素選擇器用于創(chuàng)建一個元素，且該元素將成為已選中元素的第一個子元素。通常使用content屬性為一個元素添加修飾性的內(nèi)容。此元素默認為行內(nèi)元素。例如：運行以上代碼后，瀏覽器的顯示效果如圖4-19所示。<style>p::before{content:"?";}</style><p>你</p><p>我</p><p>他</p>圖4-19

before偽元素選擇器效果1.3.4偽元素選擇器（2）after。after偽元素選擇器用于創(chuàng)建一個元素，且該元素將成為已選中元素的最后一個子元素。1.3

CSS3選擇器5．屬性選擇器在CSS中，我們可以通過屬性選擇器來選中帶有特定屬性的元素。（1）[attribute]選擇器。該選擇器用于選取帶有指定屬性的元素。2.2.3偽類選擇器例如：<style>[title]{font-weight:bolder;font-style:italic;}</style><p>不含[title]屬性</p><ptitle="include">包含[title]屬性</p>運行以上代碼后，瀏覽器的顯示效果如圖4-20所示。圖4-20

[attribute]選擇器效果2.2.3偽類選擇器（2）[attribute=value]選擇器。該選擇器用于選取帶有指定屬性和值的元素。例如：<style>a[href=""]{font-weight:bolder;font-style:italic;}</style><ahref="">百度</a><ahref="">新浪</a><ahref="">騰訊</a>2.2.3偽類選擇器運行以上代碼后，瀏覽器的顯示效果如圖4-21所示。圖4-21

[attribute=value]選擇器效果2.2.3偽類選擇器（3）[attribute~=value]選擇器。該選擇器用于選取屬性值中包含指定詞匯的元素，如圖4-22所示。例如：<style>p[class~="important"]{font-weight:bolder;font-style:italic;}</style><pclass="importantwarning">Thisisimportant</p><pclass="important">Thisisimportant</p><pclass="warning">Thisisnotimportant</p>圖4-22

[attribute~=value]選擇器效果2.2.3偽類選擇器（4）[attribute|=value]選擇器。該選擇器用于選取帶有以指定值開頭的屬性值的元素，且該值必須是整個單詞。例如：<style>p[lang|="en"]{font-weight:bolder;font-style:italic;}</style><plang="en">en</p><plang="en-us">en-us</p><plang="cy-en">cy-en</p>圖4-23

[attribute|=value]選擇器效果運行以上代碼后，瀏覽器的顯示效果如圖4-23所示。2.2.3偽類選擇器（5）[attribute^=value]選擇器。該選擇器用于匹配屬性值以指定值開頭的每個元素。例如：<style>p[class^="important"]{font-weight:bolder;font-style:italic;}</style><pclass="importantwarning">Thisisimportant</p><pclass="important">Thisisimportant</p><pclass="warningimportant">Thisisnotimportant</p>2.2.3偽類選擇器運行以上代碼后，瀏覽器的顯示效果如圖4-24所示。圖4-24

[attribute^=value]選擇器效果2.2.3偽類選擇器（6）[attribute$=value]選擇器。該選擇器用于匹配屬性值以指定值結尾的每個元素。例如：<style>p[class$="important"]{font-weight:bolder;font-style:italic;}</style><pclass="importantwarning">Thisisimportant</p><pclass="important">Thisisimportant</p><pclass="warningimportant">Thisisnotimportant</p>2.2.3偽類選擇器運行以上代碼后，瀏覽器的顯示效果如圖4-25所示。圖4-25

[attribute$=value]選擇器效果2.2.3偽類選擇器（7）[attribute*=value]選擇器。該選擇器用于匹配屬性值中包含指定值的每個元素。例如：<style>p[class*="bo"]{font-weight:bolder;font-style:italic;}</style><pclass="box">box</p><pclass="ball">ball</p><pclass="about">about</p>圖4-26

[attribute*=value]選擇器效果運行以上代碼后，瀏覽器的顯示效果如圖4-26所示?！凹尤胛覀儭表撁娴牟季峙c樣式美化任務1任務實施在本任務中，我們將通過表單元素和更為復雜的標簽選擇器，完成“加入我們”頁面的設計，頁面效果如圖4-27所示。圖4-27“加入我們”頁面效果任務實施（1）在html文件夾中新建joinUs.html文件，用于設計“加入我們”頁面。（2）在joinUs.html文件中輸入“html:5”，完成基礎結構搭建，修改網(wǎng)頁標題為“加入我們”,并引入joinUs.css文件。<title>加入我們</title><linkrel="stylesheet"href="../css/joinUs.css">（3）在img文件夾中放置joinUs.png圖片文件，并通過<img>標簽將其引入頁面中。<img

src="../img/joinUs.png"width="100%">任務實施<formaction="join.php"method="post"><tableclass="joinUsTable"align="center"cellspacing="0"cellpadding="8"><thead></thead><tbody></tbody><tfoot></tfoot></table></form>（5）為<table>表格元素賦予類名“joinUsTable”，并設置表格居中對齊，單元格間距為0px，表格單元格邊界與單元格內(nèi)容之間的間距為8px。注意：HTML5中不再支持align、cellspacing和cellpadding屬性。在后續(xù)任務中，我們將使用CSS對其進行替換。任務實施（6）在joinUs.css文件中設定“joinUsTable”樣式規(guī)則，美化表格樣式。.joinUsTable{width:800px;border:1pxsolid#dddddd;/*后續(xù)使用margin:auto用來代替align="center"屬性，使表格水平居中;*/}任務實施（7）將表格劃分為13行、2列的格式，并對表頭、表格體和表尾的首尾行進行跨列合并。在表格中補充信息內(nèi)容，其中帶“*”號的為必填項，可以使用<sup>標簽進行設置，如圖4-28所示。任務實施（8）根據(jù)圖4-28，設置表頭、單元格和<sup>標簽的樣式，可以通過后代選擇器快速選取標簽元素。.joinUsTable

th{height:20px;background:#f0f0f0;font-weight:normal;text-align:left;}.joinUsTabletd{height:46px;color:#363636;}.joinUsTablesup{color:red;}任務實施（9）觀察圖4-28可知，表格體的首行內(nèi)容居左對齊，末行內(nèi)容居中對齊，中間部分的第一列文本內(nèi)容居右對齊，第二列表單元素居左對齊。可以通過結構選擇器進行對應的樣式設置。.joinUsTabletbodytrtd:first-child{width:140px;text-align:right;}.joinUsTabletbodytr:first-childtd{color:#f57359;font-size:18px;text-align:left;}.joinUsTabletbodytr:last-childtd{text-align:center;}任務實施（10）在表格的前3列表單中，我們需要填寫真實姓名、手機號碼和常用郵箱信息，并且這3項為必填項，每一項中均有描述說明，可以按照如下代碼進行設置，效果如圖4-29所示。圖4-29表格前3列表單效果任務實施<tr><td>真實姓名^*:</td><td><inputtype="text"placeholder="請?zhí)顚懩男彰?name="name"required="required"></td></tr><tr><td>手機號碼^*:</td><td><inputtype="tel"placeholder="請?zhí)顚懩氖謾C號碼"name="tel"required="required"></td></tr><tr><td>常用郵箱^*:</td><td><inputtype="email"placeholder="請?zhí)顚懩某Ｓ绵]"name="email"required="required"></td></tr>注意：建議input元素都添加name屬性，便于未來與服務端之間的數(shù)據(jù)交互。任務實施.joinUsTableinput[type="text"],.joinUsTableinput[type="tel"],.joinUsTableinput[type="email"]{width:530px;height:30px;border:1pxsolid#cbcbcb;}.joinUsTable

input:focus{outline:none;border:1pxsolid#f57359;}（11）在樣式表中為前3列表單設置樣式，使其寬度為530px,高度為30px，采用寬度為1px的淺灰色實線邊框。當文本框具有焦點時，呈現(xiàn)出寬度為1px的橘色實線邊框。對于多個表單元素的選取，我們可以通過并集選擇器實現(xiàn)。任務實施此處需要注意border和outline的區(qū)別。

border：元素的邊框。

outline：當使用鼠標單擊或者使用Tab鍵讓表單元素獲得焦點時，該表單元素將會被一個輪廓線框圍繞。這個輪廓線框就是outline。任務實施（12）“面試崗位”表單是一個下拉列表，存在多個選項。可以按照如下代碼進行設置，效果如圖4-30所示。圖4-30“面試崗位”表單效果任務實施<tr><td>面試崗位^*:</td><td><inputtype="text"list="jobs"name="jobs"required="required"><datalistid="jobs"><optionvalue="Java工程師"></option><optionvalue="PHP工程師"></option><optionvalue="前端工程師"></option><optionvalue="C/C++工程師"></option><optionvalue="UI設計師"></option></datalist></td></tr>任務實施（13）下面進行“性別”表單的設計，這部分的重點在于切換不同的選項標簽，用戶頭像能夠隨之切換，效果如圖4-31所示。圖4-31“性別”表單效果任務實施<tr><td>性別:</td><td><inputtype="radio"id="man"name="gender"checked><labelfor="man">男</label><inputtype="radio"id="woman"name="gender"><labelfor="woman">女</label><imgwidth="40"src=""></td></tr>由圖4-31可知，“性別”表單中的單選按鈕通過<inputtype="radio">設計而成。為了實現(xiàn)其單選效果，我們需要為其添加屬性值相同的name屬性。同時使用<label>標簽關聯(lián)input元素，以便用戶通過文字進行性別選取。任務實施#man:checked~img{content:url(../img/man.png);}#woman:checked~img{content:url(../img/woman.png);}如何通過<inputtype="radio">進行用戶頭像切換呢？關鍵在于使用:checked狀態(tài)偽類選擇器和通用兄弟選擇器。我們可以通過上述選擇器對選中的input元素后的img元素進行背景內(nèi)容的更換設置。content屬性可用于設置多媒體元素（圖像、聲音、視頻等）的超鏈接地址。任務實施<tr><td>工作年限:</td><td><selectname="exp"><optionvalue="fresh">應屆生</option><optionvalue="1to3">1-3年</option><optionvalue="3to5">3-5年</option><optionvalue="5to8">5-8年</option><optionvalue="8to10">8-10年</option><optionvalue="10more">10年以上</option></select></td></tr>（14）“工作年限”表單是一個下拉列表?？梢园凑杖缦麓a進行設置，對列表選項使用option元素，并注意設置其value屬性值，便于未來與服務端進行數(shù)據(jù)交互，效果如圖4-32所示。圖4-32“工作年限”表單效果任務實施（15）通過CSS樣式，設置select元素邊框為寬度為1px的淺灰色實線。.joinUsTableselect{border:1pxsolid#cbcbcb;}任務實施<tr><td>作品上傳:</td><td><inputtype="file"name="files"multiple></td></tr>（16）“作品上傳”表單可以通過file類型的input元素進行設置，并為其指定multiple屬性，允許上傳多個文件，如圖4-33所示。圖4-33“作品上傳”表單效果任務實施（17）“常用編程語言”表單是一組復選框，可以通過checkbox類型的input元素進行設置，并使用<label><標簽>關聯(lián)input元素，以便用戶通過文字進行常用編程語言的選取，如圖4-34所示。圖4-34“常用編程語言”表單效果任務實施<tr><td>常用編程語言:</td><td><labelfor="Java"><inputid="java"value="java"type="checkbox">Java</label><labelfor="PHP"><inputid="php"value="php"type="checkbox">PHP</label><labelfor="JS"><inputid="js"value="js"type="checkbox">JavaScript</label><labelfor="c"><inputid="c"value="c"type="checkbox">C</label><labelfor="c++"><inputid="c++"value="c++"type="checkbox">C++</label><labelfor="others"><inputid="others"value="others"type="checkbox">其他

</label></td></tr>任務實施<tr><td>個人評價^*:</td><td><textareacols="71"rows="8"name="evaluation"></textarea></td></tr>（18）“個人評價”表單是一個多行文本域，可以通過textarea元素進行設置，并使用row屬性規(guī)定顯示行數(shù)，使用col屬性規(guī)定多行文本域可見寬度，如圖4-35所示。圖4-35“個人評價”表單效果任務實施.joinUsTable

input:focus,.joinUsTable

textarea:focus{outline:none;border:1pxsolid#f57359;}.joinUsTabletextarea{resize:none;border:1pxsolid#cbcbcb;}（19）通過CSS樣式表禁用多行文本域的拖動縮放功能，并設置其具有焦點時的樣式。因為其擁有焦點時的樣式和單行文本域是相同的，所以我們可以通過并集選擇器進行多個元素的樣式聲明，而不必重復設置樣式。任務實施<tr><tdcolspan="2"><inputtype="submit"value="確認提交"><inputtype="reset"value="重新填寫"></td></tr>（20）表單的提交和重置按鈕可以通過submit類型和reset類型的input元素進行設置，并且可以通過并集選擇器和:hover偽類選擇器設置按鈕默認狀態(tài)和交互狀態(tài)時的樣式，效果如圖4-36所示。joinUs.html文件：任務實施input[type="submit"],input[type="reset"]{background:#f57359;outline:none;border:none;color:white;width:100px;height:38px;}input[type=