09.HTML表單

  • HTML表單

    HTML表單用于搜集用戶輸入

    HTML表單常用屬性及說(shuō)明:
    屬性 描述
    accept-charset 規(guī)定在被提交表單中使用的字符集（默認(rèn)：頁(yè)面字符集）分瘦。
    action 規(guī)定向何處提交表單的地址（URL）（提交頁(yè)面）哈踱。
    autocomplete 規(guī)定瀏覽器應(yīng)該自動(dòng)完成表單（默認(rèn)：開(kāi)啟）。
    enctype 規(guī)定被提交數(shù)據(jù)的編碼（默認(rèn)：url-encoded）。
    method 規(guī)定在提交表單時(shí)所用的 HTTP 方法（默認(rèn)：GET）菩掏。
    name 規(guī)定識(shí)別表單的名稱（對(duì)于 DOM 使用：document.forms.name）。
    novalidate 規(guī)定瀏覽器不驗(yàn)證表單。
    target 規(guī)定 action 屬性中地址的目標(biāo)（默認(rèn)：_self）叁怪。 
    <!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8" />
      <title>表單</title>
      <style type="text/css">
          .code{
              color: gray;
              border: 1px solid gainsboro;
              font-size: 15px;
          }
          pre{
              margin: 1em 0em 1em -19em;
              font-family: "楷體";
          }
          .result{
              color: gray;
              background-color: ghostwhite;
              font-size: 16px;
              padding: 0.5em 1em;
          }
          .result form > p,.result form fieldset p {
              color: black;
              font-family: "楷體";
              font-size: 14px;
              color: cornflowerblue;
          }
          h3{
              color: red;
          }
          .result span:first-child{
              display: block;
              float: left;
              width: 10em;
              color: black;
          }
      </style>
  </head>
  <body>
      <ul>
          <li>
              <h3>01. form標(biāo)簽</h3>
              <h4>代碼:</h4>
              <div class="code">
                  <pre>
                  &lt;form&gt;
                      &lt;p&gt;First Name :&lt;/p&gt;
                      &lt;input type="text" name="firstName" id="firstName" value="Naven" /&gt;
                  &lt;/form&gt;
                  </pre>
              </div>              
              <h4>結(jié)果:</h4>
              <div id="form01" class="result">
                  <form>
                      <p>First Name :</p>
                      <input type="text" name="firstName" id="firstName" value="Naven" />
                  </form>
              </div>
              <hr />
          </li>
          <li>
              <h3>02. action屬性</h3>
              <h4>代碼:</h4>
              <div class="code">
                  <pre>
                  &lt;form action="">
                      &lt;div>
                          &lt;p>01.action是提交表單時(shí)的動(dòng)作&lt;/p&gt;
                          &lt;p&gt;02.向服務(wù)器提交表單用的是submit&lt;/p&gt;
                          &lt;p&gt;03.如果省略action,則action設(shè)為當(dāng)前頁(yè)面&lt;/p&gt;
                      &lt;/div&gt;
                      &lt;input type="submit" name="submit" id="submit" value="Submit" /&gt;
                  &lt;/form&gt;
                  </pre>
              </div>              
              <h4>結(jié)果:</h4>
              <div id="act01" class="result">
                  <form action="">
                      <div>
                          <p>01.action是提交表單時(shí)的動(dòng)作</p>
                          <p>02.向服務(wù)器提交表單用的是submit</p>
                          <p>03.如果省略action,則action設(shè)為當(dāng)前頁(yè)面</p>
                      </div>
                      <input type="submit" name="submit" id="submit" value="Submit" />
                  </form>
              </div>
              <hr />
          </li>
          <li>
              <h3>03. method屬性</h3>
              <h4>代碼:</h4>
              <div class="code">
                  <pre>
                  &lt;form method="post"&gt;
                      &lt;div&gt;
                          &lt;p>01.提交的HTTP方式有g(shù)et和post兩種方式&lt;/p&gt;
                          &lt;p&gt;02.get:默認(rèn)方式,無(wú)敏感信息時(shí)可使用,不安全,信息在地址欄是可見(jiàn)的&lt;/p&gt;
                          &lt;p&gt;03.post:更安全,信息在地址欄中是不可見(jiàn)的&lt;/p&gt;
                      &lt;/div&gt;
                      &lt;input type="submit" name="submit" id="submit" value="Submit" /&gt;
                  &lt;/form&gt;
                  </pre>
              </div>              
              <h4>結(jié)果:</h4>
              <div id="mtd01" class="result">
                  <form method="post">
                      <div>
                          <p>01.提交的HTTP方式有g(shù)et和post兩種方式</p>
                          <p>02.get:默認(rèn)方式,無(wú)敏感信息時(shí)可使用,不安全,信息在地址欄是可見(jiàn)的</p>
                          <p>03.post:更安全,信息在地址欄中是不可見(jiàn)的</p>
                      </div>
                      <input type="submit" name="submit" id="submit" value="Submit" />
                  </form>
              </div>
              <hr />
          </li>
          <li>
              <h3>04. name屬性</h3>
              <h4>代碼:</h4>
              <div class="code">
                  <pre>
                  &lt;form method="post"&gt;
                      &lt;div&gt;
                          &lt;p&gt;01.數(shù)據(jù)要正確的被提交,必須有name屬性&lt;/p&gt;
                          &lt;p&gt;02.例子中,點(diǎn)擊提交按鈕,只會(huì)提交firstName信息&lt;/p&gt;
                      &lt;/div&gt;
                      &lt;p&gt;First Name :&lt;/p&gt;
                      &lt;input type="text" name="firstName" id="firstName" value="Naven" /&gt;
                      &lt;p&gt;Last Name :&lt;/p&gt;
                      &lt;input type="text" id="lastName" value="Kumar" /&gt;
                      &lt;br /&gt;&lt;br /&gt;
                      &lt;input type="submit" name="submit" id="submit" value="Submit" /&gt;
                  &lt;/form&gt;
                  </pre>
              </div>              
              <h4>結(jié)果:</h4>
              <div id="name01" class="result">
                  <form method="post">
                      <div>
                          <p>01.數(shù)據(jù)要正確的被提交,必須有name屬性</p>
                          <p>02.例子中,點(diǎn)擊提交按鈕,只會(huì)提交firstName信息</p>
                      </div>
                      <p>First Name :</p>
                      <input type="text" name="firstName" id="firstName" value="Naven" />
                      <p>Last Name :</p>
                      <input type="text" id="lastName" value="Kumar" />
                      <br /><br />
                      <input type="submit" name="submit" id="submit" value="Submit" />
                  </form>
              </div>
              <hr />
          </li>
          <li>
              <h3>05. fieldset標(biāo)簽</h3>
              <h4>代碼:</h4>
              <div class="code">
                  <pre>
                  &lt;form method="post"&gt;
                      &lt;div&gt;
                          &lt;p&gt;01.fieldset元素組合表單中的數(shù)據(jù)&lt;/p&gt;
                          &lt;p&gt;02.legend元素為fieldset定義標(biāo)題&lt;/p&gt;
                      &lt;/div&gt;
                      &lt;fieldset&gt;
                          &lt;legend&gt;Name:&lt;/legend&gt;
                          &lt;p&gt;First Name :&lt;/p&gt;
                          &lt;input type="text" name="firstName" id="firstName" value="Naven" /&gt;
                          &lt;p&gt;Last Name :&lt;/p&gt;
                          &lt;input type="text" id="lastName" value="Kumar" /&gt;
                          &lt;br /&gt;&lt;br /&gt;
                          &lt;input type="submit" name="submit" id="submit" value="Submit" /&gt;
                      &lt;/fieldset&gt;
                  &lt;/form&gt;
                  </pre>
              </div>              
              <h4>結(jié)果:</h4>
              <div id="name01" class="result">
                  <form method="post">
                      <div>
                          <p>01.fieldset元素組合表單中的數(shù)據(jù)</p>
                          <p>02.legend元素為fieldset定義標(biāo)題</p>
                      </div>
                      <fieldset>
                          <legend>Name:</legend>
                          <p>First Name :</p>
                          <input type="text" name="firstName" id="firstName" value="Naven" />
                          <p>Last Name :</p>
                          <input type="text" id="lastName" value="Kumar" />
                          <br /><br />
                          <input type="submit" name="submit" id="submit" value="Submit" />
                      </fieldset>
                  </form>
              </div>
              <hr />
          </li>
          <li>
              <h3>06. form元素的屬性</h3>
              <h4>代碼:</h4>
              <div class="code">
                  <pre>
                  &lt;p>form屬性及值示例&lt;/p&gt;
                  &lt;form action="" method="post" accept-charset="ISO-8859-1" autocomplete="on" enctype="application/x-www-form-urlencoded" name="form" target="_blank" novalidate&gt;
                      &lt;input type="submit" value="Submit"/&gt;
                  &lt;/form&gt;
                  </pre>
              </div>              
              <h4>結(jié)果:</h4>
              <div id="name01" class="result">
                  <p>form屬性及值示例</p>
                  <form action="" method="post" accept-charset="ISO-8859-1" autocomplete="on" enctype="application/x-www-form-urlencoded" name="form" target="_blank" novalidate="novalidate">                        
                      <input type="submit" value="Submit"/>
                  </form>
              </div>
              <hr />
          </li>
      </ul>       
  </body>
