一、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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Web前端——Html常用標簽及屬性 Web前端技術：HTML部分---Head標簽中包含的頭文件標簽，body標簽包含的內部標簽 body部分的table標簽，區別於form 前端 -- body標簽中相關標簽追加 form(表單)標簽常用標簽及屬性 angularjs + seajs構建Web Form前端(二) Web前端學習—基礎篇(18)_ul、ol、li、table、form、input都是什么標簽，塊級還是行級？——標簽分類 body標簽中的相關標簽 html標簽與body標簽的解析 angularjs + seajs構建Web Form前端(三) -- 兼容easyui