2. 程式人生 > >前端學習之路---php（表單處理）

前端學習之路---php（表單處理）

阿新 • • 發佈：2018-12-12

  • 表單的使用

  • 常見表單元素的使用

  • 案例

  1. 表單的概念在生活中很常見，就像是問卷調查表一樣，別人先把問卷發給你，你照著問卷的要求填寫，完事過後再 將填完的問卷發給別人，從而達到一個將別人需要的資訊傳遞給別人的一種方式。 傳統的網頁大多數的作用都是展示資料，就是將資訊傳遞給使用者。而在現代化的 Web 開發中，非常注重資訊交 互，所以表單也隨處可見，只是形式上變成網頁，性質上還是一模一樣的。主要的作用任然是 收集指定的使用者信 息。 資訊互動：例如 簡書 這個平臺，除了展示文章（展示資訊），還可以釋出文章（收集資訊）
  2. 表單基本使用 HTML 中有一個專門用於提交資料的標籤： <form> ，通過這個標籤可以很容易的收集使用者輸入。 form 標籤有兩個必要屬性： action：表單提交地址（填完了，交給誰） method：表單以什麼方式提交 例如，我們需要在登入介面上收集使用者輸入的使用者名稱和密碼： 
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF‐8">
  <title>登入</title>
</head>
<body>
  <form action="login.php" method="post">
    <div>
      <label for="username">使用者名稱</label>
      <input type="text" id="username" name="username">
    </div>
    <div>
      <label for="password">密碼</label>
      <input type="password" id="password" name="password">
    </div>
    <button type="submit">登入</button>
  </form>
</body>
</html>

    按照目前的情況，使用者第一次請求得到這個表單頁面，填寫完表單內容，點選登入，表單會自動傳送到 login.php ，剩下的問題就是要考慮如何在 login.php 中獲取到使用者提交過來的內容。                                                            PHP 中有三個超全域性變數專門用來獲取表單提交內容： $_GET ：用於獲取以 GET 方式提交的內容 $_POST ：用於獲取以 POST 方式提交的內容 $_REQUEST ：用於獲取 GET 或 POST 方式提交的內容 藉助 $_POST 或者 $_REQUEST 就可以獲取到表單提交的內容：

    <?php
// 獲取表單提交的使用者名稱和密碼
echo '使用者名稱：' . $_REQUEST['username'];
echo '密碼：' . $_REQUEST['password'];

  3. 提交地址 action 提交地址指的是這個表單填寫完成過後點選提交，傳送請求的請求地址是什麼。 從便於維護的角度考慮，一般我們最常見的都是提交給當前檔案，然後在當前檔案中判斷是否是表單提交請求：

    <?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  // 表單提交請求
}

    另外，建議使用 $_SERVER['PHP_SELF'] 動態獲取當前頁面訪問路徑，這樣就不用因為檔案重新命名或者網站目錄結 構調整而修改程式碼了：

    <!‐‐ 這樣寫死 action 地址，當檔案重新命名就需要修改程式碼 ‐‐>
<form action="/foo/login.php">
  <!‐‐ ... ‐‐>
</form>
<!‐‐ 通過 `$_SERVER['PHP_SELF']` 獲取路徑，可以輕鬆避免這個問題 ‐‐>
<form action="<?php echo $_SERVER['PHP_SELF']; ?>">
  <!‐‐ ... ‐‐>
</form>

    魯棒性：指的是我們的程式應對變化的能力

  4. 提交方式 method 可以用於設定表單提交的方式，目前我們所認識的就是最常見兩種表單提交方式： GET 和 POST 。 從效果上來看，兩者都可以將資料提交到服務端，但是從實現提交的原理上兩者有很大的不同： GET 表單資料是通過 URL 中的 ? 引數傳遞到服務端的 可以在位址列中看到提交的內容 資料長度有限制，因為 URL 地址長度有限（2000個字元） POST 表單資料是通過請求體傳遞到服務端的，我們在介面上看不到 可以提交任何型別的資料，包括檔案 由於介面上看不見，瀏覽器也不儲存，所以更安全 至於什麼情況下應該選用哪種方式，這個需要結合業務場景和這兩種方式各自的特點來決定，沒有絕對的答案，只 能給出一些原則： 絕不能使用 GET 來發送密碼或其他敏感資訊！！！ 應該想清楚這次請求到底主要是去拿東西，還是去送東西

  5. 常見表單元素處理 至於表單元素中的文字框文字域一類的元素，都是直接將元素的 name 屬性值作為鍵，使用者填寫的資訊作為值，發 送到服務端。 但是表單元素中還有一些比較特殊的表單元素需要單獨考慮

  6. 單選按鈕

    <!‐‐ 最終只會提交選中的那一項的 value ‐‐>
