![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：qualified
Teacher's comments：完成的相当精彩, 特别是后面的get请求
Collection
Collection
7月22日作业
创建一个数组,使用foreach与它的替代语法,在html中输出数组内容;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>创建一个数组,使用foreach与它的替代语法,在html中输出数组内容;</title>
</head>
<style>
ul, li {
padding: 0;
margin: 0;
list-style: none;
}
.main-nav{
width: 300px;
height: 50px;
background-color: #1E9FFF;
}
.main-nav li{
width: 100px;
height: 50px;
line-height: 50px;
text-align: center;
float: left;
}
.main-nav li a{
color: #fff;
}
.small-nav{
width: 100px;
height: 220px;
background-color: #0C0C0C;
color: #00FFFF;
}
</style>
<body>
<?php
$yundong = '运动';
$yundongArr = ['瑜伽', '游泳','跳舞', '跑步'];
$yinyue = '音乐';
$yinyueArr = ['古典', '钢琴','流行', '经典'];
$jingxin = '静心';
$jingxinArr = ['打坐', '喝茶','冥想', '发呆'];
?>
<h1>女侠的个人爱好</h1>
<ul class="main-nav">
<li><?php echo $yundong; ?>
<ul class="small-nav">
<?php
foreach ($yundongArr as $key => $value){
echo '<li>'.$value.'</li>';
}
?>
</ul>
</li>
<li><?php echo $yinyue; ?>
<ul class="small-nav">
<?php
foreach ($yinyueArr as $key => $value){
echo '<li>'.$value.'</li>';
}
?>
</ul>
</li>
<li><?php echo $jingxin; ?>
<ul class="small-nav">
<?php
foreach ($jingxinArr as $key => $value){
echo '<li>'.$value.'</li>';
}
?>
</ul>
</li>
</ul>
</body>
</html>点击 "运行实例" 按钮查看在线实例
创建一个表单, 演示get和post的数据处理过程
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>创建一个表单, 演示get的数据处理过程</title>
</head>
<style>
</style>
<body>
<div>
<h1>普通会员信息</h1>
<form action="" method="get">
<p><label for="name" >姓名</label>
<input type="text" id="name" name="name" value="<?php echo isset($_GET['name']) ? $_GET['name'] : ''; ?>">
</p>
<p><label for="tell" >电话</label>
<input type="text" id="tell" name="tell" value="<?php echo isset($_GET['tell']) ? $_GET['tell'] : ''; ?>">
</p>
<p><label for="e-mail" >邮箱</label>
<input type="text" id="e-mail" name="e-mail" value="<?php echo isset($_GET['e-mail']) ? $_GET['e-mail'] : ''; ?>">
</p>
<p><button>登录</button></p>
<p><?php
if (isset($_GET['e-mail'])){ // if ($_GET['name']!=='') 如果换成这个为空,就会出错
echo '姓名:'.$_GET['name'];
echo'<br/>';
echo '电话:'.$_GET['tell'];
echo'<br/>';
echo '邮箱:'.$_GET['e-mail'];
}else{
echo '';
}
?></p>
</form>
</div>
</body>
</html>
<?php
echo '<pre>';
print_r($_GET);
?>点击 "运行实例" 按钮查看在线实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>创建一个表单, 演示post的数据处理过程</title>
</head>
<style>
</style>
<body>
<div>
<h1>普通会员信息</h1>
<form action="" method="post">
<p><label for="name" >姓名</label>
<input type="text" id="name" name="name" value="<?php echo isset($_POST['name']) ? $_POST['name'] : ''; ?>">
</p>
<p><label for="tell" >电话</label>
<input type="text" id="tell" name="tell" value="<?php echo isset($_POST['tell']) ? $_POST['tell'] : ''; ?>">
</p>
<p><label for="e-mail" >邮箱</label>
<input type="text" id="e-mail" name="e-mail" value="<?php echo isset($_POST['e-mail']) ? $_POST['e-mail'] : ''; ?>">
</p>
<p><button>登录</button></p>
<p><?php
if (isset($_POST['name'])){ // if ($_POST['name']!=='') 如果换成这个为空,就会出错
echo '姓名:'.$_POST['name'];
echo'<br/>';
echo '电话:'.$_POST['tell'];
echo'<br/>';
echo '邮箱:'.$_POST['e-mail'];
}else{
echo '';
}
?></p>
</form>
</div>
</body>
</html>
<?php
echo '<pre>';
print_r($_POST);
?>点击 "运行实例" 按钮查看在线实例