一、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>
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>
九、快捷键
p#d1.c1 补全完整 <p id="d1" class="c1"></p> div#d2.c2 补全完整 <div id="d2" class="c2"></div>