本篇內容主要講解“PHP與Web頁面的怎么實現交互”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“PHP與Web頁面的怎么實現交互”吧!
前言
這篇筆記記錄的是Web表單的相關操作，Web表單主要用來在網頁中發(fā)送數據到服務器。比如在日常開發(fā)中，提交注冊時需要提交表單，表單從客戶端傳送到服務器，經過服務器處理后，再將用戶所需要的信息傳遞回客戶端，進而實現PHP與Web表單的交互。
表單
使用
form標記的屬性如下表：
表單（form）由表單元素組成。常用的表單元素有以下幾種標記：輸入域標記、選擇域標記和、文字域標記等。</pre><p><strong>輸入域標記<input></strong></p><p>輸入域標記<input>是表單中最常用的標記之一。常用的文本框、按鈕、單選按鈕、復選框等構成了一個完整的表單。<br/>語法格式如下：</p><pre><form> <input name="file_name" type="type_name"> </form></pre><p>參數name是指輸入域的名稱，參數type是指輸入域的類型。在<input type="">標記中一共提供了10種類型的輸入區(qū)域，用戶所選擇使用的類型由type屬性決定。</p><p>下面舉幾個type屬性例子:</p><p><strong>1、text</strong></p><pre><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>PHP語言基礎</title> </head> <body> <form action="index.php" method="post" name="form1" enctype="multipart/form-data"> <tr bgcolor="#FFCC33"> <td width="103" height="25" align="right">文本框：</td> <td height="25" align="left"><input name="user" type="text" value="Bill" id="user" size="20" maxlength="100"></td> </tr> </form> <?php header("Content-Type:text/html; charset=gb2312"); ?> </body> </html></pre><p>運行效果：</p><p><img src="/upload/otherpic22/34675.gif" alt="PHP與Web頁面的怎么實現交互-上"></p><blockquote><p>name為文本框的名稱，value是文本框的默認值，size為文本框的寬度，maxlength為文本框的較大輸入字符數，可以通過id獲取文本框的值。</p></blockquote><p><strong>2、password</strong></p><pre><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>PHP語言基礎</title> </head> <body> <form action="index.php" method="post" name="form1" enctype="multipart/form-data"> <tr bgcolor="#FFCC33"> <td width="103" height="25" align="right">密碼域：</td> <td height="25" align="left"> <input name="pwd" type="password" value="1234567" id="password" size="20" maxlength="100"> </td> </tr> </form> <?php header("Content-Type:text/html; charset=gb2312"); ?> </body> </html></pre><p>運行結果：</p><p><img src="/upload/otherpic22/34676.gif" alt="PHP與Web頁面的怎么實現交互-上"></p><blockquote><p>密碼域，用戶在該文本框中輸入的字符將被替換為*顯示，以起到保密作用。</p></blockquote><p><strong>3、file</strong></p><pre><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>PHP語言基礎</title> </head> <body> <form action="index.php" method="post" name="form1" enctype="multipart/form-data"> <tr bgcolor="#FFCC33"> <td width="103" height="25" align="right">文件域：</td> <td height="25" align="left"> <input name="file" type="file" enctype="multipart/form-data" id="upfile" size="20" maxlength="200"> </td> </tr> </form> <?php header("Content-Type:text/html; charset=gb2312"); ?> </body> </html></pre><p>運行結果：</p><p><img src="/upload/otherpic22/34677.gif" alt="PHP與Web頁面的怎么實現交互-上"></p><blockquote><p>文件域，當文件上傳時，可以用來打開一個模式窗口來選擇文件。然后將文件通過表單上傳到服務器，上傳文件時需要指明表單的屬性enctype=”multipart/form-data”才可以實現上傳功能。</p></blockquote><p><strong>4、image</strong></p><pre><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>PHP語言基礎</title> </head> <body> <form action="index.php" method="post" name="form1" enctype="multipart/form-data"> <tr bgcolor="#FFCC33"> <td width="103" height="25" align="right">圖像域：</td> <td height="25" align="left"> <input name="image" type="image" src="btn__details_praise_selected.png" id="img" width="40" height="40" border="0"> </td> </tr> </form> <?php header("Content-Type:text/html; charset=gb2312"); ?> </body> </html></pre><p>運行效果：</p><p><img src="/upload/otherpic22/34678.gif" alt="PHP與Web頁面的怎么實現交互-上"></p><blockquote><p>圖像域是指可以用在提交按鈕位置上的圖片，這副圖片具有按鈕的功能</p></blockquote><p><strong>5、radio</strong></p><pre><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>PHP語言基礎</title> </head> <body> <form action="index.php" method="post" name="form1" enctype="multipart/form-data"> <tr bgcolor="#FFCC33"> <td width="103" height="25" align="right">單選按鈕：</td> <td height="25" align="left"> <input name="sex" type="radio" value="1" checked>男 <input name="sex" type="radio" value="0" >女 </td> </tr> </form> <?php header("Content-Type:text/html; charset=gb2312"); ?> </body> </html></pre><p>運行結果：</p><p><img src="/upload/otherpic22/34679.gif" alt="PHP與Web頁面的怎么實現交互-上"></p><blockquote><p>單選按鈕，用于設置一組選擇項，用戶只能選擇一項。checked屬性用來設置該單選按鈕默認被選中。</p></blockquote><p><strong>6、checkbox</strong></p><pre><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>PHP語言基礎</title> </head> <body> <form action="index.php" method="post" name="form1" enctype="multipart/form-data"> <tr bgcolor="#FFCC33"> <td width="103" height="25" align="right">復選框：</td> <td height="25" align="left"> <input name="checkbox" type="checkbox" value="1" checked>蘋果 <input name="checkbox" type="checkbox" value="1" checked>小米 <input name="checkbox" type="checkbox" value="1" >三星 </td> </tr> </form> <?php header("Content-Type:text/html; charset=gb2312"); ?> </body> </html></pre><p>運行結果：</p><p><img src="/upload/otherpic22/34680.gif" alt="PHP與Web頁面的怎么實現交互-上"></p><blockquote><p>復選框，允許用戶選擇多個選擇項。checked屬性用來設置該復選框默認被選中。</p></blockquote><p><strong>7、submit</strong></p><pre><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>PHP語言基礎</title> </head> <body> <form action="index.php" method="post" name="form1" enctype="multipart/form-data"> <tr bgcolor="#FFCC33"> <td width="103" height="25" align="right">提交按鈕：</td> <td height="25" align="left"> <input name="submit" type="submit" value="提交"> </td> </tr> </form> <?php header("Content-Type:text/html; charset=gb2312"); ?> </body> </html></pre><p>運行結果：</p><p><img src="/upload/otherpic22/34681.gif" alt="PHP與Web頁面的怎么實現交互-上"></p><blockquote><p>將表單的內容提交到服務器端</p></blockquote><p><strong>8、reset</strong></p><pre><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>PHP語言基礎</title> </head> <body> <form action="index.php" method="post" name="form1" enctype="multipart/form-data"> <tr bgcolor="#FFCC33"> <td width="103" height="25" align="right">重置按鈕：</td> <td height="25" align="left"> <input name="reset" type="reset" value="重置"> </td> </tr> </form> <?php header("Content-Type:text/html; charset=gb2312"); ?> </body> </html></pre><p>運行結果：</p><p><img src="/upload/otherpic22/34682.gif" alt="PHP與Web頁面的怎么實現交互-上"></p><blockquote><p>清除與重置表單內容，用于清除表單中所有文本框的內容，并使選擇菜單項恢復到初始值。</p></blockquote><p><strong>9、button</strong></p><pre><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>PHP語言基礎</title> </head> <body> <form action="index.php" method="post" name="form1" enctype="multipart/form-data"> <tr bgcolor="#FFCC33"> <td width="103" height="25" align="right">普通按鈕：</td> <td height="25" align="left"> <input name="button" type="button" value="注冊"> </td> </tr> </form> <?php header("Content-Type:text/html; charset=gb2312"); ?> </body> </html></pre><p>運行結果：</p><p><img src="/upload/otherpic22/34683.gif" alt="PHP與Web頁面的怎么實現交互-上"></p><blockquote><p>按鈕可以激發(fā)提交表單的動作，可以在用戶需要修改表單時，將表單恢復到初始的狀態(tài)，還可以依照程序的需要發(fā)揮其他作用。</p></blockquote><p><strong>10、hidden</strong></p><pre><input type="hidden" name="信息"></pre><blockquote><p>隱藏域，用于在表單中以隱含方式提交變量值。隱藏域在頁面中對于用戶是不可見的，添加隱藏域的目的在于通過隱藏的方式收集或者發(fā)送信息。</p><br/><br/></blockquote><p><strong>選擇域標記<select>和<option></strong></p><p>通過選擇域標記<select>和<option>可以建立一個列表或者菜單。菜單的使用是為了節(jié)省空間，正常狀態(tài)下只能看到一個選項，單擊右側的下三角按鈕打開菜單后才能看到全部的選項。列表可以顯示一定數量的選項，如果超出了這個數量，會自動出現滾動條，瀏覽者可以通過拖動滾動條來查看各選項。</p><p>語法格式如下：</p><pre><select name="name" size="value" multiple> <option value="value" selected>選項1</option> <option value="value">選項2</option> <option value="value">選項3</option> … </select></pre><blockquote><p>參數name表示選擇域的名稱；參數size表示列表的行數；參數value表示菜單選項值；參數multiple表示以菜單方式顯示數據，省略則以列表方式顯示數據。</p></blockquote><p><strong>1、列表方式</strong></p><pre><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>PHP語言基礎</title> </head> <body> <form action="index.php" method="post" name="form1" enctype="multipart/form-data"> <tr bgcolor="#FFCC33"> <td width="103" height="25" align="right">喜歡哪種編程語言：</td> <td height="25" align="center" > <select name="name" id="code"> <option value="1" selected>Java語言</option> <option value="2">C語言</option> <option value="3">JS語言</option> <option value="4">PHP語言</option> </select> </td> </tr> </form> <?php header("Content-Type:text/html; charset=gb2312"); ?> </body> </html></pre><p>運行結果：</p><p><img src="/upload/otherpic22/34684.gif" alt="PHP與Web頁面的怎么實現交互-上"></p><blockquote><p>下拉列表框，通過選擇域標記<select>和<option>建立一個列表，列表可以顯示一定數量的選項，如果超出了這個數量，會自動出現滾動條，瀏覽者可以通過拖動滾動條來查看各選項。selected屬性用來設置該菜單時默認被選中。</p></blockquote><p><strong>2、菜單方式</strong></p><pre><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>PHP語言基礎</title> </head> <body> <form action="index.php" method="post" name="form1" enctype="multipart/form-data"> <tr bgcolor="#FFCC33"> <td width="103" height="25" align="right">喜歡哪種編程語言：</td> <td height="25" align="center" > <select name="name" id="code" multiple> <option value="1" selected>Java語言</option> <option value="2">C語言</option> <option value="3">JS語言</option> <option value="4">PHP語言</option> </select> </td> </tr> </form> <?php header("Content-Type:text/html; charset=gb2312"); ?> </body> </html></pre><p>運行結果：</p><p><img src="/upload/otherpic22/34685.gif" alt="PHP與Web頁面的怎么實現交互-上"></p><pre>> multiple屬性用于菜單列表```<select>```標記中，指定該選項的用戶可以使用Shift和Ctrl鍵進行多選</pre><p><strong>文字域標記<textarea></strong></p><p>文字域標記<textarea>用來制作多行的文字域，可以在其中輸入更多的文本。</p><p>語法格式如下：</p><pre><textarea name="name" rows=value cols=value value="value" warp="value"> …文本內容
參數name表示文字域的名稱；rows表示文字域的行數；cols表示文字域的列數（這里的rows和cols以字符為單位）；value表示文字域的默認值，warp用于設定顯示和送出時的換行方式，值為off表示不自動換行，值為hard表示自動硬回車換行，換行標記一同被發(fā)送到服務器，輸出時也會換行，值為soft表示自動軟回車換行，換行標記不會被發(fā)送到服務器，輸出時仍然為一列。
例如：
PHP語言基礎 請寫下你的留言： 留言...
重慶分公司
重慶分公司