记录一下,怕忘了
表单
提交的内容如图
<form class="form" action="login.php" method="post">
<div>
<label class="first" for="tel"><span class="star">*</span>请输入手机号码:</label>
<input onkeyup="if(! /^\d+$/.test(this.value)){alert('只能0~9');this.value='';}" onfocus="setbackground(this.id)" onblur="getbackground(this.id)" id="tel" class="tel" name="tel" placeholder="请输入手机号码" type="tel" />
<button class="button" type="button">免费获取证码</button>
<p class="contex">完成注册后手机为你的微博登录号</p>
</div>
<div>
<label class="first" for="pass"><span class="star">*</span>创建密码:</label>
<input onfocus="setbackground(this.id)" onblur="getbackground(this.id)" id="pass" class="pass" placeholder="请输入密码" type="password" name="pass"/>
<p class="button textarea">为了你的账户安全请输入不同其他账户的密码</p>
</div>
<div>
<label class="first" for="name1"><span class="star">*</span>昵称:</label>
<input onfocus="setbackground(this.id)" onblur="getbackground(this.id)" id="name1" class="name" placeholder="请输入昵称" type="text" name="name"/>
<p class="common"></p>
</div>
<div>
<label class="first" for="boy"><span class="star">*</span>性别:</label>
<input type="radio" name="sex" value="boy" id="boy" /><label for="boy">男</label>
<input type="radio" name="sex" value="gril" id="gril"/><label for="gril">女</label>
<p class="common"></p>
</div>
<div>
<label class="first" for="select" ><span class="star">*</span>所在地:</label>
<select id="select" name="select">
<option>北京市</option>
<option>上海市</option>
<option>广州市</option>
<option>深圳市</option>
</select>
<select>
<option>海淀区</option>
<option>东城区</option>
<option>海珠区</option>
<option>福田区</option>
<option>越秀区</option>
<option>黄浦区</option>
</select>
<p class="common"></p>
</div>
<div>
<label class="first" for="boy"><span class="star">*</span>手机验证码:</label>
<input onfocus="setbackground(this.id)" onblur="getbackground(this.id)" type="text" name="code" id="code" />
<p class="common"></p>
</div>
<div>
<input type="submit" id="btn" class="btn">
</div>
</form>
PHP获取
<?php
$cityArr = array("广州市"=>"020", //用一个数组来保存城市对应的区号,实际中应该从数据库获取
"深圳市"=>"0755",
"北京市"=>"010",
"上海市"=>"021" );
?>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>php表单提交</title>
<style>
body{
margin: 0;padding: 0;
background-image: url(img/bk.png);
background-repeat: repeat;
}
.main{
margin-right:auto ;
margin-left: auto;
background-image: url(img/form1.png);
background-repeat: no-repeat;
width: 552px;
height: 552px;
}
.form{
width: 510px;
height: 410px;
padding-top: 105px;
position: relative;
}
label{
display: inline-block;
width: 160px;
padding-left:20px ;
text-align: right;
}
</style>
</head>
<body>
<div class="main">
<div class="form">
<p><label>你的手机号:</label>
<?php echo $_POST["tel"] ?>//获取提交的手机号,这里面的tel和input中的name相对应,下面都一样
</p>
<p><label>创建的密码:</label>
<?php echo $_POST["pass"] ?>
</p>
<p><label>昵称:</label>
<?php echo $_POST["name"] ?>
</p>
<p><label>性别:</label>
<?php echo $_POST["sex"] ?>
</p>
<p><label>所在地:</label>
<?php echo $_POST["select"] ?>
</p>
<p><label>所在区号:</label>
<?php echo $cityArr[$_POST["select"]] ?>//这里的select也是一样,要个下拉框弄个name属性
</p>
<p><label>手机验证码:</label>
<?php echo $_POST["code"] ?>
</p>
</div>
</div>
</body>
</html>
效果