HTML表單｜如何在HTML頁面創建表單的文本域和密碼域？

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

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

本文福利后臺回復【學習】即可獲得Python、HTML等編程學習資料

HTML 表單

表單使用表單標簽 <form> 來設置:

<form>

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

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

</form>

HTML 表單 - 輸入元素

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

如何在 HTML 頁面創建文本域？

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

<!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> 表單本身是不可見的。并且注意一個文本字段的默認寬度是20個字符。</p>

</body>

</html>

運行結果為

如何創建 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>

運行結果如下

戳了解更多免費領取HTML試聽課~

lt;form> 標簽用于為用戶輸入創建 HTML 表單。

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

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

表單用于向服務器傳輸數據。

下面小編為大家介紹幾個常用的表單標簽。

<datalist>標簽

這個標簽規定了 <input> 元素可能的選項列表。

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

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

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

效果圖如下：

有了datalist標簽，我們實現這種效果起來十分簡單，不需要任何的JavaScript代碼也能輕松實現。

<output>標簽：

標簽定義不同類型的輸出。比如腳本的輸出、一些加減乘除的運算結果，我們都可以使用這個標簽。

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

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

其中，output標簽是可以離開form表單標簽的，但是，如果你這樣做的話，必須給output標簽添加form屬性，其屬性值是與其相關聯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標簽多了一個id，值為“demo”，output標簽被移到了form標簽外面，不再是form標簽的子節點，變成了兄弟節點（當然你可以把它移到文檔的其他位置）。output標簽還多了一個form屬性，此時，它的值正好是form標簽的id值：“demo”。這種寫法，代碼同樣是奏效的。

<keygen>標簽

這個標簽相信大家很少用到，但是也是為了學習，我們來了解一下就好。

這個標簽規定用于表單的密鑰對生成器字段。當提交表單時，私鑰存儲在本地，公鑰發送到服務器，這種機制是專為使用基于Web的證書管理系統。

我在MDN（Mozilla Developer Network）的網站上看到了關于它的一些介紹：

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.

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

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

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.

大意是：雖然有些瀏覽器還支持它，但是這個特性已經被移除出web標準了，以后別使用它了。

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

表單項目長啥樣？

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

創建表單 HTML 結構

好了，基于上面的長相，我們開始動手創建表單的 HTML 結構：

創建 .flex-outer 無序列表包裹整個表單元素。
接著在內部創建 .flex-inner 無序列包裹復選表單元素。
幾乎所有的表單都有其對應的 label 元素，方便擴大表單元素的點擊區域。

僅此而已，我們通過定義了兩個無序列表創建了一個簡單表單結構，示例代碼如下：

<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>

接下來我們創建 .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>

完成以上結構后，我們的頁面長這樣：

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

定義表單樣式

1、接下來，我們來定義 flex 容器，在這個例子中，我們在以下元素進行應用：

.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

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

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

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

.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 button {
  margin-left: auto;
  padding: 8px 16px;
  border: none;
  background: #333;
  color: #f2f2f2;
  text-transform: uppercase;
  letter-spacing: .09em;
  border-radius: 2px;
}

處理 Checkboxes 的樣式

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

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

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

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

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

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

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

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

通過以上學習，我們有兩點需要明確的是：

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

最終完成的樣式

完成上述基本的架子后，我們需要讓表單更加漂亮些，比如添加樣式，定義文字大小、盒子的內間距、寬度等，由于文章篇幅有限，這里就不過多介紹了，最終完成的 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;
}

小節

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

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

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

在線咨詢

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

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML表單｜如何在HTML頁面創建表單的文本域和密碼域？

<datalist>標簽

<output>標簽：

<keygen>標簽

表單項目長啥樣？

創建表單 HTML 結構

定義表單樣式

定義提交按鈕樣式

處理 Checkboxes 的樣式

最終完成的樣式

小節

您的項目需求