[06-01]表单
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>表单</title>
</head>
<body>
<!--1.表单元素，用来申明数据提交范围，只有在此元素内的数据可以提交给服务器-->
<form action="http://www.tmooc.cn">
<!-- <form></form> 表单意思
- action 表单提交的URL，申明数据提交的目标；
- method 指出表单数据提交的方式；
- enctype 表单数据进行编码的方式；
-->
<!--2.表单控件，用来让用户输入数据；共用12个控件，按照标签分类有2类；
2.1：input元素(9个)，之间用type属性区分
2.2：其他元素(3个)
-->
<p>账号：<input type="text" value="tarena" maxlength="12" readonly></p>
<!---readonly 只读-->
<p>密码：<input type="password"></p>
<!-- 主要属性
- value属性，由访问者自由输入的任何文本；
- maxlenght属性：限制输入的字符；
- readonly属性：设置文本控件只读；
- name 用于实现分组，一组单选框或者复选框的名称必须相同；
-->
<!--单选-->
<p> 性别：
<input type="radio" name="sex" checked/>男<!-- checked 设置默认选中-->
<input type="radio" name="sex"/>女<!-- radio 圆，radion 长方形 -->
</p>
<!--多选-->
<P>
兴趣：
<!-- checkbox ：多选
checked： 设置默认选中
-->
<input type="checkbox" checked/>看书
<input type="checkbox"/>打篮球
<input type="checkbox"/>旅游
<input type="checkbox"/>音乐
</P>
<!--文件筐-->
<p>
头像：<input type="file" /> <!-- file 定义文件选择字段和 "浏览..." 按钮，供文件上传; -->
<input type="submit" value="注册"/> <!--提交按钮 ，value 给按钮变更名称-->
<input type="reset"> <!--重置按钮，把所有表单控件设置为最初默认值-->
<input type="button"><!--定义可点击的按钮（通常与 JavaScript 一起使用来启动脚本);-->
</p>
<!--隐藏框-->
<p>
<input type="hidden" value="asd"/> <!-- hidden 定义隐藏输入字段;-->
</p>
<!--其他元素
1.label: 用来管理表单中的文本；
2.select：下来框创建；
3.textarea：定义一个多行的文本输入控件；
-->
<!--1.label: 用来管理表单中的文本,可以将文本与控件绑定在一起，增加了页面点击的受力面积; id 是元素的唯一标识；-->
<p>
<input type="checkbox" id="c1"/><!--定义复选框(多选框)-->
<label for="c1">已阅读并自愿遵循此协议！</label>
</p>
<!-- 2.select： -->
<p>
城市：
<select><!--<select> 元素用来创建下拉列表;-->
<option>请选择城市</option><!--<option> 标签定义下拉列表中的一个选项（一个条目）;-->
<option value="1">上海</option>
<option value="5">北京</option>
<option value="3">广州</option>
<option value="4" selected>深圳</option><!--selected属性规定在页面加载时预先选定该选项 -->
<option value="2">西安</option>
</select>
</p>
<!--textarea：定义一个多行的文本输入控件；
- cols: 指定文本区域的列数；
- rows: 指定文本区域的行数；
- readonly:只读；
-->
<p>
简洁：<textarea cols="30" rows="5" readonly>进房间爱房管局加工费健身房圣诞节</textarea>
</p>
</form>
</body>
</html>
