#WEB前端（表单）

GrassFishStudio

于 2024-03-02 19:30:38 发布

阅读量298

点赞数 3

分类专栏： WEB 文章标签：前端

本文链接：https://blog.csdn.net/byhyf83862547/article/details/136420926

版权

WEB 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1.实验：

form、input、label

登录界面，表单填写界面

2.IDE：VSCODE

3.记录：

4.代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
</head>
<body>
    <form action="#">                                                 <!DOCTYPE html action后填入网址，表示表单填完之后上交的地址>
        <span>用户名
            <input type="text" placeholder="请输入内容">              <!DOCTYPE html输入提示>
        </span>
       
        <br><br><br>
        <span>密码
            <input type="text" value="请输入内容">                    <!DOCTYPE html预填入>
        </span>
       
        <br><br><br>
        <label for="">验证码</label>                                 <!DOCTYPE html label仅限于与input使用>
        <input type="text" placeholder="请输入验证码">              
        
        <br><br><br>
        <label for="">性别</label>    
        <input type="radio">男                                       <!DOCTYPE html输入选择，可以多选>
        <input type="radio">女
        <input type="radio">其他

        <br><br><br>
        <label for="">性别</label>    
        <input type="radio" name="gender">男                         <!DOCTYPE html输入选择，不可以多选>
        <input type="radio" name="gender">女
        <input type="radio" name="gender">其他

        <br><br><br>
        <span>密码
            <input type="password" value="请输入内容">                <!DOCTYPE html输入不可见(密码)>
        </span>

        <br><br><br>
        <label for="">爱好</label>    
        <input type="checkbox">唱歌                                   <!DOCTYPE html输入选择，可以多选>
        <input type="checkbox">跳舞
        <input type="checkbox">RAPPER
        
        <br><br><br> 
        <input type="submit" value="提交">                            <!DOCTYPE html提交>
    </form>
</body>
</html>