溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
本篇內(nèi)容主要講解“web表格與表單怎么運用”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“web表格與表單怎么運用”吧!
表格由<table>標(biāo)簽來定義
每個表格均由若干行(由tr標(biāo)簽定義)
每行被分為若干個單元格(由td標(biāo)簽定義)
標(biāo)簽td指表格數(shù)據(jù)及數(shù)據(jù)單元格內(nèi)容
數(shù)據(jù)單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等
表格的表頭使用<th>定義。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <table border=1> <thead> <tr> <th>表頭1</th> <th>表頭2</th> <th>表頭3</th> </tr> </thead> <tbody> <tr> <td>表單1</td> <td>表單2</td> <td>表單3</td> </tr> <tr> <td>表單1</td> <td>表單2</td> <td>表單3</td> </tr> <tr> <td>表單1</td> <td>表單2</td> <td>表單3</td> </tr> </tbody> </table> </body> </html>
<table border="1"> 單元格邊框
<table cellpadding="10"> 單元格邊距，指單元格內(nèi)文字與邊框的距離
<table align="center/right/left"> 表格顯示方式
<table width="width"> 表格寬度
<thead>標(biāo)簽定義表格的表頭。該標(biāo)簽用于組合HTML表格的表頭內(nèi)容。
<tbody>標(biāo)簽表格主體(正文)。該標(biāo)簽用于組合HTML表格的主體內(nèi)容。
<tfoot>標(biāo)簽定義表格的頁腳(腳注或表注)。該標(biāo)簽用于組合HTML表格中的表注內(nèi)容。
tfoot元素應(yīng)該與thead和tbody元素結(jié)合起來使用。
若使用thead、tfoot及tbody元素，就必須使用全部的元素。必須在table元素內(nèi)部使用這些標(biāo)簽。
在默認(rèn)情況下這些元素不會影響表格的布局。不過，可以使用CSS使這些元素改變表格的外觀。
<tr>標(biāo)簽定義HTML表格中的行。tr元素包含一個或多個th或td元素。
<td>標(biāo)簽定義HTML表格中的標(biāo)準(zhǔn)單元格。
HTML表格有兩類單元格：
表頭單元 - 包含頭部信息(由th元素創(chuàng)建)
標(biāo)準(zhǔn)單元 - 包含數(shù)據(jù)(由td元素創(chuàng)建)
td元素中的文本一般顯示為正常字體且左對齊
表格跨2列<td colspan="2">，表格跨2行<td rowspan="2">
空單元格。在一些瀏覽器中沒有內(nèi)容的表格單元可能會不顯示它的邊框，為了讓空單元格顯示邊框可以在該表格單元中加一個空格占位符 。
案例1：
<!doctype html> <html> <head> <title>表格</title> </head> <body> <p>每個表格由 table 標(biāo)簽開始。</p> <p>每個表格行由 tr 標(biāo)簽開始。</p> <p>每個表格數(shù)據(jù)由 td 標(biāo)簽開始。</p> <h5>一列：</h5> <table border="1"> <tr> <td>100</td> </tr> </table> <h5>一行三列：</h5> <table border="1"> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> </table> <h5>兩行三列：</h5> <table border="1"> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table> </body> </html>
案例2：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>如何使用 "align" 屬性排列單元格內(nèi)容,以便創(chuàng)建一個美觀的表格</title> </head> <body> <table width="400" border="1"> <thead> <tr> <th align="left">消費項目....</th> <th align="right">一月</th> <th align="right">二月</th> </tr> </thead> <tfoot bgcolor="pink"> <tr> <td align="left">總計</td> <td align="right">$1001.50</td> <td align="right">$744.65</td> </tr> </tfoot> <tbody> <tr> <td align="left">衣服</td> <td align="right">$241.10</td> <td align="right">$50.20</td> </tr> <tr> <td align="left">化妝品</td> <td align="right">$30.00</td> <td align="right">$44.45</td> </tr> <tr> <td align="left">食物</td> <td align="right">$730.40</td> <td align="right">$650.00</td> </tr> </tbody> </table> </body> </html>
Web網(wǎng)頁中表單的概念與作用。
表單結(jié)構(gòu)語法及屬性語法。
表單元素標(biāo)記語法及屬性語法。
域和域標(biāo)題標(biāo)記語法。
綜合運用表單及表單元素設(shè)計網(wǎng)頁。
表單是Web服務(wù)器端和客戶端進(jìn)行信息交互的主要橋梁。
Web服務(wù)器通過含有表單和表格控件的Web頁面完成用戶信息的采集。
輸入框：
單行文本輸入框
密碼輸入框
多行文本輸入框
復(fù)選框
單選按鈕
按鈕：
普通按鈕
提交按鈕
重置按鈕
圖像按鈕
文件選擇框
隱藏框
下拉列表框
表單是較為復(fù)雜的HTML元素，經(jīng)常與腳本、動態(tài)網(wǎng)頁、后臺數(shù)據(jù)處理等結(jié)合在一起使用，是設(shè)計動態(tài)網(wǎng)頁的必備元素。
利用表單可以在HTML頁面中插入一些表單控件(元素)，如文本框、提交按鈕、重置按鈕、單選按鈕、復(fù)選框、下拉列表等，完成各類信息的采集。
案例：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表單的使用實例</title> </head> <body> <form name="form1" method="post" action="form_action.jsp" enctype="text/plain"> <h4>輸入課程成績</h4> 姓名:<input type="text" /><br /> 高等數(shù)學(xué):<input type="text" size="15" /> 大學(xué)物理:<input type="text" size="15" /><br /><br /> <input type="submit" value="成績提交" /> <input type="reset" value="成績重置" /> </form> </body> </html>
name：給表單命名，表單命名后可以用腳本語言(如JavaScript)對它進(jìn)行控制。
action：指定服務(wù)器端處理表單信息的應(yīng)用程序。
method：指定表單“處理表單數(shù)據(jù)方法”，method的值(get、post，默認(rèn)get)。若消息要求保密度高且較長應(yīng)該使用post。
enctype：enctype是encodetype，即編碼類型。它規(guī)定表單數(shù)據(jù)在發(fā)送到服務(wù)器之前是否進(jìn)行編碼。有三種取值，分別如下：
| 值 | 描述 |
|---|---|
| application/x-www-from-urlencoded | 在發(fā)送前編碼所有字符(默認(rèn))。該方式只能上傳文本信息，不能上傳文件。 |
| multipart/form-data | 不對字符編碼。在使用包含文件上傳控件的表單時，必須使用該值。即表單數(shù)據(jù)既有文本又有二進(jìn)制時使用該方式。 |
| text/plain | 空格轉(zhuǎn)換為“+”號，但不對特殊字符編碼。 |
HTMl<form>元素，已設(shè)置所有可能的屬性的樣子：
<form action="action_page.php" method="GET" target="_blank" accept-charset="utf-8"vectype="application/x-www-from-urlencoded" autocomplete="off" novalidate> . form elements . </form>
<form>屬性的列表
| 屬性 | 描述 |
|---|---|
| accept-charset | 設(shè)置在被提交表單中使用的字符集(默認(rèn)：頁面字符集)。 |
| action | 設(shè)置向何處提交表單的地址(URL)提交頁面。 |
| autocomplete | 設(shè)置瀏覽器是否自動補全表單(默認(rèn)：開啟)。 |
| enctype | 設(shè)置被提交數(shù)據(jù)的編碼(默認(rèn)：url-encoded)。 |
| method | 設(shè)置在提交表單時所用的HTTP方法(默認(rèn)：GET)。 |
| name | 設(shè)置識別表單的名稱(對于DOM使用document.forms.name)。 |
| novalidate | 設(shè)置瀏覽器不驗證表單。 |
| target | 設(shè)置action屬性中地址的目標(biāo)(默認(rèn)：_self)。 |
Action屬性
action屬性定義在提交表單時執(zhí)行的動作。
向服務(wù)器提交表單的通常做法是使用提交按鈕。
一般表單會被提交到web服務(wù)器上的應(yīng)用程序。
若省略action屬性，則action會被設(shè)置為當(dāng)前頁面。
<form action="action_page.php">
Method屬性
何時使用GET？
何時使用POST？
GET是默認(rèn)提交方式。如果表單提交是被動的且沒有敏感信息建議用GET。
使用GET時，表單數(shù)據(jù)在頁面地址欄中是可見的。
注意：GET最適合少量數(shù)據(jù)的提交，瀏覽器會設(shè)定容量限制。
action_page.php?firstname=Mickey&lastname=Mouse
若表單正在更新數(shù)據(jù)或包含敏感信息(例如密碼)。
POST的安全性更好，因為在頁面地址欄中被提交的數(shù)據(jù)是不可見的。
method屬性規(guī)定在提交表單時所用的HTTP方法(GET或POST)：
<form action="action_page.php" method="GET"> <form action="action_page.php" method="POST">
name屬性
若要正確地提交表單，每個輸入字段必須設(shè)置一個name屬性。
案例：
<!DOCTYPE html> <html> <head> <title> HTML表單 </title> </head> <body> <form action="/demo/demo_form.asp"> First name:<br> <input type="text" value="Mickey"> <br> Last name:<br> <input type="text" name="lastname" value="Mouse"> <br><br> <input type="submit" value="Submit"> </form> <p>如果您點擊提交，表單數(shù)據(jù)會被發(fā)送到名為 demo_form.asp 的頁面。</p> <p>first name 不會被提交，因為此 input 元素沒有 name 屬性。</p> </body> </html>
用<fieldset>組合表單數(shù)據(jù)
<fieldset>元素組合表單中的相關(guān)數(shù)據(jù)。
<legend>元素為<fieldset>元素定義標(biāo)題。
案例：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>定義域和域標(biāo)題實例</title> </head> <body> <form> <fieldset> <legend align="center">基本信息</legend> 姓名: <input name="name" type="text"> 性別: <input name="sex" type="text"> </fieldset> <fieldset> <legend align="center">其他信息</legend> 身高: <input name="height" type="text"> 體重: <input name="weight" type="text"> </fieldset> </form> </body> </html>
定義域和域標(biāo)題
利用<fieldset> </fieldset>域標(biāo)記可將表單內(nèi)的相關(guān)元素進(jìn)行分組。
當(dāng)一組表單元素放到fieldset標(biāo)記內(nèi)時，瀏覽器會以特殊方式來顯示它們，它們可能有特殊的邊界、3D效果，或者可創(chuàng)建一個子表單來處理這些元素。
<legend> </legend>標(biāo)記定義域標(biāo)題。
<form> <fieldset> <legend align="left|center|right"域標(biāo)題</legend> <input name=" " type="radio" value=" " checked> ... </fieldset> </form>
表單信息輸入
name屬性，值自定義， 用來定義input元素的名稱。
type屬性，屬性值有：text單行文本輸入框、password密碼輸入框、checkbox復(fù)選框、image圖像按鈕、submit提交按鈕、reset重置按鈕、button普通按鈕、file文件選擇框、hidden隱藏框。
maxlength：設(shè)置單行文本框輸入的最大字符數(shù)；
size：設(shè)置單行輸入框可顯示的最大字符數(shù)；
value：文本框的值，指定輸入框中初始值；
readonly：只讀，文本框不可編輯。
案例：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>單行文本輸入框?qū)嵗?lt;/title> </head> <body> <h5>輸入用戶信息</h5> <form> 用戶名:<input type="text" name="chu" maxlength="20" size="10" /> 身份:<input type="text" name="jiu" readonly value="學(xué)生"><p/> 密 碼:<input type="password" name="psw" maxlength="20" size="10"> </form> </body> </html>
單行文本輸入框、密碼框文本框
<input name=" " type="text" maxlength=" " size=" " value=" " readonly> <input name= " type="password" maxlength=" " size=" ">
表單的主要功能是為用戶提供輸入信息的接口，將輸入信息發(fā)送請求到服務(wù)器并等待服務(wù)器響應(yīng)。
<form> <input name=" " type=" " > </form>
+ 復(fù)選框、單選按鈕
```html
<input name=" " type="checkbox" value=" " checked>
<input name=" " type="radio" value=" " checked>
```
注：checked表示預(yù)選中。每一個復(fù)選框name、value屬性都是不同的。每組單選按鈕的name值必須相同，而value值必須不同。
案例：
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>復(fù)選框與單選鈕的應(yīng)用</title>
<style type="text/css">
fieldset {
width: 300px;
height: 160px;
border: 2px double #003399;
padding-left: 30px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>請?zhí)顚憘€人信息</legend> <br>
姓名：<input type="text" name="xm" maxlength="10" size="10"><br>
愛好：<input type="checkbox" name="c1" value="讀書" />讀書
<input type="checkbox" name="c2" value="唱歌" checked="checked" />唱歌
<input type="checkbox" name="c3" value="游戲" checked="checked" />游戲<br>
性別：
<input type="radio" name="sex" value="male" checked="checked" />男性
<input type="radio" name="sex" value="female" />女性
</fieldset>
</form>
</body>
</html>
```
+ 圖像按鈕
```html
<input name=" " type="image" src=" " width=" " height=" ">
```
注：src屬性是必需的，它用于設(shè)置圖像文件的路徑。
案例：
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圖像按鈕實例</title>
<style type="text/css">
body {
text-align: center;
}
input {
width: 150px;
height: 120px;
}
</style>
</head>
<body>
<form>
<h4>我國首艘航母遼寧號</h4>
<input type="image" name="image" src="liaoninghao.jpg" align="center" />
<input type="submit" value="提交">
</form>
</body>
</html>
```
+ 提交按鈕、重置按鈕和普通按鈕
+ \<input name=" " type="submit" value=" ">
注：value屬性默認(rèn)為“提交”，可更改它來設(shè)置在按鈕上的文字。點擊提交按鈕后表單數(shù)據(jù)會提交給服務(wù)器。
+ \<input name=" " type="reset" value=" ">
注：value屬性默認(rèn)為“重置”，可更改它來設(shè)置在按鈕上的文字。點擊重置按鈕后表單域的內(nèi)容會清空。
+ \<input name=" " type="button" value=" " onclick=" ">
注：value屬性無默認(rèn)值，不設(shè)置會顯示成空白按鈕，可更改它來設(shè)置在按鈕上的文字。普通按鈕需要設(shè)置onclick屬性值綁定事件。
案例：
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三種按鈕的應(yīng)用</title>
<style type="text/css">
input {
width: 100px;
height: 25px;
}
body {
text-align: center;
}
fieldset {
width: 400px;
height: 180px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>三種按鈕的應(yīng)用</legend>
<h4>請輸入用戶信息：</h4>
用戶名：<input type="text" name="username" size="10" />
密碼：<input type="password" name="password" size="10" /><br /><br>
<input type="submit" name="submit" value="提交" />
<input type="reset" name="reset" value="重置" />
<input type="button" name="button" value="注冊新用戶" onclick="javascript:alert('注冊新用戶');" />
</fieldset>
</form>
</body>
</html>
```
+ 文件選擇框及隱藏框
+ \<input name=" " type="file">
注：選擇文件后并不能真正打開，只是將文件名回填到文件輸入框內(nèi)。
+ \<input name=" " type="hidden" value=" ">
注：隱藏框不顯示在表單中，它會隨用戶綁定一起提交給服務(wù)器。
案例：
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文件選擇框與隱藏框的應(yīng)用例</title>
<style type="text/css">
fieldset {
width: 500px;
height: 150px;
margin: 20p;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>文件選擇框與隱藏框的應(yīng)用例</legend>
<h5>請輸入個人信息：</h5>
姓名:<input type="text" name="name" size="10" />
性別:<input type="radio" name="sex" value="male" />男
<input type="radio" name="sex" value="female" />女
年齡:<input type="text" name="age" size="8" /><br />
<h5>請選擇文件：</h5>
<input type="file" name="file" size="40"><br>
<input type="hidden" name="admin" value="ABCD">
</fieldset>
</form>
</body>
</html>
```
+ 多行文本輸入框 + \<textarea name=" " rows=" " cols=" " wrap=" " >\</textarea> 注：rows指輸入的行數(shù)；cols指輸入的列數(shù)；wrap屬性指定文本換行模式，默認(rèn)值是soft表示文本不換行、可選值hard表示文本換行(包含換行符)。 + 下拉列表框 + 語法： ```html <select name=" " size=" " multiple> <option value=" " selected>選項內(nèi)容</option> <option value=" ">選項內(nèi)容</option> <option value=" ">選項內(nèi)容</option> </select> ``` + 注： + size定義下拉列表的大??； + multiple設(shè)置列表框支持多選； + selected設(shè)置選項為預(yù)選狀態(tài)。 + 案例： ```html <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>下拉列表框的應(yīng)用</title> </head> <body> <form> <h4>請選擇您的課程:</h4> <select name="course" size="4" multiple> <option value="c1" selected>C/C++程序設(shè)計</option> <option value="c2">計算機(jī)網(wǎng)絡(luò)</option> <option value="c3">數(shù)據(jù)結(jié)構(gòu)</option> <option value="c4">Java程序設(shè)計</option> <option value="c5">計算機(jī)組成原理</option> </select> </form> </body> </html> ```
到此，相信大家對“web表格與表單怎么運用”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