09.HTML表單

  • HTML表單

    HTML表單用于搜集用戶輸入

    HTML表單常用屬性及說明:
    屬性 描述
    accept-charset 規(guī)定在被提交表單中使用的字符集（默認(rèn)：頁面字符集）。
    action 規(guī)定向何處提交表單的地址（URL）（提交頁面）。
    autocomplete 規(guī)定瀏覽器應(yīng)該自動完成表單（默認(rèn)：開啟）。
    enctype 規(guī)定被提交數(shù)據(jù)的編碼（默認(rèn)：url-encoded）。
    method 規(guī)定在提交表單時所用的 HTTP 方法（默認(rèn)：GET）。
    name 規(guī)定識別表單的名稱（對于 DOM 使用：document.forms.name）。
    novalidate 規(guī)定瀏覽器不驗證表單。
    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是提交表單時的動作&lt;/p&gt;
                          &lt;p&gt;02.向服務(wù)器提交表單用的是submit&lt;/p&gt;
                          &lt;p&gt;03.如果省略action,則action設(shè)為當(dāng)前頁面&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是提交表單時的動作</p>
                          <p>02.向服務(wù)器提交表單用的是submit</p>
                          <p>03.如果省略action,則action設(shè)為當(dāng)前頁面</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)方式,無敏感信息時可使用,不安全,信息在地址欄是可見的&lt;/p&gt;
                          &lt;p&gt;03.post:更安全,信息在地址欄中是不可見的&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)方式,無敏感信息時可使用,不安全,信息在地址欄是可見的</p>
                          <p>03.post:更安全,信息在地址欄中是不可見的</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.例子中,點擊提交按鈕,只會提交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.例子中,點擊提交按鈕,只會提交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元素定義下拉選項&lt;/p&gt;
                  &lt;p&gt;03. option的selected屬性定義默認(rèn)選中項(不定義默認(rèn)選中第一個)&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元素定義下拉選項</p>
                  <p>03. option的selected屬性定義默認(rèn)選中項(不定義默認(rèn)選中第一個)</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元素用來定義文本域&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元素用來定義文本域</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定義其點擊事件&lt;/p&gt;
                  &lt;button type="button" onclick="alert('點擊按鈕')"&gt;Button&lt;/button&gt;
                  </pre>
              </div>              
              <h4>結(jié)果:</h4>
              <div id="btn01" class="result">
                  <p>1. button元素定義按鈕</p>
                  <p>2. onclick定義其點擊事件</p>
                  <button type="button" onclick="alert('點擊按鈕')">Button</button>
              </div>
              <hr />
          </li>
          <li>
              <h3>05. datalist元素</h3>
              <h4>代碼:</h4>
              <div class="code">
                  <pre>
                  &lt;p&gt;1. datalist元素為input元素定義選項列表&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元素定義選項列表</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類型中的文字會進(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類型中的文字會進(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)只能選擇一個&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)只能選擇一個</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)可選擇多個&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)可選擇多個</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屬性定義點擊事件&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屬性定義點擊事件</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. 若瀏覽器不識別,則默認(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 禁用 被禁用的元素不可用,不可點擊,不可被提交
    size 尺寸 規(guī)定輸入字段的尺寸,以字符計算
    maxlength 最大長度 輸入字段的最大長度
    autocomplete 自動完成 規(guī)定表單或輸入字段是否應(yīng)該自動完成(提示之前輸入過的值)
    autofocus 獲取焦點 此屬性的元素將獲得鼠標(biāo)的焦點
    form 表單 規(guī)定元素的所屬表單,其值應(yīng)與某一表單的id相同
    formaction 重設(shè)表單動作 規(guī)定當(dāng)提交表單時處理該輸入控件的文件的 URL
    formenctype 重設(shè)編碼方式 規(guī)定當(dāng)把表單數(shù)據(jù)提交至服務(wù)器時如何對其進(jìn)行編碼
    formmethod 重設(shè)請求方式 定義用以向 action URL 發(fā)送表單數(shù)據(jù)的 HTTP 方法
    formnovalidate 無校驗 提交表單時,不對表單數(shù)據(jù)進(jìn)行驗證
    formtarget 重設(shè)目標(biāo) 提交表單后在何處顯示接收到的響應(yīng),當(dāng)前窗口或者新窗口等
    height/width 高/寬 規(guī)定元素的高和寬
    list 列表 引用 <datalist> 元素中<option>元素的值作為預(yù)定義選項,list的值要與datalist的id一致
    min/max 最小/最大 元素的最小值/最大值
    multiple 多個 允許輸入一個以上的值,如type=file,選取多個文件
    pattern (regexp) 正則表達(dá)式 用于檢查元素值的正則表達(dá)式
    placeholder 占位符 規(guī)定用以描述輸入字段預(yù)期值的提示
    required 必選 提交表單之前必須填寫輸入字段
    step 步 元素合法數(shù)字的間隔
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容