</html>
    image.png

  • HTML表單元素

    <!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8" />
      <title>表單</title>
      <style type="text/css">
          .code{
              color: gray;
              border: 1px solid gainsboro;
              font-size: 15px;
              line-height: 1.5em;
          }
          pre{
              margin: 1em 0em 1em -19em;
              font-family: "楷體";
          }
          .result{
              color: gray;
              background-color: ghostwhite;
              font-size: 16px;
              padding: 0.5em 1em;
          }
          .result form > p,.result form fieldset p {
              color: black;
              font-family: "楷體";
              font-size: 14px;
              color: cornflowerblue;
          }
          h3{
              color: red;
          }
          .result span:first-child{
              display: block;
              float: left;
              width: 10em;
              color: black;
          }
      </style>
  </head>
  <body>
      <ul>
          <li>
              <h3>01. input元素</h3>
              <h4>代碼:</h4>
              <div class="code">
                  <pre>
                  &lt;p&gt;01. 表單元素中,最常用的是input元素,根據(jù)type的不同,有多種形式&lt;/p&gt;
                  &lt;input type="text" name="text" id="text" value="" /&gt;
                  </pre>
              </div>              
              <h4>結(jié)果:</h4>
              <div id="ipt01" class="result">
                  <p>01. 表單元素中,最常用的是input元素,根據(jù)type的不同,有多種形式</p>
                  <input type="text" name="text" id="text" value="" />
              </div>
              <hr />
          </li>
          <li>
              <h3>02. select元素</h3>
              <h4>代碼:</h4>
              <div class="code">
                  <pre>
                  &lt;p&gt;01. select元素定義下拉列表&lt;/p&gt;
                  &lt;p&gt;02. option元素定義下拉選項(xiàng)&lt;/p&gt;
                  &lt;p&gt;03. option的selected屬性定義默認(rèn)選中項(xiàng)(不定義默認(rèn)選中第一個(gè))&lt;/p&gt;
                  &lt;form action="" method="post"&gt;
                      &lt;p style="display: inline;"&gt;Constellation :&lt;/p&gt;
                      &lt;select name="Constellation"&gt;
                          &lt;option value="Aries"&gt;Aries&lt;/option&gt;
                          &lt;option value="Taurus"&gt;Taurus&lt;/option&gt;
                          &lt;option value="Gemini" selected&gt;Gemini&lt;/option&gt;
                          &lt;option value="Cancer"&gt;Cancer&lt;/option&gt;
                          &lt;option value="Leo"&gt;Leo&lt;/option&gt;
                          &lt;option value="Virgo"&gt;Virgo&lt;/option&gt;
                          &lt;option value="Libra"&gt;Libra&lt;/option&gt;
                          &lt;option value="Scorpio"&gt;Scorpio&lt;/option&gt;
                          &lt;option value="Sagittarius"&gt;Sagittarius&lt;/option&gt;
                          &lt;option value="Capricornus"&gt;Capricornus&lt;/option&gt;
                          &lt;option value="Aquarius"&gt;Aquarius&lt;/option&gt;
                          &lt;option value="Pisces"&gt;Pisces&lt;/option&gt;
                      &lt;/select&gt;
                  &lt;/form&gt;
                  </pre>
              </div>              
              <h4>結(jié)果:</h4>
              <div id="slt01" class="result">
                  <p>01. select元素定義下拉列表</p>
                  <p>02. option元素定義下拉選項(xiàng)</p>
                  <p>03. option的selected屬性定義默認(rèn)選中項(xiàng)(不定義默認(rèn)選中第一個(gè))</p>
                  <form action="" method="post">
                      <p style="display: inline;">Constellation :</p>
                      <select name="Constellation">
                          <option value="Aries">Aries</option>
                          <option value="Taurus">Taurus</option>
                          <option value="Gemini" selected>Gemini</option>
                          <option value="Cancer">Cancer</option>
                          <option value="Leo">Leo</option>
                          <option value="Virgo">Virgo</option>
                          <option value="Libra">Libra</option>
                          <option value="Scorpio">Scorpio</option>
                          <option value="Sagittarius">Sagittarius</option>
                          <option value="Capricornus">Capricornus</option>
                          <option value="Aquarius">Aquarius</option>
                          <option value="Pisces">Pisces</option>
                      </select>
                  </form>
              </div>
              <hr />
          </li>
          <li>
              <h3>03. textarea元素</h3>
              <h4>代碼:</h4>
              <div class="code">
                  <pre>
                  &lt;p&gt;01. textarea元素用來(lái)定義文本域&lt;/p&gt;
                  &lt;p&gt;02. textarea常用屬性rows:行數(shù),cols:列數(shù)&lt;/p&gt;
                  &lt;textarea name="message" rows="5" cols="20"&gt;
                      Hello World !
                  &lt;/textarea&gt;
                  </pre>
              </div>              
              <h4>結(jié)果:</h4>
              <div id="txa01" class="result">
                  <p>01. textarea元素用來(lái)定義文本域</p>
                  <p>02. textarea常用屬性rows:行數(shù),cols:列數(shù)</p>
                  <textarea name="message" rows="5" cols="20">
                      Hello World !
                  </textarea>
              </div>
              <hr />
          </li>
          <li>
              <h3>04. button元素</h3>
              <h4>代碼:</h4>
              <div class="code">
                  <pre>
                  &lt;p&gt;1. button元素定義按鈕&lt;/p&gt;
                  &lt;p&gt;2. onclick定義其點(diǎn)擊事件&lt;/p&gt;
                  &lt;button type="button" onclick="alert('點(diǎn)擊按鈕')"&gt;Button&lt;/button&gt;
                  </pre>
              </div>              
              <h4>結(jié)果:</h4>
              <div id="btn01" class="result">
                  <p>1. button元素定義按鈕</p>
                  <p>2. onclick定義其點(diǎn)擊事件</p>
                  <button type="button" onclick="alert('點(diǎn)擊按鈕')">Button</button>
              </div>
              <hr />
          </li>
          <li>
              <h3>05. datalist元素</h3>
              <h4>代碼:</h4>
              <div class="code">
                  <pre>
                  &lt;p&gt;1. datalist元素為input元素定義選項(xiàng)列表&lt;/p&gt;
                  &lt;p&gt;2. input的list屬性值必須與datalist的id屬性值一致&lt;/p&gt;
                  &lt;form&gt;
                      &lt;input list="browsers" /&gt;
                      &lt;datalist id="browsers"&gt;
                          &lt;option value="Internet Explorer" /&gt;
                          &lt;option value="Firefox" /&gt;
                          &lt;option value="Chrome" /&gt;
                          &lt;option value="Opera" /&gt;
                          &lt;option value="Safari" /&gt;
                      &lt;/datalist&gt;
                  &lt;/form&gt;
                  </pre>
              </div>              
              <h4>結(jié)果:</h4>
              <div id="dlt01" class="result">
                  <p>1. datalist元素為input元素定義選項(xiàng)列表</p>
                  <p>2. input的list屬性值必須與datalist的id屬性值一致</p>
                  <form>
                      <input list="browsers" />
                      <datalist id="browsers">
                          <option value="Internet Explorer" />
                          <option value="Firefox" />
                          <option value="Chrome" />
                          <option value="Opera" />
                          <option value="Safari" />
                      </datalist>
                  </form>
              </div>
              <hr />
          </li>
      </ul>       
  </body>
