分类导航

HTML5 发布时间：2022-04-25 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了菜鸟零基础学习HTML5 ----- 1.5、HTML5表单和PHP环境搭建，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

一、HTML5表单

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

2、常用表单标签

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
    <form>
        用户名：
        <input type="text"> 
        密码：
        <input type="password">
        <br/>
        <!--复选框-->
        你喜欢的水果有？
        <br/>
        香蕉<input type="checkBox">
        苹果<input type="checkBox">
        橘子<input type="checkBox">
        西瓜<input type="checkBox">
        荔枝<input type="checkBox">
        <br/>
        <!--单选按钮-->
        请选择你的性别：
        男<input type="radio" NAME="sex">
        女<input type="radio" NAME="sex">
        <br/>
        <!--下拉列表-->
        请选择你常用的浏览器：
        <SELEct>
            <option>uc浏览器</option>
            <option>QQ浏览器</option>
            <option>chrome浏览器</option>
            <option>ie浏览器</option>
            <option>其它</option>
        </SELEct>
        <br/>
        <!--按钮-->
        <input type="button" value="按钮">
        <input type="submit">
        <input type="submit" value="确定">
    </form>
    <!--文本域-->
    <textarea cols="30" rows="30">请在此填写个人简介</textarea>
</body>

</html>

效果图如下：

二、PHP环境搭建

本人用的是XAMPP，具体步骤请看这里：

http://jingyan.baidu.com/article/a681b0de3fbe7f3b18434684.html

安装完成后在浏览器地址栏输入 localhost；出现类似于如下图片，说明环境搭建成功。

@L_801_18@接下来在eclipse中安装PHP 插件：

打开eclipse，依次点击“Help”-“install new software”，在弹出的窗口中点击work with；选择自己的eclipse版本的地址，如图

然后在搜索框中输入 PHP，在搜索结果中选择你所需的那个，然后一直“next”直到安装完成，重启eclipse；点击Open perspective，选择PHP切换至PHP环境。

也可以按照如下的方法：http://jingyan.baidu.com/article/fd8044faf388a05031137a84.html

三、HTML5表单与PHP交互

例：

在eclipse中新建一个 PHP项目，代码如下

<?PHP
echo "用户名：".$_POST['name']."<br>密码：".$_POST['password'];

在IntelliJ IDEA创建一个HTML5文件，代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <title>表单与PHP交互</title>
</head>
<body>
    <form action="http://localhost/Myservice/service.PHP" method="post">
        用户名：<input type="text" NAME="name">
        密码  ：<input type="password" NAME="password">
        <input type="submit" value="提交">
    </form>
</body>
</html>