VS2015怎么制作带标签的输入文本框

想用Visual Studio 2015给网页添加一个既美观又实用的带标签输入框吗？这个过程其实很直观。咱们就从打开一个现有的网页开始，这里以 join.aspx 页面为例。

第一步，布局先行。在网页的合适位置，使用一个 div 标签来作为输入文本框的容器，这能帮助我们更好地控制后续的样式和位置。

接下来，定义这个文本框的基本尺寸。将高度设置为33像素，宽度设置为260像素，这是一个在表单中比较舒适、通用的尺寸。

然后处理间距。为了让布局不那么紧凑，可以设置文本框离容器顶部的内边距（padding-top）为30像素。

想让这个文本框在容器里水平居中吗？有个简单的方法：将其顶部、左侧和右侧的外边距（margin）设置为 auto。这样一来，浏览器就会自动计算并分配左右空间，实现居中效果。

基础容器准备好后，主角该登场了。使用 input 标签，在 div 中插入这个即将被赋予“标签”功能的输入文本框。

首先明确它的类型。通过 type 属性将其定义为文本类型（text），这是最常用的输入框类型。

为了方便在Ja vaScript或CSS中精准地找到并操作它，需要给它一个唯一的标识。用 id 属性来设置，比如这里命名为 shuru。

现在，实现“带标签”效果的关键来了。这通常通过Ja vaScript事件来完成：onfocus（获取焦点时）和 onblur（失去焦点时）。简单来说，就是当用户点击输入框准备打字时，里面的提示文字会消失；而当输入框空着且未被点击时，提示文字又会显示出来，就像一个内置的标签。

那么，这个默认显示的提示标签文字是什么呢？通过 value 属性来设置，这里我们将其初始值设为“输入”。

视觉样式也不能忽视。为了让输入框更醒目，可以为其设置一个3像素宽、蓝色的实线边框。

最后，进行一些细节优化。设置行高（line-height）可以让框内的文字垂直居中，视觉上更舒适。同时，用 maxlength 属性限制最多可输入的字符数，比如20个字符，这对于控制用户输入长度非常有用。

所有步骤完成后，运行程序看看效果。瞧，网页中成功插入了一个带标签的输入文本框。默认显示“输入”标签，点击后即可自由输入内容，并且最多只能输入20个字符，功能完整，样式清晰。

《夸克》非常好用的免费AI浏览器

下载APP查看