文章目录
源码参考【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> </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 许可协议。转载请注明出处!