目录
1.特点
2. 表单的语法和属性
3. input元素
4. select和下拉选择框
5. textarea多行文本域
6.label关联控件
每日一句
1.特点
提供了一些可视化的输入控件自动收集整理用户输入的内容，并提交给服务器2. 表单的语法和属性
<form></form>可以添加的属性: action="url" 向哪个地址提交数据，如果不写，会提交给当前页面本身method="get" 表单数据的提交方式enctype="" 指定表单数据的编码方式，定义表单允许传什么类型的数据给服务器 application/x-www-form-urlencoded 默认值，允许传递任意字符(不能传文件)multipart/form-data 可以传递文件和任意字符text/plain 允许传递普通字符(& = * @等符号都不是普通字符)3. input元素
公共属性: type 设置input元素的类型，默认值是textname 为控件起个名字，注意:form表单必须写name,不写提交不了此项数据value 保存用户输入的值，提交给服务器后，后期可以.value获取提交的用户输入值如果控件是按钮，value是按钮上显示的文本文本框与密码框 type="text" 普通文本输入框type="password" 密码框属性: maxlength="5" 设置输入框可输入的最大长度placeholder="" 提示文本value="" 初始值，不写标签中也会默认存在，值是空字符串<!-- 普通文本输入框 -->用户名<input type="text" value="kim" name="uname" maxlength="5" placeholder="请输入用户名"/><!-- 密码框 -->密码<input type="password" name="upwd" placeholder="请输入密码"/>
按钮 type="submit" 提交按钮 自动收集整理用户输入的数据(有name属性的控件)，提交发送请求type="reset" 重置按钮 将表单控件初始化，恢复到初始状态，注意！不是清空type="button" 普通按钮 需要后期绑定事件，执行对应的JS脚本注意：按钮上的value代表的是按钮上显示的文字
<!-- 按钮 --><input type="submit" value="我想提交"><input type="reset" value="我想重置"><input type="button" value="普通按钮">
单选框与多选框 type="radio" 单选type="checkbox" 多选属性：
name(必须加)，为控件起名并用于分组一组单选框/多选框的名称必须相同，才能实现单选/多选效果value必须写，不然提交的就是onchecked表示当前项被默认选中，是一个单值属性
<!-- 单选框 -->性别<input type="radio" value="1" name="gender">男<input type="radio" value="0" name="gender" checked>女<br><!-- 多选框 -->爱好<input type="checkbox" name="like" value="1" checked>音乐<input type="checkbox" name="like" value="2">动漫<input type="checkbox" name="like" value="3">蹦迪<input type="checkbox" name="like" value="4">电竞<br>喜欢的小说<input type="checkbox" name="xs" value="1">斗罗大陆<input type="checkbox" name="xs" value="2">雪中悍刀行<input type="checkbox" name="xs" value="3">吞噬星空<input type="checkbox" name="xs" value="4">重生之霸道总裁爱上我
文件上传 请选择您要上传的文件<input type="file" name="ufile"/>使用的前提:method="post" enctype="multipart/form-data"multiple 可以提交多个文件，也是一个单值属性
<!-- 文件上传 -->请选择您要上传的文件<input type="file" name="ufile" multiple/>
4. select和下拉选择框
<select><option></option></select>
selected 表示该选项默认被选中multiple 表示下拉选框可以多选，按住Ctrl就可以选择多个选项提交的时候，如果没有给option设置value属性，提交的就是option标签之间的文本，但如果设置了option的value属性，提交的就是value的值
最喜欢的运动<!-- 多选的时候按住Ctrl才能选多个 --><select name="sports" multiple><option value="0">游泳</option><option value="1" selected>乒乓球</option><option value="2">跑步</option><option value="3">刘畊宏</option></select><br>
<!-- 下拉选择框 -->爱吃的菜<select name="food"><option value="0">南京盐水鸭</option><option value="1">重庆火锅</option><option value="2">潮汕砂锅粥</option><option value="3">东北大乱炖</option><option value="4">南昌拌粉</option></select>
5. textarea多行文本域
<textarea name="content"></textarea>属性： cols="30" 文本域的列数，改变的是宽度rows="10" 文本域的行数，改变的是高度注意：默认的文本域大小是可以被用户随意拖拽改变的，想要禁用拖拽:style="resize: none;"<!-- 多行文本域 -->请在此处留下您宝贵的建议:<textarea name="content" cols="30" rows="10" style="resize: none;"></textarea>
6.label关联控件
用于进行form表单中文本和控件的关联，单击文本，效果如同单击控件<label for="要关联的控件的id值"></label><!-- label关联控件 --><hr><input type="checkbox" name="yes" value="1" id="y"><label for="y">请同意此协议</label>
每日一句
书山有路勤为径，学海无涯苦作舟。
"勤奋是登上知识高峰的一条捷径，不怕吃苦才能在知识的海洋里自由遨游。"
