HTML表单元素
表单元素：可以让用户输入文字的一个小控件而已
示例如下：
1.1 form
- form 汉语意思 ： 表单
- <form>标签：属于容器级别标签，不是一个结构性标签（不是为了布局而存在的）它是一个功能性标签，可以将表单元素收集到的数据提交给服务器端
- 全部表单元素一般需要书写在 form 标签内部
- 主要作用：
- 可以设置表单元素收集数据提交给谁的设置
- 设置提交数据的方式
- <form> 标签有两个非常重要的属性
- method : 汉语意思：方法含义 可以设置提交数据的方式（ get 或 post 方式）
- action : 汉语意思：行动 设置搜集到的表单数据提交给谁的路径
- 注意：<form>标签是一个双闭合标签，它只是一个功能形式标签（收集表单元素，将数据提交给服务器），它不是表单元素，表单元素需要嵌套在< form > 标签内部，示例如下：
1.2 文本框
- input : 输入
- < input > 标签：< input >标签即为表单元素，非常重要
- < input >标签是一个单标签（< input / >），相当于一个特殊文字
- < input >标签有一个非常重要的属性—— type（类型）可以根据 type 属性值不同，创建不同类型的表单元素
- < input >标签还有一个常用的属性—— value（值）可以设置文本框默认数值，属性值可以是自定义内容
- 文本框 type 属性值为 text
1.3 密码框
密码框可以通过 input 标签获取到，只需将 type 属性值设置为 password （密码），示例如下：
1.4 单选按钮（单选框）
- 单选按钮也是通过 input 标签获取到的，只不过 input 标签的 type 属性值为 radio（收音机）
- 单选框一般都是成组出现的，多个选项之间是互斥的（每次只能选一个）
- 设置互斥的方法：同时给这组单选按钮添加 name 属性，且属性值必须相同
示例如下：
效果如下：
1.5 复选按钮（复选框）
- 复选按钮也是通过 input 标签获取到的，只不过 input 标签的 type 属性值为 checkbox
示例如下：
效果如下：
- checkbox ：多选，复选的含义
- 注意：
- 勾选文字不能让复选框变为选中状态
- name 属性可有可无
- 如果单选 / 复选按钮想默认为选中状态，可以给这个表单元素设置 checked 属性，属性值为 checked
示例如下：
效果如下：
1.6 按钮
我们可以通过 input 标签，还可以获取3种不同类型按钮：
- button： 按钮，表示普通按钮
- reset : 重置，单击这个按钮后，form 标签内部的全部表单元素恢复起始状态
- submit ： 提交按钮，单击这个按钮时，可以将 form 标签内部收集的表单元素数据提交给服务器，而且 form 标签内部的全部表单元素恢复起始状态
这三个按钮都可以通过 value 属性值设置他们的标题
示例如下：
效果如下：
1.7 文本域
文本域和文本框的区别：
文本框只能给用户提供一行输入文字的地方，而文本域表单元素可以让用户输入多行文字
- 文本域的标签名为：textarea
- 文本域标签属于双闭合文本级别标签，可以把它当成一个文字输入即可
- 文本域标签有两个比较常用的属性：rous 和 cols，他们的主要作用是可以修改文本域的大小
- rous ： 英文含义：多行，主要作用是可以设置文本域显示文字的行数，这个属性值用的是数字，文字超出会有滚动条出现
- cols ： 英文含义：多列， 主要作用是设置文本域宽度，这个属性值是数字，数字越大，宽度越大
- 文本域可以设置默认文字显示：在标签内部插入文字即可
- 文本域有一个样式可以让文本域不能随意拖拽、放大、缩小 —— style = "resize : none"
示例如下：
1.8 下拉菜单
在网页中制作一个下拉菜单，需要两个标签嵌套结合使用 —— select 和 option
- 两者都是双标签，属于文本级别标签
- 两者的关系是 select > option
- select ： 英文含义是选择，表示搭建下拉菜单整体结构
- option ：英文含义是选项，表示的是下拉菜单当中每一项
- 下拉菜单默认显示的是第一个选项，单击三角箭头可以显示全部选项
示例如下：
效果如下：
- 如果想让某个选项作为默认显示，需要给这个 option 标签添加一个 selected 属性，属性值为 selected
示例如下：
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
