在上圖所示的單子中，可以填寫我們的姓名，電話，身份證等信息，把這些填寫完整后，就可以辦理信用卡了。

其" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 或 在線咨詢 在線咨詢
15158846557 或 在線咨詢
所在位置： 首頁 > 營銷資訊 > 網(wǎng)站運營 > html怎么讓表單居中？？？

html怎么讓表單居中？？？

時間：2024-01-09 09:00:02 | 來源：網(wǎng)站運營

時間：2024-01-09 09:00:02 來源：網(wǎng)站運營

html怎么讓表單居中？？？：關(guān)于表單，對我們來說并不陌生。例如，我們?nèi)ャy行辦信用卡的時候，銀行會讓我們填寫如下圖所示的單子：

在上圖所示的單子中，可以填寫我們的姓名，電話，身份證等信息，把這些填寫完整后，就可以辦理信用卡了。

其實，上圖中所展示的這個單子就是表單了。當(dāng)然，這個表單是我們?nèi)粘Ｉ钪杏龅降谋韱危窃诰W(wǎng)頁開發(fā)中，表單是什么樣子的呢？如下圖所示：

在上圖中給我們呈現(xiàn)的是一個“婚戀”網(wǎng)站的注冊頁面，在這個注冊頁面中，我們可以填寫生日，常住地，身高，學(xué)歷等信息，完成這些信息的填寫后，就可以進(jìn)行注冊了。當(dāng)然，注冊成功以后，就可以找媳婦了。

像這種注冊頁面（不同網(wǎng)站，注冊頁面填寫的信可能是不一樣的），是在我們訪問網(wǎng)站的時候，比較常見的頁面，在這些注冊頁面中可以填寫我們的信息，完成注冊。而這就是我們在網(wǎng)頁中看到的表單了。

了解了什么是表單后，在這里需要你思考一個簡單的問題：使用表單的目的是什么？回答的非常好，使用表單的目的就是為了收集用戶信息。例如上圖所展示的“婚戀”網(wǎng)站，只有通過表單收集了用戶信息，才能跟用戶進(jìn)行交互。

例如，發(fā)短信，發(fā)郵件等。

知道了，表單的使用目的以后，我們再來看一下，表單是有哪幾部分組成的？

在HTML中，一個完整的表單通常有表單域，表單控件(也稱為表單元素)和提示信息3個部分組成。

如下圖所示：

首先，我們來看一下“表單域”，如上圖用紅色的線框起來的區(qū)域就是表單域，也就是表單的區(qū)域了（關(guān)于表單域還會在接下來的課程中繼續(xù)學(xué)習(xí)），在整個區(qū)域中有很多的框可以用來填寫信息，而且還有按鈕可以進(jìn)行選擇，這些用來填寫信息的框和按鈕就是"表單控件"。

為了說明在這些“表單控件”中填寫什么樣的信息，在其左側(cè)都有說明性的文字，例如“身高”，表明在其右側(cè)的框中只能填寫身高。這些說明性的文字就是“提示信息”。

通過導(dǎo)學(xué)內(nèi)容的學(xué)習(xí)，我們知道了使用表單的目的就是用來收集用戶的信息，而表單的組成有三部分，分別是“表單域”，“表單控件”以及“提示信息”。

在我們整個HTML表單課程的學(xué)習(xí)過程中，除了要了解表單的使用目的以及組成以外，最重要的就是掌握表單控件的創(chuàng)建以及對應(yīng)屬性的設(shè)置，這是我們整個課程的核心。

2、表單域

通過前面內(nèi)容的學(xué)習(xí)，我們知道了表單是有三部分組成的，分別是：“表單域”，

“表單控件”以及“提示信息”。這一小節(jié)課，我們學(xué)習(xí)一下“表單域”的內(nèi)容。

表單域就是一個包含表單元素的區(qū)域。

關(guān)于表單元素，在前面的課程中我們已經(jīng)學(xué)習(xí)過了，就是用來收集用戶信息的一些框和按鈕，也稱之為表單控件。

而我們的表單域就是包含這些表單控件的區(qū)域，下面再次看一下我們前面已經(jīng)看過的一張圖。

通過上圖，我們可以看到表單域包含了整個表單控件。

在HTML的標(biāo)簽中，我們通過<form>標(biāo)簽來定義表單域。那么這個表單域有什么作用呢？

