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

阿新 • • 發佈：2020-08-05

前言

這篇筆記記錄的是Web表單的相關操作，Web表單主要用來在網頁中傳送資料到伺服器。比如在日常開發中，提交註冊時需要提交表單，表單從客戶端傳送到伺服器，經過伺服器處理後，再將使用者所需要的資訊傳遞迴客戶端，進而實現PHP與Web表單的互動。

表單

使用<form>元素，並在其中插入相關的表單元素，即可建立一個表單。

表單結構：

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

form標記的屬性如下表：

form標記的屬性說明

name 表單名稱

method 設定表單的提交方式，GET或者POST方法

action 紙箱處理該表單頁面的URL

enctype 設定表單內容的編碼方式

target 設定返回資訊的顯示方式

form標記的屬性	說明
name	表單名稱
method	設定表單的提交方式，GET或者POST方法
action	紙箱處理該表單頁面的URL
enctype	設定表單內容的編碼方式
target	設定返回資訊的顯示方式

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

輸入域標記<input>

輸入域標記<input>是表單中最常用的標記之一。常用的文字框、按鈕、單選按鈕、複選框等構成了一個完整的表單。
語法格式如下：

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

引數name是指輸入域的名稱，引數type是指輸入域的型別。在<input type="">標記中一共提供了10種類型的輸入區域，使用者所選擇使用的型別由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語言基礎</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為文字框的最大輸入字元數，可以通過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語言基礎</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>

執行結果：

新增一個祕密域

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

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語言基礎</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>

執行結果：

新增一個檔案域

檔案域，當檔案上傳時，可以用來開啟一個模式視窗來選擇檔案。然後將檔案通過表單上傳到伺服器，上傳檔案時需要指明表單的屬性enctype=”multipart/form-data”才可以實現上傳功能。

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語言基礎</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語言基礎</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>

執行結果：

新增一組單選按鈕

單選按鈕，用於設定一組選擇項，使用者只能選擇一項。checked屬性用來設定該單選按鈕預設被選中。

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語言基礎</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>

執行結果：

新增一組複選框

複選框，允許使用者選擇多個選擇項。checked屬性用來設定該複選框預設被選中。

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語言基礎</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>

執行結果：

新增一個提交按鈕

將表單的內容提交到伺服器端

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語言基礎</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>

執行結果：

新增一個重置按鈕

清除與重置表單內容，用於清除表單中所有文字框的內容，並使選擇選單項恢復到初始值。

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語言基礎</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>

執行結果：

提交一個普通按鈕

按鈕可以激發提交表單的動作，可以在使用者需要修改表單時，將表單恢復到初始的狀態，還可以依照程式的需要發揮其他作用。

10、hidden

<input type="hidden" name="資訊">

隱藏域，用於在表單中以隱含方式提交變數值。隱藏域在頁面中對於使用者是不可見的，新增隱藏域的目的在於通過隱藏的方式收集或者傳送資訊。

選擇域標記<select>和<option>

通過選擇域標記<select>和<option>可以建立一個列表或者選單。選單的使用是為了節省空間，正常狀態下只能看到一個選項，單擊右側的下三角按鈕開啟選單後才能看到全部的選項。列表可以顯示一定數量的選項，如果超出了這個數量，會自動出現滾動條，瀏覽者可以通過拖動滾動條來檢視各選項。

語法格式如下：

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

引數name表示選擇域的名稱；引數size表示列表的行數；引數value表示選單選項值；引數multiple表示以選單方式顯示資料，省略則以列表方式顯示資料。

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語言基礎</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>

執行結果：

列表方式

下拉列表框，通過選擇域標記<select>和<option>建立一個列表，列表可以顯示一定數量的選項，如果超出了這個數量，會自動出現滾動條，瀏覽者可以通過拖動滾動條來檢視各選項。selected屬性用來設定該選單時預設被選中。

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語言基礎</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>

執行結果：

選單方式

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

文字域標記<textarea>

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

語法格式如下：

<textarea name="name" rows=value cols=value value="value" warp="value">
  …文字內容
</textarea>

引數name表示文字域的名稱；rows表示文字域的行數；cols表示文字域的列數（這裡的rows和cols以字元為單位）；value表示文字域的預設值，warp用於設定顯示和送出時的換行方式，值為off表示不自動換行，值為hard表示自動硬回車換行，換行標記一同被髮送到伺服器，輸出時也會換行，值為soft表示自動軟回車換行，換行標記不會被髮送到伺服器，輸出時仍然為一列。

例如：

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

執行結果：

文字域標記

到此這篇關於PHP與Web頁面的互動示例詳解一的文章就介紹到這了,更多相關PHP與Web頁面的互動內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！

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

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

PHP與Web頁面互動操作例項分析

PHP與Web頁面互動例子的實現

PHP與Web頁面的互動示例詳解二

JavaScript實現與web通訊的方法詳解

專案基礎回顧：SpringBoot與PageHelper的整合示例詳解

mysql檢視死鎖與去除死鎖示例詳解

PHP方法的返回值示例詳解

PHP中isset、empty的用法與區別示例詳解

web php include攻防世界php安全示例詳解

Redis全量複製與部分複製示例詳解

Redis如何儲存物件與集合示例詳解

python實現與redis互動操作詳解

Golang中的Unicode與字串示例詳解

Java陣列的宣告與建立示例詳解

Spring與bean有關的生命週期示例詳解

PHP日期和時間函式的使用示例詳解

PHP基於phpqrcode類生成二維碼的方法示例詳解

php+js實現點贊功能的示例詳解

JavaScript淺層克隆與深度克隆示例詳解

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

相關推薦