PHP学习——表单

文章目录

  • 表单概述
  • 表单和表单的提交
    • 使用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 多行文本框的列数

表单和表单的提交

  • 表单是一个容器,在页面中添加表单以及表单成员,需要将表单成员添加到表单内部
  • 语法:
    • ...
  • 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>

";
	echo "Your Age is:".$_POST['textfield2'];
}
?>

运行结果:

PHP学习——表单_第1张图片

:两个页面显示

# 第一个页面
<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>

";
	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>

";
	echo "Your Age is:".$_GET['textage'];
}
?>
需要将POST更改为GET,使用两个界面来获取参数的方法相同

获取超链接传输的数据

  • 获取超链接数据分两步进行:
    • 通过超连接传输数据
    • 通过$_GET[ ]获取数据
  • 超链接格式:
# 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中的代码
";
	echo $_GET['name2']."
"; } if (isset($_GET['name3'])) echo $_GET['name3']; ?>

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

PHP学习——表单_第2张图片

通过网址方式传递

# 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>
 window.location.href='05_link.php?name=$name&age=$age'";   //通过网址传递参数
	}
?>

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

运行结果:点击提交后,跳转页面输出结果

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

  • 提交按钮把表单中的内容提交到服务器
  • 重置按钮用于将表单元素内容清空,方便重新输入
  • 一般按钮该类型的按钮所引发的事件需要用户自定义脚本
<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重置文本框

PHP学习——表单_第3张图片

文本域和密码域

  • 文本域:一种表单元素,用户输入单行文本内容
  • 格式:
    • type:定义单行文本域
    • name:独一无二的表单元素,可以用于访问表单元素内容
    • size:文本域的宽度
    • maxlenght:文本域中最多可以输入的字符数
    • value:文本域现实的文本内容
  • 密码域:与文本域类似,用于输入密码,输入的内容会以星号等内容显示出来
  • 格式:

# 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>

window.location.href='login1.php?user=$name&passwd=$passwd';";
		}
	}
?>

# login1.PHP页面内容
window.location.href='login.php'";
		}
?>

运行结果:输入用户名bad,密码123,跳转到新页面输出Welcome!

多行文本域和隐藏域

  • 多行文本域:用于输入多行文本
  • 格式:
    • 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>

";
	echo nl2br($_POST['textarea']);
	}
?>

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

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

  • 单选框:用于多选一
  • 格式:`文本
    • type:指定单选框
    • name:用于分组,以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学习——表单_第4张图片

  • 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> td>
      <td><input type="submit" name="button" id="button" value="提交" />td>
    tr>
  table>
form>
body>

";
	echo "密码:".$_POST['textfield2']."
"; echo "性别:".$_POST['sex']."
"; echo "职称:".$_POST['select']."
"; $hobbys=implode(",",$_POST['hobby']); echo "爱好:".$hobbys."
"; echo "个人简介:".nl2br($_POST['textarea']); } ?>

运行结果:填写完成信息后,打印出信息

PHP学习——表单_第5张图片

以上内容均属原创,如有不详或错误,敬请指出。
本文作者: 坏坏

你可能感兴趣的:(PHP学习笔记整理)