美文网首页
09.HTML表单

09.HTML表单

作者: Lv_0 | 来源:发表于2018-01-03 21:03 被阅读0次

  • 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 步 元素合法数字的间隔

相关文章

  • 09.HTML表单

    HTML表单HTML表单用于搜集用户输入HTML表单常用属性及说明:属性描述accept-charset规定在被提...

  • bootstrap之form表单

    表单布局 垂直表单（默认） 内联表单 水平表单 垂直表单或基本表单（display:block;） 创建基本表单的...

  • 【读书笔记+思考】移动设备表单设计

    在移动界面中，常见的表单模式有：登录表单；注册表单；核对表单；计算表单；搜索表单；多步骤表单；长表单等 登录表单：...

  • bootstrap表单

    表单布局 垂直表单（默认） 内联表单 水平表单 垂直表单或基本表单 基本的表单结构是 Bootstrap 自带的，...

  • bootstrap 表单布局的三种方式

    三种 垂直表单（默认） 内联表单 水平表单 垂直表单 效果 内联表单 效果 水平表单 效果 参考:https://...

  • 表单相关总结

    表单？表单作用：收集用户信息。表单组成：表单域、表单控件、提示信息。 表单域常用属性 常用属性： name=...

  • 网页设计：HTML表单标签

    表单包含三个基本组成部分：表单标签、表单域、表单按钮。 1，表单标签 HTML 表单用于收集用户输入，表单使用 ...

  • 2019-04-09 表单（5）

    表单布局Bootstrap 提供了下列类型的表单布局： 垂直表单（默认） 内联表单 水平表单 1.垂直或基本表单 ...

  • 动态表单实现

    angular动态表单 地址: angular表单 vue动态表单 地址: vue表单

  • bootstrap表单

    垂直表单（默认） 内联表单 水平表单 垂直表单 也称基本表单基本的表单结构是 bootstrap 自带的创建基本表...

网友评论

      本文标题：09.HTML表单

      本文链接：https://www.haomeiwen.com/subject/bnlbixtx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|09.HTML表单|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！