Html中在按钮中怎么添加文本框

<button style="height:100pxwidth:200px">

<textarea>这里是文本</textarea>

</button>

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、最后就可以看到按钮了。

近来App中按钮要做统一话，如图所示框住部分为可点击区域，显示区域则为白色圆角框区域~~

根据上图表示，实现思路有

2.3 对button的layer做处理

基于2.2可知，对layer层直接做处理是可行的，只是由于button对titlelabel做的处理，导致titlelabel的frame和文本的高宽一致，不能直接使用其layer处理，但是如果我们得知了titlelabel的frame，直接对此frame进行宽高的增加，中心点不变，来生成一个新的layer放到button上。这样处理下，圆角边框仅仅和button的内容相关，则button可以任意设置宽高，进而点击区域就不会被button的内容展示限制，简直完美。

红色为可点击区域，虽然在项目中 没有用到 需要将button的imageview和titlelabel一起框起来的需求，但是在实际实现中，也将其实现进去了。

PS：同时也实现了安卓button自带的点击背景色改变效果~ 没办法，老大说要和安卓一样。。我有一句·····

如有问题-联系邮箱 357863248@qq.com .

---