</html>
    image.png

  • HTML輸入類型

    <!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8" />
      <title>輸入類型</title>
      <style type="text/css">
          .code{
              color: gray;
              border: 1px solid gainsboro;
              font-size: 15px;
              line-height: 1.5em;
          }
          pre{
              margin: 1em 0em 1em -19em;
              font-family: "楷體";
          }
          .result{
              color: gray;
              background-color: ghostwhite;
              font-size: 16px;
              padding: 0.5em 1em;
          }
          .result p{
              color: black;
              font-family: "楷體";
              font-size: 15px;
              color: cornflowerblue;
          }
          h3{
              color: red;
          }
          .result span{
              color: black;
          }
          
          .Button{
              color: white;
              background-color: darkmagenta;
              border: solid 2px darkorchid;
              padding: 0.5em;
              border-radius: 1.5em;
          }
          .other input{
              margin: 0.5em;
          }
      </style>
  </head>
  <body>
      <ul>
          <li>
              <h3>01. Text文本</h3>
              <h4>代碼:</h4>
              <div class="code">
                  <pre>
                  &lt;p>01. text類型定義單行輸入&lt;/p&gt;
                  &lt;span&gt;Text :&lt;/span&gt;
                  &lt;input type="text" name="text" id="text" /&gt;
                  </pre>
              </div>              
              <h4>結(jié)果:</h4>
              <div class="result">
                  <p>01. text類型定義單行輸入</p>
                  <span>Text :</span>
                  <input type="text" name="text" id="text" value="text"/>
              </div>
              <hr />
          </li>
          <li>
              <h3>02. Password密碼</h3>
              <h4>代碼:</h4>
              <div class="code">
                  <pre>
                  &lt;p>01. password類型中的文字會(huì)進(jìn)行密文處理&lt;/p&gt;
                  &lt;span&gt;Password :&lt;/span&gt;
                  &lt;input type="password" name="password" id="password" value="password"/&gt;
                  </pre>
              </div>              
              <h4>結(jié)果:</h4>
              <div class="result">
                  <p>01. password類型中的文字會(huì)進(jìn)行密文處理</p>
                  <span>Password :</span>
                  <input type="password" name="password" id="password" value="password"/>
              </div>
              <hr />
          </li>
          <li>
              <h3>03. Submit提交</h3>
              <h4>代碼:</h4>
              <div class="code">
                  <pre>
                  &lt;p>01. submit類型定義提交表單數(shù)據(jù)至表單處理程序的按鈕&lt;/p&gt;
                  &lt;span&gt;Name :&lt;/span&gt;
                  &lt;input type="text" name="name" id="name" value="name" /&gt;
                  &lt;br /&gt;
                  &lt;span&gt;Password :&lt;/span&gt;
                  &lt;input type="password" name="pwd" id="pwd" value="pwd" /&gt;
                  &lt;br /&gt;
                  &lt;input type="submit" name="submit" class="Button" value="Submit"/&gt;
                  </pre>
              </div>              
              <h4>結(jié)果:</h4>
              <div class="result">
                  <p>01. submit類型定義提交表單數(shù)據(jù)至表單處理程序的按鈕</p>
                  <span>Name :</span>
                  <input type="text" name="name" id="name" value="name" />
                  <br />
                  <span>Password :</span>
                  <input type="password" name="pwd" id="pwd" value="pwd" />
                  <br />
                  <input type="submit" name="submit" class="Button" value="Submit"/>
              </div>
              <hr />
          </li>
          <li>
              <h3>04. Radio單選框</h3>
              <h4>代碼:</h4>
              <div class="code">
                  <pre>
                  &lt;form action="" method="post"&gt;
                      &lt;p&gt;01. radio類型定義單選框&lt;/p&gt;
                      &lt;p&gt;02. checked屬性默認(rèn)選中&lt;/p&gt;
                      &lt;p&gt;03. name屬性相同的范圍內(nèi)只能選擇一個(gè)&lt;/p&gt;
                      &lt;input type="radio" name="Sex" value="Male"&gt;Male&lt;/input&gt;
                      &lt;br /&gt;                    
                      &lt;input type="radio" name="Sex" value="Female"&gt;Female&lt;/input&gt;
                      &lt;br /&gt;
                  &lt;/form&gt;
                  </pre>
              </div>              
              <h4>結(jié)果:</h4>
              <div class="result">
                  <form action="" method="post">
                      <p>01. radio類型定義單選框</p>
                      <p>02. checked屬性默認(rèn)選中</p>
                      <p>03. name屬性相同的范圍內(nèi)只能選擇一個(gè)</p>
                      <input type="radio" name="Sex" value="Male">Male</input>
                      <br />                  
                      <input type="radio" name="Sex" value="Female">Female</input>
                      <br />
                  </form>
              </div>
              <hr />
          </li>
          <li>
              <h3>05. Checkbox復(fù)選框</h3>
              <h4>代碼:</h4>
              <div class="code">
                  <pre>
                  &lt;form action="" method="post"&gt;
                      &lt;p&gt;01. checkbox類型定義復(fù)選框&lt;/p&gt;
                      &lt;p&gt;02. checked屬性默認(rèn)選中&lt;/p&gt;
                      &lt;p&gt;03. name屬性相同的范圍內(nèi)可選擇多個(gè)&lt;/p&gt;
                      &lt;input type="checkbox" name="language" value="Chinese"&gt;Chinese&lt;/input&gt;
                      &lt;br /&gt;                    
                      &lt;input type="checkbox" name="language" value="English"&gt;English&lt;/input&gt;
                      &lt;br /&gt;
                  &lt;/form&gt;
                  </pre>
              </div>              
              <h4>結(jié)果:</h4>
              <div class="result">
                  <form action="" method="post">
                      <p>01. checkbox類型定義復(fù)選框</p>
                      <p>02. checked屬性默認(rèn)選中</p>
                      <p>03. name屬性相同的范圍內(nèi)可選擇多個(gè)</p>
                      <input type="checkbox" name="language" value="Chinese">Chinese</input>
                      <br />                  
                      <input type="checkbox" name="language" value="English">English</input>
                      <br />
                  </form>
              </div>
              <hr />
          </li>
          <li>
              <h3>06. Button按鈕</h3>
              <h4>代碼:</h4>
              <div class="code">
                  <pre>
                  &lt;form action="" method="post"&gt;
                      &lt;p&gt;01. button類型定義按鈕&lt;/p&gt;
                      &lt;p&gt;02. onclick屬性定義點(diǎn)擊事件&lt;/p&gt;
                      &lt;input type="button" class="Button" value="Button" onclick="alert('Button is clicked!')"/&gt;
                  &lt;/form&gt;
                  </pre>
              </div>              
              <h4>結(jié)果:</h4>
              <div class="result">
                  <form action="" method="post">
                      <p>01. button類型定義按鈕</p>
                      <p>02. onclick屬性定義點(diǎn)擊事件</p>
                      <input type="button" class="Button" value="Button" onclick="alert('Button is clicked!')"/>
                  </form>
              </div>
              <hr />
          </li>
          <li>
              <h3>07. H5新增類型</h3>
              <h4>代碼:</h4>
              <div class="code">
                  <pre>
                  &lt;form action="" method="post" class="other"&gt;
                      &lt;p&gt;01. 若瀏覽器不識(shí)別,則默認(rèn)為text類型&lt;/p&gt;
                      &lt;span&gt;color :&lt;/span&gt;
                      &lt;input type="color" /&gt;
                      &lt;br /&gt;
                      &lt;span&gt;date :&lt;/span&gt;
                      &lt;input type="date" /&gt;
                      &lt;br /&gt;
                      &lt;span&gt;datetime :&lt;/span&gt;
                      &lt;input type="datetime" /&gt;
                      &lt;br /&gt;
                      &lt;span&gt;datetime-local :&lt;/span&gt;
                      &lt;input type="datetime-local" /&gt;
                      &lt;br /&gt;
                      &lt;span&gt;email :&lt;/span&gt;
                      &lt;input type="email" /&gt;
                      &lt;br /&gt;
                      &lt;span&gt;month :&lt;/span&gt;
                      &lt;input type="month" /&gt;
                      &lt;br /&gt;
                      &lt;span&gt;number :&lt;/span&gt;
                      &lt;input type="number" /&gt;
                      &lt;br /&gt;
                      &lt;span&gt;range :&lt;/span&gt;
                      &lt;input type="range" /&gt;
                      &lt;br /&gt;
                      &lt;span&gt;search :&lt;/span&gt;
                      &lt;input type="search" /&gt;
                      &lt;br /&gt;
                      &lt;span&gt;tel :&lt;/span&gt;
                      &lt;input type="tel" /&gt;
                      &lt;br /&gt;
                      &lt;span&gt;time :&lt;/span&gt;
                      &lt;input type="time" /&gt;
                      &lt;br /&gt;
                      &lt;span&gt;url :&lt;/span&gt;
                      &lt;input type="url" /&gt;
                      &lt;br /&gt;
                      &lt;span&gt;week :&lt;/span&gt;
                      &lt;input type="week" /&gt;
                      &lt;br /&gt;
                      &lt;span>file :&lt;/span&gt;
                      &lt;input type="file" /&gt;
                      &lt;br /&gt;
                  &lt;/form&gt;
                  </pre>
              </div>              
              <h4>結(jié)果:</h4>
              <div class="result">
                  <form action="" method="post" class="other">
                      <p>01. 若瀏覽器不支持此輸入類型,則默認(rèn)為text類型</p>
                      <span>color :</span>
                      <input type="color" />
                      <br />
                      <span>date :</span>
                      <input type="date" />
                      <br />
                      <span>datetime :</span>
                      <input type="datetime" />
                      <br />
                      <span>datetime-local :</span>
                      <input type="datetime-local" />
                      <br />
                      <span>email :</span>
                      <input type="email" />
                      <br />
                      <span>month :</span>
                      <input type="month" />
                      <br />
                      <span>number :</span>
                      <input type="number" />
                      <br />
                      <span>range :</span>
                      <input type="range" />
                      <br />
                      <span>search :</span>
                      <input type="search" />
                      <br />
                      <span>tel :</span>
                      <input type="tel" />
                      <br />
                      <span>time :</span>
                      <input type="time" />
                      <br />
                      <span>url :</span>
                      <input type="url" />
                      <br />
                      <span>week :</span>
                      <input type="week" />
                      <br />
                      <span>file :</span>
                      <input type="file" />
                      <br />
                  </form>
              </div>
              <hr />
          </li>
      </ul>       
  </body>
