day14-Html的body内标签之fieldset标签和label标签

一、label标签

作用：用for属性关联input标签的id属性，这样点击文件，使得关联的标签获取光标

<label for="user">用户名:</label>  #for属性关联input标签的id属性
<input id="user" type="text" name="username"/>

效果图：

二、fieldset标签

这个标签很少用到，作用主要是显示出一个框的，基本用不到，我们看一下效果。

<body>
    <fieldset>  #fieldset配合着legend使用
        <legend>登录</legend>
    </fieldset>
</body>

效果图：

三、fieldset和label标签配合起来使用

这样的话，我们用户登录的图形可以这样写了

<body>
    <fieldset style="height: 200px;width: 300px;">  #fieldset 标签
        <legend>登录</legend>
        <label for="user">用户名:</label>   #label标签
        <input id="user" type="text" name="username"/>  #input标签
        <br/>
        <label for="pwd">密码:</label>
        <input id="pwd" type="password" name="pass_word"/>
    </fieldset>
</body>

效果图:

 

posted @ 2017-12-08 11:27  帅丶高高  阅读(230)  评论(0)    收藏  举报