<input type="radio" name="gender" value="male">
<input type="radio" name="gender" value="female">

  7. 複選按鈕

    <!‐‐ 沒有設定 value 的 checkbox 選中提交的 value 是 on ‐‐>
<input type="checkbox" name="agree">
<!‐‐ 設定了 value 的 checkbox 選中提交的是 value 值 ‐‐>
<input type="checkbox" name="agree" value="true">

     如果需要同時提交多個選中項，可以在 name 屬性後面 跟上 [] ： http://php.net/manual/zh/faq.html.php#faq.html.arrays

    <input type="checkbox" name="funs[]" id="" value="football">
<input type="checkbox" name="funs[]" id="" value="basketball">
<input type="checkbox" name="funs[]" id="" value="world peace">

     最終提交到服務端，通過 $_POST 接收到的是一個索引陣列。

  8. 選擇框

    <select name="subject">
  <!‐‐ 設定 value 提交 value ‐‐>
  <option value="1">語文</option>
  <!‐‐ 沒有設定 value 提交 innerText ‐‐>
  <option>數學</option>
</select>

  9. 案例                                                                                                                                                                                           基於檔案的註冊和登入：       1. 註冊 1. 使用者請求一個註冊頁面 2. 服務端返回一個登錄檔單 3. 使用者填寫表單並提交 4. 服務端接收使用者提交的資訊 5. 判斷是否正確填寫內容以及是否勾選同意 6. 如果出現異常介面給出提示，並返回表單 7. 如果都正常，則儲存到檔案中（每個使用者一行）     2. 登入 

  10. 猜數字遊戲 參考：https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/First_steps/A_first_splash 注意：這裡是 JavaScript 的實現，經供參考 建議：好好看看裡面寫的一些內容 我想讓你建立一個可以猜數字的遊戲，它會在1~100以內隨機選擇一個數, 然後讓玩家挑戰在10輪以內猜出這個數 字，每一輪都要告訴玩家正確或者錯誤， 如果出錯了，則告訴他數字是低了還是高了，並且還要告訴玩家之前猜的 數字是什麼。 一旦玩家猜測正確，或者他們用完了回合，遊戲將結束。 遊戲結束後，可以讓玩家選擇再次開始。

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF‐8">
  <title>猜數字</title>
  <style>
    body {
      padding: 100px 0;
      background‐color: #2b3b49;
      color: #fff;
      text‐align: center;
      font‐size: 2.5em;
    }
    input {
      padding: 5px 20px;
      height: 50px;
      background‐color: #3b4b59;
      border: 1px solid #c0c0c0;
      box‐sizing: border‐box;
      color: #fff;
      font‐size: 20px;
    }
    button {
      padding: 5px 20px;
      height: 50px;
      font‐size: 16px;
    }
  </style>
</head>
<body>
  <h1>猜數字遊戲</h1>
  <p>Hi，我已經準備了一個 0 ‐ 100 的數字，你需要在僅有的 10 機會之內猜對它。</p>
  <form action="" method="post">
    <input type="number" min="0" max="100" name="num" placeholder="隨便猜">
    <button type="submit">試一試</button>
  </form>
</body>
</html>

  11. . 檔案上傳 http://php.net/manual/zh/features.file-upload.php 注意：                                                                                                                                                                                        修改 php.ini 中的 post_max_size 配置，讓服務端可以接受更大的請求體體積 修改 php.ini 中的 upload_max_filesize 配置，讓服務端支援更大的單個上傳檔案 *暫時作為了解 type 屬性為 file 的 input 元素可以通過表單提交檔案（上傳檔案），服務端 PHP 可以通過 $_FILES 獲取上 傳的檔案資訊。 

    <?php
