欢迎光临
我的个人博客网站

WEB前端——body内常用标签(form标签)


一、form标签介绍

语义:标记表单

#1、什么是表单?     表单就是专门用来接收用户输入或采集用户信息的  #2、表单的格式     <form>         <表单元素>     </form>

二、form标签的属性

WEB前端——body内常用标签(form标签)

三、input

WEB前端——body内常用标签(form标签)

 四、label

WEB前端——body内常用标签(form标签)

 五、textarea

WEB前端——body内常用标签(form标签)

六、select

WEB前端——body内常用标签(form标签)

 七、补充

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

八、练习

1、练习1

WEB前端——body内常用标签(form标签)WEB前端——body内常用标签(form标签)

<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

WEB前端——body内常用标签(form标签)WEB前端——body内常用标签(form标签)

<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的内容

 

赞(0) 打赏
未经允许不得转载:张拓的天空 » WEB前端——body内常用标签(form标签)
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