HTML表單｜如何在HTML頁面創(chuàng)建表單的文本域和密碼域？

TML 表單用于收集不同類型的用戶輸入，它是一個包含表單元素的區(qū)域。

表單元素是允許用戶在表單中輸入內(nèi)容,比如：文本域(textarea)、下拉列表、單選框(radio-buttons)、復(fù)選框(checkboxes)等等。今天我們主要來說說文本域和密碼域這兩個部分，希望對大家學(xué)習(xí)有所幫助喲！

本文福利后臺回復(fù)【學(xué)習(xí)】即可獲得Python、HTML等編程學(xué)習(xí)資料

HTML 表單

表單使用表單標(biāo)簽 <form> 來設(shè)置:

<form>

First name: <input type="text" name="firstname"><br>

Last name: <input type="text" name="lastname">

</form>

HTML 表單 - 輸入元素

多數(shù)情況下被用到的表單標(biāo)簽是輸入標(biāo)簽（<input>）。輸入類型是由類型屬性（type）定義的。

如何在 HTML 頁面創(chuàng)建文本域？

用戶可以在文本域中寫入文本，參考代碼如下：

<!DOCTYPE html>

<html>

<head>

<title>菜鳥教程(runoob.com)</title>

</head>

<body>

First name: <input type="text" name="firstname"><br>

Last name: <input type="text" name="lastname">

</form>

<p><b>注意：</b> 表單本身是不可見的。并且注意一個文本字段的默認(rèn)寬度是20個字符。</p>

</body>

</html>

運(yùn)行結(jié)果為

如何創(chuàng)建 HTML 的密碼域？

<!DOCTYPE html>

<html>

<head>

<title>菜鳥教程(runoob.com)</title>

</head>

<body>

Username: <input type="text" name="user"><br>

Password: <input type="password" name="password">

</form>

<p><b>注意：</b> 密碼字段中的字符是隱藏的(顯示為星號或圓圈)。</p>

</body>

</html>

運(yùn)行結(jié)果如下

戳了解更多免費(fèi)領(lǐng)取HTML試聽課~

lt;form> 標(biāo)簽用于為用戶輸入創(chuàng)建 HTML 表單。

表單能夠包含 input 元素，比如文本字段、復(fù)選框、單選框、提交按鈕等等。

表單還可以包含 menus、textarea、fieldset、legend 和 label 元素。

表單用于向服務(wù)器傳輸數(shù)據(jù)。

下面小編為大家介紹幾個常用的表單標(biāo)簽。

<datalist>標(biāo)簽

這個標(biāo)簽規(guī)定了 <input> 元素可能的選項(xiàng)列表。

一般會被用來在為<input> 元素提供"自動完成"的特性。用戶能看到一個下拉列表，里邊的選項(xiàng)是預(yù)先定義好的，將作為用戶的輸入數(shù)據(jù)。

我們來演示一個案例，大家就知道怎么用了：

上面這個小代碼，我們看得出，input標(biāo)簽的list屬性值和datalist標(biāo)簽的id是一樣的，沒錯，它們就是這樣來相互關(guān)聯(lián)起來的。當(dāng)它們結(jié)合起來之后，不僅可以像select標(biāo)簽一樣可以通過下拉來選擇已有的選項(xiàng)，還可以根據(jù)用戶輸入的字符，對選項(xiàng)進(jìn)行匹配篩選。

效果圖如下：

有了datalist標(biāo)簽，我們實(shí)現(xiàn)這種效果起來十分簡單，不需要任何的JavaScript代碼也能輕松實(shí)現(xiàn)。

<output>標(biāo)簽：

標(biāo)簽定義不同類型的輸出。比如腳本的輸出、一些加減乘除的運(yùn)算結(jié)果，我們都可以使用這個標(biāo)簽。

我們來舉個例子：輸入的數(shù)字乘以2后得到的結(jié)果，我們用output輸出顯示。

