HTML第三章 form表单(详解，内含详细代码示例)

目录

1.特点

2. 表单的语法和属性

3. input元素

4. select和下拉选择框

5. textarea多行文本域

6.label关联控件

每日一句 

---

1.特点

1. 提供了一些可视化的输入控件
2. 自动收集整理用户输入的内容，并提交给服务器

2. 表单的语法和属性

1. <form></form>
2. 可以添加的属性:
   1. action="url" 向哪个地址提交数据，如果不写，会提交给当前页面本身
   2. method="get" 表单数据的提交方式
   3. enctype="" 指定表单数据的编码方式，定义表单允许传什么类型的数据给服务器
      1. application/x-www-form-urlencoded 默认值，允许传递任意字符(不能传文件)
      2. multipart/form-data 可以传递文件和任意字符
      3. text/plain 允许传递普通字符(& = * @等符号都不是普通字符)

3. input元素

1. 公共属性:
   1. type 设置input元素的类型，默认值是text
   2. name 为控件起个名字，注意:form表单必须写name,不写提交不了此项数据
   3. value 保存用户输入的值，提交给服务器后，后期可以.value获取提交的用户输入值
   4. 如果控件是按钮，value是按钮上显示的文本
2. 文本框与密码框
   1. type="text" 普通文本输入框
   2. type="password" 密码框
   3. 属性: maxlength="5" 设置输入框可输入的最大长度
   4. placeholder="" 提示文本
   5.  value="" 初始值，不写标签中也会默认存在，值是空字符串

   6. <!-- 普通文本输入框 -->
      			用户名<input type="text" value="kim" name="uname" maxlength="5" placeholder="请输入用户名"/>
      
      <!-- 密码框 -->
      			密码<input type="password" name="upwd" placeholder="请输入密码"/>

3. 按钮
   1. type="submit" 提交按钮
      1. 自动收集整理用户输入的数据(有name属性的控件)，提交发送请求
   2. type="reset" 重置按钮
      1. 将表单控件初始化，恢复到初始状态，注意！不是清空
   3. type="button" 普通按钮
      1. 需要后期绑定事件，执行对应的JS脚本
   4. 注意：按钮上的value代表的是按钮上显示的文字    

   5. <!-- 按钮 -->
      			<input type="submit" value="我想提交">
      			<input type="reset" value="我想重置">
      			<input type="button" value="普通按钮">

4. 单选框与多选框
   1. type="radio" 单选
   2. type="checkbox" 多选
   3. 属性：
        
      1. name(必须加)，为控件起名并用于分组
      2. 一组单选框/多选框的名称必须相同，才能实现单选/多选效果
      3. value必须写，不然提交的就是on
      4. checked表示当前项被默认选中，是一个单值属性

   4.             <!-- 单选框 -->
      			性别
      			<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">重生之霸道总裁爱上我

5. 文件上传
   1. 请选择您要上传的文件<input type="file" name="ufile"/>
   2. 使用的前提:method="post"        enctype="multipart/form-data"
   3. multiple 可以提交多个文件，也是一个单值属性

   4. <!-- 文件上传 -->
      			请选择您要上传的文件<input type="file" name="ufile" multiple/>

4. select和下拉选择框

1. <select>
              <option></option>
   </select> 

2. selected 表示该选项默认被选中
3. multiple 表示下拉选框可以多选，按住Ctrl就可以选择多个选项
4. 提交的时候，如果没有给option设置value属性，提交的就是option标签之间的文本，但如果设置了option的value属性，提交的就是value的值

5. 最喜欢的运动
   			<!-- 多选的时候按住Ctrl才能选多个 -->
   			<select name="sports" multiple>
   				<option value="0">游泳</option>
   				<option value="1" selected>乒乓球</option>
   				<option value="2">跑步</option>
   				<option value="3">刘畊宏</option>
   			</select>
   			<br>

6. <!-- 下拉选择框 -->
   			爱吃的菜
   			<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多行文本域

1. <textarea name="content"></textarea>
2. 属性：
   1. cols="30" 文本域的列数，改变的是宽度
   2. rows="10" 文本域的行数，改变的是高度
   3. 注意：默认的文本域大小是可以被用户随意拖拽改变的，想要禁用拖拽:
   4. style="resize: none;"

3. <!-- 多行文本域 -->
   			请在此处留下您宝贵的建议:
   			<textarea name="content" cols="30" rows="10" style="resize: none;"></textarea>

6.label关联控件

1. 用于进行form表单中文本和控件的关联，单击文本，效果如同单击控件
2. <label for="要关联的控件的id值"></label>

3. <!-- label关联控件 -->
   			<hr>
   			<input type="checkbox" name="yes" value="1" id="y">
   			<label for="y">请同意此协议</label>

每日一句 

书山有路勤为径，学海无涯苦作舟。

        "勤奋是登上知识高峰的一条捷径，不怕吃苦才能在知识的海洋里自由遨游。"