首页 > 网页制作 > html5

html5表单及新增的改良元素详解

admin html5 2022-02-06 02:14:13 html5   表单   元素"
XML/HTML Code复制内容到剪贴板
  1. >    
  2. <html>    
  3.     <head>    
  4.         <meta charset="UTF-8">    
  5.         <title>title>    
  6.     head>    
  7.     <body>    
  8.           
  9.         <form id="testform">    
  10.             <input type="submit" />    
  11.         form>    
  12.         <textarea form="testform">textarea> <br /><hr />    
  13.           
  14.         <form id="form1" action="test.aspx">    
  15.             <input type="submit" name="s1" value="内部提交到test2" formaction="test2.aspx" />    
  16.             <input type="submit"  />    
  17.         form>    
  18.           
  19.         <form id="form2" action="test.aspx">    
  20.             name:<input type="text" name="name" /><br />    
  21.             <input type="submit" value="post方式提交"  formmethod="post"/>    
  22.             <input type="submit" value="get方式提交"  formmethod="get"/>    
  23.         form><br/><hr />    
  24.           
  25.         <form action="test2.aspx" method="post">    
  26.             <input type="text" name="name" id="name" value="test" />    
  27.             文件:<input type="file" name="files" />    
  28.             <input type="submit"  value="上传" formaction="test.aspx"  formenctype="multipart/form-data"/>    
  29.             <input type="submit" value="提交" />    
  30.         form><br /><hr />    
  31.           
  32.         <form action="test.aspx">    
  33.             <input type="submit" name="s1"  value="s1本页打开" formaction="test2.aspx"  formtarget="_self"/>提交到test2    
  34.             <input type="submit" name="s"  value="s新页打开" formaction="test.aspx"  formtarget="_blank"/>提交到test    
  35.         form><hr />    
  36.           
  37.         <input type="text" autofocus /><br />    
  38.           
  39.         <form >    
  40.             <label id="label">    
  41.             邮编:<input id="txtzip" maxlength="6" /><small>请输入6位数字small>    
  42.             label>    
  43.             <input type="button" value="设置默认值" onclick="setValue()" />    
  44.         form>    
  45.           
  46.         <input type="text" placeholder="请输入内容" /><br />    
  47.           
  48.         list属性:<input type="text" list="mylist" autocomplete="on"/>    
  49.         <datalist id="mylist" >    
  50.             <option value="第一">第一option>    
  51.             <option value="第二">第二option>    
  52.             <option value="第三">option>    
  53.         datalist><br />    
  54.           
  55.         <form>    
  56.         输入一个字母与三个大写字母:<input type="text" pattern="[0-9][A-Z]{3}"  required=""/>    
  57.         <input type="submit" />    
  58.         form><br />    
  59.           
  60.         <input type="checkbox" indeterminate id="cb" />indeterminate<br />    
  61.           
  62.         设置图片宽高:<input type="image" src="img/webp.jpg" alt="编辑" width="23" height="23" /><br />    
  63.           
  64.         <form action="test.aspx" method="post">    
  65.             <textarea name="name" maxlength="10" rows="5" cols="5" wrap="hard">textarea>    
  66.             <input type="submit" value="提交" />    
  67.         form><br />    
  68.        
  69.         url:<input type="url" name="url"  required=""/><input type="submit" /><br />    
  70.         email:<input type="email" name="email" required=""/><input type="submit" /><br />    
  71.         date(谷歌浏览器):<input type="date" name="date"  /><br />    
  72.         time(谷歌浏览器):<input type="time" name="time" /><br />    
  73.         datetime-local:<input type="datetime-local" name="datetime"  value="2016-05-26T22:31:30"/><br />    
  74.           
  75.         step:<input type="date" step="3" /><br /><hr />    
  76.         number:<input type="number"  value="25" min="10" min="20" max="30" step="2"  /><br />    
  77.         range:<input type="range" value="25" min="10" max="100" step="5" /><br />    
  78.         search:<input type="search"/><br />    
  79.         tel:<input type="tel"  /><br />    
  80.         color:<input type="color" /><br />    
  81.         <hr />    
  82.         output元素的追加:    
  83.         <form id="testform">    
  84.             请选择一个值:<input type="range" id="range" min="5" max="100" step="5" value="10" onchange="out();"/>    
  85.             <output id="out">10output>    
  86.         form>    
  87.     body>    
  88. html>    
  89. <script type="text/javascript">    
  90.     function setValue(){    
  91.         var lable=document.getElementById("label");    
  92.         var txtbox=lable.control;//通过control该属性来访问该表单元素    
  93.         txtbox.value="213001";    
  94.     }    
  95.     //indeterminate测试设置为true    
  96.     var cb=document.getElementById("cb");    
  97.     cb.indeterminate=true;    
  98.     //选择的值output输出    
  99.     function out(){    
  100.         Debug;    
  101.         var number=document.getElementById("range").value;    
  102.         document.getElementById("out").value=number;    
  103.     }    
  104. script>  

念念不忘,必有回响。技术成就梦想!

以上这篇html5表单及新增的改良元素详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持潘少俊衡。

原文地址:https://www.iwyv.com/d/files/20220206/53vsh4pd32z.html

版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。
本文地址:/web/html5/75399.html

留言与评论(共有 0 条评论)
   
验证码:

潘少俊衡

| 桂ICP备2023010378号-4

Powered By EmpireCMS

爱享小站

中德益农

谷姐神农

环亚肥料

使用手机软件扫描微信二维码

关注我们可获取更多热点资讯

感谢潘少俊衡友情技术支持