![[HTML]9步玩转表单创建（基础完整篇）](/0.jpg)
表单创建目录
前言【1】创建文本输入框【2】将占位文本添加到文本框【3】创建一个表单元素【4】将提交按钮添加到表单【5】设置必填输入框【6】创建一组单选按钮【7】创建一组复选框【8】单（复）选框中value的使用【9】默认选中一个单（复）选框
前言
何为表单? 表单在网页中主要负责数据采集功能。 一个表单有三个基本组成部分： 表单标签，表单域和 表单按钮。
举个简单的例子：填写每日一报等收集信息的表单，处理表单数据会用到CGI程序的URL以及数据提交到服务器的方法 ；当我们选择选项时可能会触及文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和必填文本框等；而当我们提交时会有提交按钮。
【1】创建文本输入框
需求：输入文字实现：使用input标签创建文本输入框
input 解析： input是自结束标签，它的工作方式相当程度上取决于type属性的值。如果未指定此属性，则采用的默认类型为 text，即文字输入形式。其他类型在接下来的步骤讲解。
代码：
你今天测量的体温是多少?（必填）
效果：
【2】将占位文本添加到文本框
需求：在输入框中显示文字实现：placeholder类型
placeholder 解析 placeholder可以选择一个表单元素的占位文本，它允许开发者和设计师自定义占位文本的样式。可以在用户输入前显示，起提示作用。
代码：
你今天测量的体温是多少?（必填）
效果:
【3】创建一个表单元素
需求: 构建只使用纯HTML将数据提交到服务器的Web表单实现：用action 来指定表单处理程序的位置（url）
action 解析 action 属性规定当提交表单时，向何处发送表单数据。 简单地理解：相当于将创建的表单交到action指定的地址。 不填时默认为当前地址，本文为不填
代码：
效果：
【5】设置必填输入框
需求：用户必须填写必填输入框，否则无法提交实现：只需要向input中添加required属性即可
required 解析 用于高亮显示在提交表单之前必须具有有效数据的字段 若未填写而点击了submit，便会弹出提示
代码： 效果：
【6】创建一组单选按钮
需求：通过创建单选按钮组，选择任何一个单选按钮将自动取消选择同一组中的其他按钮，从而确保用户仅提供一个答案。实现：在表单中添加一对单选按钮，每个单选按钮嵌套在自己的label元素中。一个应该具有的选项，indoor另一个应该具有的选项outdoor即两个不同的选项。两者都应该共享创建无线电组的name属性indoor-outdoor。
label 标签解析 将一个 和一个 元素匹配在一起，你需要给 一个 id 属性。而 需要一个 for 属性，其值和 的 id 一样。 另外，你也可以将 直接放在 里，此时则不需要 for 和 id 属性，因为关联已隐含存在
代码 ：
你今天是否在校?（必填）
是
否
效果：
【7】创建一组复选框
需求：回答可能有多个答案的问题，多项选择题实现：使用input 里的checkbox类型
checkbox解析：checkbox是input元素的其中一种类型。点击label中的任何文字都可以选中这个选项。与单选的原理相同：最佳实践是在label元素上设置一个for属性，其值与输入元素的id属性值相匹配。这允许辅助技术在标签和子input元素之间创建链接关系。注意：所有复选框都需要添加在form元素之中。
代码：
请选择今日元素：
效果：
【8】单（复）选框中value的使用
需求：获得用户提交的值实现：通过使用value实现表单控件的值以名值对的形式随表单一起提交
value解析 指定input的值。如果省略，获取该元素的值的结果为字符串"on"。value属性的值即为提交到后端接收到的值。 ！请注意，如果value值发生改变后页面重新加载，Gecko和IE会忽略HTML源代码中设置的value值。
代码：
你今天是否在校?（必填）
是
否
【9】默认选中一个单（复）选框
需求：在选项中设置一个默认选项实现：在radio或者checkbox的input元素中添加checked属性
checked 解析 表示任何处于选中状态的radio 给radio单选项或者checkbox复选项添加默认选中属性checked即可
代码：
你今天是否在校?（必填）
是
否
效果：