HTML 表單輸入類型

2018-06-16 16:18 更新

HTML表單輸入類型

按鈕輸入

輸入元素的提交，重置和按鈕類型創(chuàng)建與使用button元素時創(chuàng)建的按鈕非常相似的按鈕。

創(chuàng)建按鈕的輸入元素類型如下所示。

  • submit - 創(chuàng)建提交表單的按鈕。其他屬性：formaction，formenctype，formmethod，formtarget，formnovalidate。
  • reset - 創(chuàng)建用于重置表單的按鈕。
  • button - 創(chuàng)建不執(zhí)行任何操作的按鈕。

使用提交類型時可用的其他屬性與使用submitbutton元素時相同。

重置和按鈕類型不定義任何其他屬性。

對于這三種輸入類型，按鈕上顯示的標簽取自value屬性。

以下代碼使用輸入元素創(chuàng)建按鈕：

<!DOCTYPE HTML>
<html>
<body>
  <form method="post" action="http://example.com/form">
    <p>
      <label for="name"> Name: <input value="XML" id="name"
        name="name" />
      </label>
    </p>
    <p>
      <label for="password"> Password: 
      <input type="password" placeholder="Min 6  characters" id="password" name="password" />
      </label>
    </p>
    <p>
      <label for="fave"> Fruit: 
      <input value="Apples" id="fave" name="fave" />
      </label>
    </p>
    <input type="submit" value="Submit Vote" /> 
    <input type="reset" value="Reset Form" /> 
    <input type="button" value="My Button" />
  </form>
</body>
</html>

輸入按鈕元素不能使用按鈕元素顯示標記的文本。

密碼輸入

將type屬性設置為password會創(chuàng)建用于輸入密碼的輸入元素。

用戶鍵入的字符由掩碼字符，例如星號(*)表示。

密碼輸入元素可以具有以下附加屬性。其中許多都與文本類型共享，并以相同的方式工作。

  • maxlength - 設置用戶可以在密碼框中輸入的最大字符數(shù)。
  • pattern - 指定用于輸入驗證的正則表達式模式。
  • placeholder - 指定一個提示，告訴用戶您希望輸入的種類。
  • readonly - 如果存在，則使密碼框為只讀，并且用戶無法編輯內(nèi)容。
  • required - 指定用戶必須輸入值以進行輸入驗證。
  • size - 指定元素的寬度，以字符數(shù)表示。
  • value - 指定密碼的初始值。

以下代碼顯示正在使用的密碼類型。

<!DOCTYPE HTML>
<html>
<body>
  <form method="post" action="http://example.com/form">
    <p>
      <label for="name"> Name: 
      <input value="XML" id="name" name="name" />
      </label>
    </p>
    <p>
      <label for="password"> Password: 
      <input type="password" placeholder="Min 6 characters" id="password" name="password" />
      </label>
      
        <br />Another Password: 
       <input type="password" 
              name="pwdPassword" 
              value="" 
                  size="20" 
                  maxlength="20" /><br />      
    </p>
    <p>
      <label for="fave"> Fruit: 
      <input value="Apples" id="fave" name="fave" />
      </label>
    </p>
    <button type="submit">Submit Vote</button>
  </form>
</body>
</html>

限制數(shù)據(jù)項輸入

HTML5為輸入元素的type屬性引入了新值，我們可以從用戶收集更多特定數(shù)據(jù)。

以下列表總結了這些新類型值。

  • checkbox - 將輸入限制為true / false復選框。
  • color - 將輸入限制為顏色。
  • date - 將輸入限制為日期。
  • datetime - 將輸入限制為具有時區(qū)的全球日期和時間。
  • datetime-local - 將輸入限制為不帶時區(qū)的全局日期和時間。
  • email - 將輸入限制為格式正確的電子郵件地址。
  • month - 將輸入限制為年和月。
  • number - 將輸入限制為整數(shù)或浮點數(shù)。
  • radiobutton - 將輸入限制為固定的選項集。
  • range - 將輸入限制為指定范圍。
  • tel - 將輸入限制為格式正確的電話號碼。
  • time - 將輸入限制為一天中的時間。
  • week - 將輸入限制為年和周。
  • url - 將輸入限制為完全限定的URL。

數(shù)字輸入

type屬性的數(shù)字值創(chuàng)建一個只接受數(shù)字值的輸入框。