我們用oninput屬性監(jiān)聽著表單的變化，并把得到的結(jié)果賦值到output標(biāo)簽的value。我們來看看效果圖：

其中，output標(biāo)簽是可以離開form表單標(biāo)簽的，但是，如果你這樣做的話，必須給output標(biāo)簽添加form屬性，其屬性值是與其相關(guān)聯(lián)form表單的id。

我們來將output移到form表單的外面試試：

<form id="demo" oninput="b.value = parseInt(a.value)*2">
 <input type="number" name="a"> 乘以2=
</form>
<output form="demo" name="b" for="a"></output>

跟上面的代碼有幾處不同之處，form標(biāo)簽多了一個id，值為“demo”，output標(biāo)簽被移到了form標(biāo)簽外面，不再是form標(biāo)簽的子節(jié)點(diǎn)，變成了兄弟節(jié)點(diǎn)（當(dāng)然你可以把它移到文檔的其他位置）。output標(biāo)簽還多了一個form屬性，此時，它的值正好是form標(biāo)簽的id值：“demo”。這種寫法，代碼同樣是奏效的。

<keygen>標(biāo)簽

這個標(biāo)簽相信大家很少用到，但是也是為了學(xué)習(xí)，我們來了解一下就好。

這個標(biāo)簽規(guī)定用于表單的密鑰對生成器字段。當(dāng)提交表單時，私鑰存儲在本地，公鑰發(fā)送到服務(wù)器，這種機(jī)制是專為使用基于Web的證書管理系統(tǒng)。

我在MDN（Mozilla Developer Network）的網(wǎng)站上看到了關(guān)于它的一些介紹：

There iscurrently discussion among Web browser makers whether to keep this feature ornot. Until a decision is reached, it is better to continue to consider thisfeature as deprecated and going away.

大意是：目前各大瀏覽器廠商還在討論是否要保留它，在討論結(jié)束之前，你最好還是別用它。

而另一段話則是更加直接明了：

This featurehas been removed from the Web standards. Though some browsers may still supportit, it is in the process of being dropped. Do not use it in old or newprojects. Pages or Web apps using it may break at any time.

大意是：雖然有些瀏覽器還支持它，但是這個特性已經(jīng)被移除出web標(biāo)準(zhǔn)了，以后別使用它了。

家好，今天我將和大家一起動手做個練習(xí)，使用 Flexbox 布局創(chuàng)建一個響應(yīng)式的表單，本篇文章不會和大家生硬的去介紹 Flexbox 知識點(diǎn)，而是通過實(shí)踐的形式去理解 Flexbox 布局。剛學(xué)前端時，大家會不會覺得CSS太容易了，沒有過多實(shí)踐，就開始上手實(shí)踐JS和相關(guān)的前端框架了，一遇到一些樣式的問題，就開始慌了，無從下手。CSS學(xué)好用好，也是需要花功夫的，不要因?yàn)镃SS簡單了，就輕視了，畢竟作為一個專業(yè)的前端，要給大家呈現(xiàn)產(chǎn)品美感，更多考驗(yàn)的是 CSS 的功底。

表單項(xiàng)目長啥樣？

好了，給大家嘮叨多了，讓我們回到本節(jié)的案例，雖然例子簡單，但是要做漂亮了，是需要花功夫的，這里我們不使用媒介查詢屬性，完全使用 Flexbox 布局就能創(chuàng)建一個完美的響應(yīng)式表單，在動手之前，我們來看看，我們例子長什么樣？

創(chuàng)建表單 HTML 結(jié)構(gòu)

好了，基于上面的長相，我們開始動手創(chuàng)建表單的 HTML 結(jié)構(gòu)：

創(chuàng)建 .flex-outer 無序列表包裹整個表單元素。
接著在內(nèi)部創(chuàng)建 .flex-inner 無序列包裹復(fù)選表單元素。
幾乎所有的表單都有其對應(yīng)的 label 元素，方便擴(kuò)大表單元素的點(diǎn)擊區(qū)域。

