<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<Title> Account Registration </ title>
<style>
select {
width: 100px;
padding: 5px;
font-size:16px;
}
</style>
</head>
<body>
<!--
To achieve the function: Gender account password <hobbies> Address
Date of birth color picture albums mailbox phone volume biography
-->
<form action="demo01.html"method="post">
<-! Account Start ->
<p>
account number:
<input type="text"name="userCode"required placeholder="请输入账号:">
</p>
<! - end account ->
<! - Password ->
<p>
password:
<input type="password"name="userPassword"required placeholder="请输入密码:">
</p>
<! - end password ->
<-! Gender start -> <! - default is male ->
<p>
gender:
<input type="radio"name="gender"checked value="1">男
<input type="radio"name="gender"value="0">女
</p>
<! - End Sex ->
<! - Hobby Start ->
<p>
Hobbies:
<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>
<! - end hobby ->
<-! Address Start -> <! - Use the drop-down list select ->
<P> <-! Provinces ->
address:
<select id="prov"></select>
<select id="city"></select>
<script>
// definition of cities information
var provList = [ 'Jiangsu', 'Zhejiang', 'Fujian', 'Hunan' ];
was city list = [];
CityList [ 0] = [ 'Nanjing', 'Suzhou', 'suqian', 'Yangzhou' ];
CityList [ . 1] = [ 'Hangzhou', 'Wenzhou', 'Ningbo', 'Taizhou' ];
CityList [ 2] = [ 'Fuzhou', 'Xiamen', 'Quanzhou', 'Zhangzhou' ];
CityList [ . 3] = [ 'Changsha', 'Xiangtan', 'Zhuzhou', 'Western' ];
// Get select element
var provSelect = document.querySelector ( '# Prov' );
var citySelect = document.querySelector('#city');
// add the province of information to the first select element
provList.forEach (function (Val, index) {
// the DOM operation understand
provSelect.add ( new new Option-(Val, index))
});
// to first select binding change event
provSelect.onchange = function () {
// Get the current options
var index = the this .Value;
// clear the second select original content
citySelect.length = 0 ;
// Select the city list corresponding to the added to the second SELECT
CityList [index] .forEach (function (Val, index) {
citySelect.add(new Option(val, index));
})
}
// manually trigger a change event
provSelect.onchange ();
</script>
</p>
<! - end address ->
<-! Date of Birth Start ->
<p>
Date of birth:
<input type="date"name="birthDay">
</p>
<! - End date of birth ->
<! - Head Start ->
<p>
Avatar:
<input type="file"name="headphoto">
</p>
<! - End Head ->
<-! Album Start ->
<p>
Album:
<input type="file"name="photo">
</p>
<! - End Gallery ->
<! - Mailbox Start ->
<p>
mailbox:
<input type="email"name="email">
</p>
<! - End Mailbox ->
<-! Phone Start ->
<p>
phone:
<input type="tel"name="phone">
</p>
<! - end phone ->
<! - color Start ->
<p>
color:
<input type="color"name="color">
</p>
<! - end color ->
<! - Volume Start ->
<p>
volume:
<input type="range"name="volume">
</p>
<! - End Volume ->
<! - up to cancel, reset three buttons ->
<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>
