主頁 > 知識庫 > PHP與Web頁面的交互示例詳解一

PHP與Web頁面的交互示例詳解一

前言

這篇筆記記錄的是Web表單的相關(guān)操作，Web表單主要用來在網(wǎng)頁中發(fā)送數(shù)據(jù)到服務(wù)器。比如在日常開發(fā)中，提交注冊時需要提交表單，表單從客戶端傳送到服務(wù)器，經(jīng)過服務(wù)器處理后，再將用戶所需要的信息傳遞回客戶端，進而實現(xiàn)PHP與Web表單的交互。

表單

使用form>元素，并在其中插入相關(guān)的表單元素，即可創(chuàng)建一個表單。

表單結(jié)構(gòu)：

form name="form_name" method="method" action="url" enctype="value" target="target_win">
…   //省略插入的表單元素
/form >

form標記的屬性如下表：

form標記的屬性	說明
name	表單名稱
method	設(shè)置表單的提交方式，GET或者POST方法
action	紙箱處理該表單頁面的URL
enctype	設(shè)置表單內(nèi)容的編碼方式
target	設(shè)置返回信息的顯示方式

表單（form）由表單元素組成。常用的表單元素有以下幾種標記：輸入域標記input>、選擇域標記select>和option>、文字域標記textarea>等。

輸入域標記input>

輸入域標記input>是表單中最常用的標記之一。常用的文本框、按鈕、單選按鈕、復選框等構(gòu)成了一個完整的表單。
語法格式如下：

form>
input name="file_name" type="type_name">
/form>

參數(shù)name是指輸入域的名稱，參數(shù)type是指輸入域的類型。在input type="">標記中一共提供了10種類型的輸入?yún)^(qū)域，用戶所選擇使用的類型由type屬性決定。

下面舉幾個type屬性例子:

1、text

!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語言基礎(chǔ)/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>

運行效果：

name為文本框的名稱，value是文本框的默認值，size為文本框的寬度，maxlength為文本框的最大輸入字符數(shù)，可以通過id獲取文本框的值。

2、password

!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語言基礎(chǔ)/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>

運行結(jié)果：

密碼域，用戶在該文本框中輸入的字符將被替換為*顯示，以起到保密作用。

3、file

!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語言基礎(chǔ)/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>

運行結(jié)果：

文件域，當文件上傳時，可以用來打開一個模式窗口來選擇文件。然后將文件通過表單上傳到服務(wù)器，上傳文件時需要指明表單的屬性enctype=”multipart/form-data”才可以實現(xiàn)上傳功能。

4、image

!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語言基礎(chǔ)/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>

運行效果：

圖像域是指可以用在提交按鈕位置上的圖片，這副圖片具有按鈕的功能

5、radio

!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語言基礎(chǔ)/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>

運行結(jié)果：

單選按鈕，用于設(shè)置一組選擇項，用戶只能選擇一項。checked屬性用來設(shè)置該單選按鈕默認被選中。

6、checkbox

!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語言基礎(chǔ)/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>

運行結(jié)果：

復選框，允許用戶選擇多個選擇項。checked屬性用來設(shè)置該復選框默認被選中。

7、submit

!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語言基礎(chǔ)/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>

運行結(jié)果：

將表單的內(nèi)容提交到服務(wù)器端

8、reset

!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語言基礎(chǔ)/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>

運行結(jié)果：

清除與重置表單內(nèi)容，用于清除表單中所有文本框的內(nèi)容，并使選擇菜單項恢復到初始值。

9、button

!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語言基礎(chǔ)/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>

運行結(jié)果：

按鈕可以激發(fā)提交表單的動作，可以在用戶需要修改表單時，將表單恢復到初始的狀態(tài)，還可以依照程序的需要發(fā)揮其他作用。

10、hidden

input type="hidden" name="信息">

隱藏域，用于在表單中以隱含方式提交變量值。隱藏域在頁面中對于用戶是不可見的，添加隱藏域的目的在于通過隱藏的方式收集或者發(fā)送信息。

選擇域標記select>和option>

通過選擇域標記select>和option>可以建立一個列表或者菜單。菜單的使用是為了節(jié)省空間，正常狀態(tài)下只能看到一個選項，單擊右側(cè)的下三角按鈕打開菜單后才能看到全部的選項。列表可以顯示一定數(shù)量的選項，如果超出了這個數(shù)量，會自動出現(xiàn)滾動條，瀏覽者可以通過拖動滾動條來查看各選項。

語法格式如下：

select name="name" size="value" multiple>
option value="value" selected>選項1/option>
option value="value">選項2/option>
option value="value">選項3/option>
…
/select>

參數(shù)name表示選擇域的名稱；參數(shù)size表示列表的行數(shù)；參數(shù)value表示菜單選項值；參數(shù)multiple表示以菜單方式顯示數(shù)據(jù)，省略則以列表方式顯示數(shù)據(jù)。

1、列表方式

!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語言基礎(chǔ)/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>

運行結(jié)果：

下拉列表框，通過選擇域標記select>和option>建立一個列表，列表可以顯示一定數(shù)量的選項，如果超出了這個數(shù)量，會自動出現(xiàn)滾動條，瀏覽者可以通過拖動滾動條來查看各選項。selected屬性用來設(shè)置該菜單時默認被選中。

2、菜單方式

!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語言基礎(chǔ)/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>

運行結(jié)果：

> multiple屬性用于菜單列表```select>```標記中，指定該選項的用戶可以使用Shift和Ctrl鍵進行多選

文字域標記textarea>

文字域標記textarea>用來制作多行的文字域，可以在其中輸入更多的文本。

語法格式如下：

textarea name="name" rows=value cols=value value="value" warp="value">
 …文本內(nèi)容
/textarea>

參數(shù)name表示文字域的名稱；rows表示文字域的行數(shù)；cols表示文字域的列數(shù)（這里的rows和cols以字符為單位）；value表示文字域的默認值，warp用于設(shè)定顯示和送出時的換行方式，值為off表示不自動換行，值為hard表示自動硬回車換行，換行標記一同被發(fā)送到服務(wù)器，輸出時也會換行，值為soft表示自動軟回車換行，換行標記不會被發(fā)送到服務(wù)器，輸出時仍然為一列。

例如：

!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語言基礎(chǔ)/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" >
  textarea rows="5" cols="20" name="remark" id="remark">留言.../textarea>
 /td>
 /tr>
/form>
?php
header("Content-Type:text/html; charset=gb2312");
?>
/body>
/html>

運行結(jié)果：

到此這篇關(guān)于PHP與Web頁面的交互示例詳解一的文章就介紹到這了,更多相關(guān)PHP與Web頁面的交互內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

PHP與Web頁面交互操作實例分析
PHP與Web頁面的交互示例詳解二

標簽：棗莊衡水萍鄉(xiāng) 衢州廣元江蘇大理蚌埠

巨人網(wǎng)絡(luò)通訊聲明：本文標題《PHP與Web頁面的交互示例詳解一》，本文關(guān)鍵詞；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請?zhí)峁┫嚓P(guān)信息告之我們，我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。