// 如果選擇了檔案 $_FILES['file']['error'] => 0
// 詳細的錯誤碼說明：http://php.net/manual/zh/features.file‐upload.errors.php
if ($_FILES['file']['error'] === 0) {
  // PHP 在會自動接收客戶端上傳的檔案到一個臨時的目錄
  $temp_file = $_FILES['file']['tmp_name'];
  // 我們只需要把檔案儲存到我們指定上傳目錄
  $target_file = '../static/uploads/' . $_FILES['file']['name'];
  if (move_uploaded_file($temp_file, $target_file)) {
    $image_file = '/static/uploads/' . $_FILES['file']['name'];
  }
}

    $_FILES 同樣也是一個關聯陣列，鍵為表單的 name ，內容如下：

    array(1) {
  ["avatar"]=>
  array(5) {
    ["name"]=>
    string(17) "demo.jpg"
    ["type"]=>
    string(10) "image/jpeg"
    ["tmp_name"]=>
    string(27) "C:\Windows\Temp\php786C.tmp"
    ["error"]=>
    int(0)
    ["size"]=>
    int(29501)
  }
}

  12. 音樂列表案例 基於檔案儲存的音樂資料                                                                                                                                                       思路分析 絕大多數情況下我們編寫的應用功能都是在圍繞著某種型別的資料做增刪改查（Create / Read / Update / Delete）。 對於被增刪改查的資料有幾點是可以明確的： 結構相同的多條資料（可以認為是：一個數組，陣列中的元素都具有相同的屬性結構） 可以持久化（長久儲存） 5.1.1. 資料放在哪？ 我們第一件事就是考慮資料放在哪（怎麼存怎麼取）？ 目前我們接觸到的技術方案中，只有檔案可以持久化的儲存內容（資料），所以一定是用檔案存我們要操作的數 據。 但是由於我們要存放的是一個有著複雜結構的資料，並不是簡簡單單的值，所以我們必須設計一種 能表示複雜結構 資料的方式。 例如，一行為一條資料，不同資訊之間用 | 分割，同時約定好每個位置的資料含義：

     這種方式很簡單，但是缺點也非常明顯，所以我們迫切需要一個更好更方便的表示有結構資料的方式。

  13.  JSON JSON（JavaScript Object Notation） 是一種通過普通字串描述資料的手段，用於表示有結構的資料。類似於編 程語言中字面量的概念，語法上跟 JavaScript 的字面量非常類似。 5.2.1. 資料型別                                                                                                                                                                         

    null

    null

    string

    "hello json"

    number

    1111

    boolean

    true

    object

    {
  "name": "zce",
  "age": 18,
  "gender": true,
  "girl_friend": null
}

    array

    ["zhangsan", "lisi", "wangwu"]

     注意 1. JSON 中屬性名稱必須用雙引號包裹 2. JSON 中表述字串必須使用雙引號 3. JSON 中不能有單行或多行註釋 4. JSON 沒有 undefined 這個值

  14. JSON 表述 有了 JSON 這種格式，我們就可以更加容易的表示擁有複雜結構的資料了。

    [
  {
    "id": "59d632855434e",
    "title": "錯過",
    "artist": "梁詠琪",
    "images": ["/uploads/img/1.jpg"],
    "source": "/uploads/mp3/1.mp3"
  },
  {
    "id": "59d632855434f",
    "title": "開始懂了",
    "artist": "孫燕姿",
    "images": ["/uploads/img/2.jpg"],
    "source": "/uploads/mp3/2.mp3"
  },
  {
    "id": "59d6328554350",
    "title": "一生中最愛",
    "artist": "譚詠麟",
    "images": ["/uploads/img/3.jpg"],
    "source": "/uploads/mp3/3.mp3"
  },
  {
    "id": "59d6328554351",
    "title": "愛在深秋",
    "artist": "譚詠麟",
    "images": ["/uploads/img/4.jpg"],
    "source": "/uploads/mp3/4.mp3"
  }
]

  15. 功能實現 在服務端開發領域中所謂的 渲染指的是經過程式執行得到最終的 HTML 字串這個過程。  列表資料展示（展示類） 檔案讀取 JSON 反序列化 json_decode 需要注意第二個引數 如果希望以關聯陣列的方式而非物件的方式操作資料，可以將 json_decode 的第二個引數設定為 true 陣列遍歷 foreach                                                                                                                                                                      PHP 與 HTML 混編 新增資料（表單類） 表單使用（form action method enctype，input name label for id） 服務端表單校驗並提示錯誤訊息 empty 判斷一個成員是否沒定義或者值為 false（可以隱式轉換為 false） 上傳檔案 檔案數量 檔案種類 如果需要考慮檔案重名的情況，可以給上傳的檔案重新命名（唯一名稱） 單檔案域多檔案上傳 name 一定 以 [] 結尾，服務端會接收到一個數組 JSON 序列化 檔案寫入 刪除資料 問號傳參 一般情況下，如果需要超連結點擊發起的請求可以傳遞引數，我們可以採用 ? 的方式

    <a href="/delete.php?id=123">刪除</a>

    陣列移除元素 array_splice

  16. 參考連結 HTML 中的 form 標籤：http://www.w3school.com.cn/html/html_forms.asp PHP 中處理表單：http://www.w3school.com.cn/php/php_forms.asp Emmet 手冊：https://docs.emmet.io/cheat-sheet/

