<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" href="img/mynote.ico"/>
<title>input按钮</title>
<style type="text/css">
#tuPianAnNiu {
width: 100px;
}
.yuanBian {
border-radius: 20%;
}
</style>
</head>
<body>
<div>
<!--按钮-->
<!--value:规定 input 元素的值-->
<input id="anNiu" type="button" value="按钮" />
</div>
<div>
你的性别?
<!--单选按钮-->
<!--checked:规定此 input 元素首次加载时应当被选中-->
<input id="danXuanKuang1" type="radio" name="sex" checked="checked"/><label for="danXuanKuang1">男生</label>
<input id="danXuanKuang2" type="radio" name="sex" /><label for="danXuanKuang2">女生</label>
</div>
<div>
你的爱好?
<!--复选按钮-->
<input id="fuXuanKuang1" type="checkbox" name="aiHao" /><label for="fuXuanKuang1">游泳</label>
<input id="fuXuanKuang2" type="checkbox" name="aiHao" /><label for="fuXuanKuang2">跑步</label>
<input id="fuXuanKuang3" type="checkbox" name="aiHao" /><label for="fuXuanKuang3">学习</label>
<input id="fuXuanKuang4" type="checkbox" name="aiHao" /><label for="fuXuanKuang4">读书</label>
</div>
<div>
<!--文件按钮-->
<input id="wenJanAnNiu" type="file" />
</div>
<div>
<!--隐藏按钮-->
<input id="yinCaoAnNiu" type="hidden" />
</div>
<div>
<!--图片按钮-->
<input id="tuPianAnNiu" type="image" src="img/少女.png" />
</div>
<!--form:规定输入字段所属的一个或多个表单-->
<!--novalidate:规定当提交表单时不对其进行验证-->
<form action="" method="post" novalidate="novalidate">
<div>
<!--文本框-->
<!--placeholder:设置文本框内的提示信息-->
<!--autofocus:规定输入字段在页面加载时是否获得焦点-->
<!--autocomplete:规定是否使用输入字段的自动完成功能.-->
<!--required:指示输入字段的值是必需的-->
<input id="wenBenKuang" type="text" placeholder="账号" required="required" autofocus autocomplete="off"/>
</div>
<div>
<!--密码框-->
<!--disabled:禁用此元素-->
<input id="miMaAnNiu" type="password" placeholder="密码" disabled="disabled"/>
</div>
<div>
<!--提交-->
<input class="yuanBian" type="submit" />
<!--重置-->
<input class="yuanBian" type="reset" />
</div>
</form>
<form action="" method="post">
<input type="number" name="points" step="3" />
</form>
<!--list:引用包含输入字段的预定义选项的 datalist.-->
<!--option:定义下拉列表中的一个选项（一个条目）.一般与select一起使用-->
<form action="" method="post">
网页：<input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3School" value="http://www.w3school.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
</form>
</body>
</html>