文章目录

表单概述
表单和表单的提交

使用post方法提交表单
使用get方法提交表单

获取超链接传输的数据

通过网址方式传递

提交按钮、一般按钮、重置按钮
文本域和密码域
多行文本域和隐藏域
单选框、复选框和下拉列表框
用户注册

源码参考【GitHub】

表单概述

表单知识主要包括
- 表单
- 表单元素：单选按钮、复选按钮、文本域、文件域、隐藏域、密码框、列表框、普通按钮、提交按钮等

表单常用元素：

表单元素	说明
Input type=“checkbox”	复选框、允许用户在多个选项中选择多项
Input type=“radio”	单选框、用于设置一组选择项、用户只能选择个选项
Input type=“select”	下拉列表框、在列表中有多项可供选择,可单选或多项,默认为单选
Input type=“text”	单行文本域、允许输入-行文本
Input type=" password"	密码框、输入字符以密码形式显示
	多行文本框
Input type=“hidden”	隐藏域、以隐含的方式提交信息
Input type=“reset”	重置按钮、重置和清空表单内容
Input type=“submit”	提交按钮、表单信息提交到服务器
Input type=“button”	普通按钮、设置属性可以执行javascript脚本
Input type=“file”	文件域、当文件上传时用用来打开一个模式窗口以选择文件

表单属性

表单元素的属性	说明
name	名称属性、提交后通过名称可以获得表单元素的内容
id	类似名称属性、用于区别不同的表单元素、在javascript中经常通过id获取表单元素的内容
size	文本域的宽度、列表框的可见项目数
value	文本框的内容、按钮的显示文本，等等
rows	多行文本框的行数
cols	多行文本框的列数

表单和表单的提交

表单是一个容器，在页面中添加表单以及表单成员，需要将表单成员添加到表单内部
语法：
- <form action="url" method="get|post" target="...">...</form>

action：提供处理表单的格式（可以是URL或邮件地址）

method：表单提交方式（get方法把名称和值包含在URL中提交，post方法无需将名称和值包含在URL中）

target：提交结果的文档现实的位置，一般是：

_blank：在新的浏览器窗口中显示

_self：本窗口显示

_parent：父窗口显示

_top：把文档调入到原来的最顶部的浏览器窗口中

添加表单可以在DW中插入，也可以直接写代码

表单提交：
- post方法
- get方法

使用post方法提交表单

例：输入姓名、年龄，打印出姓名和年龄

<body>
<form id="form1" name="form1" method="post" action="">
  <p>请输入姓名：
    <label for="textfield"></label>
    <input type="text" name="textfield" id="textfield" />
  </p>
  <p>请输入年龄：
    <label for="textfield2"></label>
    <input type="text" name="textfield2" id="textfield2" />
  </p>
  <p>
    <input type="submit" name="button" id="button" value="提交" />
  </p>
</form>
</body>

<?php
if (isset($_POST['button'])){
	echo "Your Name is:".$_POST['textfield']."<br />";
	echo "Your Age is:".$_POST['textfield2'];
}
?>

运行结果：

在这里插入图片描述

例：两个页面显示

# 第一个页面
<body>
<form id="form1" name="form1" method="post" action="02_submit.php">
  <p>请输入姓名：
    <label for="textfield"></label>
    <input type="text" name="textfield" id="textfield" />
  </p>
  <p>请输入年龄：
    <label for="textfield2"></label>
    <input type="text" name="textfield2" id="textfield2" />
  </p>
  <p>
    <input type="submit" name="button" id="button" value="提交" />
  </p>
</form>
</body>

# 第二个页面02_submit.php
<body>
</body>

<?php
	echo "Your Name is:".$_POST['textfield']."<br />";
	echo "Your Age is:".$_POST['textfield2'];
?>

运行结果：提交后会跳转到02_submit.php，输出结果

使用get方法提交表单

例：

<body>
<form id="form1" name="form1" method="get" action="">
	请输入姓名：<input type="text" name="textname" /><br />
	请输入年龄：<input type="text" name="textage" /><br />
	<input type="submit" name="button" value="确定" />
</form>
</body>

<?php
if (isset($_GET['button'])){
	echo "Your Name is:".$_GET['textname']."<br />";
	echo "Your Age is:".$_GET['textage'];
}
?>

需要将POST更改为GET，使用两个界面来获取参数的方法相同

获取超链接传输的数据

获取超链接数据分两步进行：
- 通过超连接传输数据
- 通过$_GET[ ]获取数据
超链接格式：
- 文本形式：<a href=URL name=name target=target... >链接文字</a>
- 图片形式：<a href=URL name=name target=targt..><img src="图片" width="宽度" height="高度"...></>

