HTML - 输入框 ¶

• 作者：KK

• 发表日期：2016.1.26

文本框 ¶

在网页里面,我们需要提供一些输入框以便用户输入消息,名字,验证码什么的,下面用input标签来呈现文本输入框:

<input type="text" />

input标签里面不可以包东西的,所以没有开始和结束标签,是个单标签;其中type属性的值必须是text

可以通过value属性设置默认的内容:

<input type="text" value="这是预先填好的内容" />

下面我们加上placeholder这个属性来增加一个提示,与上面有所不同:

<input type="text" placeholder="请输入姓名" />

这样在文本框为空的时候,就会以浅色文字提示这个属性的内容,当用户在浏览器上输入东西后,它就会消失,然后又删除光内容时,它又会重新出现

• 但这里有个兼容性问题需要你了解一下,如果你用IE8,IE7或IE6浏览器来进行测试的话是不会有效果的,因为这些浏览器版本太旧啦,它们不认识placeholder属性,所以就无法呈现出效果咯,其实我这套教程是基于新版浏览器来教的,毕竟现在越来越少人用旧版了

另外你可能会疑惑:我提供了文件框给用户,但我怎么让用户填写姓名后发送给我呢?----这个后面再学,你现在只要学会在网页上呈现各种东西,排版出来就可以

密码框 ¶

<input type="password" placeholder="请输入密码" />

其实和文本框只差一个type属性的区别,把type改成password就可以,这样输入密码时别人就看不到你输入的密码啦对不对?

数字框 ¶

<input type="number" placeholder="请输入购买数量" />

这个框你输入数字后会在右边显示一对上下微调的箭头按钮

日期选择框 ¶

<input type="datetime-local" placeholder="请选择入住时间" />

多文本输入框 ¶

上面介绍的文本框只能输入一行内容,下面这个textarea标签是可以输入多行的

<!--演示1-->
<textarea rows="10" cols="30" placeholder="请录入文章内容"></textarea>

<!--演示2-->
<textarea rows="20" cols="40">
默认内容放成标签里包住
rows属性控制高度(行数)
cols属性控制宽度(列数)
</textarea>

好了暂时说这些先,你只要了解了解就好,肯定记不住全部的嘛,后面用到时再引导你复习哦