form 与 php结合的小例子

标签（空格分隔）： html

---

首先贴代码

1、html与javascript

    
    
    
      



    
用户注册
     
    

        
请输入邮箱：
            
        
        
请输入密码：
            
        
        
请再次输入密码：
            
        
        
以下是一些选项方便我们更了解你
        
1、请输入你的姓名：
            
        
        
2、你的性别
         
         男
         女
        
3、你感兴趣的类别：
        动漫

        电视剧

        电影

        文字

        音乐

        
4、想去的城市：（如果没有就在后面补充填写）
            
               北京
               上海
               重庆
               南京
            
        
        
补充填写：
            
        
        
5、请上传你的头像：
            
        
        
6、个性签名：
                
        

         
        提交
    
    了解更多
    

2、css(可以采用flex盒子布局)

//一些简单的css样式表，class属性映射
.bodyStyle{
    /*text-align: center;*/
    /*display: -webkit-flex;
    display: flex;
    align-items: center;*/
    height: window.innerHeight;
    width: window.outerWidth;
}
.backDiv{
    background-image: url('./background.png');
    padding: 10px;
    margin: 10px;
    display: -webkit-flex;
    display: flex;
    align-items: flex-center;
    /*设置元素排布方向*/
    flex-direction: column;
    height: window.innerHeight;
    width: window.innerWidth;
    align-content: center;
    text-align: center;
    margin:0 auto;
    border:1px solid #000;
}
.writeFormStyle{
    text-align: left;
    padding: 20px;
    height: window.innerHeight;
    width: window.innerWidth;
    color: #FFFFFF;
}
.moreMessageStyle{
    font-size: 30;
    padding: 0px;
    margin: 0px;
}
.title{
    align-content: center;
    align-items: center;
    color: #FFFFFF;
}
.a{
    color: #FFFFFF;
    text-align: right;
    font:30px;
}
.input{
    height: 20px;
    width: 100px;
    border-radius:4px;
    border:1px solid #DBDBDB;
}
.inputMessage{
    height: 20px;
    width: 200px;
    border-radius:4px;
    border:1px solid #DBDBDB;
}
.submitStyle{
    text-align: center;
    align-content: center;
    height: 30px;
    margin-top: 10px;
    width: 80px;
    border-radius:4px;
    border:1px solid #DBDBDB;
    background: #3385FF;
    color: #FFFFFF;
}

3、php代码(php语法真的有点怪)

";
   echo "电子邮件：".$email."
";
   echo "姓名：".$name."
";
   echo "性别：".$sex."
";
   echo "用户密码：".$password."
";
   echo "最想去的城市：".$selectCity."
";
   echo "你的兴趣有：";
   //接收checkbox数组
   for($i=0;$i";
   if($motto){
      echo "个性签名为：".$motto."
";
   }else{
      echo "这个用户很懒还没有签名！"."
";
   }
   
   echo "你的头像："."
";
   //上传文件的处理
   // var_dump($_FILES); 
   // 区别于$_POST、$_GET,打印出一些基本信息（上传文件）
   $file = $_FILES["img"];
   if($file["error"] == 0){
     $typeArr = explode("/", $file["type"]);
     //判断文件是否是图片,typeArr长度为2，下标0为文件类型，下标1为后缀名
     if($typeArr[0] == "image"){
        //图片的三种格式
        $picType = array("0"=>"png","1"=>"jpg","3"=>"jpeg");
        if(in_array($typeArr[1], $picType)){
            //给上传的文件重命名
            $picName = 'file/'.time().".".$typeArr[1];
            $bol = move_uploaded_file($file["tmp_name"], $picName);
            if($bol){
               
               echo '';
            } else {
               echo "上传失败！";
            };
        }else{
            echo "该图片格式不支持！";
        };
     }else{
          echo "该文件不是图片！";
     }
   }else{
          echo "上传失败！";
   }
?>

结果截图

一些注意点

• document.getElementById("")、document.getElementsByName(""),第一个获取的最近的一个满足的对象（一个），第二个是获取一个数组对象（多个），所以写这两方法的时候一定注意。

• 写id和name时，尽量不要和一些关键字冲突