eb表单主要用来在网页中发送数据到服务器，经过程序处理中，将用户所需要的信息再传递给客户端的浏览器上。这样就形成了一个浏览者和网站之间的一个互动。

一、表单的提交方式

<form name=’NAME’ method=”GET” action=”URL”>
...
</form>

GET 提交或者GET()方法是将表单内容附加在URL后面的发送。在地址栏上的将会显示”“URL+用户传递的数据”组成一个大URL。URL和表单元素直接使用逗号“?”隔开的。多个表单元素用“&”隔开，每个表单元素的格式是name=value。注意大URL的长度限制在1M字符以内，数据量太大数据将会被截断，从而导致意外的处理结果。

POST 提交或者POST()方法是将将表单的信息作为一个数据块发送到服务器，在浏览器的地址栏不显示提交的信息。提交方式有表单的method属性，默认是GET()方法。表单的action是指向处理该表单页面的URL（相对位置或者绝对位置）

二、表单元素

一个表单里面就是表单元素。表单元素主要有输入域标记（<input>）、选择域标记（<select>）、文字域标记（<textarea>）

1、输入域标记

<input type=”type” name=”name” />

由type属性控制输入域的类型，name是输入域的名称。

下面介绍几个type属性

text：文本框属性，可以指定value（默认值），name（文本框的名称），size（文本框的宽度），maxlength（文本框的最大输入值）

password：密码域。用户输入的字符被替换成“*”

file：文件域。文件上传的使用。

image：图像域。可以用在提交按钮位置上的图片，具有按钮的功能。

radio：单选按钮。相同 name 代表在同一组，只能选择一项，checked 属性用来设置默认选中。

checkbox：复选框。允许选择多个选择项，checked 属性用来设置默认选中。

submit：提交按钮。提交表单内容到服务器。

reset：重置和清除表单内容。

button：普通按钮。可以激发提交表单的动作，一般配合javascript脚本进行表单处理。

hidden：隐藏域。在表单中隐藏方式提交变量值。对于用户是不可见的。提交的时候会一起随其他表单发送。

2、选择域标记

<select name=”name” value=”value” size=”3”>
<option value=”1”> 选项1 </option>
<option value=”2”> 选项2 </option>
</select>

name表示选择域的名称，size表示列表的行数，value 表示选项值，multiple表示该列表可以选择多项。默认只能选择一项。select 表示默认被选中

3、文字域标记

<textarea name=”name” value=”value” rows=10 cols=10 warp=”value”>
...
</textarea>

name表示文字域的名称，cols表示文字域的列数，rows表示文字域的行数，value表示文字域的默认值。warp用户设定显示和送出时的换行方式。warp=”off” 表示不自动换行，warp=”hard” 表示自动硬回车换行，换行标记一同发送到服务器，输出的时候也会被换行。warp=”soft”表示自动软回车换行，换行标记不会被发送到服务器，输出时候仍然为一列。

三、PHP参数传递的常用方法

php参数传递常用的方法有：$_POST[]、$_GET[]、$_SESSION[]，分别用户获取表单，URL与session变量的值。

1、$_POST[] 全局变量

可以获取到POST()方法提交过来的表单元素的值。

格式：$_POST[name]

name 为表单元素的name

<?php
//省略创建表单，文本框的name为username，method 是 POST
$username = $_POST[“username”];
?>

注意：在有些php版本中，可以直接$username就可以指定表单的值。这是可以通过设置php.ini的register_globals=ON/OFF。如果是ON，可以直接写成$username，反之则不可以。这里不建议设置为ON，推荐使用register_globals=OFF。

2、$_GET[] 全局变量

可以获取到GET()方法提交过来的表单元素的值。

格式：$_GET[name]

name 为表单元素的name

<?php
//省略创建表单，文本框的name为username ，method是 GET
$username = $_GET[“username”];
?>

不管是$_GET[]还是$_POST[]获取表单元素的值，表单元素的名称是区别字母大小写的。疏忽了大小写，程序允许有可能取不到值或者弹出错误的提示信息。

3、$_SESSION[] 变量

$_SESSION[] 可以获取表单元素的值。

格式：$_SESSION[name]

name为表单元素的name。

<?php
//省略创建表单，文本框的name为username
$username = $_SESSION[“username”];
?>

该方法获取到的变量值，保存之后任何页面都可以使用，这种方式很耗费系统资源，是要慎重使用的。

四、在WEB页面中嵌入PHP脚本

1、在html页面中添加php脚本

·web页面中随时添加<?php ... ?> 标记，这两个标记中间的文本都会被解释为php，标记之外的任何文本都将被认为是普通的html

2、对表单元素的value赋值

只需将所需要赋值的数据直接添加到value数据中。