# 04中的代码
<body>
<a href="04_link.php?name1=Bad&name2=Hello" target="_blank">点击这里</a><br />
<a href="04_link.php?name3=World" target="_blank"><img src="images/1.jpg"></a><br />
</body>

# 04_link中的代码
<?php
if (isset($_GET['name1'])){
	echo $_GET['name1']."<br />";
	echo $_GET['name2']."<br />";
	}

if (isset($_GET['name3']))
	echo $_GET['name3'];
?>

运行结果：点击这里会跳转输出Bad、Hello，点击图片会跳转输出World

在这里插入图片描述

通过网址方式传递

# 05页面代码
<body>
<form id="form1" name="form1" method="get" action="">
  <p>请输入姓名：
    <input type="text" name="textfield" id="textfield" />
  </p>
  <p>请输入年龄：
    <input type="text" name="textfield2" id="textfield2" />
  </p>
  <p>
    <input type="submit" name="button" id="button" value="提交" />
  </p>
</form>
</body>
</html>
<?php
if (isset($_GET['button'])){
	$name=$_GET['textfield'];
	$age=$_GET['textfield2'];
	echo "<script> window.location.href='05_link.php?name=$name&age=$age'</script>";   //通过网址传递参数
	}
?>

# 05_link.php中的代码
<?php
	echo $_GET['name']."<br>";
	echo $_GET['age']."<br>";
?>

运行结果：点击提交后，跳转页面输出结果

提交按钮、一般按钮、重置按钮

提交按钮把表单中的内容提交到服务器
- <input type="submit" name="按钮名称" id="按钮id" value="按钮上显示的文字" />
重置按钮用于将表单元素内容清空，方便重新输入
- <input type="reset" name="按钮名称" id="按钮id" value="按钮上显示的文字" />
一般按钮该类型的按钮所引发的事件需要用户自定义脚本

<input type= "utton" name="按钮名称" id="按钮id" value="按钮上显示的文字" onclick="function_name(){"/>

<script languange="javascript">
function function_name(){

}
</script>

例：

<body>
<form id="form1" name="form1" method="post" action="">
  <p>
    <input type="text" name="textfield" id="textfield" />
  </p>
  <p>
    <input type="submit" name="button" id="button" value="submit" />
    <input type="button" name="button2" id="button2" value="button" onclick="fun1();" />
    <input type="reset" name="button3" id="button3" value="reset" />
  </p>
</form>
</body>

<script>
function fun1(){
	alert('Bad')
	}
</script>

运行结果：点击submit提交，点击button弹出以下界面，点击reset重置文本框

在这里插入图片描述

文本域和密码域

文本域：一种表单元素，用户输入单行文本内容
格式：<input type="text" name="名称属性" value="文字内容" size="字符宽度"...>
- type：定义单行文本域
- name：独一无二的表单元素，可以用于访问表单元素内容
- size：文本域的宽度
- maxlenght：文本域中最多可以输入的字符数
- value：文本域现实的文本内容
密码域：与文本域类似，用于输入密码，输入的内容会以星号等内容显示出来
格式：<input type="password" name="名称属性" value="文字内容" size="字符宽度"..>

例：

# login.php页面内容
<body>
<form id="form1" name="form1" method="post" action="">
  <p>
    请输入用户名：
    <input type="text" name="user" id="textfield" />
  </p>
  <p>
    请输入密码：
    <input type="password" name="passwd" id="textfield2" />
  </p>
  <p>
    <input type="submit" name="button" id="button" value="提交" />
  </p>
</form>
</body>

<?php
if (isset($_POST['button'])){
	if (($_POST['user']=='bad')&&($_POST['passwd'])=='123'){
		$name=$_POST['user'];
		$passwd=$_POST['passwd'];
		echo "<script>window.location.href='login1.php?user=$name&passwd=$passwd';</script>";
		}
	}
?>

# login1.PHP页面内容
<?php
if (isset($_GET['user'])){
	if (($_GET['user']=='bad') && ($_GET['passwd']=='123'))
		echo "Welcom!";
	}
	else{
		echo "<script>window.location.href='login.php'</script>";
		}
?>

运行结果：输入用户名bad，密码123，跳转到新页面输出Welcome！

多行文本域和隐藏域

多行文本域：用于输入多行文本
格式：<textarea name="名称属性" cols="列数" "rows="行数">文本内容</textarea>
- name：名称属性
- cols：多行文本域的列数
- rows：多行文本域的行数
隐藏域：在页面中不显示，但是可以随提交而传递到服务器被服务器处理
格式：cinput type="hidden" name="名称属性" value"内容">
- type：指定隐藏域
- name：名称属性
- value：内容

