今天給各位分享html制作表單頁面的知識，其中也會對html如何制作表單進(jìn)行解釋，如果能碰巧解決你現(xiàn)在面臨的問題，別忘了關(guān)注本站，現(xiàn)在開始吧！

本文目錄一覽：

• 1、HTML網(wǎng)頁制作：插入表單
• 2、用表格和表單制作如下網(wǎng)頁。完整html代碼
• 3、需要一個HTML模板，用來做簡單的表單數(shù)據(jù)錄入
• 4、用HTML語言做一個表格
• 5、表單怎么做html
• 6、怎樣用html寫表單的教程

HTML網(wǎng)頁制作：插入表單

Html的表格用table來表示。下面，我們來看看HTML怎么插入表格吧。

table

首先定義HTML表格，代碼為table/table ，如下圖所示：

定義表格的行

使用tr元素定義HTML表格的行，如下圖所示：

定義單元格

使用td元素定義單元格，如下圖所示：

表格的邊框

然后用border定義表格的邊框，如下圖所示：

用表格和表單制作如下網(wǎng)頁。完整html代碼

1、使用標(biāo)簽table/table定義網(wǎng)頁的表格,使用style賦值類型將顯示在網(wǎng)頁。

2、使用tr標(biāo)簽定義行,使用th定義表頭,表頭的文字自動加粗。

3、tr和td標(biāo)簽配合,定義每行中的表格數(shù)量,現(xiàn)在定義3行5列的表格。

4、使用caption/caption定義表格的標(biāo)題。

5、表格分為三個部分,表頭部，表主體，表尾部。

6、表頭部和主體分別放標(biāo)題和表格的內(nèi)容,而表的尾部通常放的是頁數(shù)。

需要一個HTML模板，用來做簡單的表單數(shù)據(jù)錄入

HTML做個數(shù)據(jù)錄入的模板。如下參考：

1、首先新建一個html，點(diǎn)擊body/body中間，先填入表格內(nèi)容：

2.內(nèi)容可根據(jù)要求編寫，示例代碼如下：

table

p style="text-align:center "功課表/p

tr

th語文/th

td7:00-7:40/td

td7:50-8:30/td

/tr

tr

th數(shù)學(xué)/th

td7:00-7:40/td

td7:50-8:30/td

/tr

tr

th英文/th

td7:00-7:40/td

td7:50-8:30/td

/tr

/table

3.然后在head/head中間輸入樣式表的樣式，如下圖：

4.樣式也可以根據(jù)個人需要設(shè)置，設(shè)置單元格的寬度高度，合并單元格，位置，顏色等，示例代碼如下：

style type="text/css"

body

{

width:340px;

height:800px;

}

table

{

border-collapse:collapse;

}

th,td

{

width:100px;

height:40px;

border:1pxsolidblack;

font-size:12px;

text-align:center;

}

/style

5.注意，此代碼“table的意思是表”的含義是將表邊框合并為單個邊框以合并相鄰的更改。

6.預(yù)覽結(jié)果如下圖所示，一個制作簡單的HTML模板。

用HTML語言做一個表格

html做個表格的步驟如下：

1、首先新建一個html，點(diǎn)擊body/body中間，先填入表格內(nèi)容；

2、內(nèi)容根據(jù)需求來寫即可，示例代碼如下：

table

p style="text-align:center "功課表/p

tr

th語文/th

td7:00-7:40/td

td7:50-8:30/td

/tr

tr

th數(shù)學(xué)/th

td7:00-7:40/td

td7:50-8:30/td

/tr

tr

th英文/th

td7:00-7:40/td

td7:50-8:30/td

/tr

/table

3、然后在head/head中間輸入樣式表的樣式；

4、樣式也根據(jù)個人的需求來設(shè)置即可，設(shè)置單元格的寬度高度，合并單元格，位置，顏色等等，示例代碼如下：

style type="text/css"

body

{

width:340px;

height :800px;

}

table

{

border-collapse :collapse ;

}

th,td

{

width:100px;

height:40px;

border :1px solid black;

font-size:12px;

text-align :center;

}? ?

/style

5、這里需要注意這個代碼“table”的意義是將表格邊框合并為單一的邊框，將相鄰變合并。

6、預(yù)覽結(jié)果如下所示，一個簡單的表格就制作出來了。

表單怎么做html

1、html文件是最常見的網(wǎng)頁文件，所謂HTML是超文本標(biāo)記語言（HyperText Markup Language，簡稱：HTML）是一種用于創(chuàng)建網(wǎng)頁的標(biāo)準(zhǔn)標(biāo)記語言。

2、html文件的編輯非常簡單，使用文本編輯器就可以打開，也可以使用editplus，vim，notepad++，ultraEdit 等等編輯工具打開，打開就可以直接看到源碼，也可以進(jìn)行編輯修改。