以下列表描述了使用數(shù)字輸入類型時可用的其他屬性。

  • list - 設置為此元素提供值的datalist元素的id。
  • min - 為輸入驗證目的設置最小值。
  • max - 設置用于輸入驗證目的的最大值。
  • readonly - 如果存在，則使輸入框為只讀，并且用戶無法編輯內(nèi)容。
  • required - 用戶必須提供用于輸入驗證目的的值。
  • step - 將增量和減量的步長設置為該值。
  • value - 指定元素的初始值。

min，max，step和value屬性的值可以是表示為整數(shù)或十進制數(shù)；例如，3和3.14。

以下代碼顯示正在使用的輸入的數(shù)字類型。

<!DOCTYPE HTML>
<html>
<body>
  <form method="post" action="http://example.com/form">
    <p>
      <label for="price"> $ per unit in your area: <input
        type="number" step="1" min="0" max="100" value="1" id="price"
        name="price" />
      </label>
    </p>
    <input type="submit" value="Submit Vote" />
  </form>
</body>
</html>

范圍輸入

我們可以使用輸入元素的范圍類型來獲取數(shù)值。

范圍輸入元素的值限制用戶從預定范圍中選擇值。

范圍類型支持與數(shù)字類型相同的一組屬性。

以下代碼顯示了使用的范圍類型。

<!DOCTYPE HTML>
<html>
<body>
  <form method="post" action="http://example.com/form">
    <p>
      <label for="price"> $ per unit in your area: 1 <input
        type="range" step="1" min="0" max="100" value="1" id="price"
        name="price" />100
      </label>
    </p>
    <input type="submit" value="Submit Vote" />
  </form>
</body>
</html>

復選框輸入

輸入元素的復選框類型創(chuàng)建一個復選框，允許用戶進行真/假選擇。

type屬性的此值支持以下列表中顯示的其他屬性。

  • checked - 如果應用，請在最初顯示時或表單重置時選中復選框。
  • required - 指定用戶必須選中復選框。
  • value - 設置在選中復選框時提交到服務器的值。

以下代碼顯示了正在使用的輸入元素的復選框類型。

<!DOCTYPE HTML>
<html>
<body>
  <form method="post" action="http://example.com/form">
    <p>
      <label for="veggie"> Are you vegetarian:
      <input type="checkbox" id="veggie" name="veggie" />
      </label>
    </p>
    <p>
    Which of the following skills do you possess? Select all that apply.<br />
    <input checked type="checkbox" name="chkSkills" value="html" />HTML <br /> 
    <input type="checkbox" name="chkSkills" value="xhtml" />XHTML <br /> 
    <input type="checkbox" name="chkSkills" value="CSS" />CSS<br /> 
    <input checked type="checkbox" name="chkSkills" value="JavaScript" />JavaScript<br />
    <input type="checkbox" name="chkSkills" value="aspnet" />ASP.Net<br />
    <input checked type="checkbox" name="chkSkills" value="php" />PHP    
    </p>
    <input type="submit" value="Submit Vote" />
  </form>
</body>
</html>

radio輸入

輸入元素的 radio 類型創(chuàng)建一組單選按鈕，讓用戶從一組固定的選項中進行選擇。

以下列表描述了radio類型輸入元素支持的其他屬性。

  • checked - 如果應用，請在最初顯示時或表單重置時選擇單選按鈕。
  • required - 用戶必須選擇一個單選按鈕。
  • value - 指定復選框被選中時提交給服務器的數(shù)據(jù)值。

具有類型radio的每個輸入元素向用戶表示單個選項。

一組獨占選項應該具有與name屬性相同的值。

你可以在下面的代碼中看到它是如何工作的。

<!DOCTYPE HTML>
<html>
<body>
  <form method="post" action="http://example.com/form">
    <p>
    <fieldset>
      <legend>Vote for your favorite fruit</legend>
      <label for="apples">
        <input type="radio" checked value="Apples" id="apples" name="fave" /> Apples
      </label>
      <label for="oranges">
         <input type="radio" value="Oranges" id="oranges" name="fave" /> Oranges
      </label>
      <label for="cherries">
         <input type="radio" value="Cherries" id="cherries" name="fave" /> Cherries
      </label>
    </fieldset>
    </p>
    <input type="submit" value="Submit Vote" />
  </form>
</body>
</html>

上面的代碼創(chuàng)建了三個radio類型輸入元素。

