<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<h1>注册表单</h1>
<br />
<br />
<form action="" >
<div>
<label for="username">用户名:</label>
<!--
在label属性中,for对应的是input中的id.
表明,此标签与输入栏相关联,点击标签自动关联输入栏.
这在表单输入,尤其是选择中,尤为重要.
不然选框太小很难点中,会降低用户体验.
-->
<input type="text" name="username" id="username">
<!-- id属性是用来对应别的语句.
type是决定输入的内容类别
name是决定显示input的显示选项类别,通常决定单选双选或者是枚举,列表等等.
-->
</div>
<br />
<div>
<label for="password">密 码:</label>
<input type="password" name="password" id="password">
</div>
<br />
<div>
<label>性 别:</label>
<input type="radio" name="gender" value="0" id="man"><label for="man">男</label>
<input type="radio" name="gender" value="1" id="woman"><label for="woman">女</label>
<input type="radio" name="gender" value="2" id="secret"><label for="secret">秘密</label>
</div>
<br />
<div>
<label>爱 好:</label>
<input type="checkbox" name="like" id=like_0 value="study"><label for="like_0">学习</label>
<input type="checkbox" name="like" id=like_1 value="play_game"><label for="like_1">游戏</label>
<input type="checkbox" name="like" id=like_2 value="Sport"><label for="like_2">运动</label>
<input type="checkbox" name="like" id=like_3 value="Music"><label for="like_3">音乐</label>
</div>
<br />
<div>
<label>照 片:</label>
<input type="file" name="photo">
<!-- file,上传文件 -->
</div>
<br />
<div>
<label>自我介绍</label>
<textarea name="introduce"></textarea>
</div>
<br />
<div>
<label>籍 贯:</label>
<select name="city" id="">
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2">广州</option>
<option value="3">深圳</option>
</select>
</div>
<br />
<div>
<input type="hidden" name="hid01" value="隐藏项">
<!-- 关于隐藏属性, 不用的时候,几乎没用. 需要的时候非常有用, 能够用来创建一些步进式页面, 避免繁琐选项让人不耐 -->
</div>
<br />
<div>
<!-- <input type="submit" value="提交"> -->
<input type="image" src="../FontEnd_Web/One/images/11.png" value="提交">
<!-- 图片提交,有时候可能会产生提交两次的bug,所以,一般情况下不经常使用 -->
<input type="reset" name="" value="重置">
</div>
</form>
</body>
</html>
浙公网安备 33010602011771号