首页 > 软件开发 > HTML >

静态网页如何创建带有复选框和确认按钮的表单

来源:互联网 2023-03-16 19:17:39 版权归原作者所有,如有侵权,请联系我们

我们经常在网上填写资料时会碰到多个选项供你选择,选好点击确认按钮提交给网站后台处理。要实现这个功能具体应该怎么做呢?jG6办公区 - 实用经验教程分享!

工具/原料

  • 宽带上网
  • 电脑

方法/步骤

  • 1

    桌面鼠标右键新建一个记事文本,重新命名为:复选框和确认按钮表单.html,按回车确认。jG6办公区 - 实用经验教程分享!

    静态网页如何创建带有复选框和确认按钮的表单?jG6办公区 - 实用经验教程分享!

  • 2

    然后选中新建的html文件,点击选择记事本打开,手动输入代码如图所示jG6办公区 - 实用经验教程分享!

    静态网页如何创建带有复选框和确认按钮的表单?jG6办公区 - 实用经验教程分享!

  • 3

    先创建三个复选框,回到记事本文档,在body>下方添加如下代码:jG6办公区 - 实用经验教程分享!

    form>jG6办公区 - 实用经验教程分享!

    自行车:jG6办公区 - 实用经验教程分享!

    input type="checkbox" name="vehicle" value="Bike" checked="checked" />jG6办公区 - 实用经验教程分享!

    br />jG6办公区 - 实用经验教程分享!

    小汽车:jG6办公区 - 实用经验教程分享!

    input type="checkbox" name="vehicle" value="Car" />jG6办公区 - 实用经验教程分享!

    br />jG6办公区 - 实用经验教程分享!

    大飞机:jG6办公区 - 实用经验教程分享!

    input type="checkbox" name="vehicle" value="Airplane" />jG6办公区 - 实用经验教程分享!

    br />br />jG6办公区 - 实用经验教程分享!

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

    其中type="checkbox"是复选框标签,checked="checked"这组代码表示默认当下复选框打勾jG6办公区 - 实用经验教程分享!

    点击记事本左上角蓝色文件选项菜单下的保存jG6办公区 - 实用经验教程分享!

    静态网页如何创建带有复选框和确认按钮的表单?jG6办公区 - 实用经验教程分享!

  • 4

    桌面双击html文件,打开页面可以看到三个复选框jG6办公区 - 实用经验教程分享!

    静态网页如何创建带有复选框和确认按钮的表单?jG6办公区 - 实用经验教程分享!

  • 4
  • 5

    在复选框下面添加确认按钮,回到记事本在/form>上方添加代码:input type="submit" value="确认" />,点击保存jG6办公区 - 实用经验教程分享!

    静态网页如何创建带有复选框和确认按钮的表单?jG6办公区 - 实用经验教程分享!

  • 6

    桌面双击html文件,打开网页会看到复选框下面多了一个确认按钮jG6办公区 - 实用经验教程分享!

    静态网页如何创建带有复选框和确认按钮的表单?jG6办公区 - 实用经验教程分享!

  • 7

    实现点击确认后,提交表单功能,这里先在桌面新建一个a.php,具体内容属于动态编程,这里不多叙述。在记事本里,form>标签内添加代码:name="input" action="a.php" method="get",其中action是发送表单,method="get"表示方式为get,点击保存jG6办公区 - 实用经验教程分享!

    静态网页如何创建带有复选框和确认按钮的表单?jG6办公区 - 实用经验教程分享!

  • 8

    打开的网页点击确认按钮会发现下图红框内为发送到a.php页面处理jG6办公区 - 实用经验教程分享!

    静态网页如何创建带有复选框和确认按钮的表单?jG6办公区 - 实用经验教程分享!

  • 注意事项

    • 本经验如对你有帮助,请点个赞,谢谢!!!

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


    标签: HTML

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