一、form標(biāo)簽介紹語義：標(biāo)記表單 #1、什么是表單？ 表單就是專門用來接收用戶輸入或采集用戶信息的 #2、表單的格式 <form> <表單元素> </form> 二、form標(biāo)簽的屬性
三、input
四、label
五、textarea
六、select
七、補(bǔ)充在form內(nèi)還可以添加一種標(biāo)簽 <fieldset>添加邊框 <legend>注冊頁面</legend> 表單控件...... </fieldset> 八、練習(xí)1、練習(xí)1 
<html> <head> <title>表單練習(xí)</title> <meta charset="utf-8"/> </head> <body> <form action="http://www.baidu.com"> <fieldset> <legend>注冊頁面</legend> <p> 賬號(hào)：<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> <!--注意點(diǎn)：單選框or復(fù)選框都需要指定相同的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> 2、練習(xí)2
<html> <head> <meta charset="utf-8"/> <script src="https://cdn./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>
九、快捷鍵p#d1.c1 補(bǔ)全完整 <p id="d1" class="c1"></p> div#d2.c2 補(bǔ)全完整 <div id="d2" class="c2"></div>
|
|
|
