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的数据交互就完了.

欢迎你们提问和评论, 我尽我所能的为你们解答, 一块儿学习, 共同成长~

南心芭比: 热爱分享, 收获快乐~ 　