所有三個的name屬性的值都是fave，這意味著瀏覽器會將它們視為一個組。

選擇其中一個單選按鈕將取消選擇其他兩個。 value屬性設置在提交表單時要發(fā)送到服務器的數(shù)據(jù)值。

Fieldset 和 legend 屬性為用戶提供三個按鈕相關的視覺提示。

在第一個radio元素上設置checked屬性，以便始終選擇一個值。

電子郵件輸入

電子郵件類型值將輸入元素配置為僅接受作為有效電子郵件地址的輸入。

它支持以下列表中顯示的其他屬性。

  • list - 設置為元素提供值的數(shù)據(jù)表元素的ID。
  • maxlength - 指定用戶可以在文本框中輸入的最大長度。
  • pattern - 指定用于輸入驗證的正則表達式模式。
  • placeholder - 向用戶指定提示。
  • readonly - 如果存在，請將文本框設置為只讀。
  • required - 指定用戶必須提供值。
  • size - 指定元素的寬度。
  • value - 指定元素的初始值。對于電子郵件類型，可以是單個地址，也可以是由逗號分隔的多個地址。

電子郵件類型還支持 multiple 屬性，當應用時，允許輸入元素接受多個電子郵件地址。

<!DOCTYPE HTML>
<html>
<body>
  <form method="post" action="http://example.com/form">
    <p>
      <label for="email"> Email: <input type="email"
        placeholder="user@domain.com" id="email" name="email" />
      </label>
    </p>
    <input type="submit" value="Submit Vote" />
  </form>
</body>
</html>

tel輸入

tel類型值將輸入元素配置為僅接受輸入，其是電話號碼。

它支持以下列表中顯示的其他屬性。

  • list - 設置為元素提供值的數(shù)據(jù)表元素的ID。
  • maxlength - 指定用戶可以在文本框中輸入的最大長度。
  • pattern - 指定用于輸入驗證的正則表達式模式。
  • placeholder - 向用戶指定提示。
  • readonly - 如果存在，請將文本框設置為只讀。
  • required - 指定用戶必須提供值。
  • size - 指定元素的寬度。
  • value - 指定元素的初始值。

以下代碼顯示如何使用 tel 輸入。

<!DOCTYPE HTML>
<html>
<body>
  <form method="post" action="http://example.com/form">

    <p>
      <label for="tel"> Tel: <input type="tel"
        placeholder="(XXX)-XXX-XXXX" id="tel" name="tel" />
      </label>
    </p>
    <input type="submit" value="Submit Vote" />
  </form>
</body>
</html>

url輸入

url類型值將輸入元素配置為僅接受作為URL的輸入。

它支持以下列表中顯示的其他屬性。

  • list - 設置為元素提供值的數(shù)據(jù)表元素的ID。
  • maxlength - 指定用戶可以在文本框中輸入的最大長度。
  • pattern - 指定用于輸入驗證的正則表達式模式。
  • placeholder - 向用戶指定提示。
  • readonly - 如果存在，請將文本框設置為只讀。
  • required - 指定用戶必須提供值。
  • size - 指定元素的寬度。
  • value - 指定元素的初始值。

以下代碼顯示了如何使用 url 輸入。

<!DOCTYPE HTML>
<html>
<body>
  <form method="post" action="http://example.com/form">

    <p>
      <label for="url"> Your homepage: <input type="url" id="url"
        name="url" />
      </label>
    </p>
    <input type="submit" value="Submit Vote" />
  </form>
</body>
</html>

時間日期輸入

HTML5引入了一些輸入元素類型來從用戶收集日期和時間。以下列表描述了這些輸入類型。

  • datetime - 獲取全局日期和時間，包括時區(qū)。
    例如:2014-07-19T16:42:39.421Z
  • datetime-local - 獲取本地日期和時間（沒有時區(qū)信息）。
    例如:2014-07-19T16:42:39.421
  • date - 獲取本地日期（沒有時間或時區(qū)）。
    例如:2014-07-20
  • month - 獲取年份和月份（無日期，時間或時區(qū)信息）。
    例如:2014-08
  • time - 獲得時間。
    例如:17:42:44.746
  • week - 獲取當前周。
    例如:2011-W30

以下列表具有可用于“日期和時間”輸入元素類型的其他屬性。

  • list -設置為元素提供值的數(shù)據(jù)表元素的ID。
  • min - 設置最小可接受值。
  • max - 設置最大可接受值。
  • readonly - 將文本框標記為只讀。
  • required - 指定用戶必須提供值。
  • step - 指定該值的增量和減量的粒度。
  • value - 指定元素的初始值。