表單域的作用就是收集用戶在表單元素中填寫的這些信息，然后把這些信息發(fā)送到對應(yīng)網(wǎng)站所在的服務(wù)器中。

例如，我們在上圖所示的“婚戀”網(wǎng)站的注冊頁面中的表單元素中填寫了信息以后，單擊“注冊”按鈕，這些信息就會發(fā)送到該“婚戀”網(wǎng)站所在的服務(wù)器（關(guān)于服務(wù)器，這里可以簡單的理解成一個高性能的電腦，關(guān)于服務(wù)器的內(nèi)容后面課程中還會詳細(xì)講解）進(jìn)行保存。

了解了表單域的作用后，下面看一下它的基本語法規(guī)范。

<form action="地址" method="提交方式" name="表單域名稱"> 各種表單元素控件</form>在form 標(biāo)簽中，有三個屬性，這三個屬性的含義如下圖所示：

下面對這三個屬性做一個簡單的介紹（關(guān)于三個屬性，在學(xué)習(xí)Node課程時，還會詳細(xì)講解）。

action: 我們前面說過，表單域的作用就是收集用戶在表單元素中填寫的信息，然后發(fā)送到網(wǎng)站所在的服務(wù)器，那么對應(yīng)的服務(wù)器端會有一個文件來接收這些信息，而action就是用來指定服務(wù)器端接收信息的這個文件的地址。

method: 表示的含義就是以什么樣的方式將表單元素中用戶填寫的數(shù)據(jù)發(fā)送到服務(wù)端。比較常見的方式有get和post 這兩種方式，關(guān)于這兩種方式有什么區(qū)別，也是在我們后期的Node課程中，會詳細(xì)的講解。

name:指定表單域的名稱，在一個頁面中有可能會有多個表單域，為了做區(qū)分，可以給每個表單域起一個名字,名字可以隨意起，只要不重名就可以。

了解了以上三個屬性后，看一下表單域的代碼實現(xiàn)，如下所示：

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>表單</title> </head> <body> <form method="post" action="register.php" name="form1"> </form> </body></html>在上面的代碼中，我們創(chuàng)建了一個表單域，名字叫做form1, 同時指定了數(shù)據(jù)發(fā)送的方式為post, 以及服務(wù)端接收數(shù)據(jù)的文件為register.php.

在這里還需要再次強調(diào)一下，關(guān)于form標(biāo)簽中的這三個屬性，目前我們在創(chuàng)建表單域的時候不用指定，只需要單獨寫一個form標(biāo)簽就可以了，后期在學(xué)習(xí)Node服務(wù)端開發(fā)的時候，還會詳細(xì)的講解。

現(xiàn)在，對于我們來說，只需要記住以下兩點內(nèi)容就可以了。

第一：在寫表單元素（表單控件）之前，應(yīng)該有個表單域?qū)⑵浒饋怼?br>
第二：表單域的創(chuàng)建就是通過form標(biāo)簽來完成的。

以上就是關(guān)于“表單域”這一小節(jié)的內(nèi)容，在這里我們就學(xué)習(xí)完了，下面把這塊內(nèi)容再來做一個總結(jié)。

關(guān)于這一小節(jié)的內(nèi)容，我們主要學(xué)習(xí)了以下幾點：

3、文本框與密碼框

通過前面的學(xué)習(xí)，我們知道了HTML表單是有，“表單域”，“表單控件”以及“提示信息”這三塊內(nèi)容組成。

而在上一小節(jié)中，我們已經(jīng)學(xué)習(xí)了“表單域”，在這一小節(jié)中我們來學(xué)習(xí)一下“表單控件”的內(nèi)容，而關(guān)于"提示信息"就非常簡單了，就是一些說明性的文字，在創(chuàng)建表單控件的時候，我們也會加上這些提示信息。

下面我們就來看一下“表單控件”的內(nèi)容。

“表單控件”也稱之為“表單元素”，就是讓用戶來輸入數(shù)據(jù)或者是選擇數(shù)據(jù)的一些控件。

當(dāng)然，這些表單元素是各種各樣的，如下圖所示：

通過上圖，我們可以看到，有要求用戶輸入信息的表單元素，例如：“驗證碼”，“昵稱”等。也有讓用戶選擇信息的表單元素，例如：“生日”的選擇。

