零基础教你学前端——28，文字框与密码框

这节课，我们学习表单的 单行文本框控件：文本框和密码框。文本框和密码框在互联网的世界随处可见，例如：QQ登录页面、微信小程序访客预约界面、12306购票系统的注册页面，以及流调信息的填写页面，都使用到了文本框或密码框。

文本框，就是让用户输入文本的一个控件区域，该区域输入内容的时候，文本不会折行显示，只会横向排列，如果输入的文本超出了输入框默认的宽度，可以通过鼠标拖拽或键盘的右箭头按钮敲击，来查看输入的全部信息。

使用HTML如何实现这个单行文本框呢？我们可以通过在 form 标签里，嵌入 input 标签来实现。input 就是输入的意思。它是一个单标签：语法是：尖角号 input。光有这个标签还不够，需要给它定义一个重要的属性 type，也就是输入控件的类型。单行文本框的 type 值为 text，也就是文本，其实这也是 type 属性的默认值。密码框的 type 值为 password，意为口令。

密码输入框也是单行的文本输入框，不过在用户输入的时候，内容是被屏蔽的，只显示小黑点或者小星号，这样可以防止别人窥探你的密码。

通过文本框和密码框两个控件的定义，我们可以得出一个小结论：表单中的 input 输入控件，数据采集的方式是由 type 属性的值决定的。我们来模拟实现一个简单的登录框。

用户名是普通的文本输入框，密码是密码输入框。打开编辑器，新建一个 input_text_password.html 文件，自动补全基础代码，在body标签内部编写一个 form 表单标签，在 form 标签里面添加文本请输入用户名：  (冒号读出来) ，紧接着添加一个 input 标签。保存。用浏览器打开页面，一个单行的文本输 入框就做好了，可以输入点内容测试一下。

你可能会问，没有定义 type 属性，怎么能有输入框呢？刚才我们讲了：input 控件的 type 属性默认值就是单行普通文本框。返回编辑器，给 input 标签定义 type 属性，取值为 text。保存。回到浏览器，刷新，效果和刚才的一样。

返回编辑器，在输入框结尾的位置添加 br 标签。 回车换行。再输入文本请输入密码：，紧接着再添加一个 input 标签，type 属性的值为 password。保存。回到浏览器，刷新，输入一些内容，效果实现了。表单中使用频率最高的两个控件，输入框和密码框就讲解完了，快来一起试试吧！

文章配套视频链接