【HTML入门】第十四课 - form表单（下）表单控件们（一）

经海路大白狗

于 2024-07-18 16:35:02 发布

阅读量158

点赞数 3

分类专栏： WEB前端小白从这里出发文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/xingyu_qie/article/details/140526199

版权

WEB前端小白从这里出发专栏收录该内容

18 篇文章 0 订阅

订阅专栏

上一节，我们学习了基本的 form 标签的属性们，我们说过，form表单是一个区域，里面有一些控件元素，这一小节，我们来看一下这些控件们。

1 文本输入框

输入框的标签是 input ，但是慢慢你会发现，input标签，可以表示很多种控件。他们是通过 type 属性来决定具体是哪种控件的。

比如现在要说的这个 文本输入框。意思就是可以输入文字，可以输入数字，但其实数字也有单独的控件，我们先这么学习着，后面就到专门输入数字的数值型文本框了。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的第一个网页</title>
        <style type="text/css">
            
        </style>
    </head>
    <body>
        <form method="get" action="http://www.aatest.com/setUser" target="_blank">
            <label for="name">用户名:</label>
            <input type="text" id="name">
            <hr/>
        </form>
    </body>
</html>

看，我们可以在前面定义输入框的标题，表示这里我要输入我的用户名啦，后面就是本文输入框，type 的属性值是 text 。

2 密码输入框

密码输入框，和文本输入框，都是 input 标签，但 type 的属性值不同。密码输入框，很明显，是用来输入密码的，用户输入的内容是不可见的。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的第一个网页</title>
        <style type="text/css">
            
        </style>
    </head>
    <body>
        <form method="get" action="http://www.aatest.com/setUser" target="_blank">
            <label for="name">用户名:</label>
            <input type="text" id="name">
            <hr/>
            <label for="pwd">密码:</label>
            <input type="password" id="pwd">
            <hr/>
        </form>
    </body>
</html>

看，密码输入框的type属性值是 password 。用户输入的值不可见，如果键盘指法不是太好的用户，可能会忘记输入的是什么，所以一般注册的时候，平台会要求用户连续输入两次，以确保自己记住了自己注册时候输入的密码。

3 数值型输入框

数值型输入框，就是只能输入数字，不能输入其他文本。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的第一个网页</title>
        <style type="text/css">
            
        </style>
    </head>
    <body>
        <form method="get" action="http://www.aatest.com/setUser" target="_blank">
            <label for="name">用户名:</label>
            <input type="text" id="name">
            <hr/>
            <label for="pwd">密码:</label>
            <input type="password" id="pwd">
            <hr/>
            <label for="age">年龄:</label>
            <input type="number" id="age">
            <hr/>
        </form>
    </body>
</html>

数值型的 type 属性值是 number，做了这个控制以后，这个输入框里面就只能输入数字了，也可以是小数。右边还有加减的小按钮来使用。不过这个小按钮呀，很多时候做项目，大家会觉得不好看，所以还是需要修改的。

4 文本域输入框

我们上面说的，都是输入一行文字或者数字，但是有时候需要输入多一些内容，input 输入框就不好使了。可以使用文本域输入框。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的第一个网页</title>
        <style type="text/css">
            
        </style>
    </head>
    <body>
        <form method="get" action="http://www.aatest.com/setUser" target="_blank">
            <label for="name">用户名:</label>
            <input type="text" id="name">
            <hr/>
            <label for="pwd">密码:</label>
            <input type="password" id="pwd">
            <hr/>
            <label for="age">年龄:</label>
            <input type="number" id="age">
            <hr/>
            <label for="desc">描述:</label>
            <textarea id="desc"></textarea>
            <hr/>
        </form>
    </body>
</html>