form 与 php结合的小例子

标签（空格分隔）： html

首先贴代码

1、html与javascript

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!-- head的一些内容，链接css，meta中charset要选utf-8，不然会出现乱码 -->
    <meta charset="utf-8">
    <title>不知名网站的注册</title>
    <link rel="stylesheet" type="text/css" href="one.css">  
</head>
<body class="bodyStyle">
<div class="backDiv">
    <h1 class="title">用户注册</h1>
     <!-- form对象 -->
    <form action="http://2g5059221n.wicp.vip/yyy/action.php" method="post" class="writeFormStyle" name="myform" id="myform"  enctype="multipart/form-data">
        <p>请输入邮箱：
            <input type="text" name="email" class="inputMessage">
        </p>
        <p>请输入密码：
            <input type="password" name="password" class="inputMessage">
        </p>
        <p>请再次输入密码：
            <input type="password" name="passwordAgin" class="inputMessage">
        </p>
        <p class="moreMessageStyle">以下是一些选项方便我们更了解你</p>
        <p>1、请输入你的姓名：
            <input type="text" name="yourname" class="input">
        </p>
        <p>2、你的性别</p>
         <!-- radio记得写value -->
        <input type="radio" name="sex" value="男"> 男
        <input type="radio" name="sex" value="女"> 女
        <p>3、你感兴趣的类别：</p>
        <input type="checkbox" name="interest[]" value="comic">动漫<br>
        <input type="checkbox" name="interest[]" value="tv">电视剧<br>
        <input type="checkbox" name="interest[]" value="movies">电影<br>
        <input type="checkbox" name="interest[]" value="word">文字<br>
        <input type="checkbox" name="interest[]" value="music">音乐<br>
        <p>4、想去的城市：（如果没有就在后面补充填写）
            <select name="city">
               <option value="Beijing">北京</option>
               <option value="Shanghai">上海</option>
               <option value="Chongqing">重庆</option>
               <option value="Nanjing">南京</option>
            </select>
        </p>
        <p>补充填写：
            <input type="text" name="othercity" class="input">
        </p>
        <p>5、请上传你的头像：
            <input type="file" name="img">
        </p>
        <p>6、个性签名：</p>
        <textarea name="motto" cols="40" rows="5">
        </textarea>
        <br>
         <!-- onclick="confirmSubmit()" -->
        <button type="button" id="submitId" onclick="confirmSubmit()" class="submitStyle">提交</button>
    </form>
    <a href="https://www.jianshu.com/u/a3547d5e7900" target="_blank" class="a">了解更多</a>
    <script type="text/javascript">
       
        function confirmSubmit(){
            <!-- 通过表单获取值 -->
            var email =  myform.email.value;
            var password = myform.password.value;
            var passwordAgin=myform.passwordAgin.value; 
            var name = myform.yourname.value;
            var sex = myform.sex.value;
            var interest = document.getElementsByName("interest[]");
            var checkedInterest = new Array();
            var j = 0;
            var i = 0;
            for( i = 0 ; i < interest.length;i++){
                if(interest[i].checked){
                     checkedInterest[j] = interest[i].value;
                     j++;
                }
            }
            
            //一系列的if-else，这里真的有点烦
            if(!email){
                 alert("请输入邮箱");
            }else{
                 if(!password){
                 alert("请输入密码");
                 }else{
                    if(!passwordAgin){
                        alert("请输入再次密码");
                     }else{
                         if(password != passwordAgin){
                              alert("两次密码不同");
                          }else{
                              if(!name){
                                 alert("请输入姓名");
                              }else{
                                 if(sex.length == 0){
                                      alert("请选择性别")
                                  }else{
                                      if(j==0){
                                        alert("至少选择一个兴趣");
                                      }else{
                                          // js获取按钮
                                          var go = document.getElementById('submitId');
                                          // 当点击go时执行事件，设置点击事件监听
                                          go.addEventListener('click',function(){
                                          // 让form表单提交
                                          document.getElementById('myform').submit();
                                        })
                                      }
                                  }
                              }
                          }
                     }
                 }
            } 
            
            
        }

    </script>
</div>
</body>
</html>

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语法真的有点怪)

<?php
   //http://localhost/yyy/one.html?yourname=&suggestion=%09%09&submit=%E6%8F%90%E4%BA%A4
   $email = $_POST["email"];
   $password = $_POST["password"];
   $name = $_POST["yourname"];
   $sex = $_POST["sex"];
   $city = $_POST["city"];
   $othercity = $_POST["othercity"];
   $motto = $_POST["motto"];
   if($othercity){
      $selectCity = $othercity;
   }else{
      $selectCity = $city;
   }
   
   echo "用户注册成功,以下是具体的信息："."<br>";
   echo "电子邮件：".$email."<br>";
   echo "姓名：".$name."<br>";
   echo "性别：".$sex."<br>";
   echo "用户密码：".$password."<br>";
   echo "最想去的城市：".$selectCity."<br>";
   echo "你的兴趣有：";
   //接收checkbox数组
   for($i=0;$i<count($_POST["interest"]);$i++){
     echo $_POST["interest"][$i]." ";
   }
   echo "<br>";
   if($motto){
      echo "个性签名为：".$motto."<br>";
   }else{
      echo "这个用户很懒还没有签名！"."<br>";
   }
   
   echo "你的头像："."<br>";
   //上传文件的处理
   // 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 '<img src="'.$picName.'"'  .'alt="上海鲜花港 - 郁金香" />';
            } else {
               echo "上传失败！";
            };
        }else{
            echo "该图片格式不支持！";
        };
     }else{
          echo "该文件不是图片！";
     }
   }else{
          echo "上传失败！";
   }
?>

结果截图


一些注意点

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

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

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

  • JavaScript
    一、JS前言 （1）认识JS 也许你已经了解HTML标记(也称为结构)，知道了CSS样式(也称为表示)，会使用HT...
    凛0_0阅读 2,955评论 0赞 8
  • 网络技术与应用
    HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的，因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 5,049评论 0赞 0
  • 电子商务网站开发与建设
    概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 9,932评论 0赞 3
  • JavaScript进阶
    第1章 认识JS JavaScript能做什么？1.增强页面动态效果(如:下拉菜单、图片轮播、信息滚动等)2.实现...
    mo默22阅读 1,556评论 0赞 5
  • document节点
    概述 document节点是文档的根节点，每张网页都有自己的document节点。window.document属...
    许先生__阅读 732评论 0赞 2

友情链接更多精彩内容