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：普通按鈕?？梢约ぐl提交表單的動作，一般配合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”， ### 為什么？該如何完善？ ###    
			 */

最終效果圖：