经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » HTML/CSS » HTML5 » 查看文章
HTML 5 详解之表单的初级验证
来源：cnblogs　　作者：Hateyes　　时间：2021/2/18 15:31:31　　对本文有异议 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>表单的初级验证</title>
  6. </head>
  7. <body>
  8.  
  9. <h1>注册</h1>
  10.  
  11. <!--
  12. 表单：
  13. action：表单提交的位置,可以是网站,也可以是一个请求处理地址
  14. method：get/post 表单的两种提交方式,为确保数据安全常用 post 方式提交
  15.         get 方式提交：我们可以在 url 中看到我们提交的信息,不安全,高效
  16.         post 方式提交：比较安全,可传输大文件
  17. -->
  18. <form action="1.我的第一个网页.html" method="get">
  19.  
  20.     <!--
  21.     文本输入框：
  22.     type：text
  23.     value="狂神好帅"：默认初始值
  24.     maxlength="8"：最长能写几个字符
  25.     size="30"：文本框长度
  26.     placeholder：提示信息
  27.     required：判空
  28.     <input type="text" name="username">
  29.     -->
  30.     <p>名字：<input type="text" name="username" placeholder="请输入用户名" required/> </p>
  31.  
  32.     <!--
  33.     密码框：
  34.     type：password
  35.     placeholder：提示信息
  36.     required：判空
  37.     <input type="password" name="pwd">
  38.     -->
  39.     <p>密码：<input type="password" name="pwd" placeholder="请输入密码" required/> </p>
  40.  
  41.     <!--
  42.     单选框标签：
  43.     type：radio
  44.     value：单选框的值
  45.     name：表示组
  46.     checked：默认选中
  47.     <input type="radio" value="boy" name="sex"/>
  49.     隐藏域：文本隐藏域,但表单提交后值仍然存在
  50.     type：hidden
  51.     <input type="hidden" value="boy" name="sex"/>
  52.     -->
  53.     <p>性别：
  54.         <input type="hidden" value="boy" name="sex"/>
  55.         <input type="radio" value="boy" name="sex" checked/>男
  56.         <input type="radio" value="girl" name="sex"/>女
  57.     </p>
  58.  
  59.     <!--
  60.     多选框标签：
  61.     type：checkbox
  62.     checked：默认选中
  63.     disabled：禁用属性
  64.     <input type="checkbox" value="sleep" name="hobby"/>
  65.     -->
  66.     <p>爱好：
  67.         <input type="checkbox" value="sleep" name="hobby"/>睡觉
  68.         <input type="checkbox" value="code" name="hobby" checked/>敲代码
  69.         <input type="checkbox" value="chat" name="hobby"/>聊天
  70.         <input type="checkbox" value="game" name="hobby" disabled/>游戏
  71.     </p>
  72.  
  73.     <!--
  74.     按钮：
  75.     input type="button"  普通按钮
  76.     input type="image"  图像按钮
  77.     input type="submit"  提交按钮
  78.     input type="reset"  重置按钮
  79.     more...
  80.     -->
  81.     <p>普通按钮：
  82.         <input type="button" name="btn1" value="点击按钮"/>
  83.     </p>
  84.  
  85.     <p>图像按钮：
  86.         <input type="image" src="../resources/image/1.jpg" name="btn1" width="50px" height="50px"/>
  87.     </p>
  88.  
  89.     <!--
  90.     下拉框_下拉框：
  91.     selected：默认选中
  92.     <select name="列表名称">
  93.         <option value="选项的值">下拉选择值</option>
  94.         <option value="选项的值">下拉选择值</option>
  95.         <option value="选项的值" selected>下拉选择值</option>
  96.         <option value="选项的值">下拉选择值</option>
  97.     </select>
  98.     -->
  99.     <p>国家：
  100.         <select name="country">
  101.             <option value="china">中国</option>
  102.             <option value="us">美国</option>
  103.             <option value="switzerland" selected>瑞士</option>
  104.             <option value="india">印度</option>
  105.         </select>
  106.     </p>
  107.  
  108.     <!--
  109.     文本域：
  110.     cols="50"：50列
  111.     rows="10"：10行
  112.     <textarea name="textarea" cols="50" rows="10">文本内容</textarea>
  113.     -->
  114.     <p>反馈：
  115.         <textarea name="textarea" cols="50" rows="10">请输入文本内容...</textarea>
  116.     </p>
  117.  
  118.     <!--
  119.     文件域：
  120.     type：file
  121.     <input type="file" name="files"/>
  122.     -->
  123.     <p>上传文件：
  124.         <input type="file" name="files"/>
  125.         <input type="button" value="上传" name="upload"/>
  126.     </p>
  127.  
  128.     <!--
  129.     邮件验证：
  130.     type：email
  131.     required：判空
  132.     <input type="email" name="email"/>
  133.     -->
  134.     <p>邮箱：
  135.         <input type="email" name="email" required/>
  136.     </p>
  137.  
  138.     <!--
  139.     URL：
  140.     type：url
  141.     <input type="url" name="url"/>
  142.     -->
  143.     <p>URL：
  144.         <input type="url" name="url"/>
  145.     </p>
  146.  
  147.     <!--
  148.     数字：
  149.     type：number
  150.     max：最大值
  151.     min：最小值
  152.     step：步长
  153.     <input type="number" name="num" max="100" min="0" step="10"/>
  154.     -->
  155.     <p>商品数量：
  156.         <input type="number" name="num" max="100" min="0" step="1"/>
  157.     </p>
  158.  
  159.     <!--
  160.     滑块：
  161.     type：range
  162.     max：最大值
  163.     min：最小值
  164.     step：步长
  165.     <input type="range" name="voice" max="100" min="0" step="2"/>
  166.     -->
  167.     <p>音量：
  168.         <input type="range" name="voice" max="100" min="0" step="2"/>
  169.     </p>
  170.  
  171.     <!--
  172.     搜索框：
  173.     type：search
  174.     <input type="search" name="search"/>
  175.     -->
  176.     <p>搜索：
  177.         <input type="search" name="search"/>
  178.     </p>
  179.  
  180.     <!--
  181.     增强鼠标可用性：
  182.     点击左侧文字,光标可跳转到指定 id 所在的标签内
  183.     for：指向需跳转的标签 id
  184.     -->
  185.     <p>增强鼠标可用性：
  186.         <label for="mark">你点我试试</label>
  187.         <input type="text" id="mark">
  188.     </p>
  189.  
  190.     <!--
  191.     自定义邮箱：
  192.     pattern：正则表达式
  193.     常用正则表达式：https://www.jb51.net/tools/regexsc.htm
  194.     -->
  195.     <p>自定义邮箱：
  196.         <input type="text" name="mail" pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
  197. /^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/或\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">
  198.     </p>
  199.  
  200.     <p>
  201.         <input type="submit" value="提交表单"/>
  202.         <input type="reset" value="清空表单"/>
  203.     </p>
  204.     
  205. </form>
  206.  
  207. </body>
  208. </html>

 

