45分钟免费真人视频,国产69精品久久久久777

国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

關(guān)于HTML5中input標(biāo)簽（type屬性）的詳細(xì)介紹

零下一度

發(fā)布： 2018-05-14 16:26:12

原創(chuàng)

12421人瀏覽過

新type屬性介紹

首先讓我們來看一張表

關(guān)于HTML5中input標(biāo)簽（type屬性）的詳細(xì)介紹

HTML5中的type.png

其中標(biāo)有`紅色5`的代表`HTML5`中推出的

登錄后復(fù)制

測(cè)試代碼:

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <style>
          form {
              width: 80%;
              background-color: #F7F7F7;
          }
          label {
              display: block;
              width: 80%;
              margin: 0 auto;
              font-size: 30px;
              font-weight: bold;
          }
          input {
              display: block;
              width: 80%;
              margin: 0 auto;
          }
      </style>
  </head>
  <body>
  <form action="">
      <fieldset>
          <legend>測(cè)試type屬性
          </legend>
          <label for="">color:
          </label>
          <input type="color">
          <label for="">date:
          </label>
          <input type="date">
          <label for="">datetime:
          </label>
          <input type="datetime">
          <label for="">datetime-local:
          </label>
          <input type="datetime-local">
          <label for="">month:
          </label>
          <input type="month">
          <label for="">week:
          </label>
          <input type="week">
          <label for="">time:
          </label>
          <input type="time">
          <label for="">email:
          </label>
          <input type="email">
          <label for="">number:
          </label>
          <input type="number">
          <label for="">range:
          </label>
          <input type="range">
          <label for="">search:
          </label>
          <input type="search">
          <label for="">tel:
          </label>
          <input type="tel">
          <input type="submit">
      </fieldset>
  </form>
  </body>
  </html>

登錄后復(fù)制

運(yùn)行效果

關(guān)于HTML5中input標(biāo)簽（type屬性）的詳細(xì)介紹

input新type屬性.png

新type屬性的注意要點(diǎn)

* 點(diǎn)擊不同type的input標(biāo)簽會(huì)有不一樣的彈出內(nèi)容
* 如果發(fā)現(xiàn)w3cschool內(nèi)容不全,建議去MDN搜索
* 并不是每一個(gè)新type屬性,在PC端都有不同的顯示
* color, date, number 這些效果較為明顯

登錄后復(fù)制

兼容性問題

由于ie的兼容性的問題,在不同的瀏覽器中顯示效果不盡相同

立即學(xué)習(xí)“前端免費(fèi)學(xué)習(xí)筆記（深入）”；
但是在移動(dòng)設(shè)備上的支持效果較好,可以將該頁(yè)面發(fā)送到手機(jī)進(jìn)行測(cè)試
實(shí)際開發(fā)中可以按照需求選用

input表單驗(yàn)證

用戶在輸入內(nèi)容的時(shí)候不可能做到全部正確,比如email地址``電話長(zhǎng)度等等都有可能出現(xiàn)輸入錯(cuò)誤,試想一下,當(dāng)用戶辛辛苦苦的輸入了10多個(gè)表單內(nèi)容,點(diǎn)擊提交由于輸入錯(cuò)誤,內(nèi)容被清空了

w3cSchool 查閱位置

下面把api文檔的查閱位置添加如下

[w3cSchool_事件屬性]w3School
[w3cSchool_input標(biāo)簽]w3cSchool

email標(biāo)簽

在H5中的input的新type屬性email自帶格式驗(yàn)證

示例代碼:

當(dāng)我們點(diǎn)擊提交按鈕時(shí),如果輸入的email格式不正確,會(huì)彈出提示信息
email標(biāo)簽并不會(huì)驗(yàn)證內(nèi)容是否為空，這個(gè)需要注意

關(guān)于HTML5中input標(biāo)簽（type屬性）的詳細(xì)介紹

email自帶提示.png

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="">
    email:<input type="email" name="userEmail">
    <br/>
    <input type="submit">
</form>
</body>
</html>

登錄后復(fù)制

required屬性

對(duì)于沒有自帶驗(yàn)證效果的標(biāo)簽,就需要手動(dòng)添加屬性增加驗(yàn)證了

使用方法:

只需要添加required屬性即可,不需要賦值

示例代碼:

當(dāng)控件沒有輸入任何內(nèi)容直接點(diǎn)擊提交時(shí),會(huì)彈出提示

關(guān)于HTML5中input標(biāo)簽（type屬性）的詳細(xì)介紹

required屬性.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="">
    email:<input type="email" name="userEmail">
    <br/>
    tel:<input type="tel" required>
    <br/>
    <input type="submit">
</form>
</body>
</html>

登錄后復(fù)制

pattern 自定義驗(yàn)證規(guī)則

使用required標(biāo)簽只能夠驗(yàn)證內(nèi)容是否為空,如果想要驗(yàn)證的更為準(zhǔn)確就需要自定義驗(yàn)證規(guī)則了

使用方法:

在需要添加自定義驗(yàn)證規(guī)則的元素中添加required標(biāo)簽
使用正則表達(dá)式編寫驗(yàn)證規(guī)則

示例代碼:

當(dāng)我們輸入的內(nèi)容跟驗(yàn)證條件不符時(shí),就會(huì)彈出對(duì)應(yīng)的提示

關(guān)于HTML5中input標(biāo)簽（type屬性）的詳細(xì)介紹

自定義驗(yàn)證.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="">
    email:<input type="email" name="userEmail">
    <br/>
    tel:<input type="tel" required pattern="[0-9]{3}">
    <br/>
    <input type="submit">
</form>
</body>
</html>

登錄后復(fù)制

自定義驗(yàn)證信息

系統(tǒng)的提示消息只能夠提示格式錯(cuò)誤,如果想要更為詳細(xì)的就需要我們通過js來自定義了

使用方法:

注冊(cè)事件:oninput:輸入時(shí),oninvalid驗(yàn)證失敗
設(shè)置自定義信息dom.setCustomValidity("這里輸入提示信息");

示例代碼:

輸入時(shí),會(huì)彈出oninput綁定的代碼

關(guān)于HTML5中input標(biāo)簽（type屬性）的詳細(xì)介紹

輸入中.png

驗(yàn)證失敗時(shí),會(huì)彈出oninvalid綁定的代碼

驗(yàn)證失敗.png

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="">
    email:<input type="email" name="userEmail">
    <br/>
    tel:<input type="tel" required pattern="[0-9]{3}" id="telInput">
    <br/>
    <input type="submit">
</form>
</body>
</html>
<script>
    var telInput = document.getElementById("telInput");
    // 正在輸入時(shí)
    telInput.oninput=function () {
        this.setCustomValidity("請(qǐng)正確輸入哦");
    }
    // 驗(yàn)證失敗時(shí)
    telInput.oninvalid=function(){
        this.setCustomValidity("請(qǐng)不要輸入火星的手機(jī)號(hào)好嗎？");
    };

</script>

登錄后復(fù)制