<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>賬號注冊</title>
<style>
select {
width: 100px;
padding: 5px;
font-size:16px;
}
</style>
</head>
<body>
<!--
要實現的功能: 賬號 密碼 性別 <愛好> 地址
出生年月 頭像 相冊 郵箱 電話 膚色 音量 個人簡介
-->
<form action="demo01.html"method="post">
<!--賬號開始-->
<p>
賬號:
<input type="text"name="userCode"required placeholder="請輸入賬號:">
</p>
<!--賬號結束-->
<!--密碼開始-->
<p>
密碼:
<input type="password"name="userPassword"required placeholder="請輸入密碼:">
</p>
<!--密碼結束-->
<!--性別開始--> <!--默認是男-->
<p>
性別:
<input type="radio"name="gender"checked value="1">男
<input type="radio"name="gender"value="0">女
</p>
<!--性別結束-->
<!--愛好開始-->
<p>
愛好:
<input type="checkbox"name="hobby"checked value="籃球">籃球
<input type="checkbox"name="hobby"value="乒乓球">乒乓球
<input type="checkbox"name="hobby"checked value="rap">rap
<input type="checkbox"name="hobby"value="跳舞">跳舞
</p>
<!--愛好結束-->
<!--地址開始--> <!--使用select下拉列表-->
<p><!--省份-->
地址:
<select id="prov"></select>
<select id="city"></select>
<script>
//定義省市的信息
var provList = ['江蘇','浙江','福建','湖南'];
var cityList = [];
cityList[0] = ['南京', '蘇州', '宿遷', '揚州'];
cityList[1] = ['杭州', '溫州', '寧波', '台州'];
cityList[2] = ['福州', '廈門', '泉州', '漳州'];
cityList[3] = ['長沙', '湘潭', '株洲', '湘西'];
//獲取select元素
var provSelect = document.querySelector('#prov');
var citySelect = document.querySelector('#city');
//把省的信息 添加到第一個select元素中
provList.forEach(function(val, index){
//DOM操作 了解
provSelect.add(new Option(val, index))
});
//給第一個select綁定change事件
provSelect.onchange = function(){
//獲取 當前的選項
var index = this.value;
//清空第二個select原先內容
citySelect.length = 0;
//選擇對應的城市列表，添加到第二個select
cityList[index].forEach(function(val, index){
citySelect.add(new Option(val, index));
})
}
//手工觸發一次 change事件
provSelect.onchange();
</script>
</p>
<!--地址結束-->
<!--出生年月開始-->
<p>
出生年月:
<input type="date"name="birthDay">
</p>
<!--出生年月結束-->
<!--頭像開始-->
<p>
頭像:
<input type="file"name="headphoto">
</p>
<!--頭像結束-->
<!--相冊開始-->
<p>
相冊:
<input type="file"name="photo">
</p>
<!--相冊結束-->
<!--郵箱開始-->
<p>
郵箱:
<input type="email"name="email">
</p>
<!--郵箱結束-->
<!--電話開始-->
<p>
電話:
<input type="tel"name="phone">
</p>
<!--電話結束-->
<!-- 膚色開始-->
<p>
膚色:
<input type="color"name="color">
</p>
<!-- 膚色結束-->
<!--音量開始-->
<p>
音量:
<input type="range"name="volume">
</p>
<!--音量結束-->
<!--注冊.取消,重置三個按鈕-->
<p>
<input type="submit"value="注冊:">
<input type="reset"value="重置">
<a href="../0906/demo08.html">
<input type="button"value="取消"onclick="javaScript:alert('取消成功!')">
</a>
</p>
</form>
</body>
</html>
