09.HTML表单

  • HTML表单

    HTML表单用于搜集用户输入

    HTML表单常用属性及说明:
    属性 描述
    accept-charset 规定在被提交表单中使用的字符集（默认：页面字符集）。
    action 规定向何处提交表单的地址（URL）（提交页面）。
    autocomplete 规定浏览器应该自动完成表单（默认：开启）。
    enctype 规定被提交数据的编码（默认：url-encoded）。
    method 规定在提交表单时所用的 HTTP 方法（默认：GET）。
    name 规定识别表单的名称（对于 DOM 使用：document.forms.name）。
    novalidate 规定浏览器不验证表单。
    target 规定 action 属性中地址的目标（默认：_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标签</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>结果:</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.向服务器提交表单用的是submit&lt;/p&gt;
                          &lt;p&gt;03.如果省略action,则action设为当前页面&lt;/p&gt;
                      &lt;/div&gt;
                      &lt;input type="submit" name="submit" id="submit" value="Submit" /&gt;
                  &lt;/form&gt;
                  </pre>
              </div>              
              <h4>结果:</h4>
              <div id="act01" class="result">
                  <form action="">
                      <div>
                          <p>01.action是提交表单时的动作</p>
                          <p>02.向服务器提交表单用的是submit</p>
                          <p>03.如果省略action,则action设为当前页面</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方式有get和post两种方式&lt;/p&gt;
                          &lt;p&gt;02.get:默认方式,无敏感信息时可使用,不安全,信息在地址栏是可见的&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>结果:</h4>
              <div id="mtd01" class="result">
                  <form method="post">
                      <div>
                          <p>01.提交的HTTP方式有get和post两种方式</p>
                          <p>02.get:默认方式,无敏感信息时可使用,不安全,信息在地址栏是可见的</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.数据要正确的被提交,必须有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>结果:</h4>
              <div id="name01" class="result">
                  <form method="post">
                      <div>
                          <p>01.数据要正确的被提交,必须有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标签</h3>
              <h4>代码:</h4>
              <div class="code">
                  <pre>
                  &lt;form method="post"&gt;
                      &lt;div&gt;
                          &lt;p&gt;01.fieldset元素组合表单中的数据&lt;/p&gt;
                          &lt;p&gt;02.legend元素为fieldset定义标题&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>结果:</h4>
              <div id="name01" class="result">
                  <form method="post">
                      <div>
                          <p>01.fieldset元素组合表单中的数据</p>
                          <p>02.legend元素为fieldset定义标题</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>结果:</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元素,根据type的不同,有多种形式&lt;/p&gt;
                  &lt;input type="text" name="text" id="text" value="" /&gt;
                  </pre>
              </div>              
              <h4>结果:</h4>
              <div id="ipt01" class="result">
                  <p>01. 表单元素中,最常用的是input元素,根据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属性定义默认选中项(不定义默认选中第一个)&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>结果:</h4>
              <div id="slt01" class="result">
                  <p>01. select元素定义下拉列表</p>
                  <p>02. option元素定义下拉选项</p>
                  <p>03. option的selected属性定义默认选中项(不定义默认选中第一个)</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:行数,cols:列数&lt;/p&gt;
                  &lt;textarea name="message" rows="5" cols="20"&gt;
                      Hello World !
                  &lt;/textarea&gt;
                  </pre>
              </div>              
              <h4>结果:</h4>
              <div id="txa01" class="result">
                  <p>01. textarea元素用来定义文本域</p>
                  <p>02. textarea常用属性rows:行数,cols:列数</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>结果:</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>结果:</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>结果:</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类型中的文字会进行密文处理&lt;/p&gt;
                  &lt;span&gt;Password :&lt;/span&gt;
                  &lt;input type="password" name="password" id="password" value="password"/&gt;
                  </pre>
              </div>              
              <h4>结果:</h4>
              <div class="result">
                  <p>01. password类型中的文字会进行密文处理</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类型定义提交表单数据至表单处理程序的按钮&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>结果:</h4>
              <div class="result">
                  <p>01. submit类型定义提交表单数据至表单处理程序的按钮</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属性默认选中&lt;/p&gt;
                      &lt;p&gt;03. name属性相同的范围内只能选择一个&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>结果:</h4>
              <div class="result">
                  <form action="" method="post">
                      <p>01. radio类型定义单选框</p>
                      <p>02. checked属性默认选中</p>
                      <p>03. name属性相同的范围内只能选择一个</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复选框</h3>
              <h4>代码:</h4>
              <div class="code">
                  <pre>
                  &lt;form action="" method="post"&gt;
                      &lt;p&gt;01. checkbox类型定义复选框&lt;/p&gt;
                      &lt;p&gt;02. checked属性默认选中&lt;/p&gt;
                      &lt;p&gt;03. name属性相同的范围内可选择多个&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>结果:</h4>
              <div class="result">
                  <form action="" method="post">
                      <p>01. checkbox类型定义复选框</p>
                      <p>02. checked属性默认选中</p>
                      <p>03. name属性相同的范围内可选择多个</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>结果:</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. 若浏览器不识别,则默认为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>结果:</h4>
              <div class="result">
                  <form action="" method="post" class="other">
                      <p>01. 若浏览器不支持此输入类型,则默认为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 值 规定输入字段的初始值
    readonly 只读 规定输入字段为只读
    disabled 禁用 被禁用的元素不可用,不可点击,不可被提交
    size 尺寸 规定输入字段的尺寸,以字符计算
    maxlength 最大长度 输入字段的最大长度
    autocomplete 自动完成 规定表单或输入字段是否应该自动完成(提示之前输入过的值)
    autofocus 获取焦点 此属性的元素将获得鼠标的焦点
    form 表单 规定元素的所属表单,其值应与某一表单的id相同
    formaction 重设表单动作 规定当提交表单时处理该输入控件的文件的 URL
    formenctype 重设编码方式 规定当把表单数据提交至服务器时如何对其进行编码
    formmethod 重设请求方式 定义用以向 action URL 发送表单数据的 HTTP 方法
    formnovalidate 无校验 提交表单时,不对表单数据进行验证
    formtarget 重设目标 提交表单后在何处显示接收到的响应,当前窗口或者新窗口等
    height/width 高/宽 规定元素的高和宽
    list 列表 引用 <datalist> 元素中<option>元素的值作为预定义选项,list的值要与datalist的id一致
    min/max 最小/最大 元素的最小值/最大值
    multiple 多个 允许输入一个以上的值,如type=file,选取多个文件
    pattern (regexp) 正则表达式 用于检查元素值的正则表达式
    placeholder 占位符 规定用以描述输入字段预期值的提示
    required 必选 提交表单之前必须填写输入字段
    step 步 元素合法数字的间隔
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,456评论 5赞 477
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,370评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,337评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,583评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,596评论 5赞 365
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,572评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,936评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,595评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,850评论 1赞 297
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,371评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,951评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2赞 342