整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          快速學會html表單提交(php)

          天小編給大家帶來的是html表單提交教程,非常簡單!

          話不多說直接進入教程

          首先要注意的事項:

          第一:因為這節課涉及到了php所以本地要安裝php

          在這里小編用的是phpStudyphpStudy(特點簡單很適合本地開發測試)

          phpStudy界面

          第二:在php編碼里一定要注意不要編寫錯誤

          <?php //為開頭 //為結尾?>

          <?php 這里寫php代碼 ?>

          要切記php代碼要以分號未結束 “;”

          首頁我們到我們剛剛安裝的軟件根目錄下,找到www這個文件夾

          雙擊打開建立一個新文件夾(在這我命名為了表單的拼音你們可以自己命名為你們想命名的名字,切記不能用中文)

          在打開剛剛建立好的文件夾創建兩個文件分別命名為orderform.html和processorder.php(當然你也可以自己取名)

          我們用編程軟件打開這兩個新建文件(這里我用的是Sublime Text 3)

          我們首先給orderform.html寫下如下代碼

          然后我們開始寫建立表單

          我們訪問本地連接看一下效果

          我們在給php寫入代碼

          以下為注意事項

          <!--<?php //為php代碼 eoch為輸出代碼 $_POST為接收html提交過來的數據 $tireqty=$_POST['tireqty']

          //$sj=$_POST['sj']

          //$dz=$_POST['dz'] 為給建立的變量賦值? echo "$tireqty";為輸出這個變量-->

          首先我們寫入和html一下的html代碼

          在寫入php接收函數

          完成效果

          以下是html里的代碼

          <!DOCTYPE html>

          <html>

          <head>

          <!--這里編碼為utf-8國際編碼-->

          <meta charset="utf-8">

          <!--這里為網站標題-->

          <title>表單</title>

          </head>

          <body>

          <!--action為提交的頁面 method為提交類型 分為兩種一種為post還一種為get -->

          <form action="processorder.php" method="post">

          <!--border="0"為邊框粗細-->

          <table border="0">

          <!-- bgcolor="#cccccc"為表格背景顏色這里為灰色 -->

          <tr bgcolor="#cccccc">

          <td>參數</td>

          <!-- aligan="center"為表格居中 -->

          <td align="center">數據</td>

          </tr>

          <tr>

          <td>姓名</td>

          <!-- <input type="text" name="tireqty" size //這里為type為提交類型

          text為文本類型 name為名稱和class一樣 size為字體大小-->

          <td align="center"><input type="text" name="tireqty" size="3"/></td>

          </tr>

          <tr>

          <td>手機</td>

          <td align="center"><input type="text" name="sj" size="3"/></td>

          </tr>

          <tr>

          <td>地址</td>

          <td align="center"><input type="text" name="dz" size="3"/></td>

          </tr>

          <tr>

          <!-- <input type="text" value="提交" value為input 元素的值 colspan為合并-->

          <td colspan="0" align="center"><input type="submit" value="提交"/></td>

          </tr>

          </table>

          </form>

          </body>

          </html>

          以下是php中代碼

          <!DOCTYPE html>

          <html>

          <head>

          <meta charset="utf-8">

          <title>接收</title>

          </head>

          <body>

          <form>

          <?php

          $tireqty=$_POST['tireqty'];

          $sj=$_POST['sj'];

          $dz=$_POST['dz'];

          ?>

          <table border="0">

          <tr>

          <td>參數</td>

          <td align="center">數據</td>

          </tr>

          <tr>

          <td>姓名</td>

          <td align="center"><?php echo "$tireqty"; ?></td>

          </tr>

          <tr>

          <td>手機</td>

          <td align="center"><?php echo "$sj"; ?></td>

          </tr>

          <tr>

          <td>地址</td>

          <td align="center"><?php echo "$dz"; ?></td>

          </tr>

          </table>

          </form>

          </body>

          </html>

          謝謝觀看,喜歡的就收藏加關注吧!

          .表單提交驗證的幾種方法

          一、submit按鈕和onsubmit事件實現驗證

          <form name=“form1”onsubmit=“return checkForm()”>

          用戶名:<input type=“text”name=“username” />

          <input type=“submit” value=“提交表單” />

          </form>

          二、button按鈕和onclick事件實現驗證

          <form name=“form1” >

          用戶名:<input type=“text”name=“username” />

          <input type=“button” value=“提交表單”onClick=“checkForm()” />

          注意:普通按鈕的onclick的返回值,不會阻止普通按鈕的默認動作

          </form>

          <script>

          function checkForm()

          {

          var flag; //局部變量

          //先做表單驗證

          If(document.form1.username.value==””)

          {

          flag = false;

          }else

          {

          flag = true;

          }

          //判斷flag的值,如果為true,則提交表單

          if(flag==true)

          {

          //如果為true,則提交表單,使用form對象的提交方法submit()

          Window.alert(“表單驗證通過”);

          document.form1.submit();

          }else

          {

          //如果為false,則彈出一個提示信息

          Window.alert(“表單驗證失敗”);

          }

          }

          </script>

          三、submit按鈕和onclick事件實現驗證

          <form name=“form1” >

          用戶名:<input type=“text”name=“username” />

          <input type=“submit” value=“提交表單”onClick=“return checkForm()” />

          </form>

          2.復選框對象checkbox

          checkbox對象的屬性

          name:復選框的名稱

          value:復選框的值

          type:復選框的類型

          form:復選框所在的表單對象。如:this.form

          checked:復選框是否選中

          注意:在表單中,多個name的值一樣,將產生一個數組。

          實例:全選和反選

          <script>

          //定義函數:當“全選”復選框被“選中”時,所有的name=hobby都勾選

          //如果“全選”復選框取消“選中”時,所有的name=hobby都取消勾選

          function select_all(obj)

          {

          //取到name=hobby的對象,構成的一個數組

          var arr = document.form1.hobby;

          //判斷“全選”的狀態

          if(obj.checked)

          {

          //遍歷所有name=hobby對象的checked的值,并將其值設為true

          for(var i=0;i<arr.length;i++)

          {

          arr[i].checked = true;

          }

          }else

          {

          //遍歷所有name=hobby對象的checked的值,并將其值設為false

          for(var i=0;i<arr.length;i++)

          {

          arr[i].checked = false;

          }

          }

          }

          //定義函數:選中的項,變成取消;沒有選中的項,被選中

          function select_no_all()

          {

          //先獲得name=hobby的所有對象

          var arr = document.form1.hobby; //checked

          //遍歷所有的hobby對象

          for(var i=0;i<arr.length;i++)

          {

          if(arr[i].checked)

          {

          arr[i].checked = false;

          }else

          {

          arr[i].checked = true;

          }

          }

          }

          </script>

          3.上傳文件域file

          對于上傳的文件要做兩方面的判斷:文件的類型(擴展名)、文件的大小(PHP中再講)。

          <script>

          //定義:對上傳文件的擴展名進行判斷

          function check_file_type(fileName)

          {

          //定義狀態變量

          var flag = false;

          //定義一個圖片擴展名的數組

          var arr = ["jpg","jpeg","png","gif"]; //dedeCMS

          //重蔚自留地的.xls

          //先找到最后一個小點的位置

          //提取子字符串substr(startIndex)、substring(startIndex)

          //取出上傳文件的擴展名

          var ext = fileName.substr(fileName.lastIndexOf(".")+1).toLowerCase();

          //遍歷圖片數組,與取到的擴展名,進行比對,如果找到,則返回true

          for(var i=0;i<arr.length;i++)

          {

          if(arr[i]==ext)

          {

          flag = true;

          break;

          }

          }

          //根據flag的值,彈出相應的提示信息

          if(flag)

          {

          alert("文件可以上傳");

          }else

          {

          alert("文件類型不允許上傳");

          }

          }

          </script>

          4.下拉菜單對象select和option對象

          <select name=“edu”>

          <option value=“大專”>大專</option>

          <option value=“大本”>大本</option>

          <option value=“研究生”>研究生</option>

          </select>

          select對象的屬性

          options[]:所有的option構成的一個數組。

          如:edu.options[0].value = “大?!?/p>

          edu.options[0].text = “大?!?

          selectedIndex:默認選中的option對象的索引號(下標)

          length:指一共有多少個option對象

          name:select對象的名稱

          option對象的屬性

          value:指option對象的值

          text:指<option></option>之間的文本內容

          以上就是我今天學到的表單提交的幾種方法。跟大家一起交流。寫的不好,望大神多多指教。

          、使用場景:

          安全性都一樣,都是發送的http協議。安全性與提交文件的業務處理(格式檢測,防注入)有關,與提交方式無關。

          一般登錄用表單提交,點擊提交觸發submit事件,一般會 使頁面發生跳轉,頁面的跳轉等行為的控制往往在后端,后端控制頁面的跳轉及數據的傳遞;但是某些時候不希望頁面跳轉,或者說想要將控制權放在前端,通過js來操作頁面的跳轉或數據變化,一般這種異步操作,都會使用ajax。

          但是Ajax會有個隱藏的問題,即瀏覽器不保存密碼,不符合用戶習慣。理想的方式:建立隱藏的iframe,把form標簽的target指向iframe,然后檢測iframe的狀態。

          2、比較:

          (1)ajax在提交、請求、接收時,都是異步進行,網頁不需要刷新,只刷新頁面局部,不關心也不影響頁面其他部分的內容。

          Form提交則是新建一個頁面,哪怕是提交給自己本身的頁面,也需要刷新,為了維持頁面用戶對表單的狀態改變,要在控制器和模板之間傳遞更多參數以保持頁面狀態。

          (2)ajax提交時,是在后臺新建一個請求。

          Form卻是放棄本頁面,然后再請求。

          (3)ajax必須要用js來實現,存在調試麻煩、瀏覽器兼容問題,而且不啟用js的瀏覽器,無法完成操作。

          Form表單是瀏覽器自帶的,無論是否開啟js,都可以提交表單。

          (4)ajax在提交、請求、接收時,整個過程都需要使用程序來對其進行數據處理。

          Form表單提交,是根據表單結構自動完成,不需要代碼干預。用submit提交。

          3、其他方面:

          關于輸入內容的校驗,ajax可以在獲取到元素內容用程序判斷;form表單的屬性中有校驗的字段,easyui,jeecg等中都封裝,用戶只需添加正則表達式的校驗規則。

          4、例:

          (1)使用form提交

          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

          <html>

          <head>

          <title>login test</title>

          <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

          </head>

          <body>

          <div id="form-div">

          <form id="form1" action="/users/login" method="post">

          <p>用戶名:<input name="userName" type="text" id="txtUserName" tabindex="1" size="15" value=""/></p>

          <p>密 碼:<input name="password" type="password" id="TextBox2" tabindex="2" size="16" value=""/></p>

          <p><input type="submit" value="登錄">&nbsp<input type="reset" value="重置"></p>

          </form>

          </div>

          </body>

          </html>


          主站蜘蛛池模板: 奇米精品一区二区三区在| 一区二区三区在线观看中文字幕| 国产精品无码一区二区在线| 国产伦精品一区三区视频| 日韩精品中文字幕无码一区 | 精品人妻一区二区三区四区| 亚洲一区二区三区影院| 国产精品久久久久一区二区| 无码人妻精品一区二区三区久久久| 亚洲男女一区二区三区| 肉色超薄丝袜脚交一区二区| 国产福利电影一区二区三区,日韩伦理电影在线福 | 亚洲一区二区三区播放在线| 人妻久久久一区二区三区| 亚洲一区精品伊人久久伊人| 无码日韩精品一区二区人妻| 国产精品美女一区二区| 成人区人妻精品一区二区三区 | 日本一区二区三区久久| 呦系列视频一区二区三区| 精品一区二区ww| 国产乱人伦精品一区二区在线观看 | 亚洲一区AV无码少妇电影| 亚洲一区二区三区高清不卡 | 青青青国产精品一区二区| 亚洲AV综合色区无码一区爱AV| 精品国产一区二区三区色欲| 亚洲国产av一区二区三区丶| 国产精品一区二区久久| 怡红院一区二区三区| a级午夜毛片免费一区二区| 在线观看国产一区| 亚洲国产精品一区二区第一页| 无码中文字幕人妻在线一区二区三区| 日韩一区二区在线免费观看| 99久久精品国产高清一区二区| 亚洲欧美成人一区二区三区| 精品国产一区二区22| 亚洲国产成人一区二区三区| 国产自产对白一区| 色视频综合无码一区二区三区 |