【HTML+CSS】教你切图篇2-文本输入框编写

来源：互联网发布：淘宝发布宝贝数量限制编辑：程序博客网时间：2024/06/16 06:49

在之前的一篇文章我们提到按钮的实现，今天我们来说一下同样很常用的文本框<input>的用途，在网页中我们经常会看到文本输入框，结合上一篇的按钮实现，那么文本框和按钮的结合我们可以用来做什么呢？

1.首先我们可以想到登录框的实现，一个登录框通常包括文本输入框、登录/注册按钮、选择是否下次登录，选项框我们会在下一篇文章详细介绍，首先我们来实现一个简单的登录窗口，效果图如下：

废话不多说，代码如下：

<!DOCTYPE html><html><head><title>文本框切图</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css">.login{width: 300px;padding: 30px;border-radius: 4px;border:1px solid #ccc;font-family:"微软雅黑";}.login span{display: block;margin-bottom: 20px;}.login input{width: 220px;border: 1px solid #ccc;border-radius: 4px;padding-top: 10px;padding-bottom: 10px;padding-left: 40px;margin-bottom: 20px;color: #999;}.user_mes{background: url('images/user_icon.png') 12px center no-repeat;}.psw_mes{background: url('images/pass_icon.png') 12px center no-repeat;}.login_btn{display: block;text-align: center;text-decoration: none;color: #fff;width: 220px;padding: 10px 20px;background-color: #63b7ff;border-radius: 4px;}</style></head><body><!-- 常见登录输入框形式 --><div class="login"><span>登录</span><input class="user_mes" type="text" value="" placeholder="请输入账号" /><input class="psw_mes" type="password" placeholder="请输入密码" /><a class="login_btn" href="">登录</a></div></body></html>

2.文本框和代码的结合还能做什么呢？没错就是搜索框，常见的搜索框有：

相信大家看了这两篇文章后都能做出来，我们做的是另外一种，效果如下：

由于搜索图标是可点击的，所以不能将图标做成文本框的背景，通常的做法是将文本框和搜索按钮独立成两个部分，代码如下：

<!DOCTYPE html><html><head><title>表单测试</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css">#search_meg{width: 220px;height: 28px;border: 1px solid #ccc;color: #ccc;border-radius: 4px 0 0 4px;border-right: none;float: left;outline: none;padding-left: 8px;}.search_btn{display: inline-block;width: 28px;height: 30px;border: 1px solid #ccc;border-radius: 0 4px 4px 0;border-left: none;background: url('images/search.png') no-repeat center center;float: left;}</style></head><body><!--将搜索框分成文本框和链接的形式--><input type="text" name="search" value="请输入搜索信息" id="search_meg"></input><a href="#" class="search_btn"></a></body><script type="text/javascript">var obj=document.getElementById('search_meg');obj.onfocus=function(){if (obj['value']='请输入搜索信息') {obj['value']='';obj.style['color']='#333';}}obj.onblur=function(){if (this['value']==''|| this['value']=='请输入搜索信息') {this['value']='请输入搜索信息';this.style['color']='#ccc';}}</script></html>

在这里文本框提示文字没有设置placeholder属性，因为它在IE10以下都不兼容，我们可以用value来代替，但是实现点击文本框提示文字消失的效果就得用JS来实现了。这种JS实现的方法也不是万能的，当密码框使用value属性时，默认会变成星星。所以有些人的做法是将提示文字用label表示，文本框获得焦点后label消失，在这里就不多说啦。

Author：事始

Sign：只要你还在尝试，就不算失败。

0 0