提交前
提交后
<?php
$Name=isset($_POST['name'])?$_POST['name']:null;
$Psd=isset($_POST['psd'])?$_POST['psd']:null;
switch (@$_POST['hobby']) {
case '1';
$Hobby='技术宅';
break;
case '2';
$Hobby='口才王';
break;
case '3';
$Hobby='颜值帝';
};
$Gender=isset($_POST['gender'])?$_POST['gender']:null;
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>粘性表单</title>
<style>
.main {
margin-top: 200px;
text-align: center;
}
.input {
width: 175px;
}
.btn {
width: 50px;
height: 21px;
border-radius: 5px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="main">
<h2>注册<small style="color: skyblue">Login</small></h2>
<form action="" method="post">
<p>
<label>用 户: <input type="text" name="name" class="input" value="<?php echo $Name ?>"></label>
</p>
<p><span id="ero1" style="color: red">
<?php
if (empty($Name)){
echo '<script>
var ero1 = document.getElementsByTagName("span")[0];
ero1.innerHTML="请输入用户名"
</script>';
}
?>
</span></p>
<p><label>密 码: <input type="password" name="psd" class="input" required value="<?php echo $Psd ?>"></label></p>
<p>性 别:
<label><input type="radio" name="gender" value="male" class="gender" <?php echo $Gender='male'?'checked':null; ?> >男</label>
<label><input type="radio" name="gender" value="female" class="gender" <?php echo $Gender='female'?'checked':null; ?> >女</label>
<p><label>身 份:
<select name="hobby" class="input">
<option value="1">技术宅</option>
<option value="2" <?php echo @$Hobby=='口才王'?'selected':null; ?> >口才王</option>
<option value="3" <?php echo @$Hobby=='颜值帝'?'selected':null; ?> >颜值帝</option>
</select>
</label>
</p>
<p>
<input type="submit" name="submit" value="提交" class="btn">
<button class="btn">重置</button>
</p>
</form>
</div>
</body>
<script>
var Reset = document.getElementsByClassName('btn')[1];
//重置按钮点击事件
Reset.onclick = function () {
//直接获取了我用户名的input里的value属性，然后直接给了空值
document.getElementsByTagName('input')[0].value='';
document.getElementsByTagName('input')[1].value='';
//跟js结合的话最好使用button
}
</script>
</html>学习感想：
其中运用了@符过滤了报错信息，@符真是让人又爱又恨，有时候总会出现关于变量undefined的报错，但是加上@后就不会将改报错信息展现出来，但其实并没真正解决问题。
关于与js结合时，尽量选用button按钮来进行事件绑定，简单直接
