Html 按钮成为输入

我试图创建一个按钮来添加用户键入的用户名，但我要寻找的功能是将按钮变成文本输入，我创建了以下内容：

<button type="button" class="btn widget uib_w_16 btncolor_green noborder_btn btn-default" data-uib="twitter%20bootstrap/button" data-ver="0" id="addfriend_btn"><i class="glyphicon glyphicon-user button-icon-top" data-position="top"></i>
                       </button>

---

但我不知道如何制作它或将其转换为输入，以便添加所需的用户名。有谁能给我一个如何实现这一目标的线索或想法吗？

为什么它会成为输入？为什么不在点击后显示一个隐藏的输入呢？你需要javascript。对于这类事情，jQuery会让事情变得更简单，然后它只是一些DOM操作。捕获点击，删除按钮节点，替换为

节点。@MarcB是对的，没有JavaScript就无法存档。有人能提供一个简单的例子吗？或者别的什么。