<?php
$val = “123456”; //定义一个$val 的值
?>
<input type=”text” name=”username” value=”<?php echo $val; ?>” />

五、对URL传递的参数进行编码/解码

1、对URL传递的参数进行编码。

前面我们说道GET()方法提交的就是一个长URL，表单数据都在URL里。

如：http://url?username=admin&password=123456

很明显这样的传递会将参数暴露问题，所以必须对URL传递的参数进行编码。

语法格式：string urlencode(string str);

实现了字符串str的url编码。比如参数中带有空格，进行编码后空格会被换成%20。

 <a href="index.php?id=<?php echo urlencode("我是中文的字符串"); ?>"> 我是中文的字符串 </a>
浏览器地址栏：
http://localhost/index.php?id=%CE%D2%CA%C7%D6%D0%CE%C4%B5%C4%D7%D6%B7%FB%B4%AE
查看源代码：
<a href="index.php?id=%CE%D2%CA%C7%D6%D0%CE%C4%B5%C4%D7%D6%B7%FB%B4%AE"> 我是中文的字符串 </a>

2、对URL传递的参数进行解码

对已经URL编码过的字符串，在$_GET[]方法获取的时候则还需要进行解码才能知道原来的值。

语法格式：strIng urldecode(string str);

实现了字符串在URL编码后的str字符串进行解码。

 <a href="index.php?id=<?php echo urlencode("我是中文的字符串"); ?>"> 我是中文的字符串 </a>
 <?php
$str = $_GET["id"];
$str2 = urldecode($str);
echo "解码后Id：".$str2;
?>
浏览器地址栏：
http://localhost/index.php?id=%CE%D2%CA%C7%D6%D0%CE%C4%B5%C4%D7%D6%B7%FB%B4%AE
查看源代码：
<a href="index.php?id=%CE%D2%CA%C7%D6%D0%CE%C4%B5%C4%D7%D6%B7%FB%B4%AE"> 我是中文的字符串 </a>
页面输出：
我是中文的字符串
解码后Id：我是中文的字符串

明天我们来看看php和javascript的交互。

不多说，直奔主题

<!--html代码-->
<div>
			<ul>
				<li><a href="#home" class="active">主页</a></li>
				<li><a href="#news">新闻</a></li>
				<li>
					<div class="dropdown">
            <a href="#" class="dropbtn">下拉菜单</a>
              <div class="dropdown-content">
                <a href="#">链接 1</a> 
                <a href="#">链接 2</a> 
                <a href="#">链接 3</a>
              </div>
					</div>
				</li>
				<li><a href="#about">关于</a></li>
			</ul>
			<h3>导航栏上的下拉菜单</h3>
			<p>鼠标移动到 "下拉菜单" 链接先显示下拉菜单。</p>
		</div>

/*css代码*/
ul {
			     list-style-type: none;
			     margin: 0;
			     padding: 0;
			     background-color: #999;
			     overflow: hidden;
			     /*        注意: overflow:hidden 添加到 ul 元素,以防止 li 元素列表的外出(当li{float:left}时)。         来源链接：https://www.runoob.com/try/try.php?filename=trycss_navbar_horizontal_float&basepath=0        */
			 }
			
			 li {
			     float: left;
			 }
			
			 li a {
			     color: white;
			     padding: 14px 16px;
			     display: inline-block;
			     text-decoration: none;
			 }
			
			 li>a.active {
			     background-color: green;
			 }
			
			 li>a:hover:not(a.active),
			 .dropbtn:hover {
			     background-color: #555;
			 }
			
			 .dropdown-content {
			     display: none;
			     position: absolute;
			     /* 默认相对于<html>进行绝对定位 */
			     background-color: #f9f9f9;
			     min-width: 100px;
			     box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .2);
			 }
			
			 .dropdown-content a {
			     color: black;
			     display: block;
			     /* 因为<a>标签不是块元素，min-width:100px不会生效 */
			 }
			
			 .dropdown-content a:hover {
			     background-color: #f1f1f1;
			     color: deepskyblue;
			 }
			
			 .dropdown:hover .dropdown-content {
			     display: block;
           opacity: 0.9;/*下拉菜单半透明效果*/
			 }
			
			 /* 中间的空格表示，鼠标悬念在.dropdown上时，dropdown的子元素.dropdown-content变为块元素 */
			 /* ### 待完善 ###   
			    因为.dropdown只用过一次，觉得可以删除<div class="dropdown"></div>来减少代码量，尝试  将.dropdown:hover .dropdown-content {display: block;} 修改为.dropbtn:hover+.dropdown-content {display: block;} 并删除<div class="dropdown"></div>后，鼠标悬停在“下拉菜单”上，会显示下拉菜单， 但无法选中菜单中的“链接 x”， ### 为什么？该如何完善？ ###    
			 */

最终效果图：