<body>
<form id="form1" name="form1" method="post" action="">
  <p>
    <textarea name="textarea" id="textarea" cols="45" rows="5"></textarea>
    <input type="hidden" name="hiddenField" id="hiddenField" value="Bad" />
  </p>
  <p>
    <input type="submit" name="button" id="button" value="提交" />
  </p>
</form>
</body>

<?php
if (isset($_POST['button'])){
	echo $_POST['hiddenField']."<br />";
	echo nl2br($_POST['textarea']);
	}
?>

运行结果：文本域中输入的内容会被打印出来，nl2br是为了换行输出，输出的值会有隐藏域中Bad值

单选框、复选框和下拉列表框

单选框：用于多选一
格式：`文本
- type：指定单选框
- name：用于分组，以name名称形式返回选中值
- value：选中后的返回值
复选框：用于多选
格式：<input type="check" name="名称属性"value="值">文本
- type：指明复选框
- name：名称属性
- value：选中后返回的值
下拉列表框：用于在下拉列表中选择某个或某项项目
格式：

<select name="名称属性" size="可见列表项" multiple>
<option value="值1" selected="selected"></option>
<option value="值2">...</option>
</select>

例：

<body>
<form id="form1" name="form1" method="post" action="">
  <p>
    <label for="select"></label>
    <select name="select[]" id="select" multiple="multiple">
      <option value="一班">一班</option>
      <option value="二班">二班</option>
      <option value="三班">三班</option>
      <option value="四班">四班</option>
    </select>
  </p>
  <p>
    <input type="submit" name="button" id="button" value="提交" />
  </p>
</form>
</body>

<?php
if (isset($_POST['button'])){
	$class=implode(",",($_POST['select']));
	echo $class;
	}
?>

运行结果：将选中的选项全部输出

在这里插入图片描述

name="select[]"输出数组

multiple="multiple"可以多选

用户注册

例：

<body>
<form id="form1" name="form1" method="post" action="">
  <table width="598" height="177" border="1" align="center">
    <tr>
      <td width="117">用户名</td>
      <td width="465"><label for="textfield"></label>
      <input type="text" name="textfield" id="textfield" /></td>
    </tr>
    <tr>
      <td>密码</td>
      <td><label for="textfield2"></label>
      <input type="password" name="textfield2" id="textfield2" /></td>
    </tr>
    <tr>
      <td>性别</td>
      <td><input type="radio" name="sex" value="男" />
      <label for="radio">男
        <input type="radio" name="sex" value="女" />
      女</label></td>
    </tr>
    <tr>
      <td>职称</td>
      <td><label for="select"></label>
        <select name="select" id="select">
          <option value="教授">教授</option>
          <option value="副教授">副教授</option>
          <option value="讲师">讲师</option>
      </select></td>
    </tr>
    <tr>
      <td>爱好</td>
      <td><input type="checkbox" name="hobby[]" id="checkbox" value="轮滑"/>
      <label for="checkbox"></label>
      轮滑
      <input type="checkbox" name="hobby[]" id="checkbox2" value="篮球"/>
      <label for="checkbox2">篮球
        <input type="checkbox" name="hobby[]" id="checkbox3" value="乒乓球"/>
      乒乓球</label></td>
    </tr>
    <tr>
      <td>个人简历</td>
      <td><label for="textarea"></label>
      <textarea name="textarea" id="textarea" cols="45" rows="5"></textarea></td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td><input type="submit" name="button" id="button" value="提交" /></td>
    </tr>
  </table>
</form>
</body>

<?php
if (isset($_POST['button'])){
	echo "用户名:".$_POST['textfield']."<br />";
	echo "密码:".$_POST['textfield2']."<br />";
	echo "性别:".$_POST['sex']."<br />";
	echo "职称:".$_POST['select']."<br />";
	$hobbys=implode(",",$_POST['hobby']);
	echo "爱好:".$hobbys."<br />";
	echo "个人简介：".nl2br($_POST['textarea']);
	}
?>

运行结果：填写完成信息后，打印出信息

在这里插入图片描述

以上内容均属原创，如有不详或错误，敬请指出。

本文作者： 坏坏

本文链接： https://blog.csdn.net/qq_45668124/article/details/105961885

PHP学习——表单

文章目录

表单概述

表单和表单的提交

使用post方法提交表单

使用get方法提交表单

获取超链接传输的数据

通过网址方式传递

提交按钮、一般按钮、重置按钮

文本域和密码域

多行文本域和隐藏域

单选框、复选框和下拉列表框

用户注册

猜你喜欢