> 백엔드 개발 > PHP 튜토리얼 > 자세한 설명 1: PHP와 웹 페이지 간의 상호 작용 예

자세한 설명 1: PHP와 웹 페이지 간의 상호 작용 예

coldplay.xixi
풀어 주다: 2023-04-09 13:08:01
앞으로
3190명이 탐색했습니다.

자세한 설명 1: PHP와 웹 페이지 간의 상호 작용 예

머리말

이 노트는 웹 양식의 관련 작업을 기록하며 주로 웹 페이지에서 서버에 데이터를 보내는 데 사용됩니다. 예를 들어, 일상적인 개발에서는 등록을 제출할 때 양식을 제출해야 합니다. 양식은 서버에서 처리된 후 사용자가 요구하는 정보를 다시 클라이언트로 전송하여 실현합니다. PHP와 웹 양식 간의 상호 작용.

관련 학습 권장 사항: php 프로그래밍(동영상)

Form

使用<form>元素,并在其中插入相关的表单元素,即可创建一个表单。

表单结构:

<form name="form_name" method="method" action="url" enctype="value" target="target_win">
…      //省略插入的表单元素
</form >
로그인 후 복사

form 태그의 속성은 다음과 같습니다.


양식 태그 속성Description
name양식 이름
method양식 제출 방법을 GET 또는 POST 방법으로 설정하세요
action상자 이것을 처리하세요 양식 페이지의 URL
enctype양식 콘텐츠의 인코딩 방법을 설정하세요
target반환된 정보의 표시 방법을 설정하세요
表单(form)由表单元素组成。常用的表单元素有以下几种标记:输入域标记<input>、选择域标记<select>和<option>、자세한 설명 1: PHP와 웹 페이지 간의 상호 작용 예<textarea>等。
로그인 후 복사

输入域标记

输入域标记是表单中最常用的标记之一。常用的文本框、按钮、单选按钮、复选框等构成了一个完整的表单。
语法格式如下:

<form>
<input name="file_name" type="type_name">
</form>
로그인 후 복사

参数name是指输入域的名称,参数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>
로그인 후 복사

运行效果:

자세한 설명 1: PHP와 웹 페이지 간의 상호 작용 예

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>
로그인 후 복사

运行结果:

자세한 설명 1: PHP와 웹 페이지 간의 상호 작용 예

密码域,用户在该文本框中输入的字符将被替换为*显示,以起到保密作用。

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>
로그인 후 복사

运行结果:

자세한 설명 1: PHP와 웹 페이지 간의 상호 작용 예

文件域,当文件上传时,可以用来打开一个模式窗口来选择文件。然后将文件通过表单上传到服务器,上传文件时需要指明表单的属性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>
로그인 후 복사

运行效果:

자세한 설명 1: PHP와 웹 페이지 간의 상호 작용 예

图像域是指可以用在提交按钮位置上的图片,这副图片具有按钮的功能

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>
로그인 후 복사

运行结果:

자세한 설명 1: PHP와 웹 페이지 간의 상호 작용 예

单选按钮,用于设置一组选择项,用户只能选择一项。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>
로그인 후 복사

运行结果:

자세한 설명 1: PHP와 웹 페이지 간의 상호 작용 예

复选框,允许用户选择多个选择项。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>
로그인 후 복사

运行结果:

자세한 설명 1: PHP와 웹 페이지 간의 상호 작용 예

将表单的内容提交到服务器端

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>
로그인 후 복사

运行结果:

자세한 설명 1: PHP와 웹 페이지 간의 상호 작용 예

清除与重置表单内容,用于清除表单中所有文本框的内容,并使选择菜单项恢复到初始值。

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>
로그인 후 복사

运行结果:

자세한 설명 1: PHP와 웹 페이지 간의 상호 작용 예

按钮可以激发提交表单的动作,可以在用户需要修改表单时,将表单恢复到初始的状态,还可以依照程序的需要发挥其他作用。

10、hidden

<input type="hidden" name="信息">
로그인 후 복사

隐藏域,用于在表单中以隐含方式提交变量值。隐藏域在页面中对于用户是不可见的,添加隐藏域的目的在于通过隐藏的方式收集或者发送信息。



选择域标记

语法格式如下:

<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: PHP와 웹 페이지 간의 상호 작용 예显示数据,省略则以자세한 설명 1: PHP와 웹 페이지 간의 상호 작용 예显示数据。

1、자세한 설명 1: PHP와 웹 페이지 간의 상호 작용 예

<!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>
로그인 후 복사

运行结果:

자세한 설명 1: PHP와 웹 페이지 간의 상호 작용 예

下拉列表框,通过选择域标记