一起自学前端开发!

表单的输入框---前端入门教程

来源:原创    更新时间:2017-07-31 16:45:46    编辑:前端网编辑    浏览:2815

表单的输入框

 

在上一章节中介绍了表单的定义,那么表单该如何采集数据呢?

在本章节中将讲解三种常见的输入框。

HTML中输入框都是通过<input>标签实现的。

<input>元素是内联元素。

不同的类型的输入框通过改变<input>标签的type属性来实现。

 

一、文本输入框

平时在上网的时候我们常常会需要进行登录操作,登录界面中输入账号的输入框就是文本输入框。

文本输入框是最常见的输入框。

文本输入框是通过将<input>标签中的type属性的值设置为 text 实现的。

语法:

<input type="text" name="" value="" placeholder="">

 

说明:

为输入框设置name属性,在表单提交后,需要通过name属性的来获取该输入框提交的内容

输入框的value属性是该输入框的值,如果用户输入内容,那么value的值也会变为用户输入的内容。

可以通过设置初始的value值来设置输入框的默认值。

输入框中的placeholder属性是设置用户输入的提示信息。

 

举例:一个带有提示的文本输入框

代码如下:

<form action="#" method="post" target="_blank">

账户:<input type="text" name="username" placeholder="用户名/邮箱/账号">

</form>

 

效果:

 11.png

22.png

二、密码输入框

有些比较隐私的内容要输入,如果不想要输入框中显示输入的内容时可以将输入框设置成密码输入框。

密码输入框是通过将<input>标签中的type属性的值设置为 password 实现的。

语法:

<input type="password" name="" value="">

 

说明:密码输入框中的值会通过小黑点来显示。

举例:密码输入框展示

代码如下:

<form action="#" method="post" target="_blank">

<div>

账户:<input type="text" name="username" placeholder="用户名/邮箱/账号" value="fenzhen">

</div>

<div>

密码:<input type="password" name="password" placeholder="密码">

</div>

</form>

 

效果:

 333.png

444.png

三、隐藏输入框

在表单中,有时候需要将一些数据传递给后台,但是又不希望用户改变该数据。

碰到这种情况就要使用隐藏输入框(隐藏域)了。

隐藏输入框是通过将<input>标签中的type属性的值设置为 hidden 实现的。

隐藏输入框在页面中是不可见的。

举例:查看隐藏输入框的效果

代码如下:

<form action="#" method="post" target="_blank">

<div>

账户:<input type="text" name="username" placeholder="用户名/邮箱/账号">

</div>

<div>

密码:<input type="password" name="password" placeholder="密码">

</div>

<div>

隐藏信息:<input type="hidden" name="hiddenmsg" value="123">

测试

</div>

</form>

 

效果:

555.png 

说明:

隐藏输入框不可见,也不会占据文档位置。

隐藏输入框需要设置value的值,表示要传递给后台的数据。


评论区

表情

共0条评论
  • 这篇文章还没有收到评论,赶紧来抢沙发吧~

相关内容

点击排行

随机新闻

评论排行榜