整合營銷服務商

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

          免費咨詢熱線:

          快速學會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>


          主站蜘蛛池模板: 国产免费无码一区二区| 日韩美女在线观看一区| 末成年女AV片一区二区| 亚洲日本一区二区| 欧美一区内射最近更新| 国模精品一区二区三区视频| 日本一区午夜爱爱| 亚洲欧洲一区二区三区| 手机看片一区二区| 偷拍激情视频一区二区三区| 在线一区二区观看| 久久国产精品免费一区| 无码人妻精品一区二区三18禁| 2021国产精品视频一区| 福利片免费一区二区三区| 一本大道东京热无码一区| 国产精品自拍一区| 亚洲第一区精品观看| 少妇激情一区二区三区视频 | 国内精品视频一区二区三区| 偷拍精品视频一区二区三区| 无码精品黑人一区二区三区| 精品国产亚洲第一区二区三区| 国产午夜毛片一区二区三区| 亚洲日韩精品国产一区二区三区| 一区二区精品视频| 亚洲高清一区二区三区| 日韩精品无码视频一区二区蜜桃 | 亚洲AV日韩AV一区二区三曲| 国产伦一区二区三区高清| 日本激情一区二区三区| 精品视频一区二区三区四区五区| 国产精品香蕉在线一区| 中文字幕一区视频一线| 成人H动漫精品一区二区| 色狠狠一区二区三区香蕉| 国产韩国精品一区二区三区| 日本国产一区二区三区在线观看 | 日本一区二区三区爆乳| 中文字幕一区二区人妻| 色视频综合无码一区二区三区|