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

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

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

废话不多说，代码如下：

	
	
	




	登录
	
	
	登录

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

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

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

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

Author：事始

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