首页 > 软件开发 > HTML >

html5 设置button重置恢复页面初始

来源:互联网 2023-03-16 19:15:39 327

html5 设置button重置恢复页面初始,我们制作网页不单要提供输入信息的按钮,而且如果用户输入错误,还需要可以一键恢复的功能键,这样体验才好。2us办公区 - 实用经验教程分享!

html5 设置button重置恢复页面初始2us办公区 - 实用经验教程分享!

工具/原料

  • sublime text 3
  • 网页浏览器

方法/步骤

  • 1

    这里以sublime text 3编辑器作为示范,创建一个新的index.html文档。2us办公区 - 实用经验教程分享!

    html5 设置button重置恢复页面初始2us办公区 - 实用经验教程分享!

    html5 设置button重置恢复页面初始2us办公区 - 实用经验教程分享!

  • 2

    设置一下HTML的基本框架。2us办公区 - 实用经验教程分享!

    因为要让用户输入所以要创建表单。2us办公区 - 实用经验教程分享!

    form method="post">2us办公区 - 实用经验教程分享!

    /form>2us办公区 - 实用经验教程分享!

    html5 设置button重置恢复页面初始2us办公区 - 实用经验教程分享!

  • 3

    需要让用户进行输入。2us办公区 - 实用经验教程分享!

    那么我们要运用到input标签。2us办公区 - 实用经验教程分享!

    input type="button" value="按钮">2us办公区 - 实用经验教程分享!

    input type="submit" name="提交">2us办公区 - 实用经验教程分享!

    但是这里可以看到有点乱码。2us办公区 - 实用经验教程分享!

    html5 设置button重置恢复页面初始2us办公区 - 实用经验教程分享!

    html5 设置button重置恢复页面初始2us办公区 - 实用经验教程分享!

  • 3相关内容未经许可获取自百度经验
  • 4

    输入中文,我们需要在头部加入这个以免出现乱码。2us办公区 - 实用经验教程分享!

    meta charset="utf-8">2us办公区 - 实用经验教程分享!

    html5 设置button重置恢复页面初始2us办公区 - 实用经验教程分享!

    html5 设置button重置恢复页面初始2us办公区 - 实用经验教程分享!

  • 5

    div>2us办公区 - 实用经验教程分享!

    input type="text" value="输入信息">2us办公区 - 实用经验教程分享!

    input type="button" value="按钮">2us办公区 - 实用经验教程分享!

    /div>2us办公区 - 实用经验教程分享!

    div>2us办公区 - 实用经验教程分享!

    input type="text" value="输入信息">2us办公区 - 实用经验教程分享!

    input type="submit" name="提交">2us办公区 - 实用经验教程分享!

    /div>2us办公区 - 实用经验教程分享!

    这个时候我们需要用div来进行分区,然后提供可以输入的信息框。2us办公区 - 实用经验教程分享!

    html5 设置button重置恢复页面初始2us办公区 - 实用经验教程分享!

  • 6

    div>2us办公区 - 实用经验教程分享!

    input type="reset" value="重置">2us办公区 - 实用经验教程分享!

    /div>2us办公区 - 实用经验教程分享!

    那么这个时候我们可以增加一个input为reset的标签,用户就可以点击这个来重置信息了。2us办公区 - 实用经验教程分享!

    html5 设置button重置恢复页面初始2us办公区 - 实用经验教程分享!

  • 7

    我们一次性输入信息,然后就可以点击重置来把所有信息给重置掉。2us办公区 - 实用经验教程分享!

    html5 设置button重置恢复页面初始2us办公区 - 实用经验教程分享!

    html5 设置button重置恢复页面初始2us办公区 - 实用经验教程分享!

  • 注意事项

    • 注意post和get的区别

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!2us办公区 - 实用经验教程分享!


    标签: HTML

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码