僅此而已，我們通過定義了兩個無序列表創(chuàng)建了一個簡單表單結(jié)構(gòu)，示例代碼如下：

<div class="container">
 <form>
  <ul class="flex-outer">
    <li>
      <label for="first-name">First Name</label>
      <input type="text" id="first-name" placeholder="Enter your first name here">
    </li>
    <li>
      <label for="last-name">Last Name</label>
      <input type="text" id="last-name" placeholder="Enter your last name here">
    </li>
    <li>
      <label for="email">Email</label>
      <input type="email" id="email" placeholder="Enter your email here">
    </li>
    <li>
      <label for="phone">Phone</label>
      <input type="tel" id="phone" placeholder="Enter your phone here">
    </li>
    <li>
      <label for="message">Message</label>
      <textarea rows="6" id="message" placeholder="Enter your message here"></textarea>
    </li>
    <li>
      <p>Age</p>
      <ul class="flex-inner">
        <!-- list items here -->
      </ul>
    </li>
    <li>
      <button type="submit">Submit</button>
    </li>
  </ul>
 </form>
</div>

接下來我們創(chuàng)建 .flex-inner 元素及年齡選擇部分，示例代碼如下：

<ul class="flex-inner">
  <li>
    <input type="checkbox" id="twenty-to-twentynine">
    <label for="twenty-to-twentynine">20-29</label>
  </li>
  <li>
    <input type="checkbox" id="thirty-to-thirtynine">
    <label for="thirty-to-thirtynine">30-39</label>
  </li>
  <!-- more list items here -->
</ul>

完成以上結(jié)構(gòu)后，我們的頁面長這樣：

基本的模樣有了，我們需要借助CSS進(jìn)行美化，長這樣，我們怎么好意思拿的出手。

定義表單樣式

1、接下來，我們來定義 flex 容器，在這個例子中，我們在以下元素進(jìn)行應(yīng)用：

.flex-outer 列表中的元素
在 .flex-inner 的 checkboxes 元素

此外，我們需要讓這些彈性元素在 cross-axis 軸方向垂直居中，并支持溢出換行：

.flex-outer li,
.flex-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

2、接下來我們來定義彈性盒子的寬度，我們先從定義 .flex-outer 列表的元素開始。

我們的需求是這樣的：

每個 labels 的寬度至少為120px, 最多為220px。
每個表單元素的寬度至少為220px

通過這個需求，我們應(yīng)該明確表單寬度至少為340px, lable 與對應(yīng)的表單元素水平并排顯示。

上述的值，你可以根據(jù)自己的需求自行修改

最終我們完成后的代碼如下所示：

.flex-outer > li > label,
.flex-outer li p {
  flex: 1 0 120px;
  max-width: 220px;
}
 
.flex-outer > li > label + *,
.flex-inner {
  flex: 1 0 220px;
}

完成后的效果如下圖所示：

定義提交按鈕樣式

我們繼續(xù)來定義提交按鈕的樣式，其也是彈性元素，基本的樣式代碼如下：

.flex-outer li button {
  margin-left: auto;
  padding: 8px 16px;
  border: none;
  background: #333;
  color: #f2f2f2;
  text-transform: uppercase;
  letter-spacing: .09em;
  border-radius: 2px;
}

處理 Checkboxes 的樣式

接著我們繼續(xù)處理復(fù)選框 Checkboxes 的樣式，在定義基礎(chǔ)表單樣式時，我們設(shè)置了.flex-inner 容器的最小寬度為220px。

1、首先我們來處理下每個 Checkbox 的寬度，設(shè)置其父元素 li 標(biāo)簽的寬度為100px:

.flex-inner li {
  width: 100px;
}

2、接著我們來使用 justify-content 屬性來定義元素在 main-axis 的顯示方式，這里我使用了 space-between 對齊方式。

