当前位置：网站首页 > 技术文章 > 正文

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

zhezhongyun 2024-12-25 16:47 72 浏览

这节课，我们学习表单的单行文本框控件：文本框和密码框。

文本框和密码框在互联网的世界随处可见，例如：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。保存。

回到浏览器，刷新，输入一些内容，效果实现了。

表单中使用频率最高的两个控件，输入框和密码框就讲解完了，快来一起试试吧！

文章配套视频链接「链接」

相关推荐