第3章表格與表單_第1頁
第3章表格與表單_第2頁
第3章表格與表單_第3頁
第3章表格與表單_第4頁
第3章表格與表單_第5頁
已閱讀5頁，還剩24頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

表格和表單LearningHTML&CSS第三章CompanyLogo課程要求與目標掌握表格的用法表單標記添加表單元素輸入類表單元素菜單列表類表單元素文本域CompanyLogo表格行列列標題在HTML文檔中，廣泛使用表格來存放網頁上的文本和圖像單元格表格標題CompanyLogo4創(chuàng)建表格<HTML><HEAD><TITLE>使用表格</TITLE></HEAD><BODY><TABLEBORDER=2><TR><TD>姓名</TD><TD>性別</TD><TD>分數</TD>

</TR><TR><TD>Robert</TD><TD>M</TD><TD>80</TD></TR>

</TABLE></BODY></HTML><TABLE>代表表格的開始，border=2表示邊框尺寸為2bordercolor為邊框顏色<TR>表示行，這是表格的第一行，有三列數據，<TD>代表列表格的第二行，有三列數據表格的第三行，也有三列數據CompanyLogo表格標題<BODY><TABLEBORDER=2><CAPTIONalign=top>學員檔案信息</CAPTION><TR>

<TH>姓名</TH><TH>性別</TH><TH>分數</TH></TR><TR><TD>Robert</TD><TD>M</TD><TD>80</TD></TR>

</TABLE></BODY></HTML><CAPTION>表示表格標題<TH>表示行或列標題，粗體顯示表格的第二行，有三列數據表格的第三行，有三列數據CompanyLogo表格對齊方式<BODY><TABLEborder=2align=center><CAPTIONalign=top>學員檔案信息</CAPTION><TR><TH>姓名</TH><THalign="center">性別</TH><THalign="right">分數</TH></TR><TR><TD>Robert</TD><TDalign="center">M</TD><TDalign="right">80</TD></TR>

</TABLE></BODY></HTML>整個表格居中姓名列默認左對齊性別列居中分數列右對齊CompanyLogo7合并單元格（跨列）<BODY><TABLEBORDER=2ALIGN=CENTER><CAPTION>創(chuàng)建表格</CAPTION><THCOLSPAN=3>第一學期</TH><THCOLSPAN=3>第二學期</TH><TR><TD>數學</TD><TD>科學</TD><TD>英語</TD><TD>數學</TD><TD>科學</TD><TD>英語</TD><TR><TD>98</TD><TD>95</TD><TD>80</TD><TD>95</TD><TD>87</TD><TD>88</TD>

COLSPAN=“n”

屬性表示跨多少列

CompanyLogo8合并單元格（跨行）<BODY><TABLEBORDER=1,align=center><CAPTION><b>創(chuàng)建表格<b></CAPTION><TR><TH></TH><TH></TH><TH>螺母</TH><TH>螺栓</TH><TH>錘子</TH><TR><TDROWSPAN=3>第一季度</TD><TD>一月</TD><TD>2500</TD><TD>1000</TD><TD>1240</TD><TR><TD>二月</TD><TD>3000</TD><TD>2500</TD><TD>4000</TD><TR>ROWSPAN=“n”屬性表示跨多少行

CompanyLogo9表格的背景色和尺寸設置<BODY><TABLEborder=0align=centerwidth=50%><CAPTIONalign=top>學員檔案信息</CAPTION><TRbgcolor="#00FFFF"><THalign="left">姓名</TH><THalign="center">性別</TH><THalign="right">分數</TH></TR><TRbgcolor="#FFFF00"><TD>Robert</TD><TDalign="center">M</TD><TDalign="right">80</TD></TR><TRbgcolor="#FFFF00"><TD>Mary</TD><TDalign="center">F</TD><TDalign="right">18</TD></TR></TABLE>表格的顏色設置：表格的背景色<TABLEbgcolor=顏色值>行的背景色<TRbgcolor=顏色值>

列的背景色<TDbgcolor=顏色值>顏色值可以采用RGB（red/green/blue）紅綠藍十六進制值表示，如紅色#FF0000,或是一些預定義色彩名稱：red，blue，yellow等。表格的尺寸設置：

<TABLEwidth=n1height=n2>例如：<TABLEwidth="200"height="100">表示一個長為200像素，寬為100像素的表格。<TABLEwidth=20%height=10%>表示一個寬為窗口的20%，高為窗口的10%的表格。1880分數FM性別MaryRobert姓名學員檔案信息CompanyLogo表格設置設置單元格間距：cellspacing設置單元格填充距離：cellpadding可以利用cellspacing和背景顏色設置表格為細線表格表格的嵌套

表格的嵌套一方面是為使頁面的外觀更為漂亮，利用表格嵌套來編輯出復雜而精美的效果，另一方面是出于布局需要，用一些嵌套方式的表格來做精確的編排，或者二者兼而有之。例：index.htmlCompanyLogo表格總結（1）標題級標簽使用<H1>…<H6>段落標簽使用<Palign＝“對齊方式”>…</P>無序列表使用<UL>標簽,有序列表使用<OL>標簽字體標簽<Fontcolor=“顏色”size=“大小”face＝“字體”>插入圖片：<imgsrc=?Align=?>插入橫線：<hrcolor=?Size=?Width=?Align=?>CompanyLogo表格總結（2）