.flex-inner {
  justify-content: space-between;
}

使用這個屬性，能讓我們很好的均勻的對齊元素，唯一不足時，每行項(xiàng)目不相等時，最后一行的對齊方式也許不是你期望看到的。

如上圖所示，也許你希望最后兩個元素相鄰顯示，不是分的這么開，我么該如何做呢？

首先移除 justify-content 的對齊屬性
修正每個彈性盒子的寬度，比如寬度為50%
使用媒介查詢器，當(dāng)屏幕寬度大于 992px 時，我們添加彈性盒子的寬度，讓其寬度為25%。

通過以上學(xué)習(xí)，我們有兩點(diǎn)需要明確的是：

flex 布局為我們提供了極大的靈活性，讓我們可以快速的構(gòu)建漂亮表格。
上述CSS具體的值只是適用本示例，你可以根據(jù)自己的需求進(jìn)行調(diào)整。例如，我們這里的年齡復(fù)選框定義的寬度很小，才100px, 如果他們的寬度不同的話，你可以使用 flex: 1 100px 來定義寬度，彈性盒子能足夠智能化的處理對齊問題。

最終完成的樣式

完成上述基本的架子后，我們需要讓表單更加漂亮些，比如添加樣式，定義文字大小、盒子的內(nèi)間距、寬度等，由于文章篇幅有限，這里就不過多介紹了，最終完成的 CSS 代碼如下所示：

body {
  font: normal 18px/1.5 "Fira Sans", "Helvetica Neue", sans-serif;
  background: #3AAFAB;
  color: #fff;
  padding: 50px 0;
}

.container {
  width: 80%;
  max-width: 1200px;
  margin: 0 auto;
}

.container * {
  box-sizing: border-box;
}

.flex-outer,
.flex-inner {
  list-style-type: none;
  padding: 0;
}

.flex-outer {
  max-width: 800px;
  margin: 0 auto;
}

.flex-outer li,
.flex-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.flex-inner {
  padding: 0 8px;
  justify-content: space-between;  
}

.flex-outer > li:not(:last-child) {
  margin-bottom: 20px;
}

.flex-outer li label,
.flex-outer li p {
  padding: 8px;
  font-weight: 300;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.flex-outer > li > label,
.flex-outer li p {
  flex: 1 0 120px;
  max-width: 220px;
}

.flex-outer > li > label + *,
.flex-inner {
  flex: 1 0 220px;
}

.flex-outer li p {
  margin: 0;
}

.flex-outer li input:not([type='checkbox']),
.flex-outer li textarea {
  padding: 15px;
  border: none;
}

.flex-outer li button {
  margin-left: auto;
  padding: 8px 16px;
  border: none;
  background: #333;
  color: #f2f2f2;
  text-transform: uppercase;
  letter-spacing: .09em;
  border-radius: 2px;
}

.flex-inner li {
  width: 100px;
}

小節(jié)

到這里，本示例就完成了，我們用最少最簡單的方式使用 flexbox 布局完成了響應(yīng)式表單的創(chuàng)建，大家可以訪問以下網(wǎng)址，在線體驗(yàn)效果：

https://www.qianduandaren.com/demo/flexform/

最后分享給大家一張圖，方便大家記憶和學(xué)習(xí)彈性盒子布局。

在線咨詢

上一篇：干貨：Html5深度剖析
下一篇：從6個方面分析：電商禮品卡系統(tǒng)應(yīng)如何搭建？

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

HTML表單｜如何在HTML頁面創(chuàng)建表單的文本域和密碼域？

<datalist>標(biāo)簽

<output>標(biāo)簽：

<keygen>標(biāo)簽

表單項(xiàng)目長啥樣？

創(chuàng)建表單 HTML 結(jié)構(gòu)

定義表單樣式

定義提交按鈕樣式

處理 Checkboxes 的樣式

最終完成的樣式

小節(jié)

您的項(xiàng)目需求