• PHP学习——表单

    文章目录

    源码参考【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
    版权声明： 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明出处！
  • 相关阅读:
    调用ajax的返回值，需要再ajax之外的函数体里return，以及同步异步问题
    JavaScript的进阶之路（三）引用类型之Object类型和Array类型
    JavaScript的进阶之路（二）函数简介，变量、作用域和内存问题
    JavaScript的进阶之路（一）
    mui.ajax()和asp.net sql服务器数据交互【3】最终版
    mui.ajax()和asp.net sql服务器数据交互【2】json数组和封装
    mui.ajax()和asp.net sql服务器数据交互【1】
    js和.net后台交互
    input文字垂直居中和按钮对齐问题，兼容IE8
    ios 搜索请求之没有报文返回 之 utf-8 之谜
  • 原文地址：https://www.cnblogs.com/bad5/p/13022664.html
Copyright © 2020-2023  润新知