怎样在HTML中插入按钮

怎样在HTML中插入按钮,第1张

1、打开Sublime text3,新建一个HTML文档,并且建立好框架。

2、输入代码:

<table>

 兄竖     <tr>

          <td>Student</td>

          <td><input type="text" name="student"></td>

      </tr>

      <tr>

          <td>Height</td>

          <td><input type="text"大尘御 name="height"></td>

      </tr>

      <tr>

          <td colspan=2>

              <input type="button" name="add" value="add">

          </td>

      </tr>

  </table>

设滚岩立两行文本输入框,并且提示可以增加的按钮

3、<table id="mainTable">

标签加上id方便定位。

4、加上监听事件的函数。

onclick="adding()"

然后连接js文档。

<script src="test.js"></script>

5、function adding(){

  var table = document.getElementById("mainTable")

  var addTr = table.insertRow(2)

}

创建函数,然后设定两个变量。一个用于定位标签位置,另一个增加行数在第二行。测试一下,多次点击确实会往下移动。

6、var addTd = addTr.insertCell()

  addTd.innerHTML = "新增"

除了要增加tr还要增加td,并且增加文本提示。

7、稍微修改一下变量名字。再增加文本输入框。

function adding(){

  var table = document.getElementById("mainTable")

  var addTr = table.insertRow(2)

  var td1 = addTr.insertCell()

  td1.innerHTML = "新增"

  var td2 = addTr.insertCell()

  td2.innerHTML = "<input type='text 'name='newnew' >"

}

8、最后就可以看到按钮了。

1.首首先我们要提交一个HTML页面的数据,需要一个按钮,我们常见的按钮有三种,分别是普通按钮、提交按钮、重置按钮,提交页面需要用到是提交按钮,提交按钮只要通过将input标签的type值设庆游置为submit,如果我们需要给这个按钮命名的话,就添加一个value属性,属性值为你想设置的按钮名。2.当然,我们只是添加一个提交按钮,是没有办法传输数据的,这个时候,我们需要用到form标签,我们需要将需要传输的数据都包裹在form标签里面,然后我们在form标签里加上action属性,action属性的值为要跳转的页面的路径(关于页面路径,可以参考“如何指定图片路径”),此时我们点击提交按钮就可以实现页面的跳转了。3.接下来我们设置一下隐藏域,将input标签的type值设置为“hidden”,value值为需要存放的ID信息,最后设置一下name值即可。4.此时我们的提交方式是默认为“get”,即form标签中的method属性的值默认为“get”,我们也可以设置为“post”。此时我们需要了解一下关于get和post提交方法的区别,比较直观的一点就是,get请求的数据会附在URL之后,而post把提交的数据则放置在是HTTP包的包体中,还有就是post请求会比get请求的传送数据量大,安全性高乱衫。5.最后我们运行一下页面,然后点击提交按钮,跳转哗差腔到另一个页面。

拓展:HTML是什么?

Html是超文本标记语言,是用来描述web文档的一种标记语言。使用标签作为页面的开始和结束部分:1、html通常被称为静态网页;2、HTML是带html或Htm扩展名的文件;3、HTML的一些标签代码规则将内容呈现在浏览器中;4、HTML可以使用记事本创建,并以.html或.htm为扩展名保存。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11979004.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-20
下一篇 2023-05-20

发表评论

登录后才能评论

评论列表(0条)

保存