HTML5学习笔记<五>: HTML表单和PHP环境搭建

时间：2022-04-04 19:20:18

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为例:

　　HTML5学习笔记<五>: HTML表单和PHP环境搭建

　2. 打开下载下来的xampp-osx-5.6.30-0-installer.dmg文件, 然后一路next , 最后finished, 安装完成.

　 相对简单, 这里就不贴图了

　3. 在Launcpad中找到并打开manager-osx, 并输入管理员密码.

　　HTML5学习笔记<五>: HTML表单和PHP环境搭建

　　得到如下:

　　HTML5学习笔记<五>: HTML表单和PHP环境搭建

　4. 选择Manager Servers, 依次打开 MySQL Database 和Apache Web Service, 状态变成绿点并显示running, 标示已经打开了.

　　HTML5学习笔记<五>: HTML表单和PHP环境搭建

　至此, 服务器部分已经部署完毕, 但是我们需要一个IDE来写php, 推荐使用Netbeans 或者Eclipse, 这里以Netbeans为例.

搭建NetBeans IDE

　　1. 到官网下载 NetBeans IDE:https://netbeans.org/downloads/index.html

　　有多个类别可供下载, 不同类别集成有不同的Development tools, 最后面是全部集成的类别, 可以根据自己的需要选择下载

　　HTML5学习笔记<五>: HTML表单和PHP环境搭建

　　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, 点击 文件--> 新建项目

　　HTML5学习笔记<五>: HTML表单和PHP环境搭建

　2. 出现的窗口中类别 选择PHP, 项目选择:PHP应用程序, 点击下一步

　　HTML5学习笔记<五>: HTML表单和PHP环境搭建

　3. 点击下一步后:

　　　项目名称: 输入你起得项目名字(这里 我输入MyService)

　　　原文件夹:默认 (也可是你自己创建的文件夹)　

　　　PHP版本: 默认

　　  默认编码: 默认

　　  不勾选 将NetBeans元数据放入单独的目录

　　HTML5学习笔记<五>: HTML表单和PHP环境搭建

　4. 点击下一步后:

　　运行方式: 默认(本地We站点<在本地Web服务器上运行>)