<TABLEwidth=“?”border=“?”align＝“？”><CAPTION>表格標題</CAPTION><TRbgcolor＝“？”><THalign=“?”>數據1<TH><THalign=“?”>數據2<TH>…..</TR><TRbgcolor＝“？”><TDalign=“?”>數據11</TD><TDalign=“?”>數據22</TD></TR></TABLE>跨行的單元格：<TDrowspan=“n”>數據11</TD>跨列的單元格：<TDcolspan=“n”>數據22</TD>CompanyLogo表單表單通常在設計一個HTML文檔中，用于注冊頁面當用戶填寫完信息后做提交操作，將表單的內容從客戶端的瀏覽器傳送到服務器上，經過服務器處理程序后，再將用戶所需信息送回客戶端的瀏覽器上，這樣網頁就具有了交互性。最常見的表單主要包括文本框、單選按鈕、復選框、按鈕等，如下圖所示，是一個常見的注冊頁面，它包含了文本框、單選按鈕、復選框、按鈕等表單內容。CompanyLogo常見表單文本框單選按鈕密碼框按鈕復選框重置按鈕CompanyLogo表單標簽<Form><formname="表單名"method="傳送方式"action="表單處理程序">

METHOD=“post或get”ACTIONMETHOD指定提交后由服務器上哪個處理程序處理指定向服務器提交的方法:一般為post或get方法,

post方法比較安全ACTION=“URL”CompanyLogo表單元素類型按表單元素的填寫方式可以將表單分為輸入類控件和菜單列表類控件輸入類控件一般以input標記開始，說明這一表單元素需要用戶的輸入；菜單列表類以select開始，表示用戶需要選擇。

CompanyLogoInput所包含的元素類型CompanyLogo文本字段Text和密碼Password身份證號<inputtype="Text"name="PID"value=“”size="20”maxlength="18">密碼：<INPUTtype=passwordvalue=“”name=“pass"size=15>CompanyLogo單選按鈕（radio）單選按鈕用于一組相互排斥的值。組中的每個單選按鈕應具有相同的名稱。用戶一次只能選擇一個選項<p>性別：<inputtype=“radio”name=“sex”value=“male”>男<inputtype="radio"name="sex"value="female">女

可設置默認選項：checked="checked"CompanyLogo復選框（checkbox）元素checkbox用于創(chuàng)建復選框。用戶可以選擇多個復選框。選擇了復選框時，會將一個name/value對與form一起提交。<p>請選擇你的愛好：</p><p><inputtype="checkbox"name="test1"value="A1">上網<inputtype="checkbox"name="text2"value="A2">游泳<inputtype="checkbox"name="test3"value="A3">登山<inputtype="checkbox"name="test4"value="A4">寫作CompanyLogo按鈕（Button）

<INPUTname="button1"type="submit"value="提交"><INPUTname="button2"type="reset"value="重置"><INPUTname="button3"type="button"value="普通按鈕">BUTTON（按鈕）CompanyLogo隱藏域（hidden）隱藏域主要用來傳遞一些參數，而這些參數不需要在頁面中顯示。當瀏覽者提交表單時，隱藏域的內容會一起提交給處理程序。創(chuàng)建隱藏域的語法如下：<inputtype=”hidden”name=”隱藏域名稱”value=”提交的值”>CompanyLogo隱藏域（hidden）示例<html><head><title>隱藏域和action屬性對比示例</title></head><body><formname="exam5"action="exam1.html"method="get">下面是幾種不同屬性的文本字段：<p>姓名：<inputtype="text"name="username"size=15><p>年齡：<inputtype="text"name="age"size=15maxlength=3><p><inputtype="hidden"name="page_id"value="example"><p><inputtype=“submit”name=“Submit”value=“提交”></form></body></html>CompanyLogo25文件域（File）文件域在上傳文件時常常用到，它用于查找硬盤中的文件路徑，然后通過表單將選中的文件上傳<html><head><title>文件域示例</title></head><body><formaction="mailto:yu@163.com"name="research"method="post">下面是某網站的注冊頁面：<p>用

戶

名:<inputname="username"type="text"size=20><p>密

碼:<inputname="password1"type="password"size=20><p>請上傳你的頭像：<inputtype="file"name="picture"></form></body></html>

當用戶點擊瀏覽后，會彈“選擇文件”對話框。CompanyLogo菜單列表類和表單元素（Select）<p>證件類型<selectname="cardtype"><optionvalue="id_card">身份證</option><optionvalue="stu_card">學生證</option><optionvalue="drive_card">駕駛證</option><optionvalue="other_card">其它證件</option></select><p>關心的欄目<selectname="content"size="3"multiple><optionvalue="m1">體育欄目</option><optionvalue="m2">科技欄目</option><optionvalue="m3">新聞欄目</option><optionvalue="m4">汽車欄目</option><optionvalue="m5">房產欄目</option></se

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論