以下代碼顯示正在使用的日期類型。

<!DOCTYPE HTML>
<html>
<body>
  <form method="post" action="http://example.com/form">
    <p>
      <label for="lastbuy"> When did you last buy:
      <input type="date" id="lastbuy" name="lastbuy" />
      </label>
    </p>
    <input type="submit" value="Submit Vote" />
  </form>
</body>
</html>

顏色輸入

輸入元素的顏色類型限制用戶選擇顏色。

顏色值正好表示為七個字符：前導＃，后跟三個兩位十六進制值，表示紅色，綠色和藍色值（例如，＃FF1234）。

您可以在以下代碼中看到正在使用的此類型的輸入元素。

<!DOCTYPE HTML>
<html>
<body>
  <form method="post" action="http://example.com/form">
    <p>
      <label for="color"> Color:
      <input type="color" id="color" name="color" />
      </label>
    </p>
    <input type="submit" value="Submit Vote" />
  </form>
</body>
</html>

搜索輸入

輸入元素的搜索類型向用戶呈現(xiàn)用于輸入搜索詞語的單行文本框。

以下代碼顯示如何使用搜索輸入。

<!DOCTYPE HTML>
<html>
<body>
  <form method="post" action="http://example.com/form">
    <p>
      <label for="search"> Search: <input type="search" id="search"
        name="search" />
      </label>
    </p>
    <input type="submit" value="Submit Vote" />
  </form>
</body>
</html>

隱藏輸入

要將數(shù)據(jù)項發(fā)送到服務器而不向用戶顯示，請使用隱藏的輸入元素。

以下代碼顯示了如何使用此類型的輸入元素。

<!DOCTYPE HTML>
<html>
<body>
  <form method="post" action="http://example.com/form">
    <input type="hidden" name="recordID" value="1234" />
    <input type="submit" value="Submit Vote" />
  </form>
</body>
</html>

圖像輸入

輸入元素的圖像類型創(chuàng)建顯示圖像并在單擊時提交表單的按鈕。

這種類型的輸入元素支持以下所示的附加屬性。

  • alt - 提供元素的文本描述。
  • formaction - 對于按鈕元素
  • formenctype - 對于按鈕元素
  • formmethod - 對于按鈕元素
  • formtarget - 對于按鈕元素
  • formnovalidate - 對于按鈕元素
  • height - 指定圖像的高度（以像素為單位）。
  • src - 指定應顯示的圖像的URL。
  • width - 指定圖像的寬度（以像素為單位）。

以下代碼顯示了正在使用的輸入元素的圖像類型。

<!DOCTYPE HTML>
<html>
<body>
  <form method="post" action="http://example.com/form">
    <p>
      <label for="name"> Name: <input value="XML" id="name"
        name="name" />
      </label>
    </p>
    <input type="image" src="accept.png" name="submit" />
  </form>
</body>
</html>

當用戶點擊圖像時，瀏覽器提交表單并且包括表示用戶相對于圖像的左上角點擊的x和y坐標的兩個數(shù)據(jù)項。

提供坐標以表示圖像上的不同區(qū)域。

文件上傳輸入

文件輸入元素在表單提交期間將文件上傳到服務器。

這種類型的輸入支持如下所示的附加屬性。

  • accept - 指定將接受的MIME類型集。 RFC2046定義MIME類型（http://tools.ietf.org/html/rfc2046）。
  • multiple - 指定輸入元素可以上傳多個文件。在寫作的時候，沒有一個主流瀏覽器實現(xiàn)了這個屬性。
  • required - 指定用戶必須提供用于輸入驗證目的的值。

以下代碼顯示正在使用的輸入元素的文件類型。

<!DOCTYPE HTML>
<html>
<body>
  <form method="post" action="http://example.com/form"
    enctype="multipart/form-data">
    <p>
      <input type="file" name="filedata" />
    </p>
    <input type="submit" value="Submit" />
  </form>
</body>
</html>

只有當表單的編碼類型為multipart/form-data時，才能上傳文件。

當用戶單擊“選擇文件”按鈕時，將顯示一個允許選擇文件的對話框。

當表單提交時，文件的內(nèi)容將被發(fā)送到服務器。

以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號