2022年8月15日作业-优快云博客

本文链接：https://blog.youkuaiyun.com/XxxXQAQ/article/details/126347850

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>用户注册页面</title>

       <style>
           #div1{
               background-color: azure;
               padding: 20px;
           }
           #div2{
           border-bottom: 5px solid aqua;
               width: 65px;
               position: relative;
               left: 20px;
           }
           hr{

               position: relative;
               left:85px;
               bottom: 10px;
           }
           form{
               position: relative;
               left:20px;
           }
           span{
               position: relative;
               left:80px;
               font-size: 80%;

           }
           input[name="userName"]{
               position: relative;
               left:105px;
               padding: 5px;
               border-radius: 5px;
           }
           input[name="pwd"]{
               position: relative;
               left:105px;
               padding: 5px;
               border-radius: 5px;
               }
           input[name="sex"]{
               position: relative;
               left:115px;
               top: 2px;

               }
           input[name="hobby"]{
               position: relative;
               left:125px;
               top: 2px;

           }
           select[name="star"]{
               position: relative;
               left:100px;
               width: 130px;
               padding: 5px;

           }
           #s1{
           float:left
           }
           textarea {
               position: relative;
               left:100px;
               padding-bottom: 20px;
               border-radius: 5px;

           }
           button{
               position: relative;
               top: 30px;
               left: 130px;
               background-color: darkturquoise;
               color: white;
               border: none;
               padding:5px,20px;
               width: 100px;
               height: 30px;
               font-size: 90%;
               border-radius: 5px;

           }


       </style>
       <script src="js/jquery-3.6.0.js"></script>
       <script type="text/javascript">
           $(function(){
               $("#btn").click(function(){
                   console.log("姓名为: "+$('#userName').val());
                   console.log("密码为: "+$('#passWord').val());
                   $("input[name='sex']:checked").each(function(){
                       console.log("性别为: "+$(this).val());
                   })

                   $("input[name='hobby']:checked").each(function(){
                       console.log("爱好为: "+$(this).val());
                   })
                   console.log('星座为: '+$("#star Option:selected").text());
                   console.log("备注: "+$('#remark').val());

           })
           });
       </script>


   </head>
   <body>
       <div id="div1"><b>位置:</b>   首页  -->  表单</div>
       <br />
       <br />
       <div id="div2"><b>注册信息</b>
       </div>
       <hr>
       <form action="js/homework03.html" method="dialog">
           <span>账号</span><input type="text" name="userName" placeholder="请输入账号" id="userName"/><br />
           <br />
           <span>密码</span><input type="password" name="pwd" placeholder="请输入密码" id="passWord"/><br />
           <br />
           <span>性别</span><input type="radio" name="sex" value="male" /><span>男</span>
           <input type="radio" name="sex" value="female" /><span>女</span><br />
               <br />
               <div>
       <span>爱好</span><input type="checkbox" name="hobby" value="song" /><span>唱歌</span>
           <input type="checkbox" name="hobby" value="dance"/><span>跳舞</span>
               <input type="checkbox" name="hobby" value="footboll"/><span>足球</span><br />
               </div>
               <br />
           <span>星座</span><select name="star" id="star">
               <option value ="1">白羊座</option >
               <option value ="2">巨蟹座</option>
               <option value ="3">狮子座</option>
               </select> <br />
               <br />
       <span id="s1">备注</span><textarea name="remark" rows="5" cols="50" id="remark"></textarea><br />
           <button id="btn"><b>注 册</b></button>



   </body>
</html>