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'];
}
?>
运行结果：
例：两个页面显示
# 第一个页面
<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
通过网址方式传递
# 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重置文本框
文本域和密码域
- 文本域：一种表单元素，用户输入单行文本内容
- 格式：
- 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>
运行结果：将选中的选项全部输出
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']);
}
?>
运行结果：填写完成信息后，打印出信息
以上内容均属原创，如有不详或错误，敬请指出。
本文链接： https://blog.csdn.net/qq_45668124/article/details/105961885
版权声明： 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明出处！