4-HTML5表单提交和PHP环境搭建

最新推荐文章于 2021-03-20 20:28:08 发布

张鹿鹿

最新推荐文章于 2021-03-20 20:28:08 发布

阅读量2k

点赞数 1

分类专栏： HTML5基础文章标签： php html 表单

本文链接：https://blog.csdn.net/u013144863/article/details/52267779

版权

HTML5基础专栏收录该内容

8 篇文章 0 订阅

订阅专栏

HTML表单

1, 表单用于获取不同类型的用户输入

2, 常用的表单标签

标签	描述
＜form＞	表单
＜input＞	输入域
＜textarea＞	文本域
＜label＞	控制标签
＜fieldset＞	定义域
＜legend＞	域的标题
＜select＞	选择列表
＜optgroup＞	选项组
＜button＞	按钮

常用表单

1, 复选框
2, 单选按钮
3, 下拉列表
4, 文本域
5, 创建按钮

<form action="">
    用户名:
    <input type="text">
    <br/>
    密码:
    <input type="password">

    <br/>
    <!--复选框-->
    你喜欢的水果有?<br/>
    苹果 <input type="checkbox">
    香蕉 <input type="checkbox">
    橘子 <input type="checkbox">
    <br/>
    <!--单选框-->
    请选择性别?<br/>
    男 <input type="radio" name="sex">
    女 <input type="radio" name="sex">
    <br/>
    <!--选择框-->
    请选择你常用的网站?
    <select>
        <option>360搜索/option>
        <option>google</option>
        <option>百度</option>
    </select>
    <!--创建一个按钮-->
    <br/>
    <input type="button" value="按钮">
    <input type="submit" value="提交">


</form>
<!--文本域-->
<textarea cols="30" rows="30">
请填写个人信息
</textarea>

这里写图片描述

PHP环境的搭建

我们所说的PHP环境搭建其实非常简单, 接下来按照步骤操作即可

1, 首先下载XAMPP, https://www.apachefriends.org/zh_cn/index.html

2, 安装完成之后, 开启图示两项.
这里写图片描述

3, 安装eclipse, 点击 Help -> Install New Software… 然后根据自己eclipse的版本选择安装地址, 等待Pending完之后, 选择Programing Language -> PHP Development(PDT) 选择安装….

4, 切换PHP工作环境, 如图所示:
这里写图片描述

5, 点击File -> Switch workspace -> other 之后找到自己XAMPP的安装位置中的htdocs目录, 例如我的安装目录是C:\xampp\htdocs, 之后eclipse重启, 用该目录作为workspace
6, 右击新建项目就好了, 看看我们的努力成果吧!
这里写图片描述

表单提交数据与PHP交互

PHP服务器端

<?php
echo '用户名:'.$_POST['name'].'<br/> 密码: '.$_POST['password'];

客户端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单与PHP交互</title>
</head>
<body>
<!--action指的是具体提交服务器上的地址, 并且指定提交方式-->
<form action="http://localhost/MyService/Service.php" method="post">
    用户名: <input type="text" name="name"> <br/>
    密  码: <input type="password"name="password">
    <br/>
    <input type="submit" value="提交">
</form>
</body>
</html>