　　项目URL:默认(http://localhost/Myservice/)

　　勾选 将源文件夹中的文件复制到其它位置(这一步的作用是自动将NetBeans编辑好的.php文件自动复制到服务器的htdocs目录下, 便于web访问)

　　复制到以下文件夹: 路径就写XAMPP下的htdocs文件夹下的MyService文件夹的绝对路径, 我这里是:/Applications/XAMPP/htdocs/MyService

　　HTML5学习笔记<五>: HTML表单和PHP环境搭建

　5. 点击完成,这时项目就创建好了, 默认给我们创建了一个index.php的文件

　　HTML5学习笔记<五>: HTML表单和PHP环境搭建

　6. 右击这个默认创建的index.php文件, 点击删除, 我们自己创建一个service.php文件.

　　创建过程:

　　右击 源文件夹-->新建-->PHP文件

　　HTML5学习笔记<五>: HTML表单和PHP环境搭建

　7. 出现如下菜单

　输入文件名字, 其他选项默认, 点击完成, 就创建好了.

　　HTML5学习笔记<五>: HTML表单和PHP环境搭建

　8. 创建完成后如下图所示:

　　HTML5学习笔记<五>: HTML表单和PHP环境搭建

　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!';

　然后点击绿色的三角按钮,

　HTML5学习笔记<五>: HTML表单和PHP环境搭建

　在出现的对话框中将索引文件index.php改成service.php, 点击确定:

　　HTML5学习笔记<五>: HTML表单和PHP环境搭建

　　之后再点击一次上图中的绿色三角, 运行成功, 即可在浏览器中看到echo出来的一段字符串

　　HTML5学习笔记<五>: HTML表单和PHP环境搭建

　　到此为止, 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请求 我们这样就成功了!

HTML5学习笔记<五>: HTML表单和PHP环境搭建

同样, post请求也一样, 将method改成post, service.php中GET全都改成POST, 这样就实现了POST请求.

至此, for表单与PHP的数据交互就完了.

欢迎大家提问和评论, 我尽我所能的为大家解答, 一起学习, 共同成长~

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

HTML5学习笔记<五>: HTML表单和PHP环境搭建的更多相关文章

  1. Ext JS4 学习笔记之发送表单（Form）时也将表单下的表格（Grid）数据一同发送的方法

    Ext JS4 学习笔记之发送表单(Form)时也将表单下的表格(Grid)数据一同发送的方法 昨天在开发的时候遇到个小问题,就是如何将Grid的内容与Form一起发送到服务器端.默认情况下,表单(F ...

  2. HTML5中 HTML表单和PHP环境搭建及与PHP交互 韩俊强的博客

    每日更新关注:http://weibo.com/hanjunqiang  新浪微博! 知识点概括:HTML表单/PHP环境搭建/表单提交数据与PHP交互 第一部分:HTML表单 <!DOCTYP ...

  3. HTML5学习笔记五：html5表单

    表单是页面上非常重要的一块内容,用户可输入的大部分内容都是在表单元素中完成的,与后台的交互大多数也是通过点击表单中的按钮. 一.新增的元素和属性 1.新增属性: 1.1 form属性:页面中的任何元素 ...

  4. knockoutJS学习笔记08：表单域绑定

    前面的绑定都是用在基本标签上,这章主要讲表单域标签的绑定. 一.value 绑定 绑定标签:input text.textarea. <p>用户名:<input type=&quot ...

  5. redux-form的学习笔记二--实现表单的同步验证

    (注:这篇博客参考自redux-form的官方英文文档)左转http://redux-form.com/6.5.0/examples/syncValidation/ 在这篇博客里,我将用redux-f ...

  6. angular学习笔记&lpar;二十&rpar;-表单验证

    本篇主要介绍angular中的表单验证: 表单验证主要有以下一些内容: 1. required指令: 相当于html5的required属性,验证不能为空 2. ng-maxlength属性: 验证内 ...

  7. bootstrap学习笔记&lt&semi;五&gt&semi;（表单一）

    表单 bootstrap为表单提供三种样式:默认表单,水平表单,内联表单. <form class="form-horizontal" role="form&quo ...

  8. HTML 学习笔记 JQuery（表单&comma;表格 操作）

    表单应用 一个表单有3个基本组成部分 (1)表单标签:包含处理表单数据所用的服务器端程序URL 以及数据提交到服务器的方法 (2)表单域:包含文本框 密码框 隐藏框 多行文本框 复选框 单选框 下拉选 ...

  9. HTML学习笔记8：表单

      什么是表单?     一个网页表单可以将用户输入的数据发送到服务器进行处理.因为互联网用户使用复选框,单选按钮或文本字段填写表格,所以WebForms的形式类似文件或数据库.例如,WebForms ...

随机推荐

  1. XStream、JAXB 日期&lpar;Date&rpar;、数字&lpar;Number&rpar;格式化输出xml

    XStream.Jaxb是java中用于对象xml序列化/反序列化 的经典开源项目,利用它们将对象转换成xml时,经常会遇到日期(Date).数字按指定格式输出的需求,下面是使用示例: 一.日期字段格 ...

  2. StringGrid 实例3： 本例功能&colon; 1、修改 TStringGrid的默认宽与高&semi; 2、添加行&semi; 3、确认当前单元并赋值&period;

    实例3: 本例功能: 1.修改 TStringGrid的默认宽与高; 2.添加行; 3.确认当前单元并赋值. 实例图形:

  3. android Camera 结构

    Java层 :Frameworks\base\core\java\android\hardware\Camera.java JNI: Frameworks\base\core\jni\android_ ...

  4. 设计模式-原型模式&lpar;Prototype&rpar;

    场景分析: 前面我们提到,交易对象Trade,还有继承他的债券交易BondTrade.期货交易FutureTrade. 现在有一个需求,需要提供方法将交易拆分成多笔小交易. 代码如下(如果没有clon ...

  5. 线程间操作无效&colon; 从不是创建控件&OpenCurlyDoubleQuote;label4”的线程访问它。

    //主线程 public delegate void UpdateMessage(string mes); public void UpdatePortMessage(string mes) { th ...

  6. lua-TestMore（转）

    http://fperrad.github.io/lua-TestMore/ http://www.softpedia.com/get/Programming/Debuggers-Decompiler ...

  7. 基于HTML5 Canvas 点击添加 2D 3D 机柜模型

    今天又返回好好地消化了一下我们的数据容器 DataModel,这里给新手做一个典型的数据模型事件处理的例子作为参考.这个例子看起来很简单,实际上结合了数据模型中非常重要的三个事件处理的部分:属性变化事 ...

  8. 微信小程序picker组件 - 省市二级联动

    picker 从底部弹起的滚动选择器,现支持五种选择器,通过mode来区分,分别是普通选择器,多列选择器,时间选择器,日期选择器,省市区选择器,默认是普通选择器. picker官方文档链接 由于项目需 ...

  9. windows与mac下安装nginx

    window下 下载链接,自己选一个版本下载 nginx官网下载 本人放在D盘: 启动nginx 有很多种方法启动nginx (1)直接双击nginx.exe,双击后一个黑色的弹窗一闪而过 (2)打开 ...

  10. 基于SSH框架的考勤管理系统的设计与实现

    基于SSH框架的考勤管理系统的设计与实现

相关文章