零基础学习HTML(14)——button标签（上）

最新推荐文章于 2023-06-04 15:18:38 发布

Dragon水魅

最新推荐文章于 2023-06-04 15:18:38 发布

阅读量381

点赞数

分类专栏：零基础学习Web开发文章标签： html css php

本文链接：https://blog.csdn.net/qq_43650934/article/details/108424872

版权

零基础学习Web开发专栏收录该内容

45 篇文章 2 订阅

订阅专栏

文章目录

- - 官方资料
  - 学习正文

注：学习笔记基于小甲鱼学习视频，官方论坛： https://fishc.com.cn/forum.php

官方资料

鱼C课程案例库：https://ilovefishc.com/html5/
html5速查手册：https://man.ilovefishc.com/html5/
css速查手册：https://man.ilovefishc.com/css3/

学习正文

以下提交效果需要服务器环境，代码大部分仅为html。
button标签：https://man.ilovefishc.com/pageHTML5/button.html
html文件：

<!DOCTYPE html>
<html>
<head>
    <title>第十五节课</title>
    <meta charset="utf-8">
	<title>一个最简单的表单</title>
</head>
<body>
	<form action="welcome.php" method="post">
		名字：<input type="text" name="name"><br><br>
		邮箱：<input type="text" name="email"><br><br>
		<button type="submit">提交</button>
	</form>
</body>
</html>

php文件：

<html>
<body>
	<?php
	//定义变量并设置为空值
	$name = $email = "";
	
	if ($_SERVER["REQUEST_METHOD"] == "POST") {
		$name = test_input($_POST["name"]);
		$email = test_input($_POST["email"]);
	}
	
	function test_input($data) {
		$data = trim($data);
		$data = stripslashes($data);
		$data = htmlspecialchars($data, ENT_QUOTES);
		return $data;
	}
	?>
	<p>欢迎鱼油：<?php echo $name; ?>，您的表单已提交成功</p>
	<p>更多信息会发送到您的邮箱：<?php echo $email; ?></p>
</body>
</html>

在这里插入图片描述
通过get方法提交密码（不显示密码）：

<!DOCTYPE html>
<html>
<head>
    <title>第十五节课</title>
    <meta charset="utf-8">
	<title>一个最简单的表单</title>
</head>
<body>
	<form action="welcome.php" method="get">
		账号：<input type="text" name="name"><br><br>
		密码：<input type="password" name="password"><br><br>
		<button type="submit">提交</button>
	</form>
</body>
</html>

在这里插入图片描述
使用 button 的 reset 属性实现重写（点击清空已写内容）：

<!DOCTYPE html>
<html>
<head>
    <title>第十五节课</title>
    <meta charset="utf-8">
	<title>一个最简单的表单</title>
</head>
<body>
	<form action="welcome.php" method="get">
		账号：<input type="text" name="name"><br><br>
		密码：<input type="password" name="password"><br><br>
		<!--使用button实现重写-->
		<button type="submit">提交</button>
		<button type="reset">重写</button>
	</form>
</body>
</html>

在这里插入图片描述
使用 fbutton 的 formmethod 属性覆盖之前的 method ：

<!DOCTYPE html>
<html>
<head>
    <title>第十五节课</title>
    <meta charset="utf-8">
	<title>一个最简单的表单</title>
</head>
<body>
	<form action="welcome.php" method="get">
		账号：<input type="text" name="name"><br><br>
		密码：<input type="password" name="password"><br><br>
		<button type="submit" formmethod="get">GET</button>
		<button type="reset" formmethod="post">POST</button>
	</form>
</body>
</html>