3、如果是想看HTML頁面呈現(xiàn)的效果，可以使用瀏覽器打開。不同的瀏覽器可能顯示效果會有不一致。

4、表單的話，可以直接使用table來實(shí)現(xiàn)，就是俗稱的表格標(biāo)簽。

5、希望對你有幫助。

怎樣用html寫表單的教程

我們在瀏覽一些網(wǎng)站時經(jīng)常會用到一種網(wǎng)頁元素--表單。如下圖，像這樣允許用戶輸入并使用按鈕提交信息的功能，我們稱之為表單，那么接下來介紹HTML表單相關(guān)的一些知識點(diǎn)。

1)表單:幫助服務(wù)器收集客戶端信息的一種機(jī)制

form?action="提交到的頁面"?method="提交的方法"

表單控件

form

action:數(shù)據(jù)最后所提交的頁面 絕對路徑/相對路徑

method:數(shù)據(jù)提交服務(wù)器時的提交方法 post get

2)表單控件:表單用于用戶填寫信息的控件

1、文本控件: 用于用戶填寫較少信息，且可以顯示用戶填寫信息的控件

(注冊時，用戶名填寫)

格式:

input?type="text"?name=""??id=""??value=""?size=""?placeholder=""/

type:設(shè)置控件樣式 text

name:用于表單收集信息的一種標(biāo)示符，也就是控件的名稱

2、密碼框:只是用戶輸入的內(nèi)容看不到

input?type="password"?name=""?id=""??size=""/

3、單選按鈕組:由多個單選按鈕組成的按鈕組，只能選中其中一個，這種按鈕組

input?type='radio'?name=""?value=""?checked標(biāo)示符

name:為了保證傳遞服務(wù)器數(shù)據(jù)只有一個，所以name值必須相同

value：是用提交服務(wù)器時，該標(biāo)簽被提交的數(shù)據(jù),value不能相同;

checked:默認(rèn)按鈕組中的那個按鈕被選中

性別:input?type='radio'?name=""?value=""?checked男

input?type='radio'?name=""?value=""?checked女

input?type='radio'?name=""?value=""?checked保密

所有表單控件name值不能相同!!!

4、復(fù)選按鈕組: 與單選按鈕組的區(qū)別可以選擇多個，為了能將用戶選擇的多項(xiàng)內(nèi)容傳遞服務(wù)器中，要將name名字后面加個[]

格式:

input?type='checkbox'?name=""?id=""?value=""?checked標(biāo)示

選課:

input?type='checkbox'?name='classes[]'?checked?value='1'語文

input?type='checkbox'?name='classes[]'??value='2'數(shù)學(xué)

input?type='checkbox'?name='classes[]'??value='3'歷史

input?type='checkbox'?name='classes[]'??value='4'政治

input?type='checkbox'?name='classes[]'??value='5'物理

input?type='checkbox'?name='classes[]'??value='6'化學(xué)

input?type='checkbox'?name='classes[]'?checked?value='7'美術(shù)

注意：一定要在name屬性后面添加[]

5)下拉列表框:

格式:

select?name=""?

option?value=""?selected下拉列表項(xiàng)option

option?value=""?下拉列表項(xiàng)option

option?value=""?下拉列表項(xiàng)option

option?value=""?下拉列表項(xiàng)option

option?value=""?下拉列表項(xiàng)option

select

multiple:允許用戶選中多個下拉列表項(xiàng)

optgroup: 設(shè)置下拉分類標(biāo)示

6) 文本域：可以輸入多行數(shù)據(jù)的表單控件

textarea?name=""?id=""?cols=""?rows=""

內(nèi)容

textarea

rows:設(shè)置文本域可以輸入的行數(shù)

cols:設(shè)置的文本域輸入的列數(shù)(一行可以輸入多少個字符)(不是PX)

個人介紹:

textarea?name='descs'?cols="50"?rows="10"

我是個學(xué)生

textarea

7)隱藏域：

input?type="hidden"?name?=?“”value?=””

8)上傳控件：

input?type="file"?name=””

9)按鈕標(biāo)簽:

普通按鈕:為js提供的控件

input?type='button'?name=””?value=""/

value：按鈕中顯示的數(shù)據(jù)和提交到服務(wù)器后該控件提交的值

input?type='button'?name='clicks'?value="點(diǎn)我"/

提交按鈕:點(diǎn)擊后可以提交表單

input?type='submit'?name="add"?value='注冊'/

重置按鈕:點(diǎn)擊后可以將用戶輸入的數(shù)據(jù)清空

input?type='reset'?name='cancel'?value='重置'

圖片提交按鈕:使用圖片作為提交按鈕

input?type='image'?src='圖片地址'?name=””

本文的分享就到這，希望我的回答能幫到你。

關(guān)于html制作表單頁面和html如何制作表單的介紹到此就結(jié)束了，不知道你從中找到你需要的信息了嗎 ？如果你還想了解更多這方面的信息，記得收藏關(guān)注本站。