當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

HTML表格和HTML表单

發(fā)布時間：2025/3/8 HTML 15 豆豆

生活随笔收集整理的這篇文章主要介紹了 HTML表格和HTML表单小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

HTML 表格

表格由 <table> 標簽來定義每個表格均有若干行（由 <tr> 標簽定義），每行被分割為若干單元格（由 <td> 標簽定義）字母 td 指表格數(shù)據(jù)（table data），即數(shù)據(jù)單元格的內(nèi)容。數(shù)據(jù)單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。

（1）表單標記
<table>...</table>標記表示表格

width屬性用來設(shè)置表格的寬度
border屬性用來設(shè)置表格的邊框
align屬性用來設(shè)置表格的對齊方式
bgcolor屬性用來設(shè)置表格的背景

（2）標題標記

標題標記以<caption>開頭，以</caption>結(jié)束，標題標記也有一些屬性，比如 align,valign

（3）表頭標記

以<th>開始，以</th>結(jié)束

（4）表格行標記

表格行標記以<tr>開頭，</tr>結(jié)束，一組<tr>標記表示表格中的一行。<tr>標簽要嵌套在<table>標簽中使用

（5）列標記

<td> 開始,</td>結(jié)束。一個<tr>標記可以嵌套若干個<td>標記。該標記也具有align，background，valign等屬性

舉例：

<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>標題標記</title> </head><body> <table width="318" height="167" border="1" align="center"><caption>學(xué)生考試成績單</caption><tr> <td width="center" valign="middle"> 姓名</td> <td width="center" valign="middle">語文</td> <td width="center" valign="middle">數(shù)學(xué)</td> <td width="center" valign="middle">英語</td> </tr> </body></html>

HTML表單

表單是一個包含表單元素的區(qū)域
表單元素是允許用戶在表單中輸入內(nèi)容,比如：文本域(textarea)、下拉列表、單選框(radio-buttons)、復(fù)選框(checkboxes)等等。

<form> . input 元素 . </form>

（1）action屬性
該屬性用來指定處理表單數(shù)據(jù)程序的URL地址。

（2）method 屬性
該屬性用來指定數(shù)據(jù)傳送到服務(wù)器的方式。它有兩種屬性值，分別是get與post。get屬性值表示將輸入的數(shù)據(jù)追加在action指定的地址后面，并傳送到服務(wù)器。當屬性值為post時，會將輸入的數(shù)據(jù)

（3）name屬性
該屬性指定表單的名稱，其值程序員可以自定義。

（4）OnSubmit屬性
該屬性用于指定當用戶單擊提交按鈕時觸發(fā)事件。

（5）target屬性
該屬性指定輸入數(shù)據(jù)結(jié)果顯示在哪個窗口中，其屬性值可以設(shè)置為_blank，_self, _parent,_top。

(1)_blank表示在新窗口中打開目標文件
(2)_self表示同一個窗口中打開(該項一般不用設(shè)置)
(3)_parent表示在上一級窗口打開,一般使用框架頁時經(jīng)常使用。
(4)_top 表示在瀏覽器的整個窗口中打開，忽略任何框架。

HTML 表單 - 輸入元素

多數(shù)情況下被用到的表單標簽是輸入標簽,< input>。
輸入類型是由類型屬性（type）定義的。大多數(shù)經(jīng)常被用到的輸入類型如下：

文本域（Text Fields）
文本域通過標簽來設(shè)定，當用戶要在表單中鍵入字母、數(shù)字等內(nèi)容時，就會用到文本域。

<form> First name: <input type="text" name="firstname"><br> Last name: <input type="text" name="lastname"> </form>

瀏覽器顯示如下：

注意:表單本身并不可見。同時，在大多數(shù)瀏覽器中，文本域的默認寬度是 20 個字符。
注意：
Type屬性是< input>標記中非常重要的內(nèi)容，決定了輸入數(shù)據(jù)的類型。

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>博客</title> </head> <body> <form action="" method="post" name="myform">用戶名：<input name="username" type="text" id="UesrName4" maxlength="20"><br>密碼：<input name="pwd1" type="password" id="PWD14" size="20" maxlength="20"><br>確認密碼:<input name="pwd2" type="password" id="PWD25" size="20" maxlength="20"><br>性別：<input name="sex" type="radio"class="noborder"value="男" checked>男 <input name="sex" type="radio" class="noborder" value="女">女<br>愛好:<input name="like" type="checkbox" id="like" value="體育">體育<input name="like" type="checkbox" id="like" value="旅游">旅游<input name="like" type="checkbox" id="like" value="聽音樂">聽音樂<input name="like" type="checkbox" id="like" value="看書">看書<br>E-mail：<input name="email" type="text" id="PWD224" size="50"><br><input name="Submit" type="submit" class="btn_grey" value="確定保存"><input name="Reset" type="reset" class="btn_grey" value="重新填寫"></form> </body> </html>

<select>...</select>下拉列表框標記
使用<option>標記向列表中添加內(nèi)容。<select>標記的語法格式如下：

<select name="name" size="digit" multiple="multiple" disabled="disabled"></select> name 用于指定列表框的名稱 size 用于指定列表框中顯示的選項數(shù)量，超出該數(shù)量的選項可以通過拖動滾動條查看 disabled 用于指定當前列表框不可使用（變成灰色） multiple 用于讓多行列表框支持多選

多行文本標記
標簽定義多行的文本輸入控件
文本區(qū)中可容納無限數(shù)量的文本，其中的文本的默認字體是等寬字體。通常情況下，標記出在標記的標記內(nèi)容中。

Wrap屬性可選值
Hard 默認值，表示自動換行
Soft 自動換行
Off 不自動換行

舉例：

總結(jié)

以上是生活随笔為你收集整理的HTML表格和HTML表单的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇：侍候读音（侍候）
下一篇：洛克王国辅助下载教程（洛克王国樱花辅助下