form表单

来源：互联网发布：开发java程序的一般步骤编辑：程序博客网时间：2024/05/22 09:03

又到了周一，在上午老师讲上周五考的试卷时，我懵了，感觉自己错了好多，我也看出了自己的不足之处，主要的是有关细节的方面我都没有注意到，我以后需要加以改正，不能在不注重细节了，细节决定成败。下面我来分享一下今天学习到的知识form表单。

form表单，是双标签，块级元素，他具有两个属性：

1、action提交后台的地址，2、method提交信息/数据的方式，method其中一个属性为get，不能提交安全性高的信息，一定要有name值。

form表单中最重要的也就是input标签了，input标签是单标签，行块级元素

它里面的属性值有 type id name placeholder value等等，下面单独对他们进行一一介绍

type="text" 定义文本输入框，type="password" 定义密码输入框，type="submit" 定义数据信息提交按钮，type="reset" 定义重置信息数据按钮

name="" 定义数据名称（字段名称）

value="" 定义默认值|信息

placeholder="" 定义提示信息

focus是input的专属伪类，focus 鼠标点击输入框触发的状态(聚焦)。

form表单还有很多其他属性就不一一介绍了，下面给大家介绍一个用表单实现的小例子。

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8"/>
   <title></title>
   <link rel="stylesheet" type="text/css" href="../base.css">
   <style type="text/css">
       form{
           width:306px;
           height:310px;
           padding:0 20px;
           border:1px solid red ;
           margin:0 auto;
       }
       .clearfix{
           padding:0 20px;

       }
       div{
           margin-top:20px;
       }
       input{
           width:225px;
           height:38px;
           /*padding: 0 40px;*/
           outline:none;
           background: none;
           border:none;
           font-size:16px;
           vertical-align:middle;
           padding-left:50px;
       }
       #la1{
           position: absolute;
           display:inline-block;
           width:38px;
           border:1px solid gray;
           height:38px;
           background: url(img/pwd-icons-new.png);
           background-position:0px 0px;
           vertical-align:middle;
       }
       #la2{
           position: absolute;
           display:inline-block;
           width:38px;
           border:1px solid gray;
           height:38px;
           background: url(img/pwd-icons-new.png);
           background-position:-48px 0px;
           /*vertical-align:middle; */
       }
       .username{
           position: relative;
           width:300px;
           height:38px;
           border:1px solid gray;
       }
       .password{
           position: relative;
           width:300px;
           height:38px;
           border:1px solid gray;

       }
       .chazhao{

           padding:0;
           margin-bottom: 20px;

       }
       .chazhao a{
           float:right;
           font-size:12px;
           color:lightgray;
       }
       a:hover{
           color:red;
           text-decoration: underline;
       }
       .inp{
           display:block;
           color:white;
           background:red;
           text-align: center;
           width:305px;
           padding-left:0px;
       }
       #del1{
           width:14px;
           height:14px;
           position: absolute;
           right:10px;
           top:-9px;
           background: url(img/pwd-icons-new.png);
           background-position: -26px -144px;
           display: none;
       }

       #del2{
           width:14px;
           height:14px;
           position: absolute;
           right:10px;
           top:-9px;
           background: url(img/pwd-icons-new.png);
           background-position: -26px -144px;
           display: none;       }

   </style>
</head>
<body>
   <form action="" method="">
       <div class="clearfix">
           <a style="float:left" href="">扫码登陆</a>
           <a style="float:right" href="">账户登录</a>
       </div>
       <div class="username">
           <label id="la1" for="username"></label>
           <input id="username" type="text" name="username" value="" placeholder="邮箱/用户名/已注册手机">
           <div id="del1"></div>
           </div>
       <div class="password">
           <label id="la2" for="password"></label>
           <input id="password" type="password" name="password" placeholder="请输入你的密码">
           <div id="del2"></div>
       </div>
       <div class="chazhao clearfix"><a href="">忘记密码</a></div>
       <input class="inp" type="submit" name="" value="登陆">
   </form>
</body>
<script type="text/javascript">

   var la1=document.getElementById("la1");
   var la2=document.getElementById("la2");
   var username=document.getElementById("username");
   username.onclick=function(){
       la1.style.backgroundPosition="0px -48px";
       la2.style.backgroundPosition="-48px 0px";
   }
   var password=document.getElementById("password");
   password.onclick=function(){
       la1.style.backgroundPosition="0px 0px";
       la2.style.backgroundPosition="-48px -48px";
   }
   la1.onclick=function(){
       la1.style.backgroundPosition="0px -48px";
       la2.style.backgroundPosition="-48px 0px";
   }
   var password=document.getElementById("password");
   la2.onclick=function(){
       la1.style.backgroundPosition="0px 0px";
       la2.style.backgroundPosition="-48px -48px";
   }
   var del1=document.getElementById("del1");
   var del2=document.getElementById("del2");


   username.onclick=function(){
       var val1=username.value;
       if(val1==0){
           del1.style.display="none";
       }else{
           del1.style.display="block";
       }
   }
   password.onclick=function(){
       var val2=password.value;
       if(val2==0){
           del2.style.display="none";
       }else{
           del2.style.display="block";
       }
   }
   del1.onmouseover=function(){
       del1.style.backgroundPosition=("-51px -144px");
   }
   del1.onmouseout=function(){
       del1.style.backgroundPosition=("-26px -144px");
   }
   del2.onmouseover=function(){
       del2.style.backgroundPosition=("-51px -144px");
   }
   del2.onmouseout=function(){
       del2.style.backgroundPosition=("-26px -144px");
   }
   del1.onclick=function(){
       del1.style.display="none";
       del2.style.display="none";
       val1=0;
   }
</script>
</html>

阅读全文

0 0