第4章

表格與表單《Web前端開發(fā)》表格是怎樣形成的？說到表格，其實(shí)大家并不陌生課程表排行榜查票4.1創(chuàng)建表格使用標(biāo)簽創(chuàng)建表格的語(yǔ)法格式<table><caption>表格標(biāo)題</caption><tr> <td>單元格內(nèi)的文字</td><td>單元格內(nèi)的文字</td> ...</tr>...</table>在HTML中，所有的元素都是通過標(biāo)簽定義的，要想創(chuàng)建表格，就需要使用表格相關(guān)的標(biāo)簽。4.1創(chuàng)建表格用于定義表格的開始與結(jié)束。在<table>標(biāo)簽中，可放表格的標(biāo)題、表格行和單元格等。<table>標(biāo)簽用于定義表格中的一行，必須嵌套在<table>標(biāo)簽中。<tr>標(biāo)簽用于定義表格的標(biāo)題，該標(biāo)簽必須直接放置到<table>開始標(biāo)簽之后，不需要可省略。<caption>標(biāo)簽用于定義表格中的單元格，必須嵌套在<tr>標(biāo)簽。<td>標(biāo)簽表格標(biāo)簽的介紹4.1創(chuàng)建表格4.1創(chuàng)建表格應(yīng)用表格時(shí)經(jīng)常需要為表格設(shè)置表頭，以使表格的格式更加清晰，方便查閱。表頭一般位于表格的第一行或第一列，其文本加粗居中。設(shè)置表頭多學(xué)一招:4.1創(chuàng)建表格只需用表頭標(biāo)簽<th>替代相應(yīng)的單元格標(biāo)簽<td>即可。<th>標(biāo)簽與<td>標(biāo)簽的屬性、用法完全相同，但<th>標(biāo)簽具有語(yǔ)義性，特指表頭，標(biāo)簽包含的文本默認(rèn)加粗居中顯示。而<td>標(biāo)簽只是普通的單元格，標(biāo)簽包含的文本為普通文本且水平左對(duì)齊顯示。設(shè)置表頭多學(xué)一招:4.1創(chuàng)建表格<thead>表格的結(jié)構(gòu)用于定義表格的頭部，必須位于<table>標(biāo)簽中，一般包含網(wǎng)頁(yè)的logo和導(dǎo)航等頭部信息。<tfoot>用于定義表格的頁(yè)腳，位于<table>標(biāo)簽中<thead>標(biāo)簽之后，一般包含網(wǎng)頁(yè)底部的企業(yè)信息等。<tbody>用于定義表格的主體，位于<table>標(biāo)簽中<tfoot>標(biāo)簽之后，一般包含網(wǎng)頁(yè)中除頭部和底部之外的其他內(nèi)容。4.1創(chuàng)建表格表格標(biāo)簽屬性中，較為常用的是colspan屬性和rowspan屬性，這兩個(gè)屬性書寫在<td>標(biāo)簽中，用于合并單元格。21colspan屬性用于設(shè)置單元格橫跨的列數(shù)，也就是用于合并水平方向的單元格，取值為正整數(shù)。colspan屬性rowspan屬性用于設(shè)置單元格豎跨行數(shù)，也就是用于合并垂直方向的單元格，取值為正整數(shù)。rowspan屬性4.2單元格的合并<table>標(biāo)簽屬性如下表。屬性描述常用屬性值border設(shè)置表格的邊框（默認(rèn)border="0"為無邊框）像素值cellspacing設(shè)置單元格與單元格之間的空間像素值（默認(rèn)為2px）cellpadding設(shè)置單元格內(nèi)容與單元格邊緣之間的空間像素值（默認(rèn)為1px）align設(shè)置表格在網(wǎng)頁(yè)中的水平對(duì)齊方式left、center、rightbgcolor設(shè)置表格的背景顏色顏色值英文單詞、十六進(jìn)制#RGB、rgb(r,g,b)4.3美化表格和單元格<tableborder="10"><tableborder="2"><table>4.3美化表格和單元格4.3美化表格和單元格4.4表單的基本概念登錄快遞查詢注冊(cè)想想表單由哪些構(gòu)成？在HTML中，一個(gè)完整的表單通常由表單控件、提示信息和表單域3個(gè)部分構(gòu)成。4.4表單的基本概念對(duì)表單控件、提示信息和表單域的具體解釋如下。包含了具體的表單功能項(xiàng)，如單行文本輸入框、密碼輸入框、復(fù)選框、提交按鈕、搜索框等。說明性的文字，提示用戶進(jìn)行填寫和操作。用于采集用戶的輸入或選擇的數(shù)據(jù)。如果不定義表單域，表單中的數(shù)據(jù)就無法傳送到后臺(tái)服務(wù)器。表單控件表單域提交信息4.4表單的基本概念在HTML5中，<form>標(biāo)簽用于創(chuàng)建表單，即定義表單域，以實(shí)現(xiàn)用戶信息的收集和傳遞，<form>標(biāo)簽中的所有內(nèi)容都會(huì)被提交給服務(wù)器。創(chuàng)建表單的語(yǔ)法格式<formaction="url地址"method="提交方式"name="表單名稱">

