<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 2.3.1表单标签 -->
使用表单目的是为了收集用户信息 在HTML中，一个完整的表单通常由表单域，表单控件(也称表单元素)和提示信息3个部分组成
<!-- 2.2.2表单域 -->
在HTML标签中，
<form>标签用于定义表单域，以实现用户信息的收集和传递
<form>会把它范围内的表单元素提交给服务器
<formaction="url地址"method="提交方式"name="表单域名称">
各种表单元素控件
</form>
<!-- 2.3.4表单控件 -->
在表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或者选择的内容控件 1.input输入表单元素 2.select下拉表单元素 3.textarea文本域元素
<!-- 在input标签中，包含一个type属性，更具不同的type属性值，输入字段拥有很多种形式(可以是文本字段，复选框，掩码后的文本控件，单选按钮，按钮等) -->
<inputtype="属性值"/><br/>
<formaction="xxx.php"method="get">
<!-- text 文本框 用户可以里面输入任何文字 -->
用户名:<inputtype="text"name="username"value="请输入用户名"maxlength="6">
<br/> 密码:<inputtype="password"name="pwd">
<br/>性别:男<inputtype="radio"name="sex"value="男"checked="checked">女<inputtype="radio"name="sex"value="女">
<br/>爱好 吃饭<inputtype="checkbox"name="hobby"value="吃饭">睡觉<inputtype="checkbox"name="hobby"value="睡觉"> 打篮球<inputtype="checkbox"name="hobby"value="打篮球">
<!-- 点击了提交按钮，可以把 表单域form 里面的表单元素里面的值提交给后台服务器 -->
<br><inputtype="submit"value="免费注册">
<!-- 重置按钮可以还原表单元素初始默认状态，重置内容 -->
<inputtype="reset"value="重新设置">
<!-- 普通按钮button 后期配合js搭配使用-->
<inputtype="button"value="获取验证码">
<!-- file 文件域 使用场景 上传文件使用的 -->
上传头像<inputtype="file">
<br>
<tablealign="center">
<tr>
<th><imgsrc="typesuxing.png"></th>
</tr>
</table>
<br/>
<tablealign="center">
<tr>
<th>除type属性外，input标签还有其他很多属性，其常用属性如下</th>
</tr>
</table>
<tablealign="center"width="500"height="249"border="1"cellspancing="0"cellpadding="0">
<tr>
<th>属性</th>
<th>属性值</th>
<th>描述</th>
</tr>
<tr>
<td>name</td>
<td>由用户自定义</td>
<td>定义input元素的名称</td>
</tr>
<tr>
<td>value</td>
<td>由用户自定义</td>
<td>规定input元素的值</td>
</tr>
<tr>
<td>checked</td>
<td>checked</td>
<td>规定input元素首次加载时应当被选中</td>
</tr>
<tr>
<td>maxlength</td>
<td>正整数</td>
<td>规定输入字段中的字符的最大长度</td>
</tr>
</table>
</form>
<!-- 下拉表单 select就是为了节省空间增强用户体验 -->
信息<select>
<option>姓名</option>
<optionselected="selected">班级</option>
</select>
<br> select中至少包含一对选项 在option中定义selected时，当前即为默认选中项
<!-- textarea 表单元素 当用户需要输入内容较多的情况之下，就不能使用文本框，需要使用这个了 -->
<form>
今日反馈<textareacols="30"rows="10">这里有我想对她说的话</textarea>
</form>
<br> 1.通过textarea标签可以轻松的创建多行文本输入框
<br> 2.cols=每行中的字符数 rows=显示的行数 ，我们实际的开发中不会使用，都是使用css来改变大小
<br>
<!-- lable标签 -->
<!-- lable 标签为input元素定义标签 本身不属于表单单经常与表单搭配使用-->
<!-- lable标签用于绑定一个表单元素，当点击lable标签内的文本时，
浏览器就会自动将光标转到或者选择对应的表单元素上用来增强用户体验 -->
<labelfor="sex">男</label>
<inputtype="radio"name="sex"id="sex">
<!-- 核心:lable 标签的for属性应当与相关元素的id属性相同 -->
</body>
</html>