</html>
    image.png

  • HTML輸入屬性

    屬性 名稱 釋義
    value 值 規(guī)定輸入字段的初始值
    readonly 只讀 規(guī)定輸入字段為只讀
    disabled 禁用 被禁用的元素不可用,不可點(diǎn)擊,不可被提交
    size 尺寸 規(guī)定輸入字段的尺寸,以字符計(jì)算
    maxlength 最大長(zhǎng)度 輸入字段的最大長(zhǎng)度
    autocomplete 自動(dòng)完成 規(guī)定表單或輸入字段是否應(yīng)該自動(dòng)完成(提示之前輸入過(guò)的值)
    autofocus 獲取焦點(diǎn) 此屬性的元素將獲得鼠標(biāo)的焦點(diǎn)
    form 表單 規(guī)定元素的所屬表單,其值應(yīng)與某一表單的id相同
    formaction 重設(shè)表單動(dòng)作 規(guī)定當(dāng)提交表單時(shí)處理該輸入控件的文件的 URL
    formenctype 重設(shè)編碼方式 規(guī)定當(dāng)把表單數(shù)據(jù)提交至服務(wù)器時(shí)如何對(duì)其進(jìn)行編碼
    formmethod 重設(shè)請(qǐng)求方式 定義用以向 action URL 發(fā)送表單數(shù)據(jù)的 HTTP 方法
    formnovalidate 無(wú)校驗(yàn) 提交表單時(shí),不對(duì)表單數(shù)據(jù)進(jìn)行驗(yàn)證
    formtarget 重設(shè)目標(biāo) 提交表單后在何處顯示接收到的響應(yīng),當(dāng)前窗口或者新窗口等
    height/width 高/寬 規(guī)定元素的高和寬
    list 列表 引用 <datalist> 元素中<option>元素的值作為預(yù)定義選項(xiàng),list的值要與datalist的id一致
    min/max 最小/最大 元素的最小值/最大值
    multiple 多個(gè) 允許輸入一個(gè)以上的值,如type=file,選取多個(gè)文件
    pattern (regexp) 正則表達(dá)式 用于檢查元素值的正則表達(dá)式
    placeholder 占位符 規(guī)定用以描述輸入字段預(yù)期值的提示
    required 必選 提交表單之前必須填寫輸入字段
    step 步 元素合法數(shù)字的間隔
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個(gè)濱河市深滚，隨后出現(xiàn)的幾起案子奕谭，更是在濱河造成了極大的恐慌，老刑警劉巖痴荐，帶你破解...
    沈念sama閱讀 206,968評(píng)論 6贊 482
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件血柳，死亡現(xiàn)場(chǎng)離奇詭異，居然都是意外死亡生兆，警方通過(guò)查閱死者的電腦和手機(jī)难捌，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,601評(píng)論 2贊 382
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)皂贩，“玉大人栖榨，你說(shuō)我怎么就攤上這事∶魉ⅲ” “怎么了婴栽？”我有些...
    開(kāi)封第一講書人閱讀 153,220評(píng)論 0贊 344
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長(zhǎng)辈末。 經(jīng)常有香客問(wèn)我愚争，道長(zhǎng)，這世上最難降的妖魔是什么挤聘？ 我笑而不...
    開(kāi)封第一講書人閱讀 55,416評(píng)論 1贊 279
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任轰枝，我火速辦了婚禮，結(jié)果婚禮上组去，老公的妹妹穿的比我還像新娘鞍陨。我一直安慰自己，他們只是感情好从隆，可當(dāng)我...
    茶點(diǎn)故事閱讀 64,425評(píng)論 5贊 374
  • 惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
    文/花漫 我一把揭開(kāi)白布诚撵。 她就那樣靜靜地躺著，像睡著了一般键闺。 火紅的嫁衣襯著肌膚如雪寿烟。 梳的紋絲不亂的頭發(fā)上，一...
    開(kāi)封第一講書人閱讀 49,144評(píng)論 1贊 285
  • 城市分裂傳說(shuō)
    那天辛燥，我揣著相機(jī)與錄音筛武，去河邊找鬼缝其。 笑死，一個(gè)胖子當(dāng)著我的面吹牛徘六，可吹牛的內(nèi)容都是我干的内边。 我是一名探鬼主播，決...
    沈念sama閱讀 38,432評(píng)論 3贊 401
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開(kāi)眼硕噩，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼假残！你這毒婦竟也來(lái)了？” 一聲冷哼從身側(cè)響起炉擅，我...
    開(kāi)封第一講書人閱讀 37,088評(píng)論 0贊 261
  • 萬(wàn)榮殺人案實(shí)錄
    序言：老撾萬(wàn)榮一對(duì)情侶失蹤辉懒，失蹤者是張志新（化名）和其女友劉穎，沒(méi)想到半個(gè)月后谍失，有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體眶俩，經(jīng)...
    沈念sama閱讀 43,586評(píng)論 1贊 300
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,028評(píng)論 2贊 325
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年快鱼，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了颠印。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,137評(píng)論 1贊 334
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡抹竹，死狀恐怖线罕，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情窃判，我是刑警寧澤钞楼，帶...
    沈念sama閱讀 33,783評(píng)論 4贊 324
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布，位于F島的核電站袄琳，受9級(jí)特大地震影響询件，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜唆樊，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,343評(píng)論 3贊 307
  • 男人毒藥：我在死后第九天來(lái)索命
    文/蒙蒙 一宛琅、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧逗旁，春花似錦嘿辟、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書人閱讀 30,333評(píng)論 0贊 19
  • 一樁弒父案仓洼，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至堤舒，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間哺呜，已是汗流浹背舌缤。 一陣腳步聲響...
    開(kāi)封第一講書人閱讀 31,559評(píng)論 1贊 262
  • 情欲美人皮
    我被黑心中介騙來(lái)泰國(guó)打工， 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留，地道東北人国撵。 一個(gè)月前我還...
    沈念sama閱讀 45,595評(píng)論 2贊 355
  • 代替公主和親
    正文 我出身青樓陵吸，卻偏偏與公主長(zhǎng)得像，于是被迫代替她去往敵國(guó)和親介牙。 傳聞我的和親對(duì)象是個(gè)殘疾皇子壮虫，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,901評(píng)論 2贊 345