各種表單控件</form><form>與</form>之間的表單控件是由用戶自定義的action、method和name為表單標(biāo)簽<form>的常用屬性4.4表單的基本概念action屬性用于指定接收并處理表單數(shù)據(jù)的服務(wù)器程序的url地址1.action屬性<form>標(biāo)簽的常用屬性介紹如下。method屬性用于設(shè)置表單數(shù)據(jù)的提交方式。2.method屬性name屬性用于指定表單的名稱。3.name屬性4.4表單的基本概念表單控件：表單控件有多種形式，主要用來收集用戶數(shù)據(jù)，包括label、input、textarea、select等。最常使用的是input標(biāo)簽，根據(jù)功能的不同，input控件又分為text、password、radio、checkbox、file、submit、reset等類型。表單按鈕：包括提交按鈕、重置按鈕和普通按鈕。從本質(zhì)上講，表單按鈕也是表單控件，之所以把它分離出來。單獨(dú)介紹，是因?yàn)樗墓δ鼙容^特別。4.4表單的基本概念提交按鈕用于把表單數(shù)據(jù)發(fā)送到服務(wù)器重置按鈕用于重置整個(gè)表單的數(shù)據(jù)普通按鈕則需要開發(fā)者賦予它功能<formaction="login.php"method="post">

用戶名：<inputtype="text"name="username"/>

密碼：<inputtype="password"name="password"/><inputtype="submit"value="登錄"/><inputtype="reset"></form>4.4表單的基本概念瀏覽網(wǎng)頁(yè)時(shí)經(jīng)常會(huì)看到輸入框、單選按鈕、提交按鈕、重置按鈕等，這些輸入框和按鈕都屬于表單控件。要想在網(wǎng)頁(yè)中定義這些表單控件就需要使用<input/>標(biāo)簽。input控件的語(yǔ)法格式<inputtype="控件類型"/>type屬性取值有多種，用于指定不同的表單控件類型。4.5input表單控件<input/>標(biāo)簽的常用屬性如下。屬性屬性值描述typetext單行文本輸入框password密碼輸入框radio單選按鈕checkbox復(fù)選框button普通按鈕submit提交按鈕reset重置按鈕image圖像形式的提交按鈕hidden隱藏域file文件域4.5input表單控件color類型<inputtype="color"/>number類型<inputtype="number"/>range類型<inputtype="range"/>Datepickers類型<inputtype=date,month,week…"/>email類型<inputtype="email"/>url類型<inputtype="url"/>tel類型<inputtype="tel"/>search類型<inputtype="search"/>（1）（2）（3）（4）（5）（6）（7）（8）新的input控件類型4.5input表單控件屬性屬性值描述name由用戶自定義input控件的名稱value由用戶自定義input控件中的默認(rèn)文本內(nèi)容size正整數(shù)input控件在頁(yè)面中的顯示寬度readonlyreadonly該控件內(nèi)容為只讀（不能編輯修改）disableddisabled第一次加載頁(yè)面時(shí)禁用該控件（顯示為灰色）checkedchecked定義選擇控件默認(rèn)被選中的項(xiàng)maxlength正整數(shù)控件允許輸入的最多字符數(shù)<input/>標(biāo)簽的常用屬性如下。4.5input表單控件案例演示4.5input表單控件通過<textarea>標(biāo)簽可以輕松地創(chuàng)建多行文本輸入框。textarea控件的語(yǔ)法格式<textareacols="每行中的字符數(shù)"rows="顯示的行數(shù)">

文本內(nèi)容</textarea>cols屬性用來定義多行文本輸入框每行的字符數(shù)。rows屬性用來定義多行文本輸入框顯示的行數(shù)。4.6其他表單控件textarea控件可選屬性：disabled、name和readonly。可選屬性屬性值描述name由用戶自定義控件的名稱readonlyreadonly該控件內(nèi)容為只讀（不能編輯修改）disableddisabled第一次加載頁(yè)面時(shí)禁用該控件（顯示為灰色）4.6其他表單控件瀏覽網(wǎng)頁(yè)時(shí)，經(jīng)常會(huì)看到包含多個(gè)選項(xiàng)的下拉菜單。例如，選擇所在的城市、出生年月、興趣愛好等。<select>標(biāo)簽4.6其他表單控件使用select控件可以制作下拉菜單效果。使用<select>標(biāo)簽定義下拉菜單的基本語(yǔ)法格式<select><option>選項(xiàng)1</option><option>選項(xiàng)2</option><option>選項(xiàng)3</option>...</select><select>標(biāo)簽用于在表單中添加一個(gè)下拉菜單。<option>標(biāo)簽用于定義下拉菜單中的具體選項(xiàng)。4.6其他表單控件在HTML5中，可以為<select>標(biāo)簽和<option>標(biāo)簽定義屬性，以改變下拉菜單