HTML表單
1. 表單用於不同類型的用戶輸入
2. 常用的表單標簽:
| 標簽 | 說明 |
| <form> | 表單 |
| <input> | 輸入域 |
| <textarea> | 文本域 |
| <label> | 控制標簽 |
| <fieldset> | 定義域 |
| <legend> | 域的標題 |
| <select> | 選擇列表 |
| <optgroup> | 選項組 |
| <option> | 下拉列表中的選項 |
| <button> | 按鈕 |
3. 常用的表單
-
- 復選框
- 單選按鈕
- 下拉列表
- 文本域
- 創建按鈕
綜合示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>form表單</title> </head> <body> <!--form--> <form> 用戶名: <input type="text"> <br /> 密碼: <input type="password"> <br/><br/><br/> <!--復選框--> 你喜歡的水果有: <br/> 蘋果<input type="checkbox"> 西紅柿<input type="checkbox"> 香蕉<input type="checkbox"> <br/><br/> <br/> <!--單選按鈕--> 您的性別是: 男<input type="radio" name="sex"> 女<input type="radio" name="sex"> <br/><br/> <br/> <!--下拉列表--> 請選擇您常用的網站: <select> <option>www.cnblogs.com/winsoncheung </option> <option>www.baidu.com </option> <option>www.w3school.com </option> </select> <br/><br/><br/> <!--創建按鈕--> <input type="button" value="點擊我"> <input type="submit" value="提交"> <input type="reset" value="重置"> <br/><br/><br/> </form> <!--文本域--> <textarea cols="30" rows="30"> 請再次填寫個人信息 </textarea> </body> </html>
PHP環境搭建
1. 下載Apache Friends, 官網: https://www.apachefriends.org/index.html
選擇相對應的版本, 這里以Mac為例:
2. 打開下載下來的xampp-osx-5.6.30-0-installer.dmg文件, 然后一路next , 最后finished, 安裝完成.
相對簡單, 這里就不貼圖了
3. 在Launcpad中找到並打開manager-osx, 並輸入管理員密碼.
得到如下:
4. 選擇Manager Servers, 依次打開 MySQL Database 和Apache Web Service, 狀態變成綠點並顯示running, 標示已經打開了.
至此, 服務器部分已經部署完畢, 但是我們需要一個IDE來寫php, 推薦使用Netbeans 或者Eclipse, 這里以Netbeans為例.
搭建NetBeans IDE
1. 到官網下載 NetBeans IDE:https://netbeans.org/downloads/index.html
有多個類別可供下載, 不同類別集成有不同的Development tools, 最后面是全部集成的類別, 可以根據自己的需要選擇下載
2. 下載好后直接點擊安裝, 一路next 然后fininshed.
參考:
在 MAC OS X 中配置 PHP、Apache、MySQL 和 Xdebug for PHP 開發: https://netbeans.org/kb/docs/php/configure-php-environment-mac-os_zh_CN.html#phpProject
NetBeans IDE 8.2 安裝說明:https://netbeans.org/community/releases/82/install_zh_CN.html
設置php項目: https://netbeans.org/kb/docs/php/project-setup_zh_CN.html
搭建好后, 試着寫寫自己的第一個php吧~
表單提交數據與PHP進行交互
1. 首先創建一個php項目, 打開Netbeans, 點擊 文件--> 新建項目
2. 出現的窗口中類別 選擇PHP, 項目選擇:PHP應用程序, 點擊下一步
3. 點擊下一步后:
項目名稱: 輸入你起得項目名字(這里 我輸入MyService)
原文件夾:默認 (也可是你自己創建的文件夾)
PHP版本: 默認
默認編碼: 默認
不勾選 將NetBeans元數據放入單獨的目錄
4. 點擊下一步后:
運行方式: 默認(本地We站點<在本地Web服務器上運行>)
項目URL:默認(http://localhost/Myservice/)
勾選 將源文件夾中的文件復制到其它位置(這一步的作用是自動將NetBeans編輯好的.php文件自動復制到服務器的htdocs目錄下, 便於web訪問)
復制到以下文件夾: 路徑就寫XAMPP下的htdocs文件夾下的MyService文件夾的絕對路徑, 我這里是:/Applications/XAMPP/htdocs/MyService
5. 點擊完成,這時項目就創建好了, 默認給我們創建了一個index.php的文件
6. 右擊這個默認創建的index.php文件, 點擊刪除, 我們自己創建一個service.php文件.
創建過程:
右擊 源文件夾-->新建-->PHP文件
7. 出現如下菜單
輸入文件名字, 其他選項默認, 點擊完成, 就創建好了.
8. 創建完成后如下圖所示:
9. 此時我們的service.php 已經創建好了, 在service.php中輸入:
<?php /* * To change this license header, choose License Headers in Project Properties. * To change this template file, choose Tools | Templates * and open the template in the editor. */ echo 'Hello world! this is my first PHP program! so exciting!';
然后點擊綠色的三角按鈕,
在出現的對話框中將索引文件index.php改成service.php, 點擊確定:
之后再點擊一次上圖中的綠色三角, 運行成功, 即可在瀏覽器中看到echo出來的一段字符串
到此為止, php服務器也搭建好, 用來處理數據的service.php也創建好了.
10, form提交表單數據與PHP交互.
1>. 打開NetBeans, 選擇Create New Project
2>. 打開的窗口中, 選擇Static Web
3>. 跳轉的窗口中, 鍵入項目的名字, 我輸入的是FormDemo, Project Location自己選擇保存到的文件, 點擊創建完成.
4>. 然后右擊FormDemo文件夾 --> New --> HTML file, 彈出的對話框中輸入Name:index, 點擊OK. 創建好index.html文件.
5>. 在index.html中輸入一下代碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Form表單與PHP數據交互</title> </head> <body> <!-- action: 就是之前創建的service.php在服務中能運行起來的地址 --> <form action="http://localhost/MyService/service.php" method="get"> 用戶名:<input type="text" name="name"> <br/> 密碼:<input type="password" name="password"> <br/> <input type="submit" value="提交"> </form> </body> </html>
注:action: 就填寫之前service.php 能夠在瀏覽器中運行起來的地址
11. 然后再service.php中鍵入如下代碼:
<?php /* * To change this license header, choose License Headers in Project Properties. * To change this template file, choose Tools | Templates * and open the template in the editor. */ echo "用戶名:".$_GET['name']."<br>密碼:".$_GET['password'];
此時, 運行一下NetBeans(點擊綠色的三角按鈕), 然后運行起HTML, 結果讓你想象不到!以為多難的GET請求 我們這樣就成功了!
同樣, post請求也一樣, 將method改成post, service.php中GET全都改成POST, 這樣就實現了POST請求.
至此, for表單與PHP的數據交互就完了.
歡迎大家提問和評論, 我盡我所能的為大家解答, 一起學習, 共同成長~
南心芭比: 熱愛分享, 收獲快樂~