当前位置: 首页 > news >正文

2023.11.18html中如何使用input/button进行网页跳转

2023.11.18html中如何使用input/button进行网页跳转

在做网页时有时会用<button>元素,有时会用<input>元素进行form表单操作或者网页跳转,但是用bootstrap时两种元素会出现不同的样式,为了样式一致,有时需要使用这两种元素相互实现其常用功能。

使用<button>元素进行网页跳转:

<!DOCTYPE html>
<html>
<head><title>Button Redirect</title><script>function redirectToPage() {window.location.href = "https://www.example.com";}</script>
</head>
<body><button onclick="redirectToPage()">跳转到 Example 网站</button>
</body>
</html>

使用js调用redirectToPage()函数,该函数使用window.location.href实现网页跳转。

使用<input>实现网页跳转。可以使用<input>元素的type="button"属性创建一个按钮,并使用JavaScript的onclick事件来执行跳转操作:

<!DOCTYPE html>

相关文章:

  • html所有标签和DOCTYPE的总结
  • 图论 2023.11.20
  • Java update scheduler
  • Vscode GDB 查看内存的值
  • 前端js调取摄像头并实现拍照功能
  • MidJourney笔记(1)-入门
  • 今日定音,博通以610亿美元成功收购VMware | 百能云芯
  • Office文件在线预览大全-Word文档在线预览的实现方法-OFD文档在线预览-WPS文件在线预览
  • LeetCode热题100——图论
  • 基于springboot实现班级综合测评管理系统项目【项目源码+论文说明】
  • 11.21序列检测,状态机比较与代码,按键消抖原理
  • npm install安装报错
  • PPT幻灯片里的图片,批量提取
  • HashMap知识点总结
  • 单元测试实战(五)普通类的测试
  • 【Leetcode】101. 对称二叉树
  • @angular/forms 源码解析之双向绑定
  • android高仿小视频、应用锁、3种存储库、QQ小红点动画、仿支付宝图表等源码...
  • es的写入过程
  • ES学习笔记(10)--ES6中的函数和数组补漏
  • MD5加密原理解析及OC版原理实现
  • MobX
  • PHP的Ev教程三(Periodic watcher)
  • PHP面试之三:MySQL数据库
  • uva 10370 Above Average
  • vue-loader 源码解析系列之 selector
  • vue从入门到进阶:计算属性computed与侦听器watch(三)
  • WordPress 获取当前文章下的所有附件/获取指定ID文章的附件(图片、文件、视频)...
  • 浏览器缓存机制分析
  • 算法之不定期更新(一)(2018-04-12)
  • 线性表及其算法(java实现)
  • ​ 无限可能性的探索:Amazon Lightsail轻量应用服务器引领数字化时代创新发展
  • ​MPV,汽车产品里一个特殊品类的进化过程
  • ​插件化DPI在商用WIFI中的价值
  • #pragma data_seg 共享数据区(转)
  • $Django python中使用redis, django中使用(封装了),redis开启事务(管道)
  • (09)Hive——CTE 公共表达式
  • (C#)一个最简单的链表类
  • (C语言)深入理解指针2之野指针与传值与传址与assert断言
  • (Redis使用系列) SpringBoot 中对应2.0.x版本的Redis配置 一
  • (八)光盘的挂载与解挂、挂载CentOS镜像、rpm安装软件详细学习笔记
  • (二)springcloud实战之config配置中心
  • (附表设计)不是我吹!超级全面的权限系统设计方案面世了
  • (十八)用JAVA编写MP3解码器——迷你播放器
  • (实战)静默dbca安装创建数据库 --参数说明+举例
  • (一)基于IDEA的JAVA基础12
  • (转载)微软数据挖掘算法:Microsoft 时序算法(5)
  • .NET : 在VS2008中计算代码度量值
  • .NET 8.0 中有哪些新的变化?
  • .NET Conf 2023 回顾 – 庆祝社区、创新和 .NET 8 的发布
  • .Net Core与存储过程(一)
  • .NET Standard 的管理策略
  • .net 调用php,php 调用.net com组件 --
  • .NET8.0 AOT 经验分享 FreeSql/FreeRedis/FreeScheduler 均已通过测试
  • .net反混淆脱壳工具de4dot的使用