[H5]HTML5表单和PHP环境搭建

最新推荐文章于 2024-07-01 16:14:08 发布

风浅月明

最新推荐文章于 2024-07-01 16:14:08 发布

阅读量1.5k

点赞数

分类专栏： Web

本文链接：https://blog.csdn.net/wsyx768/article/details/54881505

版权

Web 专栏收录该内容

78 篇文章 1 订阅

订阅专栏

[HTML表单]

效果如：图一

<!--HTML表单-->
<!--1、表单用于获取不同类型的用户输入-->
<!--2、常用表单标签-->
<!--<form>  表单-->
<!--<input> 输入域-->
<!--<textarea>  文本域-->
<!--<label>     控制标签-->
<!--<fieldset>  定义域-->
<!--<legend>    域的标题-->
<!--<select>    选择列表-->
<!--<optgroup>  选项组-->
<!--<button>    按钮-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
    <!--1、用户输入-->
    <form>
        用户名：
        <input type="text">
        密码：
        <input type="password">
    </form>

    <!--2、复选框-->
    <!--checkbox选择按钮是正方形，radio选择按钮是圆形-->
    <form>
        正确选项复选？
        一<input type="checkbox">
        二<input type="checkbox">
        三<input type="checkbox">
    </form>
    <form>
        正确选项复选？
        一<input type="radio">
        二<input type="radio">
        三<input type="radio">
    </form>

    <!--3、单选框-->
    <!--加上name属性的原因是这里需要将选项集合在一起，针对一个组的概念才能实现单选效果-->
    <form>
        正确选项单选？
        一<input type="radio" name="inputname">
        二<input type="radio" name="inputname">
        三<input type="radio" name="inputname">
    </form>

    <!--4、下拉列表-->
    <form>
        喜欢什么？
        <select>
            <option>苹果</option>
            <option>橘子</option>
            <option>香蕉</option>
        </select>
    </form>
    <!--<optgroup>标签用来将列表分组后再选择-->
    <form>
        喜欢什么？
        <select>
            <optgroup label="字母">
                <option>aa</option>
                <option>bb</option>
                <option>cc</option>
                <option>dd</option>
            </optgroup>
            <optgroup label="数字">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
            </optgroup>
        </select>
    </form>

    <!--5、文本域-->
    <form>
        <!--rows和cols属性用来指定宽度和高度-->
        <textarea rows="5" cols="30">请填写反馈内容</textarea>
    </form>
    <!--<textarea>可在表单外单独创建-->
    <!--placeholder属性用来指定占位文字-->
    <textarea placeholder="请输入反馈内容"></textarea>

    <!--6、创建按钮-->
    <form>
        <input type="button" value="点击按钮">
        <input type="submit" value="提交按钮">
    </form>

    <!--7、<label>     控制标签-->
    <label>label标签</label>
    <form>
        <label for="zhangsan">张三</label>
        <input type="radio" name="username" id="zhangsan"><br>
        <label for="lisi">李四</label>
        <input type="radio" name="username" id="lisi"><br>
        <input type="submit" value="提交">
    </form>

    <!--8、<fieldset>  定义域-->
    <!--9、<legend>    域的标题-->
    <!--文本在一个矩形边框的包围之中-->
    <fieldset>fieldset定义域
    <legend>legend域的标题</legend>
    </fieldset>
</body>
</html>

[PHP环境搭建]

1.下载安装软件XAMPP（XAMPP是最流行的PHP开发环境，其中包含Apache+MySQL+PHP+Perl）
地址：https://www.apachefriends.org/zh_cn/index.html

2.打开XAMPP
        选择Manage Servers
        打开Apache Web Server（变为绿后表示已经打开服务器）
        打开MySQL Database

3.安装位置
应用程序-XAMPP-htdocs（在这个文件夹下就可以运行PHP脚本了）

4.如何书写PHP脚本？采用什么软件来书写PHP脚本？
使用Eclipse（对java来说非常强大的开发工具）
Eclipse下载地址：http://www.eclipse.org/

http://blog.csdn.net/bluewindtalker/article/details/54562255

写PHP之前需要下载一个插件：
Help—Install New Software...—Work with:找到当前的版本—选择PHP Development Tools (PDT)下载安装—重启Eclipse—切换到PHP环境开发

5.Eclipse使用
        1.)创建PHP工程：
        右键—New—Project...—PHP Project—Next—输入Project Name—Finish。
        2.)创建PHP文件：
        右键工程—New—PHP File—输入File Name—Finish。
        3.)将*.php Copy到XAMPP目录下去执行这个脚本：
        <?php
        echo 'hello world!';
        4.)运行
        浏览器打开localhost，进入XAMPP for Mac OS X 界面，表示XAMPP安装成功了；
        运行文件：localhost/*.php 打印出hello world!就表示运行成功了。
        5.）切换Eclipse的工作空间至XAMPP目录
        File—Switch Workspace—Other...—选择Workspace指向的目录—OK；
        切换后，不用每次都Copy php文件，可以直接运行（右键工作区—Run As—Run on Server—Run Web Application）。

[表单提交数据与PHP交互]

效果如：图二

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单与PHP交互</title>
</head>
<body>
    <!--action指定提交到哪个服务器的地址，同时需要指定提交的方式method-->
    <!--method分两种get和post-->
    <!--get方式会将所有参数展示在地址当中，可以做资源定位，但存在一个长度大小的限制-->
    <!--post不会在地址中展示所有参数，比get方式要安全，但物理上比get方式要麻烦很多-->
    <form action="https://localhost/项目名/文件名.php" method="get">
        用户名：
        <input type="text" name="name">
        密码：
        <input type="password" name="password">
        <input type="submit" value="提交">
    </form>
</body>
</html>

服务器处理接收到的用户名和密码: