<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>yucong</title>
</head>
<body>
<!-- page content -->
<hl>Information:</hl>
<form action="" method="get" class="form-example">
<div class="form-example">
<label for="name">Enter your name</label>
<input type="text" name="name" id="name" required>
</div>
<div class="form-example">
<label for="sex">Choose your sex</label>
<input type="radio" name="uSex" value="2" checked="checked">男
<input type="radio" name="uSex" value="2" >女
</div>
<div class="form-example">
<label for="birth">Enter your birth</label>
<input type="date" name="birth" id="birth" required>
</div>
<fieldset>
<legend>Contact information</legend>
<div>
<label for="tel">Enter your telephone</label>
<input type="tel" name="phone" id="tel" placeholder="123-456-7890" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"required>
</div>
<div>
<label for="email">Enter your email</label>
<input type="email" name="email" id="email" placeholder="12345@example.com" required>
</div>
</fieldset>
<fieldset>
<legend>Choose your hobby</legend>
<div>
<input type="checkbox" name="uLevel" value="2" checked="checked">羽毛球
<input type="checkbox" name="uLevel" value="2" >乒乓球
<input type="checkbox" name="uLevel" value="2" >篮球
<input type="checkbox" name="uLevel" value="2" >足球
<input type="checkbox" name="uLevel" value="2" >网球
</div>
</fieldset>
<div class="controls">
<input type="reset" value="Reset">
</div>
<input type="image" id="image" width="100" height="30" alt="Login" src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png" >
</form>
</body>
</html>