相關推薦

前端學習之路---php（表單處理）

表單的使用 常見表單元素的使用 案例 表單的概念在生活中很常見，就像是問卷調查表一樣，別人先把問卷發給你，你照著問卷的要求填寫，完事過後再 將填完的問卷發給別人，從而達到一個將別人需要的資訊傳遞給別人的一種方式。 傳統的網頁大多數的作用都是展示

spring boot 學習之路3（ 集成mybatis ）

sys pat min lba asn ria [] system emp 下面就簡單來說一下spring boot 與mybatiis的整合問題，如果你還沒學習spring boot的註解的話，要先去看spring boot的註解 好了，現在讓我們來搞一下與mybat

【itext學習之路】-------（第五篇）對pdf進行蓋章/簽章/數字簽名

在上一篇文章中，我們學習了使用itext對pdf增加圖片水印和文字水印，那麼這篇文章我們將要學習更高階一點的水印—-印章。可能你會有疑問，印章不也是一個圖片嗎？當然，你可以把一個印章圖片來做成圖片水印，但是我們這裡要介紹的是，通過數字簽名的方式來進行pdf簽章。

【itext學習之路】-------（第四篇）給pdf增加文字水印和圖片水印

一般而言，許多公司在做pdf之後，都會將公司的logo或者網址以水印的方式新增到pdf檔案中。本篇文章，我們將介紹在製作pdf的時候，如何將水印加入到pdf中去。 package cn.tomtocc.pdf; import java.io.FileNotFoundE

【itext學習之路】-------（第三篇）對pdf文件進行加密和許可權設定

上篇文章，我們學習了pdf的屬性設定，但是我們知道，在實際開發中，如果pdf文件被黑客盜取的話，那麼pdf中的資訊就會被洩露，因此本篇文章將會介紹pdf的加密設定，並且設定許可權。 首先我們要說明的是，itext中對pdf文件的加密包括兩部分，第一部分是使用者密

Kotlin學習之路一（Kotlin語言簡介）

Kotlin語言的歷史 Kotlin語言是由JetBrains公司從2010年開始構思，2011年退出Kotlin專案，2012年將Kotlin專案開源，2016年釋出了一個穩定版本，所以說，Kotli

Maven學習之路一（maven的好處）

由於最近有再專案中看到maven，就抽個時間來學習下。 首先來說說maven的好處 1，體積小 通過maven管理的工程，都比較小，因為裡面只有原始檔 ，並沒有匯入一些spring的jar包，或者其他的jar包。 但是一個正常的工程都要有完整的jar包才能執行啊？那麼這個

phper 的Goland學習之路--- 切片（陣列的檢視）

1、切片： 也就是底層陣列的檢視；經常用於傳遞引數，相當於陣列的區域性指標切片的初始值是nil  ；  如 var s [] int ;   s是nil 切片定義：切片名  [ ] T    T表示的切片元素型別   ,  切片名 就是 指標地址 +  元素個數 + 容量個數

[前端小小白的學習之路]--PHP數組

tab rep 維數 一次循環 tle 參考手冊 print 數值 merge 今天學習了PHP數組，整理下相關知識點。 PHP數組是什麽？ php數組是一個能在單個變量中存儲多個值的特殊變量。 如：你有一個項目清單（人名清單），將其存儲到單個變量中，如下： $

