HTML5學習筆記<五>: HTML表單和PHP環境搭建

時間 2019-12-13

標籤 html5 html 學習筆記表單 php 環境搭建欄目 HTML5 简体版

原文原文鏈接

HTML表單php

　　1. 表單用於不一樣類型的用戶輸入html

2. 經常使用的表單標籤:web

標籤	說明
<form>	表單
<input>	輸入域
<textarea>	文本域
<label>	控制標籤
<fieldset>	定義域
<legend>	域的標題
<select>	選擇列表
<optgroup>	選項組
<option>	下拉列表中的選項
<button>	按鈕

3. 經常使用的表單apache

- 複選框
- 單選按鈕
- 下拉列表
- 文本域
- 建立按鈕

　　綜合示例: 瀏覽器

<!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.htmlpost

　　選擇相對應的版本, 這裏以Mac爲例: 學習

　2. 打開下載下來的xampp-osx-5.6.30-0-installer.dmg文件, 而後一路next , 最後finished, 安裝完成.網站

　相對簡單, 這裏就不貼圖了this

　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的數據交互就完了.

歡迎你們提問和評論, 我盡我所能的爲你們解答, 一塊兒學習, 共同成長~

南心芭比: 熱愛分享, 收穫快樂~ 　