零基础学习Web开发(14)——button标签
文章目录
-
-
- 官方资料
- 学习正文
-
注：学习笔记基于小甲鱼学习视频，官方论坛： 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文件：
<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>
//定义变量并设置为空值
$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>欢迎鱼油： echo $name; ?>，您的表单已提交成功</p>
<p>更多信息会发送到您的邮箱： echo $email; ?></p>
</body>
</html>
通过get方法提交密码（不显示密码）：
<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 属性实现重写（点击清空已写内容）：
<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>
<button type="reset">重写button>
form>
body>
html>
使用 fbutton 的 formmethod 属性覆盖之前的 method ：
<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">GETbutton>
<button type="reset" formmethod="post">POSTbutton>
form>
body>
html>
