WEB前端——body内常用标签（form标签）

一、form标签介绍

语义：标记表单

#1、什么是表单？
    表单就是专门用来接收用户输入或采集用户信息的

#2、表单的格式
    <form>
        <表单元素>
    </form>

二、form标签的属性

三、input

 四、label

 五、textarea

六、select

 七、补充

在form内还可以添加一种标签
<fieldset>添加边框
    <legend>注册页面</legend>
    表单控件......
</fieldset>

八、练习

1、练习1

<html>
    <head>
        <title>表单练习</title>
        <meta charset="utf-8"/>
    </head>
    <body>
        <form action="http://www.baidu.com">
            <fieldset>
                <legend>注册页面</legend>
                <p>
                    账号：<input type="text" placeholder="请输入你的用户名" name="user">
                </p>

                <p>
                    密码：<input type="password" placeholder="请输入你的密码" name="password">
                </p>

                <p>
                    性别：
                    <input type="radio" name="gender" value="male">男
                    <input type="radio" name="gender" value="female">女
                    <input type="radio" name="gender" checked="checked" value="none">保密
                </p>

                <p>
                    <!--注意点：单选框or复选框都需要指定相同的name值-->
                    爱好：
                    <input type="checkbox" name="sport" value="basketball">篮球
                    <input type="checkbox" name="sport" value="football">足球
                    <input type="checkbox" checked="checked" name="sport" value="crazy">足浴
                </p>

                <p>
                    简介：
                    <textarea name="" id="" cols="30" rows="10" name="desc"></textarea>
                </p>

                <p>
                    生日：
                    <input type="date" name="birth">
                </p>

                <p>
                    邮箱：
                    <input type="email" name="email">
                </p>

                <p>
                    电话：
                    <input type="number" name="phone">
                </p>

                <p>
                    <input type="submit" value="注册">
                    <input type="reset" value="清空">
                </p>

            </fieldset>
        </form>

    </body>
</html>

练习1

2、练习2

<html>
<head>
    <meta charset="utf-8"/>

    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script>
        $(document).ready(function () {
            $('#my-img').click(function () {
                $('#img-upload').click();
            });
        })
    </script>

    <style>
        #img-upload {
            display: none;
        }
    </style>

</head>
<body>
<form action=""  method="post" enctype="multipart/form-data">
    <input type="text" name="user">用户名
    <input type="text" name="pwd">密码

    <div>
        <img id="my-img" src="aaa/a.jpeg" alt="" width="100px">
        <input id="img-upload" type="file" name="上传头像">
    </div>

    <input type="submit" value="提交">
</form>
</body>
</html>

练习2:改变input type=file的内容

九、快捷键

p#d1.c1
补全完整
<p id="d1" class="c1"></p>

div#d2.c2
补全完整
<div id="d2" class="c2"></div>
赞 (0)

相关推荐