總的來說，表單元素可以分為三類：

第一類：input 輸入表單元素

第二類：select 下拉表單元素

第三類：textarea 文本域元素

我們先來學(xué)習(xí)第一類，input 輸入表單元素。

在英文單詞中，input 就是輸入的意思，而在表單元素中，我們是通過<input>標(biāo)簽來構(gòu)建該類表單元素的。

<input>標(biāo)簽就是用于收集用戶的信息。

<input>標(biāo)簽的語法規(guī)范如下：

<input type="屬性值" />通過<input> 標(biāo)簽的語法規(guī)范，我們可以看到它是一個單標(biāo)簽，而且包含一個必須添加的type屬性。

type屬性的取值有多種，根據(jù)取值的不同，會顯示不同的表單元素，關(guān)于這一點，是我們重點要學(xué)習(xí)的。

那，type 屬性可以有哪些值呢？如下圖所示：

下面，我們先看一下type屬性取值為text的情況。

當(dāng)type屬性取值為text表示創(chuàng)建的表單元素為文本框。

文本框就是讓用戶輸入文本信息的，例如，下圖的“驗證碼”,“昵稱”都是文本框。

下面，我們就創(chuàng)建一個文本框。代碼如下所示的：

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>表單</title> </head> <body> <form> 用戶名:<input type="text" /> </form> </body></html>通過上面的代碼，我們可以看到首先創(chuàng)建了一個表單域，然后在其內(nèi)部添加了文本框，文本框是使用<input>標(biāo)簽創(chuàng)建，并且type 屬性的值必須為text. 在瀏覽器中打開上面的網(wǎng)頁，效果如下：

通過上圖，我們可以看到，在網(wǎng)頁中出現(xiàn)了一個框，在這個框中可以輸入任意的文字，這就是文本框了。我們給這個文本框的左側(cè)添加了“用戶名”這個提示信息，當(dāng)用戶看到這個提示信息就知道在這個文本框中要輸入用戶名了。在這，你可能會想，既然有了輸入用戶名的文本框，那么怎樣制作輸入密碼的框呢？

代碼如下：

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>表單</title> </head> <body> <form> 用戶名:<input type="text" /> <br /> 密 碼:<input type="text" /> </form> </body></html>在上面的代碼中，我們添加了“密碼”這一項，那么在這需要你考慮一下如上的創(chuàng)建方式是否正確？？

回答非常的好，以上創(chuàng)建“密碼”的方式是錯誤的。因為，如果按照上面的方式來創(chuàng)建密碼，那么用戶在輸入密碼的時候，就會變成明文展示了，這樣非常不安全。

如下圖所示：

而我們希望的是當(dāng)用戶輸入密碼的時候，不能以明文形式進(jìn)行展示，也就是不能讓用戶看見所輸入的密碼。這時候就需要將type屬性的值修改成password.

代碼如下所示：

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>表單</title> </head> <body> <form> 用戶名:<input type="text" /> <br /> 密 碼:<input type="password" /> </form> </body></html>在瀏覽器中打開上面的網(wǎng)頁，然后輸入密碼，會看到如下的效果。

通過上圖，我們可以看到在輸入密碼的時候，沒有再展示出具體的密碼信息了，而是以小圓點來代替，這樣就安全多了。而這時用來輸入密碼的這個框我們稱之為密碼框。

關(guān)于本小節(jié)的課程在這我們就學(xué)習(xí)完了，下面我們做一個總結(jié)。

我們可以通過<input>標(biāo)簽來構(gòu)建輸入表單元素。

<input>標(biāo)簽的語法規(guī)范如下：

<input type="屬性值" /><input>標(biāo)簽中包含一個必須添加的type屬性。

type屬性的取值有多種，根據(jù)取值的不同，會顯示不同的表單元素。例如文本框,type屬性的取值為text,密碼框type屬性的取值為password.

如果對你有幫助的話，點個贊收個藏，給作者一個鼓勵。也方便你下次能夠快速查找。

其他優(yōu)質(zhì)文章 ：

前端行業(yè)發(fā)展：

前端工作內(nèi)容：

前端學(xué)習(xí)路線：

前端必讀書籍：

面試相關(guān)：

HTML教程：

Koa2教程：

VUE教程：

其他：

關(guān)鍵詞：居中

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點擊下載Chrome瀏覽器
關(guān)閉