form 與 php結(jié)合的小例子

標簽(空格分隔): html


首先貼代碼

1悲幅、html與javascript

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!-- head的一些內(nèi)容,鏈接css鳍烁,meta中charset要選utf-8暑竟,不然會出現(xiàn)亂碼 -->
    <meta charset="utf-8">
    <title>不知名網(wǎng)站的注冊</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="http://www.reibang.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');
                                          // 當(dāng)點擊go時執(zhí)行事件执赡,設(shè)置點擊事件監(jiān)聽
                                          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;
    /*設(shè)置元素排布方向*/
    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數(shù)組
   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); 
   // 區(qū)別于$_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 "上傳失敼俜荨只厘!";
   }
?>

結(jié)果截圖


一些注意點

  • document.getElementById("")、document.getElementsByName(""),第一個獲取的最近的一個滿足的對象(一個)舅巷,第二個是獲取一個數(shù)組對象(多個)羔味,所以寫這兩方法的時候一定注意。

  • 寫id和name時钠右,盡量不要和一些關(guān)鍵字沖突

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末赋元,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子飒房,更是在濱河造成了極大的恐慌搁凸,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,681評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件狠毯,死亡現(xiàn)場離奇詭異护糖,居然都是意外死亡,警方通過查閱死者的電腦和手機嚼松,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評論 3 399
  • 文/潘曉璐 我一進店門嫡良,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人献酗,你說我怎么就攤上這事寝受。” “怎么了凌摄?”我有些...
    開封第一講書人閱讀 169,421評論 0 362
  • 文/不壞的土叔 我叫張陵羡蛾,是天一觀的道長。 經(jīng)常有香客問我锨亏,道長痴怨,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,114評論 1 300
  • 正文 為了忘掉前任器予,我火速辦了婚禮浪藻,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘乾翔。我一直安慰自己爱葵,他們只是感情好施戴,可當(dāng)我...
    茶點故事閱讀 69,116評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著萌丈,像睡著了一般赞哗。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上辆雾,一...
    開封第一講書人閱讀 52,713評論 1 312
  • 那天肪笋,我揣著相機與錄音,去河邊找鬼度迂。 笑死藤乙,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的惭墓。 我是一名探鬼主播坛梁,決...
    沈念sama閱讀 41,170評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼腊凶!你這毒婦竟也來了划咐?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,116評論 0 277
  • 序言:老撾萬榮一對情侶失蹤吭狡,失蹤者是張志新(化名)和其女友劉穎尖殃,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體划煮,經(jīng)...
    沈念sama閱讀 46,651評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡送丰,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,714評論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了弛秋。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片器躏。...
    茶點故事閱讀 40,865評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖蟹略,靈堂內(nèi)的尸體忽然破棺而出登失,到底是詐尸還是另有隱情,我是刑警寧澤挖炬,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布揽浙,位于F島的核電站,受9級特大地震影響意敛,放射性物質(zhì)發(fā)生泄漏馅巷。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,211評論 3 336
  • 文/蒙蒙 一草姻、第九天 我趴在偏房一處隱蔽的房頂上張望钓猬。 院中可真熱鬧,春花似錦撩独、人聲如沸敞曹。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽澳迫。三九已至局齿,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間橄登,已是汗流浹背项炼。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留示绊,地道東北人。 一個月前我還...
    沈念sama閱讀 49,299評論 3 379
  • 正文 我出身青樓暂论,卻偏偏與公主長得像面褐,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子取胎,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,870評論 2 361

推薦閱讀更多精彩內(nèi)容

  • 一展哭、JS前言 (1)認識JS 也許你已經(jīng)了解HTML標記(也稱為結(jié)構(gòu)),知道了CSS樣式(也稱為表示)闻蛀,會使用HT...
    凜0_0閱讀 2,777評論 0 8
  • HTML 5 HTML5概述 因特網(wǎng)上的信息是以網(wǎng)頁的形式展示給用戶的匪傍,因此網(wǎng)頁是網(wǎng)絡(luò)信息傳遞的載體。網(wǎng)頁文件是用...
    阿啊阿吖丁閱讀 3,908評論 0 0
  • 概要 64學(xué)時 3.5學(xué)分 章節(jié)安排 電子商務(wù)網(wǎng)站概況 HTML5+CSS3 JavaScript Node 電子...
    阿啊阿吖丁閱讀 9,223評論 0 3
  • 第1章 認識JS JavaScript能做什么觉痛?1.增強頁面動態(tài)效果(如:下拉菜單役衡、圖片輪播、信息滾動等)2.實現(xiàn)...
    mo默22閱讀 1,306評論 0 5
  • 概述 document節(jié)點是文檔的根節(jié)點薪棒,每張網(wǎng)頁都有自己的document節(jié)點手蝎。window.document屬...
    許先生__閱讀 646評論 0 2