极客学院----H5的相关笔记----H5基础（5）

一.HTML表单

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

2.常用表单标签：

   form-------------标签

   input-------------输入域

   textarea--------文本域

   label-------------控制标签

   fieldset----------定义域

   legend-----------域的标题

   select------------选择列表

   optgroup--------选项组

   option-----------下拉列表中的选项

   button-----------按钮

相关代码如下：

    <form>
        <h2>登录</h2><br/>
        姓名：<input type="text"><br/><br/>
        密码：<input type="password"><br/><br/>
        <!-- 复选框的学习 -->
        你喜欢的水果有哪些？<br/><br/>
        <input type="checkbox">西瓜
        <input type="checkbox">苹果
        <input type="checkbox">草莓
        <br/><br/>
        <!-- 单选按钮的学习：添加name属性是为了让其在同一个组，实现单选的效果 -->
        请选择你的性别<br/><br/>
        <input type="radio" name="sex">男
        <input type="radio" name="sex">女
        <br/><br/>
        <!-- 下拉框的学习 -->
        请选择你要学习的专业<br/><br/>
        <select>
            <option>ios</option>
            <option>android</option>
            <option>html5</option>
            <option>swift</option>
        </select>
        <br/><br/>
        <!-- 按钮的学习 -->
        <input type="button" value="按钮">
        <input type="submit" value="确定">
    </form>
    <!-- 文本域的学习，在表单外创建 -->
    <textarea cols="30" rows="10">请填写个人简介</textarea>

二.PHP环境搭建

1.XAMPP的下载：www.apachefriends.org

   安装成功后，将apache和mysql开启，即可

2.在xampp\htdocs的目录下，即可运行php的脚本

3.在eclipse中，点击help-->InstallNewSoftware-->选择当前版本的eclipse，在下边出现的选项中选择

   ProgrammingLanguages-->选择php，（将左下的四个选项中第四个取消）然后next就行，然后重启eclipse。

   在右上角的方格中选择php即可。

4.运行：（1）将在此创建的.php文件放到2的目录下，在浏览器上输入localhost/文件名.php,回车即可。

              （2）直接将eclipse的工作空间设成2，这样，右键即可运行

三.表单提交数据与PHP交互（登录的例子）

用户端代码如下：

<!-- action:提交的地址 get:可以实现资源定位  post:比get更安全-->
    <form action="http://localhost/MyService/Service.php" method="post">
        账户：<input type="text" name="name"><br/><br/>
        密码：<input type="password" name="password"><br/><br/>
        <input type="submit" value="提交">
    </form>

服务端（PHP）代码如下：

<?php
echo "账户：".$_POST['name']."<br/>密码：".$_POST['password'];