HTML5 表单元素 —— input元素

ゝ一世哀愁。 2022-07-11 17:26 839阅读 0赞 
  1. <!DOCTYPE HTML>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="utf8">
  5.         <style> body { font-size: 14px; } ol { margin: 0; margin-bottom: 10px; } table { margin-bottom: 10px; border-spacing: 0px; border: 1px solid black; } table td, table th { padding: 5px; border: 1px solid black; } label { display: block; } .container { border: 1px groove black; padding: 5px; margin-bottom: 5px; } </style>
  6.     </head>
  7.     <body>
  8.         <div>input element type</div>
  9.         <ol>
  10.             <li>list</li>
  11.             <li>text</li>
  12.             <li>password</li>
  13.             <li>radio</li>
  14.             <li>checkbox</li>
  15.             <li>button</li>
  16.             <li>submit</li>
  17.             <li>reset</li>
  18.             <li>number</li>
  19.             <li>color</li>
  20.             <li>range</li>
  21.             <li>date</li>
  22.             <li>month</li>
  23.             <li>week</li>
  24.             <li>time</li>
  25.             <li>datetime</li>
  26.             <li>datetime-local</li>
  27.             <li>email</li>
  28.             <li>search</li>
  29.             <li>tel</li>
  30.             <li>url</li>
  31.             <li>hidden</li>
  32.             <li>image</li>
  33.             <li>file</li>
  34.         </ol>
  36.         <table>
  37.             <tr>
  38.                 <th>input param</th>
  39.                 <th>description</th>
  40.             </tr>
  41.             <tr>
  42.                 <td>autocomplete</td>
  43.                 <td>规定表单或输入字段是否应该自动完成,取值为on或off.如果是on,浏览器会自动填写值.</td>
  44.             </tr>
  45.             <tr>
  46.                 <td>autofocus</td>
  47.                 <td>规定页面加载时,元素是否自动获得焦点(autofocus属性不需要值)</td>
  48.             </tr>
  49.             <tr>
  50.                 <td>disabled</td>
  51.                 <td>规定输入字段是禁用的.被禁用的元素是不可用和不可点击的.被禁用的元素不会被提交.(disabled属性不需要值.它等同于disabled="disabled")</td>
  52.             </tr>
  53.             <tr>
  54.                 <td>maxlength</td>
  55.                 <td>规定输入字段允许的最大长度(仅适用于email和file)</td>
  56.             </tr>
  57.             <tr>
  58.                 <td>multiple</td>
  59.                 <td>规定是否允许用户输入一个以上的元素(autofocus属性不需要值)</td>
  60.             </tr>
  61.             <tr>
  62.                 <td>pattern</td>
  63.                 <td>是一个正则表达式,提交时会自动校验输入值的合法性</td>
  64.             </tr>
  65.             <tr>
  66.                 <td>placeholder</td>
  67.                 <td>在输入值之前显示的文本</td>
  68.             </tr>
  69.             <tr>
  70.                 <td>readonly</td>
  71.                 <td>规定输入字段为只读(不能修改.readonly属性不需要值.它等同于readonly="readonly")</td>
  72.             </tr>
  73.             <tr>
  74.                 <td>required</td>
  75.                 <td>限制了输入的内容不能为空</td>
  76.             </tr>
  77.             <tr>
  78.                 <td>size</td>
  79.                 <td>规定输入字段的尺寸(以字符计)</td>
  80.             </tr>
  81.             <tr>
  82.                 <td>step</td>
  83.                 <td>步长,只有和初始值距离该步长的整数倍的值才是合法的,其它值虽然也可能被填入,但是不一定会校验通过</li></td>
  84.             </tr>
  85.             <tr>
  86.                 <td>value</td>
  87.                 <td>规定输入字段的初始值</td>
  88.             </tr>
  89.             <tr>
  90.                 <td>height 和 width</td>
  91.                 <td>规定元素的宽度和高度</td>
  92.             </tr>
  93.             <tr>
  94.                 <td>min 和 max</td>
  95.                 <td>规定元素的最小值和最大值</td>
  96.             </tr>
  97.             <tr>
  98.                 <td>onchange</td>
  99.                 <td>当输入框的值改变时,会触发该变量对应的函数</li></td>
  100.             </tr>
  101.         </table>
  102.         <div class="container">
  103.             <label>list</label>
  104.             <div>list属性引用<datalist>元素中包含的预定义选项.用户输入这些值时会有相应的提示.当然用户也可以输入其它值.</div>
  105.             <input list="mylist"/>
  106.             <datalist id="mylist">
  107.                 <option value="chrome">
  108.                 <option value="ie">
  109.                 <option value="Edge">
  110.                 <option value="firefox">
  111.             </datalist>
  112.         </div>
  113.         <div class="container">
  114.             <label>text</label>
  115.             <div>文本域,用户可以在文本域中写入文本</div>
  116.             <input type="text"/>
  117.         </div>
  118.         <div class="container">
  119.             <label>password</label>
  120.             <div>密码字段,密码字段中的字符显示为圆点</div>
  121.             <input type="password" placeHolder="请输入密码" maxlength="6" id="pwdInput" />
  122.         </div>
  123.         <div class="container">
  124.             <label>radio</label>
  125.             <div>复选框,默认无文本.根据name属性分组.</div>
  126.             <input type="radio" name="group" value="1"/>
  127.             <input type="radio" name="group" value="2"/>
  128.         </div>
  129.         <div class="container">
  130.             <label>checkbox</label>
  131.             <div>复选框,默认无文本</div>
  132.             <input type="checkbox" value="1"/>
  133.             <input type="checkbox" value="2"/>
  134.         </div>
  135.         <div class="container">
  136.             <label>button</label>
  137.             <div>按钮,默认无文本</div>
  138.             <input type="button"/>
  139.         </div>
  140.         <div class="container">
  141.             <label>submit</label>
  142.             <div>提交按钮,默认的文本是"提交".会使用form的method方法将数据发送到action的地址上.</div>
  143.             <input type="submit"/>
  144.         </div>
  145.         <div class="container">
  146.             <label>reset</label>
  147.             <div>重置按钮,默认的文本是"重置".会将form表单的所有数据重置为html中元素的value值.</div>
  148.             <input type="reset"/>
  149.         </div>
  150.         <div class="container">
  151.             <label>number</label>
  152.             <div>数字框.只能输入整数或小数.右侧有上下的三角按钮,步长默认为1</div>
  153.             <input type="number"/>
  154.         </div>
  155.         <div class="container">
  156.             <label>color</label>
  157.             <div>颜色选择域.</div>
  158.             <input type="color"/>
  159.         </div>
  160.         <div class="container">
  161.             <label>range</label>
  162.             <div>滑动条.</div>
  163.             <input type="range" min="0" max="100" step="1" value="0"/>
  164.         </div>
  165.         <div class="container">
  166.             <label>date</label>
  167.             <div>日期选择框.可以选择"年月日"."叉按钮"用来重置数据.上下的三角按钮用来对"年或月或日"进行加减.最右侧的大三角可以弹出选择框.</div>
  168.             <form>
  169.                 <input type="date" step="5"/>
  170.                 <input type="submit"/>
  171.             </form>
  172.         </div>
  173.         <div class="container">
  174.             <label>month</label>
  175.             <div>年月选择框.可以选择"年月"."叉按钮"用来重置数据.上下的三角按钮用来对"年或月"进行加减.最右侧的大三角可以弹出选择框.</div>
  176.             <input type="month"/>
  177.         </div>
  178.         <div class="container">
  179.             <label>week</label>
  180.             <div>年周选择框.可以选择"年/第几周"."叉按钮"用来删除数据.上下的三角按钮用来对"年或周"进行加减.最右侧的大三角可以弹出选择框.</div>
  181.             <input type="week"/>
  182.         </div>
  183.         <div class="container">
  184.             <label>time</label>
  185.             <div>时间选择框.可以选择"上/下午"、几时几分."叉按钮"用来删除数据.上下的三角按钮用来对"上/下午"、"小时或分钟"进行加减.</div>
  186.             <input type="time"/>
  187.         </div>
  188.         <div class="container">
  189.             <label>datetime</label>
  190.             <div>日期时间框.奇怪的是:无数据校验功能!!!</div>
  191.             <form>
  192.                 <input type="datetime"/>
  193.                 <input type="submit"/>
  194.             </form>
  195.         </div>
  196.         <div class="container">
  197.             <label>datetime-local</label>
  198.             <div>本地日期时间框.可以选择"年月日,上/下午 时分"."叉按钮"用来重置数据.上下的三角按钮用来对"年月日,上/下午时分"进行加减.最右侧的大三角可以弹出选择框.</div>
  199.             <input type="datetime-local"/>
  200.         </div>
  201.         <div class="container">
  202.             <label>email</label>
  203.             <div>邮件域.如果输入错误,submit时会提示"请在电子邮件地址中包括@"(空是合法的).</div>
  204.             <form>
  205.                 <input type="email"/>
  206.                 <input type="submit"/>
  207.             </form>
  208.         </div>
  209.         <div class="container">
  210.             <label>search</label>
  211.             <div>搜索框.右侧"叉按钮"用来清空数据.</div>
  212.             <input type="search" pattern="^(0|86|17951)?(13[0-9]|15[012356789]|17[0678]|18[0-9]|14[57])[0-9]{8}"/>
  213.         </div>
  214.         <div class="container">
  215.             <label>tel</label>
  216.             <div>电话号码框.required说明了输入的内容不能为空,否则提交会提示"请填写此字段";由于不会自动校验,将正则表达式赋予pattern属性,可以让其提交时自动校验.</div>
  217.             <form>
  218.                 <input type="tel" required pattern="^(0|86|17951)?(13[0-9]|15[012356789]|17[0678]|18[0-9]|14[57])[0-9]{8}"/>
  219.                 <input type="submit"/>
  220.             </form>
  221.         </div>
  222.         <div class="container">
  223.             <label>url</label>
  224.             <div>网址域.如果输入错误,submit时会提示"请输入网址"(空是合法的)</div>
  225.             <form>
  226.                 <input type="url"/>
  227.                 <input type="submit"/>
  228.             </form>
  229.         </div>
  230.         <div class="container">
  231.             <label>hidden</label>
  232.             <div>隐藏的输入域.如果要提交并非用户直接输入的数据的话,就是用这种类型的元素.</div>
  233.             <input type="hidden"/>
  234.         </div>
  235.         <div class="container">
  236.             <label>image</label>
  237.             <div>图片提交按钮,如果图片加载失败,会显示破图和"提交"文字.H5新增的类型,用户单击了这个图片后会提交表单.</div>
  238.             <input type="image" width="50px" height="50px" src="file:///C:/Users/admin/Desktop/test.jpg"/>
  239.         </div>
  240.         <div class="container">
  241.             <label>file</label>
  242.             <div>文件选择域.包含一个"选择文件"的按钮和一个用来显示文件名的文本域,value为文件的具体路径.</div>
  243.             <input type="file" id="file"/>
  244.             <button onclick="showFile()">显示</button>
  245.         </div>
  246.         <script> var file = document.getElementById("file"); function showFile() { alert(file.value); } </script>
  247.     </body>
  248. </html>

这里写图片描述
这里写图片描述

发表评论

表情：
评论列表 （有 0 条评论，839人围观）

还没有评论，来说两句吧...

相关阅读

    相关 HTML表单元素

    HTML表单元素 HTML中的表单元素，可以说是整个HTML中最常用也是最重要的部分，里面包含的太多的元素，尔每一个元素中的type类型又有很多种。所以需要大家理清楚区分

    向右看齐向右看齐/ 0 赞/ 260 阅读