標簽（空格分隔）： html
首先貼代碼
1悲幅、html與javascript
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<!-- head的一些內(nèi)容，鏈接css鳍烁，meta中charset要選utf-8暑竟，不然會出現(xiàn)亂碼 -->
<meta charset="utf-8">
<title>不知名網(wǎng)站的注冊</title>
<link rel="stylesheet" type="text/css" href="one.css">
</head>
<body class="bodyStyle">
<div class="backDiv">
<h1 class="title">用戶注冊</h1>
<!-- form對象 -->
<form action="http://2g5059221n.wicp.vip/yyy/action.php" method="post" class="writeFormStyle" name="myform" id="myform" enctype="multipart/form-data">
<p>請輸入郵箱：
<input type="text" name="email" class="inputMessage">
</p>
<p>請輸入密碼：
<input type="password" name="password" class="inputMessage">
</p>
<p>請再次輸入密碼：
<input type="password" name="passwordAgin" class="inputMessage">
</p>
<p class="moreMessageStyle">以下是一些選項方便我們更了解你</p>
<p>1棺克、請輸入你的姓名：
<input type="text" name="yourname" class="input">
</p>
<p>2唉侄、你的性別</p>
<!-- radio記得寫value -->
<input type="radio" name="sex" value="男"> 男
<input type="radio" name="sex" value="女"> 女
<p>3咒吐、你感興趣的類別：</p>
<input type="checkbox" name="interest[]" value="comic">動漫<br>
<input type="checkbox" name="interest[]" value="tv">電視劇<br>
<input type="checkbox" name="interest[]" value="movies">電影<br>
<input type="checkbox" name="interest[]" value="word">文字<br>
<input type="checkbox" name="interest[]" value="music">音樂<br>
<p>4、想去的城市：（如果沒有就在后面補充填寫）
<select name="city">
<option value="Beijing">北京</option>
<option value="Shanghai">上海</option>
<option value="Chongqing">重慶</option>
<option value="Nanjing">南京</option>
</select>
</p>
<p>補充填寫：
<input type="text" name="othercity" class="input">
</p>
<p>5属划、請上傳你的頭像：
<input type="file" name="img">
</p>
<p>6恬叹、個性簽名：</p>
<textarea name="motto" cols="40" rows="5">
</textarea>
<br>
<!-- onclick="confirmSubmit()" -->
<button type="button" id="submitId" onclick="confirmSubmit()" class="submitStyle">提交</button>
</form>
<a href="http://www.reibang.com/u/a3547d5e7900" target="_blank" class="a">了解更多</a>
<script type="text/javascript">
function confirmSubmit(){
<!-- 通過表單獲取值 -->
var email = myform.email.value;
var password = myform.password.value;
var passwordAgin=myform.passwordAgin.value;
var name = myform.yourname.value;
var sex = myform.sex.value;
var interest = document.getElementsByName("interest[]");
var checkedInterest = new Array();
var j = 0;
var i = 0;
for( i = 0 ; i < interest.length;i++){
if(interest[i].checked){
checkedInterest[j] = interest[i].value;
j++;
}
}
//一系列的if-else晚岭，這里真的有點煩
if(!email){
alert("請輸入郵箱");
}else{
if(!password){
alert("請輸入密碼");
}else{
if(!passwordAgin){
alert("請輸入再次密碼");
}else{
if(password != passwordAgin){
alert("兩次密碼不同");
}else{
if(!name){
alert("請輸入姓名");
}else{
if(sex.length == 0){
alert("請選擇性別")
}else{
if(j==0){
alert("至少選擇一個興趣");
}else{
// js獲取按鈕
var go = document.getElementById('submitId');
// 當(dāng)點擊go時執(zhí)行事件执赡，設(shè)置點擊事件監(jiān)聽
go.addEventListener('click',function(){
// 讓form表單提交
document.getElementById('myform').submit();
})
}
}
}
}
}
}
}
}
</script>
</div>
</body>
</html>
2、css(可以采用flex盒子布局)
//一些簡單的css樣式表派草，class屬性映射
.bodyStyle{
/*text-align: center;*/
/*display: -webkit-flex;
display: flex;
align-items: center;*/
height: window.innerHeight;
width: window.outerWidth;
}
.backDiv{
background-image: url('./background.png');
padding: 10px;
margin: 10px;
display: -webkit-flex;
display: flex;
align-items: flex-center;
/*設(shè)置元素排布方向*/
flex-direction: column;
height: window.innerHeight;
width: window.innerWidth;
align-content: center;
text-align: center;
margin:0 auto;
border:1px solid #000;
}
.writeFormStyle{
text-align: left;
padding: 20px;
height: window.innerHeight;
width: window.innerWidth;
color: #FFFFFF;
}
.moreMessageStyle{
font-size: 30;
padding: 0px;
margin: 0px;
}
.title{
align-content: center;
align-items: center;
color: #FFFFFF;
}
.a{
color: #FFFFFF;
text-align: right;
font:30px;
}
.input{
height: 20px;
width: 100px;
border-radius:4px;
border:1px solid #DBDBDB;
}
.inputMessage{
height: 20px;
width: 200px;
border-radius:4px;
border:1px solid #DBDBDB;
}
.submitStyle{
text-align: center;
align-content: center;
height: 30px;
margin-top: 10px;
width: 80px;
border-radius:4px;
border:1px solid #DBDBDB;
background: #3385FF;
color: #FFFFFF;
}
3须蜗、php代碼(php語法真的有點怪)
<?php
//http://localhost/yyy/one.html?yourname=&suggestion=%09%09&submit=%E6%8F%90%E4%BA%A4
$email = $_POST["email"];
$password = $_POST["password"];
$name = $_POST["yourname"];
$sex = $_POST["sex"];
$city = $_POST["city"];
$othercity = $_POST["othercity"];
$motto = $_POST["motto"];
if($othercity){
$selectCity = $othercity;
}else{
$selectCity = $city;
}
echo "用戶注冊成功,以下是具體的信息："."<br>";
echo "電子郵件：".$email."<br>";
echo "姓名：".$name."<br>";
echo "性別：".$sex."<br>";
echo "用戶密碼：".$password."<br>";
echo "最想去的城市：".$selectCity."<br>";
echo "你的興趣有：";
//接收checkbox數(shù)組
for($i=0;$i<count($_POST["interest"]);$i++){
echo $_POST["interest"][$i]." ";
}
echo "<br>";
if($motto){
echo "個性簽名為：".$motto."<br>";
}else{
echo "這個用戶很懶還沒有簽名硅确！"."<br>";
}
echo "你的頭像："."<br>";
//上傳文件的處理
// var_dump($_FILES);
// 區(qū)別于$_POST肿孵、$_GET,打印出一些基本信息（上傳文件）
$file = $_FILES["img"];
if($file["error"] == 0){
$typeArr = explode("/", $file["type"]);
//判斷文件是否是圖片,typeArr長度為2，下標0為文件類型疏魏，下標1為后綴名
if($typeArr[0] == "image"){
//圖片的三種格式
$picType = array("0"=>"png","1"=>"jpg","3"=>"jpeg");
if(in_array($typeArr[1], $picType)){
//給上傳的文件重命名
$picName = 'file/'.time().".".$typeArr[1];
$bol = move_uploaded_file($file["tmp_name"], $picName);
if($bol){
echo '<img src="'.$picName.'"' .'alt="上海鮮花港 - 郁金香" />';
} else {
echo "上傳失敗晤愧！";
};
}else{
echo "該圖片格式不支持大莫！";
};
}else{
echo "該文件不是圖片！";
}
}else{
echo "上傳失敼俜荨只厘！";
}
?>
結(jié)果截圖
一些注意點
document.getElementById("")、document.getElementsByName(""),第一個獲取的最近的一個滿足的對象（一個）舅巷，第二個是獲取一個數(shù)組對象（多個）羔味，所以寫這兩方法的時候一定注意。
寫id和name時钠右，盡量不要和一些關(guān)鍵字沖突