php之表單-2（表單驗證）

eth left cit span dem 讓我 但是 cape ren PHP 表單驗證 本章節我們將介紹如何使用PHP驗證客戶端提交的表單數據。 PHP 表單驗證 在處理PHP表單時我們需要考慮安全性。 本章節我們將展示PHP表單數據安全處理

前端學習之路---DOM操作（WebAPI）

DOM ### DOM的概念 文件物件模型（Document Object Model，簡稱DOM），是[W3C](http://baike.baidu.com/item/W3C)組織推薦的處理可擴充套件標誌語言的標準程式設計介面。在網頁上，組織頁面（或文件）的物件被組織在一個樹形結構中，用來表示

偏前端-vue.js學習之路初級（一）概念

首先--不推薦新手直接使用 vue-cli，尤其是在你還不熟悉基於 Node.js 的構建工具時。    新建一個html,引入一下js: <!-- 開發環境版本，包含了有幫助的命令列警告 --><script src="https://cdn.jsdeli

偏前端-vue.js學習之路初級（二）元件化構建

vue.js   元件化構建 元件系統是 Vue 的另一個重要概念，因為它是一種抽象，允許我們使用小型、自包含和通常可複用的元件構建大型應用。仔細想想，幾乎任意型別的應用介面都可以抽象為一個元件樹：   一、使用元件 1.元件的全域性註冊--可以使用 Vue.compon

【前端】【html/css】前端學習之路（五）：標籤顯示模式（display）

標籤的型別(顯示模式)    HTML標籤一般分為塊標籤和行內標籤兩種型別，它們也稱塊元素和行內元素。1.塊級元素（block-level）    每個塊元素通常都會獨自佔據一整行或多整行，可以對其設定寬度、高度、對齊等屬性，常用於網頁佈局和網頁結構的搭建。總而言之就是比較霸

前端學習之路（進階）

1、大前端完整學習路線（詳情）2、前端工程師必備技能圖譜3、從零基礎到前端大牛的學習路線4、零基礎的前端開發初學者應如何系統的學習（天貓前端開發專家）5、git上的前端技能彙總（很全非常棒！）6、2017開發者學習路線圖（看起來有點模糊和混亂。。。）自己的一點想法：理論1：把

【前端】【html/css】前端學習之路（十四）（製作京東專案心得）（完）

1.事前準備 （1）工具使用的是 Webstrom的最新版 和  Fireworks 8 作為切圖的輔助工具。 （2）準備CSS Reset類庫（normalize.css），為跨瀏覽器相容做準備（也可以直接使用京東網站的初始化）  normalize.css

【前端】【html5/css3】前端學習之路（三）（CSS3 2D變形/CSS3 3D變形/CSS3瀏覽器字首）

一、2D變形(CSS3) transform transform是CSS3中具有顛覆性的特徵之一，可以實現元素的位移、旋轉、傾斜、縮放，甚至支援矩陣方式，配合過渡和即將學習的動畫知識，可以取代大量之前只能靠Flash才可以實現的效果。 1.移動【  translate(x

PHp學習之路二（陣列練習）

有關陣列的練習，，php不同於java和c++他是弱型別的語言，php陣列卻很強大····它既有java中陣列的特性 又有集合的用途。<?php //遍歷陣列, 方法一：列印變數 $a=array("Hello", "World!", ); var_d

前端學習之路，分享給剛學或想學前端的網友（持續更新中）

　　經常會在群裡或論壇上看到有人問：“學習前端有什麼捷徑？”，一般都是賣油翁式的回答：“無他唯手熟爾”。那麼該如何讓手熟練呢？其實也就是該如何系統的學習前端。在本文中，我會結合自身的經歷，分享一下自己學習前端的過程，期間會穿插引用我過去各個階段所寫的博文。 一

STM32學習之路-LCD（4）&lt;顯示字符&gt;

計算 ack 字節 ring oid ng- 透明 標點符號 函數 昨晚瘋狂的打了一夜的LOL,感覺L多了,今天一天精神萎靡.還是繼續把顯示字符給看了,可是在猶豫要不要寫這篇文章 事實上寫的東西也就是copy別人家的代碼,不想寫那麽多,就記錄下自己困惑的地方吧.也