原文链接：http://www.cnblogs.com/ming2/p/14380755.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

HTML5热门文章

  • Webpack友好的错误提示插件friendly-errors-webpack-plugin
  • uni-app 微信小程序 picker 三级联动
  • 记录vue用 html5+做移动APP 用barcode做扫一扫功能时安卓 的bug(黑屏、错位等等)和解决方法
  • H5+ 操作手机日历
  • uni-app开发经验分享十五： uni-app 蓝牙打印功能
  • 设计中的设计PDF下载高清完整扫描原版
  • 前端canvas动画如何转成mp4视频的方法
  • antd通过 filterDropdown 自定义--按某天时间搜索
  • H5+ API 设置手机状态栏颜色以及沉浸式状态栏
  • elementui中el-input联想搜索框

    • HTML5推荐文章

  • canvas实现动态替换人物的背景颜色
  • form 表单恢复初始数据
  • canvas?中如何实现物体的框选
  • 前端canvas中物体边框和控制点的实现示例
  • FileReader()读取文件、图片上传预览
  • 跨域访问方法介绍(5)--使用 window.postMessage 传递数据
  • 跨域访问方法介绍(3)--使用片段识别符传值
  • 跨域访问方法介绍(4)--使用 window.name 传值
  • HTML
  • 前端常用模板引擎- artTemplate

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号