菜鸟零基础学习HTML5   ----- 1.5、HTML5表单和PHP环境搭建

一、HTML5表单

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

   2、常用表单标签

wKiom1YLbLXinJI6AAEOCjfiS6Y302.jpg例:

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

效果图如下:

wKioL1YLbXTyILQHAAD893JAeoc023.jpg

二、PHP环境搭建

本人用的是XAMPP,具体步骤请看这里:

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

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

wKioL1YLbzOCI5yxAAOdNlbx7E4978.jpg接下来在eclipse中安装PHP插件:

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

wKiom1YLcPbSvcUIAAEI7wM0Lkg793.jpg

然后在搜索框中输入 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>

运行该HTML文件,结果如下:

wKiom1YLeh7AYb8wAABIHvBeZlw686.gif

本文出自 “Fcheng” 博客,谢绝转载!

你可能感兴趣的:(html5,php环境搭建,HTML5表单与PHP数据交换,HTML5表单)